Improve-cross project actions - Edit in Bulk

packages/components/package.json

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

packages/components/releaseNotes/components.md

@@ -1,6 +1,17 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages.
 
+### version 3.40.0
+*Released*: 29 April 2024
+- Support cross-folder "Edit in Bulk"
+  - Update getOperationNotPermittedMessage to work for both Edit in Grid and Edit in Bulk scenarios
+  - BulkUpdateForm getUpdatedData() to include Folder in updated rows, if it exists in originalData
+  - Add getSelectedIds(filterIds) to QueryModel
+  - saveRowsByContainer prop for containerField to be optional since it has a default
+  - AppendUnitsInput fixes for grid cell rendering and enable/disable in bulk form
+  - Edit in Grid and Bulk lookup fields to use containerPath based on selected row(s) (for BulkUpdateForm, disable lookup fields and file files toggle when more than one containerPath in selection)
+  - Add getOperationConfirmationData and getParentTypeDataForLineage to ApiWrapper
+
 ### version 3.39.6
 *Released*: 25 April 2024
 - Add support for exporting a storage map from terminal storage grids

packages/components/src/index.ts

@@ -76,6 +76,7 @@ import {
     uncapitalizeFirstChar,
     valueIsEmpty,
     withTransformedKeys,
+    getValueFromRow,
 } from './internal/util/utils';
 import { AutoForm } from './internal/components/AutoForm';
 import { HelpIcon } from './internal/components/HelpIcon';
