From 40e1704e3f2b2d63bd1c86b35540d18ec2f9ca9c Mon Sep 17 00:00:00 2001 From: jfox-box Date: Thu, 4 Sep 2025 14:50:52 -0700 Subject: [PATCH 1/2] fix(content-explorer): Bump metadata-view version to fix grid selection --- package.json | 4 +- .../content-explorer/ContentExplorer.tsx | 22 +++++------ .../__tests__/ContentExplorer.test.tsx | 4 +- .../stories/MetadataView.stories.tsx | 4 +- .../tests/MetadataView-visual.stories.tsx | 16 ++------ yarn.lock | 39 +++++++++++++++---- 6 files changed, 49 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 7d39816133..4cdc8ab9c5 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "@box/languages": "^1.0.0", "@box/metadata-editor": "^0.122.12", "@box/metadata-filter": "^1.19.2", - "@box/metadata-view": "^0.48.6", + "@box/metadata-view": "^0.48.14", "@box/react-virtualized": "^9.22.3-rc-box.10", "@box/types": "^0.2.1", "@cfaester/enzyme-adapter-react-18": "^0.8.0", @@ -303,7 +303,7 @@ "@box/item-icon": "^0.17.15", "@box/metadata-editor": "^0.122.12", "@box/metadata-filter": "^1.19.2", - "@box/metadata-view": "^0.48.6", + "@box/metadata-view": "^0.48.14", "@box/react-virtualized": "^9.22.3-rc-box.10", "@box/types": "^0.2.1", "@hapi/address": "^2.1.4", diff --git a/src/elements/content-explorer/ContentExplorer.tsx b/src/elements/content-explorer/ContentExplorer.tsx index 067b1b61c2..f6a1aac2b8 100644 --- a/src/elements/content-explorer/ContentExplorer.tsx +++ b/src/elements/content-explorer/ContentExplorer.tsx @@ -1614,23 +1614,19 @@ class ContentExplorer extends Component { getMetadataViewProps = (): ContentExplorerProps['metadataViewProps'] => { const { metadataViewProps } = this.props; - const { tableProps } = metadataViewProps ?? {}; - const { onSelectionChange } = tableProps ?? {}; + const { onSelectionChange: onSelectionChangeExternal } = metadataViewProps ?? {}; const { selectedItemIds } = this.state; return { ...metadataViewProps, - tableProps: { - ...tableProps, - selectedKeys: selectedItemIds, - onSelectionChange: (ids: Selection) => { - onSelectionChange?.(ids); - const isSelectionEmpty = ids !== 'all' && ids.size === 0; - this.setState({ - selectedItemIds: ids, - ...(isSelectionEmpty && { isMetadataSidePanelOpen: false }), - }); - }, + selectedKeys: selectedItemIds, + onSelectionChange: (ids: Selection) => { + onSelectionChangeExternal?.(ids); + const isSelectionEmpty = ids !== 'all' && ids.size === 0; + this.setState({ + selectedItemIds: ids, + ...(isSelectionEmpty && { isMetadataSidePanelOpen: false }), + }); }, }; }; diff --git a/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx b/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx index 8e9684e56a..a5cb9a7e6e 100644 --- a/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx +++ b/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx @@ -471,9 +471,7 @@ describe('elements/content-explorer/ContentExplorer', () => { const metadataViewV2ElementProps: Partial = { metadataViewProps: { columns, - tableProps: { - isSelectAllEnabled: true, - }, + isSelectionEnabled: true, }, metadataQuery, fieldsToShow, diff --git a/src/elements/content-explorer/stories/MetadataView.stories.tsx b/src/elements/content-explorer/stories/MetadataView.stories.tsx index 351dfa0820..64ed74bf60 100644 --- a/src/elements/content-explorer/stories/MetadataView.stories.tsx +++ b/src/elements/content-explorer/stories/MetadataView.stories.tsx @@ -65,9 +65,7 @@ export const metadataView: Story = { args: { metadataViewProps: { columns, - tableProps: { - isSelectAllEnabled: true, - }, + isSelectionEnabled: true, }, metadataQuery, defaultView, diff --git a/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx b/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx index 846915bbb3..226f17f4d8 100644 --- a/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx +++ b/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx @@ -83,9 +83,7 @@ const metadataViewV2WithInlineCustomActionsElementProps = { ...metadataViewV2ElementProps, metadataViewProps: { columns, - tableProps: { - isSelectAllEnabled: true, - }, + isSelectionEnabled: true, itemActionMenuProps: { actions: [ { @@ -119,9 +117,7 @@ const metadataViewV2WithBulkItemActions = { ], metadataViewProps: { columns, - tableProps: { - isSelectAllEnabled: true, - }, + isSelectionEnabled: true, }, }; @@ -189,9 +185,7 @@ export const sidePanelOpenWithSingleItemSelected: Story = { ...metadataViewV2ElementProps, metadataViewProps: { columns, - tableProps: { - isSelectAllEnabled: true, - }, + isSelectionEnabled: true, }, }, play: async ({ canvas }) => { @@ -232,9 +226,7 @@ export const sidePanelOpenWithMultipleItemsSelected: Story = { ...metadataViewV2ElementProps, metadataViewProps: { columns, - tableProps: { - isSelectAllEnabled: true, - }, + isSelectionEnabled: true, }, }, diff --git a/yarn.lock b/yarn.lock index bb4a65224a..e90471c574 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1517,10 +1517,10 @@ resolved "https://registry.yarnpkg.com/@box/metadata-filter/-/metadata-filter-1.19.3.tgz#87364bea4cbb1417866e65639f3b1e137a6d9b6a" integrity sha512-5cSY8yLW7S1zsiqBHAuKkHjcyHFBuBUBHGTnYigV0eKyLH4Dm9ozjon23P3Z9HXVB5IMHwTM3I9TRDFAZuP7vw== -"@box/metadata-view@^0.48.6": - version "0.48.6" - resolved "https://registry.yarnpkg.com/@box/metadata-view/-/metadata-view-0.48.6.tgz#c1c5735280f368a15e418c1128c8b0d63b5f5ecb" - integrity sha512-HbUEffdbJawUwkBWxoZoC3AbhG2Agzis3ehcXBDJSeDIypRN+UZSWqHnG1fNJ7f3ngK8JAu/s+FMl/i0nCZAnA== +"@box/metadata-view@^0.48.14": + version "0.48.14" + resolved "https://registry.yarnpkg.com/@box/metadata-view/-/metadata-view-0.48.14.tgz#d8850ecc3a66d94e717c081ed31b348991328232" + integrity sha512-qtH+Z+PiaZtdTtaEuMr19WNH8pqmwwHJCt501r6ZyCJD5mzQY1Qw6le7HpLO+oG0ex9Lcxe/q7LVH9QoHJy5Fg== "@box/react-virtualized@^9.22.3-rc-box.10": version "9.22.3-rc-box.10" @@ -18221,7 +18221,7 @@ string-replace-loader@^3.1.0: loader-utils "^2.0.0" schema-utils "^3.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -18256,6 +18256,15 @@ string-width@^3.0.0, string-width@^3.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -18362,7 +18371,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18390,6 +18399,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -19942,7 +19958,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -19977,6 +19993,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From d42b978ec457cef1454f54a272809b9561534652 Mon Sep 17 00:00:00 2001 From: jfox-box Date: Thu, 4 Sep 2025 14:58:40 -0700 Subject: [PATCH 2/2] fix: remove external function name --- src/elements/content-explorer/ContentExplorer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/content-explorer/ContentExplorer.tsx b/src/elements/content-explorer/ContentExplorer.tsx index f6a1aac2b8..6e0143bf36 100644 --- a/src/elements/content-explorer/ContentExplorer.tsx +++ b/src/elements/content-explorer/ContentExplorer.tsx @@ -1614,14 +1614,14 @@ class ContentExplorer extends Component { getMetadataViewProps = (): ContentExplorerProps['metadataViewProps'] => { const { metadataViewProps } = this.props; - const { onSelectionChange: onSelectionChangeExternal } = metadataViewProps ?? {}; + const { onSelectionChange } = metadataViewProps ?? {}; const { selectedItemIds } = this.state; return { ...metadataViewProps, selectedKeys: selectedItemIds, onSelectionChange: (ids: Selection) => { - onSelectionChangeExternal?.(ids); + onSelectionChange?.(ids); const isSelectionEmpty = ids !== 'all' && ids.size === 0; this.setState({ selectedItemIds: ids,