Issue 846: Remove Role display from user profile pages

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.17.0",
+  "version": "7.17.1-noUserRoleDisplay.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version TBD
+*Released*: TBD
+- GitHub Issue 846: Remove display of user role in profile and settings pages
+
 ### version 7.17.0
 *Released*: 16 February 2026
 - Remove GridAliquotViewSelector

packages/components/src/index.ts

@@ -76,7 +76,6 @@ import {
 } from './internal/util/utils';
 import { AutoForm } from './internal/components/AutoForm';
 import { HelpIcon } from './internal/components/HelpIcon';
-import { getUserRoleDisplay } from './internal/components/user/actions';
 import { BeforeUnload } from './internal/util/BeforeUnload';
 import {
     deleteErrorMessage,
@@ -1415,7 +1414,6 @@ export {
     getTestAPIWrapper,
     getTimelineEntityUrl,
     getUniqueIdColumnMetadata,
-    getUserRoleDisplay,
     getUsersWithPermissions,
     getValueFromRow,
     getValuesSummary,

packages/components/src/internal/components/user/UserDetailHeader.test.tsx

@@ -5,7 +5,7 @@ import { TEST_USER_ASSAY_DESIGNER, TEST_USER_READER } from '../../userFixtures';
 
 import { UserDetailHeader } from './UserDetailHeader';
 
-describe('<UserDetailHeader/>', () => {
+describe('UserDetailHeader', () => {
     test('default properties', () => {
         const component = <UserDetailHeader title="Title" user={TEST_USER_READER} />;
         const { container } = render(component);
@@ -17,7 +17,6 @@ describe('<UserDetailHeader/>', () => {
             <UserDetailHeader
                 container={{ title: 'Container Title' }}
                 dateFormat="YYYY-MM-DD"
-                description="My custom description"
                 renderButtons={
                     <button className="btn btn-default" type="button">
                         Test

packages/components/src/internal/components/user/UserDetailHeader.tsx

@@ -4,12 +4,11 @@ import { Container } from '../base/models/Container';
 import { User } from '../base/models/User';
 import { PageDetailHeader } from '../forms/PageDetailHeader';
 
-import { getUserLastLogin, getUserPermissionsDisplay } from './actions';
+import { getUserLastLogin } from './actions';
 
 interface Props {
     container?: Partial<Container>;
     dateFormat?: string;
-    description?: string;
     renderButtons?: ReactNode;
     showFolderTitle?: boolean;
     title: string;
@@ -18,23 +17,11 @@ interface Props {
 }
 
 export const UserDetailHeader: FC<Props> = props => {
-    const {
-        container,
-        dateFormat,
-        description,
-        renderButtons,
-        showFolderTitle = true,
-        title,
-        user,
-        userProperties,
-    } = props;
+    const { container, dateFormat, renderButtons, showFolderTitle = true, title, user, userProperties } = props;
     const lastLogin = useMemo(() => getUserLastLogin(userProperties, dateFormat), [dateFormat, userProperties]);
-    const userDescription = useMemo(() => {
-        return description || getUserPermissionsDisplay(user).join(', ');
-    }, [description, user]);
 
     return (
-        <PageDetailHeader iconUrl={user.avatar} title={title} description={userDescription} leftColumns={9}>
+        <PageDetailHeader iconUrl={user.avatar} leftColumns={9} title={title}>
             {showFolderTitle && !!container?.title && (
                 <div className="detail__header--desc">
                     <i className="fa fa-folder-open" />

packages/components/src/internal/components/user/__snapshots__/UserDetailHeader.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`<UserDetailHeader/> default properties 1`] = `
+exports[`UserDetailHeader default properties 1`] = `
 <div>
   <div
     class="page-header"
@@ -24,11 +24,6 @@ exports[`<UserDetailHeader/> default properties 1`] = `
         >
           Title
         </h2>
-        <span
-          class="detail__header--desc"
-        >
-          Reader
-        </span>
       </div>
     </div>
     <div
@@ -41,7 +36,7 @@ exports[`<UserDetailHeader/> default properties 1`] = `
 </div>
 `;
 
-exports[`<UserDetailHeader/> optional properties 1`] = `
+exports[`UserDetailHeader optional properties 1`] = `
 <div>
   <div
     class="page-header"
@@ -65,11 +60,6 @@ exports[`<UserDetailHeader/> optional properties 1`] = `
         >
           Title (Custom)
         </h2>
-        <span
-          class="detail__header--desc"
-        >
-          My custom description
-        </span>
       </div>
     </div>
     <div

packages/components/src/internal/components/user/actions.test.ts

@@ -2,80 +2,14 @@
  * Copyright (c) 2019 LabKey Corporation. All rights reserved. No portion of this work may be reproduced in
  * any form or by any electronic or mechanical means without written permission from LabKey Corporation.
  */
-import {
-    TEST_USER_APP_ADMIN,
-    TEST_USER_ASSAY_DESIGNER,
-    TEST_USER_AUTHOR,
-    TEST_USER_EDITOR,
-    TEST_USER_FOLDER_ADMIN,
-    TEST_USER_PROJECT_ADMIN,
-    TEST_USER_GUEST,
-    TEST_USER_READER,
-    TEST_USER_SOURCE_TYPE_DESIGNER,
-    TEST_USER_SAMPLE_TYPE_DESIGNER,
-} from '../../userFixtures';
-
-import { getUserLastLogin, getUserPermissionsDisplay, getUserRoleDisplay } from './actions';
+import { getUserLastLogin } from './actions';
 
 describe('User actions', () => {
-    test('getUserPermissionsDisplay guest', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_GUEST);
-        expect(displayStrs.join(', ')).toBe('Reader');
-    });
-
-    test('getUserPermissionsDisplay reader', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_READER);
-        expect(displayStrs.join(', ')).toBe('Reader');
-    });
-
-    test('getUserPermissionsDisplay author', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_AUTHOR);
-        expect(displayStrs.join(', ')).toBe('Author');
-    });
-
-    test('getUserPermissionsDisplay editor', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_EDITOR);
-        expect(displayStrs.join(', ')).toBe('Editor');
-    });
-
-    test('getUserPermissionsDisplay assaydesigner', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_ASSAY_DESIGNER);
-        expect(displayStrs.join(', ')).toBe('Assay Designer, Reader');
-    });
-
-    test('getUserPermissionsDisplay folder admin', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_FOLDER_ADMIN);
-        expect(displayStrs.join(', ')).toBe('Administrator');
-    });
-
-    test('getUserPermissionsDisplay project admin', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_PROJECT_ADMIN);
-        expect(displayStrs.join(', ')).toBe('Administrator');
-    });
-
-    test('getUserPermissionsDisplay app admin', () => {
-        const displayStrs = getUserPermissionsDisplay(TEST_USER_APP_ADMIN);
-        expect(displayStrs.join(', ')).toBe('Administrator');
-    });
-
     test('getUserLastLogin', () => {
         const lastLogin = '2019-11-15 13:50:17.987';
         expect(getUserLastLogin({ lastlogin: lastLogin })).toBe('2019-11-15');
         expect(getUserLastLogin({ lastlogin: lastLogin }, 'YYYY-MM-DD')).toBe('2019-11-15');
         expect(getUserLastLogin({ lastLogin }, 'YYYY-MM-DD')).toBe('2019-11-15');
         expect(getUserLastLogin({ LastLogin: lastLogin }, 'DD-MM-YYYY')).toBe('15-11-2019');
     });
-
-    test('getUserRoleDisplay', () => {
-        expect(getUserRoleDisplay(TEST_USER_GUEST)).toBe('Reader');
-        expect(getUserRoleDisplay(TEST_USER_READER)).toBe('Reader');
-        expect(getUserRoleDisplay(TEST_USER_AUTHOR)).toBe('Reader');
-        expect(getUserRoleDisplay(TEST_USER_EDITOR)).toBe('Editor');
-        expect(getUserRoleDisplay(TEST_USER_ASSAY_DESIGNER)).toBe('Data Type Designer');
-        expect(getUserRoleDisplay(TEST_USER_SOURCE_TYPE_DESIGNER)).toBe('Data Type Designer');
-        expect(getUserRoleDisplay(TEST_USER_SAMPLE_TYPE_DESIGNER)).toBe('Data Type Designer');
-        expect(getUserRoleDisplay(TEST_USER_FOLDER_ADMIN)).toBe('Administrator');
-        expect(getUserRoleDisplay(TEST_USER_PROJECT_ADMIN)).toBe('Administrator');
-        expect(getUserRoleDisplay(TEST_USER_APP_ADMIN)).toBe('Application Administrator');
-    });
 });

packages/components/src/internal/components/user/actions.ts

@@ -32,64 +32,6 @@ export function getUserProperties(userId: number): Promise<any> {
     });
 }
 
