fix(content-explorer): Fix grid selection (box#4267)

* fix(content-explorer): Bump metadata-view version to fix grid selection

* fix: remove external function name

Author: jfox-box

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",

src/elements/content-explorer/ContentExplorer.tsx

@@ -1614,23 +1614,19 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
 
     getMetadataViewProps = (): ContentExplorerProps['metadataViewProps'] => {
         const { metadataViewProps } = this.props;
-        const { tableProps } = metadataViewProps ?? {};
-        const { onSelectionChange } = tableProps ?? {};
+        const { onSelectionChange } = 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) => {
+                onSelectionChange?.(ids);
+                const isSelectionEmpty = ids !== 'all' && ids.size === 0;
+                this.setState({
+                    selectedItemIds: ids,
+                    ...(isSelectionEmpty && { isMetadataSidePanelOpen: false }),
+                });
             },
         };
     };

src/elements/content-explorer/__tests__/ContentExplorer.test.tsx

@@ -471,9 +471,7 @@ describe('elements/content-explorer/ContentExplorer', () => {
             const metadataViewV2ElementProps: Partial<ContentExplorerProps> = {
                 metadataViewProps: {
                     columns,
-                    tableProps: {
-                        isSelectAllEnabled: true,
-                    },
+                    isSelectionEnabled: true,
                 },
                 metadataQuery,
                 fieldsToShow,

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,

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,
         },
     },
 

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"