Add a “Mixed” state in Bulk Edit when values differ across selected samples

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.7.3",
+  "version": "7.7.4-fb-mixedValueEdit.2",
   "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.X
+*Released*: X
+- Add a “Mixed” state in Bulk Edit when values differ across selected samples
+  - Modified getCommonDataValues utility to return both common field values and a list of fields with conflicting values
+  - Added hasMixedValue prop support across all input components (TextInput, SelectInput, CheckboxInput, DatePickerInput, FileInput, TextAreaInput, AmountUnitInput)
+  - Updated BulkUpdateForm and BulkAddUpdateForm to pass conflicting fields information to form inputs
+
 ### version 7.7.3
 *Released*: 31 December 2025
 - [GitHub Issue #495](https://github.com/LabKey/internal-issues/issues/495)

packages/components/src/internal/components/forms/BulkAddUpdateForm.tsx

@@ -41,7 +41,7 @@ export const BulkAddUpdateForm: FC<BulkAddUpdateFormProps> = props => {
     const title =
         'Update ' + selectedRowIndexes.size + ' ' + (selectedRowIndexes.size === 1 ? singularNoun : pluralNoun);
 
-    const fieldValues = useMemo(() => {
+    const { fieldValues, fieldsInConflict } = useMemo(() => {
         const editorData = editorModel
             .getDataForServerUpload(false)
             .filter((val, index) => selectedRowIndexes.contains(index))
@@ -58,6 +58,7 @@ export const BulkAddUpdateForm: FC<BulkAddUpdateFormProps> = props => {
                 asModal={asModal}
                 checkRequiredFields={false}
                 fieldValues={fieldValues}
+                fieldWithMixedValues={fieldsInConflict}
                 hideButtons={!queryInfoFormProps.asModal}
                 includeCountField={false}
                 initiallyDisableFields={true}

packages/components/src/internal/components/forms/BulkUpdateForm.tsx

@@ -312,10 +312,8 @@ export class BulkUpdateForm extends PureComponent<BulkUpdateFormProps, State> {
             selectedIds,
         } = this.props;
         const fileFields = queryInfo.columns.valueArray.filter(col => col.isFileInput).map(col => col.name);
-        const fieldValues =
-            isLoadingDataForSelection || !dataForSelection
-                ? undefined
-                : getCommonDataValues(dataForSelection, fileFields);
+        const { fieldValues, fieldsInConflict } =
+            isLoadingDataForSelection || !dataForSelection ? { fieldValues: undefined, fieldsInConflict: [] } : getCommonDataValues(dataForSelection, fileFields);
 
         // if all selectedIds are from the same containerPath, use that for the lookups via QueryFormInputs > QuerySelect,
         // if selections are from multiple containerPaths, disable the lookup and file field inputs
@@ -344,6 +342,7 @@ export class BulkUpdateForm extends PureComponent<BulkUpdateFormProps, State> {
                 containerPath={containerPath}
                 disabled={disabled}
                 fieldValues={values}
+                fieldWithMixedValues={fieldsInConflict}
                 header={this.renderBulkUpdateHeader()}
                 includeCommentField={includeCommentField}
                 includeCountField={false}

packages/components/src/internal/components/forms/QueryFormInputs.test.tsx

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2019 LabKey Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { List } from 'immutable';
+import { render, screen } from '@testing-library/react';
+
+import { makeQueryInfo } from '../../test/testHelpers';
+import assayGpatDataQueryInfo from '../../../test/data/assayGpatData-getQueryDetails.json';
+import { QueryColumn } from '../../../public/QueryColumn';
+
+import { Formsy } from './formsy';
+import { QueryFormInputs } from './QueryFormInputs';
+
+const QUERY_INFO = makeQueryInfo(assayGpatDataQueryInfo);
+
+describe('QueryFormInputs', () => {
+    test('default properties with queryInfo', () => {
+        const { container } = render(
+            <Formsy>
+                <QueryFormInputs queryInfo={QUERY_INFO} />
+            </Formsy>
+        );
+
+        expect(document.querySelectorAll('input')).toHaveLength(9);
+        expect(container.querySelectorAll('input:disabled')).toHaveLength(0);
+
+        // Verify presence of expected fields
+        expect(screen.getByLabelText('Participant ID')).toBeInTheDocument();
+        expect(screen.getByLabelText('Visit ID')).toBeInTheDocument();
+
+        // Check types where possible
+        expect(screen.getByLabelText('Healthy')).toHaveAttribute('type', 'checkbox');
+
+        // default properties don't render file inputs
+        expect(container.querySelectorAll('input[type="file"]')).toHaveLength(0);
+    });
+
+    test('renderFieldLabel', () => {
+        const { container } = render(
+            <Formsy>
+                <QueryFormInputs
+                    queryInfo={QUERY_INFO}
+                    renderFieldLabel={(queryColumn: QueryColumn, label: string) => {
+                        return <div className="jest-field-label-test">{queryColumn?.name || label}</div>;
+                    }}
+                />
+            </Formsy>
+        );
+
+        expect(container.querySelectorAll('.jest-field-label-test')).toHaveLength(9);
+    });
+
+    test('render file inputs', () => {
+        const { container } = render(
+            <Formsy>
+                <QueryFormInputs queryInfo={QUERY_INFO} renderFileInputs={true} />
+            </Formsy>
+        );
+
+        expect(container.querySelectorAll('input[type="file"]')).toHaveLength(1);
+    });
+
+    test('custom columnFilter', () => {
+        const filter = (col: QueryColumn) => {
+            return col.name === 'Healthy';
+        };
+
+        render(
+            <Formsy>
+                <QueryFormInputs columnFilter={filter} queryInfo={QUERY_INFO} />
+            </Formsy>
+        );
+
+        expect(screen.getByLabelText('Healthy')).toBeInTheDocument();
+        expect(screen.queryByLabelText('Participant ID')).not.toBeInTheDocument();
+    });
+
+    test('disabledFields', () => {
+        render(
+            <Formsy>
+                <QueryFormInputs
+                    disabledFields={List<string>(['date', 'ParticipantID', 'textarea'])}
+                    queryInfo={QUERY_INFO}
+                />
+            </Formsy>
+        );
+
+        const inputs = document.querySelectorAll('input');
+        expect(inputs).toHaveLength(9);
+        expect(inputs[4].getAttribute('type')).toBe('text');
+        expect(inputs[4].getAttribute('name')).toBe('Date');
+        expect(inputs[4].getAttribute('value')).toBe('');
+        expect(inputs[4].getAttribute('disabled')).toBe('');
+    });
+
+    test('disabledFields, with fieldWithMixedValues', () => {
+        render(
+            <Formsy>
+                <QueryFormInputs
+                    disabledFields={List<string>(['date', 'healthy'])}
+                    fieldWithMixedValues={['date', 'healthy', 'ParticipantID']}
+                    queryInfo={QUERY_INFO}
+                />
+            </Formsy>
+        );
+
+        const inputs = document.querySelectorAll('input');
+        expect(inputs).toHaveLength(9);
+        expect(inputs[2].getAttribute('name')).toBe('ParticipantID');
+        expect(inputs[2].getAttribute('disabled')).toBeNull();
+        expect(inputs[2].getAttribute('placeholder')).toBe('Enter participant id'); // not disabled, show don't show Mixed placeholder
+        expect(inputs[4].getAttribute('name')).toBe('Date');
+        expect(inputs[4].getAttribute('disabled')).toBe(''); // disabled
+        expect(inputs[4].getAttribute('placeholder')).toBe('[Mixed]'); // disabled and has mix value
+        expect(inputs[5].getAttribute('name')).toBe('DateOnly');
+        expect(inputs[5].getAttribute('placeholder')).toBe('Select dateonly');
+        expect(inputs[6].getAttribute('name')).toBe('TimeOnly');
+        expect(inputs[6].getAttribute('placeholder')).toBe('Select timeonly');
+        expect(inputs[7].getAttribute('placeholder')).toBeNull();
+        expect(inputs[7].getAttribute('title')).toBe('[Mixed]'); // disabled and has mix value, boolean
+    });
+});