@@ -1577,6 +1578,7 @@ export {
     generateId,
     debounce,
     valueIsEmpty,
+    getValueFromRow,
     getActionErrorMessage,
     getConfirmDeleteMessage,
     resolveErrorMessage,

packages/components/src/internal/components/buttons/ToggleButtons.test.tsx

@@ -105,6 +105,7 @@ describe('ToggleIcon', () => {
 
         userEvent.click(document.getElementsByTagName('i')[0]);
         expect(onClickFn).toHaveBeenCalledTimes(1);
+        expect(onClickFn).toHaveBeenCalledWith('on');
     });
 
     test('active first item', () => {
@@ -125,4 +126,23 @@ describe('ToggleIcon', () => {
         expect(document.getElementsByClassName('toggle').length).toBe(1);
         expect(document.getElementsByClassName('test-class').length).toBe(1);
     });
+
+    test('disabled', () => {
+        const onClickFn = jest.fn();
+        render(<ToggleIcon active="off" disabled onClick={onClickFn} />);
+
+        userEvent.click(document.getElementsByTagName('i')[0]);
+        expect(onClickFn).toHaveBeenCalledTimes(0);
+    });
+
+    test('tooltip', () => {
+        const onClickFn = jest.fn();
+        render(<ToggleIcon active="off" toolTip="test tooltip" onClick={onClickFn} />);
+
+        expect(document.getElementsByClassName('overlay-trigger').length).toBe(1);
+
+        userEvent.click(document.getElementsByTagName('i')[0]);
+        expect(onClickFn).toHaveBeenCalledTimes(1);
+        expect(onClickFn).toHaveBeenCalledWith('on');
+    });
 });

packages/components/src/internal/components/buttons/ToggleButtons.tsx

@@ -2,6 +2,7 @@ import React, { FC, memo, useCallback } from 'react';
 import classNames from 'classnames';
 
 import { FormsyInput } from '../forms/input/FormsyReactComponents';
+import { LabelHelpTip } from '../base/LabelHelpTip';
 
 interface Props {
     active: string;
@@ -16,6 +17,7 @@ interface Props {
     inputFieldName?: string;
     onClick: (selected: string) => void;
     second?: string;
+    toolTip?: string;
 }
 
 export const ToggleButtons: FC<Props> = memo(props => {
@@ -71,17 +73,34 @@ export const ToggleButtons: FC<Props> = memo(props => {
 });
 
 export const ToggleIcon: FC<Props> = memo(props => {
-    const { first = 'on', second = 'off', onClick, active = 'off', className, inputFieldName, id } = props;
+    const {
+        first = 'on',
+        second = 'off',
+        onClick,
+        active = 'off',
+        className,
+        inputFieldName,
+        id,
+        disabled = false,
+        toolTip,
+    } = props;
     const firstActive = active === first;
     const secondActive = active === second;
 
     const firstBtnClick = useCallback(() => {
-        if (secondActive) onClick(first);
-    }, [first, secondActive, onClick]);
+        if (secondActive && !disabled) onClick(first);
+    }, [first, secondActive, onClick, disabled]);
 
     const secondBtnClick = useCallback(() => {
-        if (firstActive) onClick(second);
-    }, [second, firstActive, onClick]);
+        if (firstActive && !disabled) onClick(second);
+    }, [second, firstActive, onClick, disabled]);
+
+    const body = (
+        <>
+            {firstActive && <i className="fa fa-toggle-on" onClick={secondBtnClick} />}
+            {secondActive && <i className="fa fa-toggle-off" onClick={firstBtnClick} />}
+        </>
+    );
 
     return (
         <>
@@ -92,12 +111,13 @@ export const ToggleIcon: FC<Props> = memo(props => {
                 className={classNames('toggle', 'toggle-group-icon', 'btn-group', {
                     'toggle-on': firstActive,
                     'toggle-off': secondActive,
+                    disabled,
                     [className]: !!className,
                 })}
                 id={id}
             >
-                {firstActive && <i className="fa fa-toggle-on" onClick={secondBtnClick} />}
-                {secondActive && <i className="fa fa-toggle-off" onClick={firstBtnClick} />}
+                {toolTip && <LabelHelpTip iconComponent={body}>{toolTip}</LabelHelpTip>}
+                {!toolTip && body}
             </div>
         </>
     );

packages/components/src/internal/components/editable/Cell.tsx

@@ -385,6 +385,7 @@ export class Cell extends React.PureComponent<CellProps, State> {
         const { filteredLookupKeys } = this.state;
         const isDateTimeField = this.isDateTimeField;
         const showLookup = this.isLookup;
+        const showMenu = showLookup || (col.inputRenderer && col.inputRenderer !== 'AppendUnitsInput');
 
         if (!focused) {
             let valueDisplay = values
@@ -403,7 +404,7 @@ export class Cell extends React.PureComponent<CellProps, State> {
                     'cell-warning': message !== undefined,
                     'cell-read-only': this.isReadOnly,
                     'cell-locked': locked,
-                    'cell-menu': showLookup || col.inputRenderer,
+                    'cell-menu': showMenu,
                     'cell-placeholder': valueDisplay.length === 0 && placeholder !== undefined,
                 }),
                 onDoubleClick: this.handleDblClick,
@@ -418,7 +419,7 @@ export class Cell extends React.PureComponent<CellProps, State> {
             if (valueDisplay.length === 0 && placeholder) valueDisplay = placeholder;
             let cell: ReactNode;
 
-            if (showLookup || col.inputRenderer) {
+            if (showMenu) {
                 cell = (
                     <div {...displayProps}>
                         <div className="cell-menu-value">{valueDisplay}</div>
@@ -491,6 +492,7 @@ export class Cell extends React.PureComponent<CellProps, State> {
                     forUpdate={forUpdate}
                     modifyCell={cellActions.modifyCell}
                     onKeyDown={this.handleFocusedDropdownKeys}
+                    row={row}
                     rowIdx={rowIdx}
                     select={cellActions.selectCell}
                     values={values}

packages/components/src/internal/components/editable/EditableGridLoaderFromSelection.tsx

@@ -61,14 +61,13 @@ export class EditableGridLoaderFromSelection implements EditableGridLoader {
 
     fetch(gridModel: QueryModel): Promise<GridResponse> {
         return new Promise((resolve, reject) => {
-            const { queryName, queryParameters, schemaName, selections, sortString, viewName } = gridModel;
-
-            const selections_ = [...selections].filter(s => this.idsNotPermitted.indexOf(parseInt(s, 10)) === -1);
+            const { queryName, queryParameters, schemaName, sortString, viewName } = gridModel;
+            const selectedIds = gridModel.getSelectedIds(this.idsNotPermitted);
 
             return getSelectedData(
                 schemaName,
                 queryName,
-                selections_,
+                selectedIds,
                 gridModel.getRequestColumnsString(this.requiredColumns, this.omittedColumns, true),
                 sortString,
                 queryParameters,

packages/components/src/internal/components/editable/EditableGridPanelForUpdate.tsx

@@ -88,8 +88,8 @@ export const EditableGridPanelForUpdate: FC<EditableGridPanelForUpdateProps> = p
 
     const hasValidUserComment = comment?.trim()?.length > 0;
     const notPermittedText = useMemo(
-        () => getOperationNotPermittedMessage(editStatusData, pluralNoun),
-        [editStatusData, pluralNoun]
+        () => getOperationNotPermittedMessage(editStatusData, singularNoun, pluralNoun),
+        [editStatusData, singularNoun, pluralNoun]
     );
 
     useEffect(() => {

packages/components/src/internal/components/editable/LookupCell.tsx

@@ -30,6 +30,8 @@ import { QuerySelect } from '../forms/QuerySelect';
 
 import { getQueryColumnRenderers } from '../../global';
 
+import { getValueFromRow } from '../../util/utils';
+
 import { MODIFICATION_TYPES, SELECTION_TYPES } from './constants';
 import { ValueDescriptor } from './models';
 
@@ -48,9 +50,10 @@ export interface LookupCellProps {
     lookupValueFilters?: Filter.IFilter[];
     modifyCell: (colIdx: number, rowIdx: number, newValues: ValueDescriptor[], mod: MODIFICATION_TYPES) => void;
     onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+    row: any;
     rowIdx: number;
-    values: List<ValueDescriptor>;
     select: (colIdx: number, rowIdx: number, selection?: SELECTION_TYPES, resetValue?: boolean) => void;
+    values: List<ValueDescriptor>;
 }
 
 interface QueryLookupCellProps extends LookupCellProps {
@@ -126,7 +129,7 @@ const QueryLookupCell: FC<QueryLookupCellProps> = memo(props => {
 QueryLookupCell.displayName = 'QueryLookupCell';
 
 export const LookupCell: FC<LookupCellProps> = memo(props => {
-    const { col, colIdx, disabled, modifyCell, onKeyDown, rowIdx, select, values } = props;
+    const { col, colIdx, disabled, modifyCell, onKeyDown, row, rowIdx, select, values, containerPath } = props;
 
     const onSelectChange = useCallback<SelectInputChange>(
         (fieldName, formValue, options, props_) => {
@@ -158,7 +161,20 @@ export const LookupCell: FC<LookupCellProps> = memo(props => {
         );
     }
 
-    return <QueryLookupCell {...props} onSelectChange={onSelectChange} rawValues={rawValues} />;
+    // if the column is a lookup, we need to pass the containerPath to the QuerySelect
+    const containerPath_ =
+        containerPath ??
+        getValueFromRow(row?.toJS(), 'Folder')?.toString() ??
+        getValueFromRow(row?.toJS(), 'Container')?.toString();
+
+    return (
+        <QueryLookupCell
+            {...props}
+            onSelectChange={onSelectChange}
+            rawValues={rawValues}
+            containerPath={containerPath_}
+        />
+    );
 });
 
 LookupCell.displayName = 'LookupCell';

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

@@ -14,14 +14,17 @@ import {
     GetDeleteConfirmationDataOptions,
     getDeleteConfirmationData,
     getMoveConfirmationData,
+    getOperationConfirmationData,
     getOperationConfirmationDataForModel,
     getEntityTypeData,
     getOriginalParentsFromLineage,
+    getParentTypeDataForLineage,
     handleEntityFileImport,
     moveEntities,
     initParentOptionsSelects,
     MoveEntitiesOptions,
     getCrossFolderSelectionResult,
+    GetParentTypeDataForLineage,
 } from './actions';
 import { DataOperation } from './constants';
 import {
@@ -65,6 +68,14 @@ export interface EntityAPIWrapper {
         selectionKey?: string,
         useSnapshotSelection?: boolean
     ) => Promise<OperationConfirmationData>;
+    getOperationConfirmationData: (
+        dataType: EntityDataType,
+        rowIds: string[] | number[],
+        selectionKey?: string,
+        useSnapshotSelection?: boolean,
+        extraParams?: Record<string, any>,
+        containerPath?: string
+    ) => Promise<OperationConfirmationData>;
     getOperationConfirmationDataForModel: (
         model: QueryModel,
         dataType: EntityDataType,
@@ -78,6 +89,7 @@ export interface EntityAPIWrapper {
         originalParents: Record<string, List<EntityChoice>>;
         parentTypeOptions: Map<string, List<IEntityTypeOption>>;
     }>;
+    getParentTypeDataForLineage: GetParentTypeDataForLineage;
     handleEntityFileImport: (
         importAction: string,
         queryInfo: QueryInfo,
@@ -113,8 +125,10 @@ export class EntityServerAPIWrapper implements EntityAPIWrapper {
     getDeleteConfirmationData = getDeleteConfirmationData;
     getMoveConfirmationData = getMoveConfirmationData;
     getEntityTypeData = getEntityTypeData;
+    getOperationConfirmationData = getOperationConfirmationData;
     getOperationConfirmationDataForModel = getOperationConfirmationDataForModel;
     getOriginalParentsFromLineage = getOriginalParentsFromLineage;
+    getParentTypeDataForLineage = getParentTypeDataForLineage;
     handleEntityFileImport = handleEntityFileImport;
     loadNameExpressionOptions = loadNameExpressionOptions;
     moveEntities = moveEntities;
@@ -134,8 +148,10 @@ export function getEntityTestAPIWrapper(
         getDeleteConfirmationData: mockFn(),
         getMoveConfirmationData: mockFn(),
         getEntityTypeData: mockFn(),
+        getOperationConfirmationData: mockFn(),
         getOperationConfirmationDataForModel: mockFn(),
         getOriginalParentsFromLineage: mockFn(),
+        getParentTypeDataForLineage: mockFn(),
         handleEntityFileImport: mockFn(),
         loadNameExpressionOptions: mockFn(),
         moveEntities: mockFn(),