Workflow UI updates for job overview details panel and tasks page

packages/components/package.json

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

packages/components/releaseNotes/components.md

@@ -1,6 +1,13 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.33.0
+*Released*: 24 April 2026
+- Workflow UI updates
+  - Add css for .lk-popover-behind-modal to adjust z-index
+  - EditInlineField prop for pullRight for pencil icon
+  - UserDetailsPanel support for userId that is a group id
+
 ### version 7.32.0
 *Released*: 23 April 2026
 - Add EMPTY_COMPOUND_WARNING

packages/components/src/internal/components/EditInlineField.test.tsx

@@ -34,7 +34,7 @@ describe('EditInlineField', () => {
         },
     };
 
-    function validate(editing = false, allowEdit = true, type?: Record<string, number>): void {
+    function validate(editing = false, allowEdit = true, type?: Record<string, number>, pullRight?: boolean): void {
         expect(document.querySelectorAll('.edit-inline-field__label')).toHaveLength(!editing ? 1 : 0);
         expect(document.querySelectorAll('.edit-inline-field__toggle')).toHaveLength(!editing && allowEdit ? 1 : 0);
         expect(document.querySelectorAll('.fa-pencil')).toHaveLength(!editing && allowEdit ? 1 : 0);
@@ -47,6 +47,8 @@ describe('EditInlineField', () => {
         expect(document.querySelectorAll('input')).toHaveLength(type?.text ?? type?.date ?? 0);
 
         expect(document.querySelectorAll('.user-link')).toHaveLength(type?.user ?? 0);
+
+        expect(document.querySelectorAll('.pull-right')).toHaveLength(pullRight ? 1 : 0);
     }
 
     test('default props', async () => {
@@ -163,15 +165,15 @@ describe('EditInlineField', () => {
         renderWithAppContext(
             <EditInlineField
                 {...DEFAULT_PROPS}
-                type="date"
-                value="2022-08-11 18:00:00"
                 column={
                     new QueryColumn({
                         format: 'MM/dd/YYYY HH:mm:ss',
                         caption: 'DateField',
                         rangeURI: DATETIME_RANGE_URI,
                     })
                 }
+                type="date"
+                value="2022-08-11 18:00:00"
             />,
             { serverContext: SERVER_CONTEXT, appContext: APP_CONTEXT }
         );
@@ -186,15 +188,15 @@ describe('EditInlineField', () => {
         renderWithAppContext(
             <EditInlineField
                 {...DEFAULT_PROPS}
-                type="date"
-                value="2022-08-11 18:00:00.123"
                 column={
                     new QueryColumn({
                         format: 'MM/dd/YYYY HH:mm:ss',
                         caption: 'DateField',
                         rangeURI: DATETIME_RANGE_URI,
                     })
                 }
+                type="date"
+                value="2022-08-11 18:00:00.123"
             />,
             { serverContext: SERVER_CONTEXT, appContext: APP_CONTEXT }
         );
@@ -211,7 +213,6 @@ describe('EditInlineField', () => {
         renderWithAppContext(
             <EditInlineField
                 {...DEFAULT_PROPS}
-                value="18:00:00.1234"
                 column={
                     new QueryColumn({
                         format: 'hh:mm a',
@@ -220,6 +221,7 @@ describe('EditInlineField', () => {
                         rangeURI: TIME_RANGE_URI,
                     })
                 }
+                value="18:00:00.1234"
             />,
             { serverContext: SERVER_CONTEXT, appContext: APP_CONTEXT }
         );
@@ -280,4 +282,16 @@ describe('EditInlineField', () => {
         expect(document.querySelectorAll('input[name="t$De$Sst"]')).toHaveLength(1);
         expect(document.querySelectorAll('input[name="t.e/st"]')).toHaveLength(0);
     });
+
+    test('pullRight', async () => {
+        renderWithAppContext(<EditInlineField {...DEFAULT_PROPS} pullRight />, {
+            serverContext: SERVER_CONTEXT,
+            appContext: APP_CONTEXT,
+        });
+        validate(false, true, undefined, true);
+        expect(document.querySelector('.edit-inline-field__placeholder')).toHaveTextContent('');
+        expect(document.querySelectorAll('.fa-pencil')).toHaveLength(1);
+        await userEvent.click(document.querySelector('.edit-inline-field__toggle'));
+        validate(true, true, { text: 1 }, false);
+    });
 });

packages/components/src/internal/components/EditInlineField.tsx

@@ -33,6 +33,7 @@ interface Props {
     name: string;
     onChange?: (name: string, newValue: any) => void;
     placeholder?: string;
+    pullRight?: boolean;
     startDate?: Date;
     tooltip?: string; // only shown when component has a label and is allowEdit
     type: string;
@@ -52,6 +53,7 @@ export const EditInlineField: FC<Props> = memo(props => {
         name,
         onChange,
         placeholder,
+        pullRight,
         startDate,
         tooltip,
         type,
@@ -313,8 +315,9 @@ export const EditInlineField: FC<Props> = memo(props => {
                         onKeyDown={toggleKeyDown}
                         tabIndex={1}
                     >
+                        {allowEdit && pullRight && <i className="fa fa-pencil pull-right" />}
                         {!isUser && displayValue}
-                        {allowEdit && <i className="fa fa-pencil" />}
+                        {allowEdit && !pullRight && <i className="fa fa-pencil" />}
                     </span>
                 </>
             )}

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

@@ -15,6 +15,8 @@ import { APPLICATION_ROLES_DESCRIPTIONS, APPLICATION_ROLES_LABELS } from '../adm
 
 import { Principal, SecurityPolicy, SecurityRole } from './models';
 import { executeSql } from '../../query/executeSql';
+import { selectRows } from '../../query/selectRows';
+import { SCHEMAS } from '../../schemas';
 
 export function processGetRolesResponse(rawRoles: any): List<SecurityRole> {
     let roles = List<SecurityRole>();
@@ -47,6 +49,20 @@ export async function getPrincipals(): Promise<List<Principal>> {
     return result.rows.reduce<List<Principal>>((p, row) => p.push(Principal.createFromSelectRow(fromJS(row))), List());
 }
 
+export async function getPrincipalById(principalId: number): Promise<Principal | undefined> {
+    const results = await selectRows({
+        columns: ['UserId', 'Name', 'Type'],
+        schemaQuery: SCHEMAS.CORE_TABLES.PRINCIPALS,
+        filterArray: [Filter.create('UserId', principalId)],
+    });
+
+    if (results.rows.length === 1) {
+        const row = results.rows[0];
+        return Principal.createFromSelectRow(fromJS(row));
+    }
+    return undefined;
+}
+
 export function getInactiveUsers(): Promise<List<Principal>> {
     return new Promise((resolve, reject) => {
         selectRowsDeprecated({

packages/components/src/internal/components/permissions/models.test.ts

@@ -103,6 +103,18 @@ describe('Principal model', () => {
         expect(sortedPrincipals.get(1)).toBe(USER1);
         expect(sortedPrincipals.get(2)).toBe(GROUP);
     });
+
+    test('isGroup', () => {
+        expect(GROUP.isGroup()).toBeTruthy();
+        expect(USER1.isGroup()).toBeFalsy();
+        expect(USER2.isGroup()).toBeFalsy();
+    });
+
+    test('isUser', () => {
+        expect(GROUP.isUser()).toBeFalsy();
+        expect(USER1.isUser()).toBeTruthy();
+        expect(USER2.isUser()).toBeTruthy();
+    });
 });
 
 describe('SecurityRole model', () => {

packages/components/src/internal/components/permissions/models.tsx

@@ -64,6 +64,14 @@ export class Principal extends Record({
                 .toList()
         );
     }
+
+    isGroup(): boolean {
+        return this.type === 'g';
+    }
+
+    isUser(): boolean {
+        return this.type === 'u';
+    }
 }
 
 export class SecurityRole extends Record({

packages/components/src/internal/components/security/APIWrapper.ts

@@ -5,6 +5,7 @@ import { Container } from '../base/models/Container';
 import {
     fetchContainers,
     fetchContainerSecurityPolicy,
+    getPrincipalById,
     getUserLimitSettings,
     processGetRolesResponse,
     UserLimitSettings,
@@ -76,6 +77,7 @@ export interface SecurityAPIWrapper {
     getDeletionSummaries: (containerPath?: string) => Promise<Summary[]>;
     getGroupMemberships: () => Promise<GroupMembership[]>;
     getInheritedContainers: (container: Container) => Promise<string[]>;
+    getPrincipalById: (principalId: number) => Promise<Principal | undefined>;
     getUserLimitSettings: (containerPath?: string) => Promise<UserLimitSettings>;
     getUserPermissions: (options: GetUserPermissionsOptions) => Promise<string[]>;
     getUserProperties: (userId: number) => Promise<any>;
@@ -284,6 +286,8 @@ export class ServerSecurityAPIWrapper implements SecurityAPIWrapper {
         }, []);
     };
 
+    getPrincipalById = getPrincipalById;
+
     getUserLimitSettings = getUserLimitSettings;
 
     getUserPermissions = (options: GetUserPermissionsOptions): Promise<string[]> => {
@@ -437,6 +441,7 @@ export function getSecurityTestAPIWrapper(
         getAuditLogDate: mockFn(),
         getDeletionSummaries: mockFn(),
         getGroupMemberships: mockFn(),
+        getPrincipalById: mockFn(),
         getUserLimitSettings: mockFn(),
         getUserPermissions: mockFn(),
         getUserProperties: mockFn(),