box-ui-elements 23.5.0-beta.1 → 23.5.0-beta.2

package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js

@@ -11,6 +11,7 @@ import noop from 'lodash/noop';
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
+import { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 
 // The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.
 const {
@@ -190,6 +191,8 @@ const meta = {
         return HttpResponse.json(mockMetadata);
       }), http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
         return HttpResponse.json(mockSchema);
+      }), http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {
+        return HttpResponse.json(mockRootFolder);
       })]
     }
   }

package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","expect","userEvent","waitFor","within","Download","SignMeOthers","Sign","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport { http, HttpResponse } from 'msw';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport noop from 'lodash/noop';\n\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n    from: metadataScopeAndKey,\n    ancestor_folder_id: '0',\n    sort_by: [\n        {\n            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n            direction: 'asc',\n        },\n    ],\n    fields: [\n        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n        'name',\n    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n    {\n        // Always include the name column\n        textValue: 'Name',\n        id: 'name',\n        type: 'string',\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    },\n    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n    },\n};\n\nconst metadataViewV2ElementProps = {\n    metadataViewProps: {\n        columns,\n    },\n    metadataQuery,\n    fieldsToShow,\n    defaultView,\n    features: {\n        contentExplorer: {\n            metadataViewV2: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n            itemActionMenuProps: {\n                actions: [\n                    {\n                        label: 'Download',\n                        onClick: noop,\n                        icon: Download,\n                    },\n                ],\n                subMenuTrigger: {\n                    label: 'Sign',\n                    icon: Sign,\n                },\n                subMenuActions: [\n                    {\n                        label: 'Request Signature',\n                        onClick: noop,\n                        icon: SignMeOthers,\n                    },\n                ],\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n        userEvent.click(ellipsesButton);\n    },\n};\n\nconst initialFilterActionBarProps = {\n    initialFilterValues: {\n        'industry-filter': { value: ['Legal'] },\n        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },\n        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },\n    },\n};\n\nexport const metadataViewV2WithInitialFilterValues: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            actionBarProps: initialFilterActionBarProps,\n        },\n    },\n    play: async ({ canvas }) => {\n        // Wait for chips to update with initial values\n        await waitFor(() => {\n            expect(canvas.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\\(1\\)/);\n        });\n        // Other chips should reflect initialized values\n        const contactRoleChip = canvas.getByRole('button', { name: /Contact Role/i });\n        expect(contactRoleChip).toHaveTextContent(/\\(3\\)/);\n\n        const fileTypeChip = canvas.getByRole('button', { name: /Box Note/i });\n        expect(fileTypeChip).toHaveTextContent(/\\+2/);\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n    component: ContentExplorer,\n    args: {\n        features: global.FEATURE_FLAGS,\n        rootFolderId: global.FOLDER_ID,\n        token: global.TOKEN,\n    },\n    parameters: {\n        msw: {\n            handlers: [\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n                    return HttpResponse.json(mockMetadata);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n                    return HttpResponse.json(mockSchema);\n                }),\n            ],\n        },\n    },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","expect","userEvent","waitFor","within","Download","SignMeOthers","Sign","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport { http, HttpResponse } from 'msw';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport noop from 'lodash/noop';\n\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\nimport { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n    from: metadataScopeAndKey,\n    ancestor_folder_id: '0',\n    sort_by: [\n        {\n            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n            direction: 'asc',\n        },\n    ],\n    fields: [\n        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n        'name',\n    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n    {\n        // Always include the name column\n        textValue: 'Name',\n        id: 'name',\n        type: 'string',\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    },\n    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n    },\n};\n\nconst metadataViewV2ElementProps = {\n    metadataViewProps: {\n        columns,\n    },\n    metadataQuery,\n    fieldsToShow,\n    defaultView,\n    features: {\n        contentExplorer: {\n            metadataViewV2: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n            itemActionMenuProps: {\n                actions: [\n                    {\n                        label: 'Download',\n                        onClick: noop,\n                        icon: Download,\n                    },\n                ],\n                subMenuTrigger: {\n                    label: 'Sign',\n                    icon: Sign,\n                },\n                subMenuActions: [\n                    {\n                        label: 'Request Signature',\n                        onClick: noop,\n                        icon: SignMeOthers,\n                    },\n                ],\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n        userEvent.click(ellipsesButton);\n    },\n};\n\nconst initialFilterActionBarProps = {\n    initialFilterValues: {\n        'industry-filter': { value: ['Legal'] },\n        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },\n        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },\n    },\n};\n\nexport const metadataViewV2WithInitialFilterValues: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            actionBarProps: initialFilterActionBarProps,\n        },\n    },\n    play: async ({ canvas }) => {\n        // Wait for chips to update with initial values\n        await waitFor(() => {\n            expect(canvas.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\\(1\\)/);\n        });\n        // Other chips should reflect initialized values\n        const contactRoleChip = canvas.getByRole('button', { name: /Contact Role/i });\n        expect(contactRoleChip).toHaveTextContent(/\\(3\\)/);\n\n        const fileTypeChip = canvas.getByRole('button', { name: /Box Note/i });\n        expect(fileTypeChip).toHaveTextContent(/\\+2/);\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n    component: ContentExplorer,\n    args: {\n        features: global.FEATURE_FLAGS,\n        rootFolderId: global.FOLDER_ID,\n        token: global.TOKEN,\n    },\n    parameters: {\n        msw: {\n            handlers: [\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n                    return HttpResponse.json(mockMetadata);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n                    return HttpResponse.json(mockSchema);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {\n                    return HttpResponse.json(mockRootFolder);\n                }),\n            ],\n        },\n    },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}

package/es/src/elements/content-explorer/ContentExplorer.d.ts

@@ -546,13 +546,6 @@ declare class ContentExplorer extends Component<ContentExplorerProps, State> {
     updateMetadata: (item: BoxItem, field: string, oldValue?: MetadataFieldValue | null, newValue?: MetadataFieldValue | null) => void;
     updateMetadataSuccessCallback: (item: BoxItem, field: string, newValue?: MetadataFieldValue | null) => void;
     clearSelectedItemIds: () => void;
-    /**
-     * Fetches the folder name and stores it in state rootName if successful
-     *
-     * @private
-     * @return {void}
-     */
-    fetchFolderName: (folderId?: string) => void;
     /**
      * Renders the file picker
      *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.5.0-beta.1",
+    "version": "23.5.0-beta.2",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/elements/content-explorer/ContentExplorer.tsx

@@ -338,7 +338,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      * @return {void}
      */
     componentDidMount() {
-        const { currentFolderId, defaultView, metadataQuery }: ContentExplorerProps = this.props;
+        const { currentFolderId, defaultView }: ContentExplorerProps = this.props;
         this.rootElement = document.getElementById(this.id) as HTMLElement;
         this.appElement = this.rootElement.firstElementChild as HTMLElement;
 
@@ -348,7 +348,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                 break;
             case DEFAULT_VIEW_METADATA:
                 this.showMetadataQueryResults();
-                this.fetchFolderName(metadataQuery?.ancestor_folder_id);
                 break;
             default:
                 this.fetchFolder(currentFolderId);
@@ -390,12 +389,14 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         metadataTemplate: MetadataTemplate,
     ): void => {
         const { nextMarker } = metadataQueryCollection;
+        const { metadataQuery, features } = this.props;
         const { currentCollection, currentPageNumber, markers }: State = this.state;
         const cloneMarkers = [...markers];
         if (nextMarker) {
             cloneMarkers[currentPageNumber + 1] = nextMarker;
         }
-        this.setState({
+
+        const nextState = {
             currentCollection: {
                 ...currentCollection,
                 ...metadataQueryCollection,
@@ -403,7 +404,25 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             },
             markers: cloneMarkers,
             metadataTemplate,
-        });
+        };
+
+        // if v2, fetch folder name and add to state
+        if (metadataQuery?.ancestor_folder_id && isFeatureEnabled(features, 'contentExplorer.metadataViewV2')) {
+            this.api.getFolderAPI().getFolderFields(
+                metadataQuery.ancestor_folder_id,
+                ({ name }) => {
+                    this.setState({
+                        ...nextState,
+                        rootName: name || '',
+                    });
+                },
+                this.errorCallback,
+                { fields: [FIELD_NAME] },
+            );
+        } else {
+            // No folder name to fetch, update state immediately with just metadata
+            this.setState(nextState);
+        }
     };
 
     /**
@@ -1628,27 +1647,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         this.setState({ selectedItemIds: new Set() });
     };
 
-    /**
-     * Fetches the folder name and stores it in state rootName if successful
-     *
-     * @private
-     * @return {void}
-     */
-    fetchFolderName = (folderId?: string) => {
-        if (!folderId) {
-            return;
-        }
-
-        this.api.getFolderAPI(false).getFolderFields(
-            folderId,
-            ({ name }) => {
-                this.setState({ rootName: name });
-            },
-            this.errorCallback,
-            { fields: [FIELD_NAME] },
-        );
-    };
-
     /**
      * Renders the file picker
      *

package/src/elements/content-explorer/stories/MetadataView.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ContentExplorer from '../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../constants';
 import { mockMetadata, mockSchema } from '../../common/__mocks__/mockMetadata';
+import { mockRootFolder } from '../../common/__mocks__/mockRootFolder';
 
 const EID = '0';
 const templateName = 'templateName';
@@ -120,6 +121,9 @@ const meta: Meta<typeof ContentExplorer> = {
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
                     return HttpResponse.json(mockSchema);
                 }),
+                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {
+                    return HttpResponse.json(mockRootFolder);
+                }),
             ],
         },
     },

package/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -8,6 +8,7 @@ import noop from 'lodash/noop';
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
+import { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 
 // The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.
 const { scope: templateScope, templateKey } = mockSchema;
@@ -180,6 +181,9 @@ const meta: Meta<typeof ContentExplorer> = {
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
                     return HttpResponse.json(mockSchema);
                 }),
+                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {
+                    return HttpResponse.json(mockRootFolder);
+                }),
             ],
         },
     },