-export function getUserPermissionsDisplay(user: User): string[] {
-    const permissions = [];
-
-    if (user.isAdmin) {
-        permissions.push('Administrator');
-    } else {
-        if (hasAllPermissions(user, [PermissionTypes.DesignDataClass])) {
-            permissions.push('Data Class Designer');
-        }
-        if (hasAllPermissions(user, [PermissionTypes.DesignSampleSet])) {
-            permissions.push('Sample Set Designer');
-        }
-        if (hasAllPermissions(user, [PermissionTypes.DesignAssay])) {
-            permissions.push('Assay Designer');
-        }
-        permissions.push(user.canUpdate ? 'Editor' : user.canInsert ? 'Author' : 'Reader');
-    }
-
-    return permissions;
-}
-
-export function getUserRoleDisplay(user: User): string {
-    if (user.isAppAdmin()) {
-        return SITE_SECURITY_ROLES.get(PermissionRoles.ApplicationAdmin);
-    }
-
-    if (hasAllPermissions(user, [PermissionTypes.Admin])) {
-        return 'Administrator';
-    }
-
-    if (user.hasUpdatePermission()) {
-        return APPLICATION_SECURITY_ROLES.get(PermissionRoles.Editor);
-    }
-
-    if (hasAllPermissions(user, [PermissionTypes.EditStorageData])) {
-        return 'Storage Editor';
-    }
-
-    if (hasAllPermissions(user, [PermissionTypes.DesignStorage])) {
-        return 'Storage Designer';
-    }
-
-    if (hasAllPermissions(user, [PermissionTypes.Read])) {
-        if (
-            hasAnyPermissions(user, [
-                PermissionTypes.DesignAssay,
-                PermissionTypes.DesignDataClass,
-                PermissionTypes.DesignSampleSet,
-            ])
-        )
-            return 'Data Type Designer';
-
-        return APPLICATION_SECURITY_ROLES.get(PermissionRoles.Reader);
-    }
-
-    return 'Unknown Role';
-}
-
 export function getUserLastLogin(userProperties: Record<string, any>, dateFormat?: string): string {
     const lastLogin = caseInsensitive(userProperties, 'lastlogin');
     if (!lastLogin) return undefined;