From 7a38569e714cfe4b5e54b0b8c5fad0830a084775 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 2 May 2025 15:25:28 -0500 Subject: [PATCH 1/8] Issue 52556: Add data-fieldkey attribuet to grid header elements and input elements --- packages/components/releaseNotes/components.md | 4 ++++ .../src/internal/components/ColumnSelectionModal.tsx | 3 ++- .../components/__snapshots__/PreviewGrid.test.tsx.snap | 6 ++++++ packages/components/src/internal/components/base/Grid.tsx | 1 + .../src/internal/components/forms/detail/DetailDisplay.tsx | 2 +- .../src/internal/components/forms/input/CheckboxInput.tsx | 3 ++- .../src/internal/components/forms/input/DatePickerInput.tsx | 4 ++-- .../src/internal/components/forms/input/SelectInput.tsx | 2 +- .../src/internal/components/search/QueryFilterPanel.tsx | 4 ++-- 9 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md index 53ad58d8af..36ddc81be5 100644 --- a/packages/components/releaseNotes/components.md +++ b/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 +- Issue 52556: Add data-fieldkey attribuet to grid header elements and input elements + ### version 6.39.1 *Released*: 2 May 2025 - Issue 52979: App grid customize view doesn't expand lookup field with special char diff --git a/packages/components/src/internal/components/ColumnSelectionModal.tsx b/packages/components/src/internal/components/ColumnSelectionModal.tsx index 5100727782..2f7c2483e6 100644 --- a/packages/components/src/internal/components/ColumnSelectionModal.tsx +++ b/packages/components/src/internal/components/ColumnSelectionModal.tsx @@ -267,7 +267,7 @@ export const ColumnInView: FC = memo(props => { selected, index, } = props; - const key = column.index; + const key = column.fieldKeyPath; const [editing, setEditing] = useState(false); const _onRemoveColumn = useCallback(() => { @@ -296,6 +296,7 @@ export const ColumnInView: FC = memo(props => { {(dragProvided, snapshot) => (
{ onDragEnter={this.handleDragEnter} onDragEnd={this.handleDragEnd} onClick={this.handleHeaderClick} + data-fieldkey={column.raw?.fieldKeyPath} > {headerCell ? headerCell(column, i, columns.size) : title} {/* headerCell will render the helpTip, so only render here if not using headerCell() */} diff --git a/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx b/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx index 1c21f473f2..f4d6f2ad6b 100644 --- a/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx +++ b/packages/components/src/internal/components/forms/detail/DetailDisplay.tsx @@ -106,7 +106,7 @@ function processFields( return fields.set( fieldKey, new DetailField({ - fieldKey, + fieldKey: c.fieldKey, title: c.caption, renderer: detailRenderer?.(c, options, fileInputRenderer, onAdditionalFormDataChange) ?? _defaultRenderer(c), diff --git a/packages/components/src/internal/components/forms/input/CheckboxInput.tsx b/packages/components/src/internal/components/forms/input/CheckboxInput.tsx index ea3b66523c..4fbf8e5d1d 100644 --- a/packages/components/src/internal/components/forms/input/CheckboxInput.tsx +++ b/packages/components/src/internal/components/forms/input/CheckboxInput.tsx @@ -109,7 +109,7 @@ class CheckboxInputImpl extends DisableableInput {renderFieldLabel ? ( -
} onSelect={() => onFieldClick(field)} componentRight={ hasFilters(field) && From 51dddac5e829fba3f73abda82cd2eb6690d26b1b Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 2 May 2025 15:26:09 -0500 Subject: [PATCH 2/8] ColumnSelectionModal.tsx class name change from field-name to field-caption --- .../components/ColumnSelectionModal.test.tsx | 16 ++++++++-------- .../internal/components/ColumnSelectionModal.tsx | 4 ++-- .../QueryModel/CustomizeGridViewModal.test.tsx | 4 ++-- packages/components/src/theme/filter.scss | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/src/internal/components/ColumnSelectionModal.test.tsx b/packages/components/src/internal/components/ColumnSelectionModal.test.tsx index 643fed5910..d572e0f1fb 100644 --- a/packages/components/src/internal/components/ColumnSelectionModal.test.tsx +++ b/packages/components/src/internal/components/ColumnSelectionModal.test.tsx @@ -52,7 +52,7 @@ describe('ColumnSelectionModal', () => { test('isInView', () => { render(); - expect(document.querySelector('.field-name').textContent).toBe('Test Column'); + expect(document.querySelector('.field-caption').textContent).toBe('Test Column'); expect(document.querySelectorAll('.fa-check')).toHaveLength(1); expect(document.querySelectorAll('.fa-plus')).toHaveLength(0); expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(1); @@ -62,7 +62,7 @@ describe('ColumnSelectionModal', () => { test('not isInView', () => { render(); - expect(document.querySelector('.field-name').textContent).toBe('Test Column'); + expect(document.querySelector('.field-caption').textContent).toBe('Test Column'); expect(document.querySelectorAll('.fa-check')).toHaveLength(0); expect(document.querySelectorAll('.fa-plus')).toHaveLength(1); expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(1); @@ -72,7 +72,7 @@ describe('ColumnSelectionModal', () => { test('lookup, collapsed', () => { render(); - expect(document.querySelector('.field-name').textContent).toBe('Test Column'); + expect(document.querySelector('.field-caption').textContent).toBe('Test Column'); expect(document.querySelectorAll('.fa-check')).toHaveLength(0); expect(document.querySelectorAll('.fa-plus')).toHaveLength(1); expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(3); @@ -82,7 +82,7 @@ describe('ColumnSelectionModal', () => { test('lookup, expanded', () => { render(); - expect(document.querySelector('.field-name').textContent).toBe('Test Column'); + expect(document.querySelector('.field-caption').textContent).toBe('Test Column'); expect(document.querySelectorAll('.fa-check')).toHaveLength(0); expect(document.querySelectorAll('.fa-plus')).toHaveLength(1); expect(document.querySelectorAll('.field-expand-icon')).toHaveLength(3); @@ -116,7 +116,7 @@ describe('ColumnSelectionModal', () => { } function validate(column: QueryColumn, deleteDisabled: boolean): void { - expect(document.querySelector('.field-name span').textContent).toBe(column.caption); + expect(document.querySelector('.field-caption span').textContent).toBe(column.caption); const removeIcon = document.querySelector('.fa-times'); if (deleteDisabled) { expect(removeIcon).toBeFalsy(); @@ -184,21 +184,21 @@ describe('ColumnSelectionModal', () => { describe('FieldLabelDisplay', () => { test('not lookup', () => { render(); - expect(document.querySelector('.field-name span').textContent).toBe(QUERY_COL.caption); + expect(document.querySelector('.field-caption span').textContent).toBe(QUERY_COL.caption); expect(document.querySelectorAll('.overlay-trigger')).toHaveLength(1); expect(document.querySelectorAll('input')).toHaveLength(0); }); test('is lookup', () => { render(); - expect(document.querySelectorAll('.field-name span')).toHaveLength(1); + expect(document.querySelectorAll('.field-caption span')).toHaveLength(1); expect(document.querySelectorAll('.overlay-trigger')).toHaveLength(1); expect(document.querySelectorAll('input')).toHaveLength(0); }); test('is lookup, do not include fieldKey', () => { render(); - expect(document.querySelectorAll('.field-name')).toHaveLength(1); + expect(document.querySelectorAll('.field-caption')).toHaveLength(1); expect(document.querySelectorAll('.overlay-trigger')).toHaveLength(0); expect(document.querySelectorAll('input')).toHaveLength(0); }); diff --git a/packages/components/src/internal/components/ColumnSelectionModal.tsx b/packages/components/src/internal/components/ColumnSelectionModal.tsx index 2f7c2483e6..105974647d 100644 --- a/packages/components/src/internal/components/ColumnSelectionModal.tsx +++ b/packages/components/src/internal/components/ColumnSelectionModal.tsx @@ -74,11 +74,11 @@ export const FieldLabelDisplay: FC = memo(props => { } // Issue 46256: use encoded fieldKeyPath, Issue 49795: show tooltip more often to account for renamed fields, etc. if (!includeFieldKey) { - return
{initialTitle}
; + return
{initialTitle}
; } return ( - + {initialTitle} ); diff --git a/packages/components/src/public/QueryModel/CustomizeGridViewModal.test.tsx b/packages/components/src/public/QueryModel/CustomizeGridViewModal.test.tsx index 18d3143034..b65555de5d 100644 --- a/packages/components/src/public/QueryModel/CustomizeGridViewModal.test.tsx +++ b/packages/components/src/public/QueryModel/CustomizeGridViewModal.test.tsx @@ -191,13 +191,13 @@ describe('CustomizeGridViewModal', () => { expect(colsInView[1].getAttribute('class')).toContain('active'); // clicking a new column should change the selected index - await userEvent.click(colsInView[0].querySelector('.field-name span')); + await userEvent.click(colsInView[0].querySelector('.field-caption span')); colsInView = document.querySelectorAll('.list-group')[1].querySelectorAll('.list-group-item'); expect(colsInView[0].getAttribute('class')).toContain('active'); expect(colsInView[1].getAttribute('class')).not.toContain('active'); // clicking on the same column should unselect - await userEvent.click(colsInView[0].querySelector('.field-name span')); + await userEvent.click(colsInView[0].querySelector('.field-caption span')); colsInView = document.querySelectorAll('.list-group')[1].querySelectorAll('.list-group-item'); expect(colsInView[0].getAttribute('class')).not.toContain('active'); expect(colsInView[1].getAttribute('class')).not.toContain('active'); diff --git a/packages/components/src/theme/filter.scss b/packages/components/src/theme/filter.scss index b74857714f..72ab068882 100644 --- a/packages/components/src/theme/filter.scss +++ b/packages/components/src/theme/filter.scss @@ -22,7 +22,7 @@ font-weight: bold; } - .list-group-item .field-name { + .list-group-item .field-caption { flex: 1; cursor: default; } From 5b40451806be2dd2f2491fc1210a9fcb6465f892 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 2 May 2025 15:26:35 -0500 Subject: [PATCH 3/8] Bulk edit field toggle icon to have distinct id --- .../components/src/internal/components/forms/FieldLabel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/internal/components/forms/FieldLabel.tsx b/packages/components/src/internal/components/forms/FieldLabel.tsx index f544647d04..ebb2e47e6b 100644 --- a/packages/components/src/internal/components/forms/FieldLabel.tsx +++ b/packages/components/src/internal/components/forms/FieldLabel.tsx @@ -90,7 +90,7 @@ export class FieldLabel extends Component {
Date: Fri, 2 May 2025 15:26:51 -0500 Subject: [PATCH 4/8] 6.39.1-dataFieldKey52556.0 --- packages/components/package-lock.json | 4 ++-- packages/components/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json index 4537df3047..1415b03cfd 100644 --- a/packages/components/package-lock.json +++ b/packages/components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/components", - "version": "6.39.1", + "version": "6.39.1-dataFieldKey52556.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/components", - "version": "6.39.1", + "version": "6.39.1-dataFieldKey52556.0", "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@hello-pangea/dnd": "18.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index 4ff806ed4b..8a9c718674 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@labkey/components", - "version": "6.39.1", + "version": "6.39.1-dataFieldKey52556.0", "description": "Components, models, actions, and utility functions for LabKey applications and pages", "sideEffects": false, "files": [ From f8188ccbab03daa88bc6f7541c2e3c82b4856c76 Mon Sep 17 00:00:00 2001 From: cnathe Date: Mon, 5 May 2025 14:14:09 -0500 Subject: [PATCH 5/8] ColumnSelectionModal revert to use column.index --- .../src/internal/components/ColumnSelectionModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/internal/components/ColumnSelectionModal.tsx b/packages/components/src/internal/components/ColumnSelectionModal.tsx index 105974647d..9ac7e979cc 100644 --- a/packages/components/src/internal/components/ColumnSelectionModal.tsx +++ b/packages/components/src/internal/components/ColumnSelectionModal.tsx @@ -267,7 +267,7 @@ export const ColumnInView: FC = memo(props => { selected, index, } = props; - const key = column.fieldKeyPath; + const key = column.index; const [editing, setEditing] = useState(false); const _onRemoveColumn = useCallback(() => { @@ -296,7 +296,7 @@ export const ColumnInView: FC = memo(props => { {(dragProvided, snapshot) => (
Date: Mon, 5 May 2025 14:15:38 -0500 Subject: [PATCH 6/8] 6.39.1-dataFieldKey52556.1 --- packages/components/package-lock.json | 4 ++-- packages/components/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json index 1415b03cfd..ff291cd020 100644 --- a/packages/components/package-lock.json +++ b/packages/components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/components", - "version": "6.39.1-dataFieldKey52556.0", + "version": "6.39.1-dataFieldKey52556.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/components", - "version": "6.39.1-dataFieldKey52556.0", + "version": "6.39.1-dataFieldKey52556.1", "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@hello-pangea/dnd": "18.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index 8a9c718674..acbc283ce5 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@labkey/components", - "version": "6.39.1-dataFieldKey52556.0", + "version": "6.39.1-dataFieldKey52556.1", "description": "Components, models, actions, and utility functions for LabKey applications and pages", "sideEffects": false, "files": [ From 30ed6368a0642ed423809da5ff70a671da225931 Mon Sep 17 00:00:00 2001 From: cnathe Date: Tue, 6 May 2025 08:55:18 -0500 Subject: [PATCH 7/8] Update release notes with version number and release date --- packages/components/releaseNotes/components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md index 551103ae92..430da20f5b 100644 --- a/packages/components/releaseNotes/components.md +++ b/packages/components/releaseNotes/components.md @@ -1,9 +1,9 @@ # @labkey/components Components, models, actions, and utility functions for LabKey applications and pages -### version TBD -*Released*: TBD -- Issue 52556: Add data-fieldkey attribuet to grid header elements and input elements +### version 6.40.1 +*Released*: 6 May 2025 +- Issue 52556: Add data-fieldkey attribute to grid header elements and input elements ### version 6.40.0 *Released*: 5 May 2025 From 64d50656907761d2c3c31f72c3a2ec5d2210237e Mon Sep 17 00:00:00 2001 From: cnathe Date: Tue, 6 May 2025 08:57:28 -0500 Subject: [PATCH 8/8] 6.40.1 --- packages/components/package-lock.json | 4 ++-- packages/components/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json index 6ca5f6e086..36148cfc6b 100644 --- a/packages/components/package-lock.json +++ b/packages/components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/components", - "version": "6.40.0", + "version": "6.40.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/components", - "version": "6.40.0", + "version": "6.40.1", "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@hello-pangea/dnd": "18.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index 182a554d49..e9217f2b24 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@labkey/components", - "version": "6.40.0", + "version": "6.40.1", "description": "Components, models, actions, and utility functions for LabKey applications and pages", "sideEffects": false, "files": [