box-ui-elements 24.0.0-beta.4 → 24.0.0-beta.6

package/es/elements/content-explorer/MetadataViewContainer.js

@@ -1,4 +1,4 @@
-const _excluded = ["actionBarProps", "columns", "currentCollection", "metadataTemplate"];
+const _excluded = ["actionBarProps", "columns", "currentCollection", "metadataTemplate", "onMetadataFilter", "onSortChange", "tableProps"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -8,11 +8,31 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import * as React from 'react';
+import { useIntl } from 'react-intl';
 import { MetadataView } from '@box/metadata-view';
+import cloneDeep from 'lodash/cloneDeep';
+import { FIELD_ITEM_NAME } from '../../constants';
+import messages from '../common/messages';
 
 // Public-friendly version of MetadataFormFieldValue from @box/metadata-filter
 // (string[] for enum type, range/float objects stay the same)
 
+const ITEM_FILTER_NAME = 'item_name';
+
+/**
+ * Helper function to trim metadataFieldNamePrefix from column names
+ * For example: 'metadata.enterprise_1515946.mdViewTemplate1.industry' -> 'industry'
+ */
+function trimMetadataFieldPrefix(column) {
+  // Check if the column starts with 'metadata.' and contains at least 2 dots
+  if (column.startsWith('metadata.') && column.split('.').length >= 3) {
+    // Split by dots and take everything after the first 3 parts
+    // metadata.enterprise_1515946.mdViewTemplate1.industry -> industry
+    const parts = column.split('.');
+    return parts.slice(3).join('.');
+  }
+  return column;
+}
 function transformInitialFilterValuesToInternal(publicValues) {
   if (!publicValues) return undefined;
   return Object.entries(publicValues).reduce((acc, [key, {
@@ -28,68 +48,145 @@ function transformInitialFilterValuesToInternal(publicValues) {
     return acc;
   }, {});
 }
-function transformInternalFieldsToPublic(fields) {
-  return Object.entries(fields).reduce((acc, [key, {
-    value
-  }]) => {
-    acc[key] = 'enum' in value && Array.isArray(value.enum) ? {
-      value: value.enum
-    } : {
-      value: value
+export function convertFilterValuesToExternal(fields) {
+  return Object.entries(fields).reduce((acc, [key, field]) => {
+    const {
+      value,
+      options,
+      fieldType
+    } = field;
+
+    // Transform the value based on its type
+    const transformedValue = 'enum' in value && Array.isArray(value.enum) ? value.enum // Convert enum type to string array
+    : value; // Keep range/float objects as-is
+
+    acc[key === ITEM_FILTER_NAME ? FIELD_ITEM_NAME : key] = {
+      options,
+      fieldType,
+      value: transformedValue
     };
     return acc;
   }, {});
 }
+
+// Internal helper function for component use
+function transformInternalFieldsToPublic(fields) {
+  return convertFilterValuesToExternal(fields);
+}
 const MetadataViewContainer = _ref => {
   let {
       actionBarProps,
       columns,
       currentCollection,
-      metadataTemplate
+      metadataTemplate,
+      onMetadataFilter,
+      onSortChange: onSortChangeInternal,
+      tableProps
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    formatMessage
+  } = useIntl();
   const {
     items = []
   } = currentCollection;
   const {
     initialFilterValues: initialFilterValuesProp,
-    onFilterSubmit: onFilterSubmitProp
+    onFilterSubmit
   } = actionBarProps ?? {};
-  const filterGroups = React.useMemo(() => [{
-    toggleable: true,
-    filters: metadataTemplate?.fields?.map(field => {
-      return {
-        id: `${field.key}-filter`,
-        name: field.displayName,
-        fieldType: field.type,
-        options: field.options?.map(({
-          key
-        }) => key) || [],
-        shouldRenderChip: true
-      };
-    }) || []
-  }], [metadataTemplate]);
+  const newColumns = React.useMemo(() => {
+    let clonedColumns = cloneDeep(columns);
+    const hasItemNameField = clonedColumns.some(col => col.id === FIELD_ITEM_NAME);
+    if (!hasItemNameField) {
+      clonedColumns = [{
+        allowsSorting: true,
+        id: FIELD_ITEM_NAME,
+        isItemMetadata: true,
+        isRowHeader: true,
+        minWidth: 250,
+        maxWidth: 250,
+        textValue: formatMessage(messages.name),
+        type: 'string'
+      }, ...clonedColumns];
+    }
+    return clonedColumns;
+  }, [columns, formatMessage]);
+  const filterGroups = React.useMemo(() => {
+    const clonedTemplate = cloneDeep(metadataTemplate);
+    let fields = clonedTemplate?.fields || [];
 
-  // Transform initial filter values to internal field format
+    // Check if item_name field already exists to avoid duplicates
+    const hasItemNameField = fields.some(field => field.key === ITEM_FILTER_NAME);
+    if (!hasItemNameField) {
+      fields = [{
+        key: ITEM_FILTER_NAME,
+        displayName: formatMessage(messages.name),
+        type: 'string',
+        shouldRenderChip: true
+      }, ...fields];
+    }
+    return [{
+      toggleable: true,
+      filters: fields?.map(field => {
+        return {
+          id: field.key,
+          name: field.displayName,
+          fieldType: field.type,
+          options: field.options?.map(({
+            key
+          }) => key) || [],
+          shouldRenderChip: true
+        };
+      }) || []
+    }];
+  }, [formatMessage, metadataTemplate]);
   const initialFilterValues = React.useMemo(() => transformInitialFilterValuesToInternal(initialFilterValuesProp), [initialFilterValuesProp]);
-
-  // Transform field values to public-friendly format
-  const onFilterSubmit = React.useCallback(fields => {
-    if (!onFilterSubmitProp) return;
+  const handleFilterSubmit = React.useCallback(fields => {
     const transformed = transformInternalFieldsToPublic(fields);
-    onFilterSubmitProp(transformed);
-  }, [onFilterSubmitProp]);
+    onMetadataFilter(transformed);
+    if (onFilterSubmit) {
+      onFilterSubmit(transformed);
+    }
+  }, [onFilterSubmit, onMetadataFilter]);
   const transformedActionBarProps = React.useMemo(() => {
     return _objectSpread(_objectSpread({}, actionBarProps), {}, {
       initialFilterValues,
-      onFilterSubmit,
+      onFilterSubmit: handleFilterSubmit,
       filterGroups
     });
-  }, [actionBarProps, initialFilterValues, onFilterSubmit, filterGroups]);
+  }, [actionBarProps, initialFilterValues, handleFilterSubmit, filterGroups]);
+
+  // Create a wrapper function that calls both. The wrapper function should follow the signature of onSortChange from RAC
+  const handleSortChange = React.useCallback(({
+    column,
+    direction
+  }) => {
+    // Call the internal onSortChange first
+    // API accepts asc/desc "https://developer.box.com/reference/post-metadata-queries-execute-read/"
+    if (onSortChangeInternal) {
+      const trimmedColumn = trimMetadataFieldPrefix(String(column));
+      onSortChangeInternal(trimmedColumn, direction === 'ascending' ? 'ASC' : 'DESC');
+    }
+    const onSortChangeExternal = tableProps?.onSortChange;
+    // Then call the original customer-provided onSortChange if it exists
+    // Accepts "ascending" / "descending" (https://react-spectrum.adobe.com/react-aria/Table.html)
+    if (onSortChangeExternal) {
+      onSortChangeExternal({
+        column,
+        direction
+      });
+    }
+  }, [onSortChangeInternal, tableProps]);
+
+  // Create new tableProps with our wrapper function
+  const newTableProps = _objectSpread(_objectSpread({}, tableProps), {}, {
+    onSortChange: handleSortChange
+  });
   return /*#__PURE__*/React.createElement(MetadataView, _extends({
     actionBarProps: transformedActionBarProps,
-    columns: columns,
-    items: items
+    columns: newColumns,
+    items: items,
+    tableProps: newTableProps
   }, rest));
 };
 export default MetadataViewContainer;

package/es/elements/content-explorer/MetadataViewContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataViewContainer.js","names":["React","MetadataView","transformInitialFilterValuesToInternal","publicValues","undefined","Object","entries","reduce","acc","key","value","Array","isArray","enum","transformInternalFieldsToPublic","fields","MetadataViewContainer","_ref","actionBarProps","columns","currentCollection","metadataTemplate","rest","_objectWithoutProperties","_excluded","items","initialFilterValues","initialFilterValuesProp","onFilterSubmit","onFilterSubmitProp","filterGroups","useMemo","toggleable","filters","map","field","id","name","displayName","fieldType","type","options","shouldRenderChip","useCallback","transformed","transformedActionBarProps","_objectSpread","createElement","_extends"],"sources":["../../../src/elements/content-explorer/MetadataViewContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { EnumType, FloatType, MetadataFormFieldValue, RangeType } from '@box/metadata-filter';\nimport { MetadataView, type MetadataViewProps } from '@box/metadata-view';\n\nimport type { Collection } from '../../common/types/core';\nimport type { MetadataTemplate } from '../../common/types/metadata';\n\n// Public-friendly version of MetadataFormFieldValue from @box/metadata-filter\n// (string[] for enum type, range/float objects stay the same)\ntype EnumToStringArray<T> = T extends EnumType ? string[] : T;\ntype ExternalMetadataFormFieldValue = EnumToStringArray<MetadataFormFieldValue>;\n\ntype ExternalFilterValues = Record<\n    string,\n    {\n        value: ExternalMetadataFormFieldValue;\n    }\n>;\n\ntype ActionBarProps = Omit<\n    MetadataViewProps['actionBarProps'],\n    'initialFilterValues' | 'onFilterSubmit' | 'filterGroups'\n> & {\n    initialFilterValues?: ExternalFilterValues;\n    onFilterSubmit?: (filterValues: ExternalFilterValues) => void;\n};\n\nfunction transformInitialFilterValuesToInternal(\n    publicValues?: ExternalFilterValues,\n): Record<string, { value: MetadataFormFieldValue }> | undefined {\n    if (!publicValues) return undefined;\n\n    return Object.entries(publicValues).reduce<Record<string, { value: MetadataFormFieldValue }>>(\n        (acc, [key, { value }]) => {\n            acc[key] = Array.isArray(value) ? { value: { enum: value } } : { value };\n            return acc;\n        },\n        {},\n    );\n}\n\nfunction transformInternalFieldsToPublic(\n    fields: Record<string, { value: MetadataFormFieldValue }>,\n): ExternalFilterValues {\n    return Object.entries(fields).reduce<ExternalFilterValues>((acc, [key, { value }]) => {\n        acc[key] =\n            'enum' in value && Array.isArray(value.enum)\n                ? { value: value.enum }\n                : { value: value as RangeType | FloatType };\n        return acc;\n    }, {});\n}\n\nexport interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items' | 'actionBarProps'> {\n    actionBarProps?: ActionBarProps;\n    currentCollection: Collection;\n    metadataTemplate: MetadataTemplate;\n}\n\nconst MetadataViewContainer = ({\n    actionBarProps,\n    columns,\n    currentCollection,\n    metadataTemplate,\n    ...rest\n}: MetadataViewContainerProps) => {\n    const { items = [] } = currentCollection;\n    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit: onFilterSubmitProp } = actionBarProps ?? {};\n\n    const filterGroups = React.useMemo(\n        () => [\n            {\n                toggleable: true,\n                filters:\n                    metadataTemplate?.fields?.map(field => {\n                        return {\n                            id: `${field.key}-filter`,\n                            name: field.displayName,\n                            fieldType: field.type,\n                            options: field.options?.map(({ key }) => key) || [],\n                            shouldRenderChip: true,\n                        };\n                    }) || [],\n            },\n        ],\n        [metadataTemplate],\n    );\n\n    // Transform initial filter values to internal field format\n    const initialFilterValues = React.useMemo(\n        () => transformInitialFilterValuesToInternal(initialFilterValuesProp),\n        [initialFilterValuesProp],\n    );\n\n    // Transform field values to public-friendly format\n    const onFilterSubmit = React.useCallback(\n        (fields: Record<string, { value: MetadataFormFieldValue }>) => {\n            if (!onFilterSubmitProp) return;\n            const transformed = transformInternalFieldsToPublic(fields);\n            onFilterSubmitProp(transformed);\n        },\n        [onFilterSubmitProp],\n    );\n\n    const transformedActionBarProps = React.useMemo(() => {\n        return {\n            ...actionBarProps,\n            initialFilterValues,\n            onFilterSubmit,\n            filterGroups,\n        };\n    }, [actionBarProps, initialFilterValues, onFilterSubmit, filterGroups]);\n\n    return <MetadataView actionBarProps={transformedActionBarProps} columns={columns} items={items} {...rest} />;\n};\n\nexport default MetadataViewContainer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MetadataViewContainer.js","names":["React","useIntl","MetadataView","cloneDeep","FIELD_ITEM_NAME","messages","ITEM_FILTER_NAME","trimMetadataFieldPrefix","column","startsWith","split","length","parts","slice","join","transformInitialFilterValuesToInternal","publicValues","undefined","Object","entries","reduce","acc","key","value","Array","isArray","enum","convertFilterValuesToExternal","fields","field","options","fieldType","transformedValue","transformInternalFieldsToPublic","MetadataViewContainer","_ref","actionBarProps","columns","currentCollection","metadataTemplate","onMetadataFilter","onSortChange","onSortChangeInternal","tableProps","rest","_objectWithoutProperties","_excluded","formatMessage","items","initialFilterValues","initialFilterValuesProp","onFilterSubmit","newColumns","useMemo","clonedColumns","hasItemNameField","some","col","id","allowsSorting","isItemMetadata","isRowHeader","minWidth","maxWidth","textValue","name","type","filterGroups","clonedTemplate","displayName","shouldRenderChip","toggleable","filters","map","handleFilterSubmit","useCallback","transformed","transformedActionBarProps","_objectSpread","handleSortChange","direction","trimmedColumn","String","onSortChangeExternal","newTableProps","createElement","_extends"],"sources":["../../../src/elements/content-explorer/MetadataViewContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIntl } from 'react-intl';\nimport {\n    EnumType,\n    FloatType,\n    MetadataFormFieldValue,\n    MetadataTemplateFieldOption,\n    RangeType,\n} from '@box/metadata-filter';\nimport {\n    MetadataView,\n    type FilterValues,\n    type MetadataViewProps,\n    type MetadataFieldType,\n    type Column,\n} from '@box/metadata-view';\nimport { type Key } from '@react-types/shared';\nimport cloneDeep from 'lodash/cloneDeep';\n\nimport { SortDescriptor } from 'react-aria-components';\nimport { FIELD_ITEM_NAME } from '../../constants';\nimport type { Collection } from '../../common/types/core';\nimport type { MetadataTemplate, MetadataTemplateField } from '../../common/types/metadata';\n\nimport messages from '../common/messages';\n\n// Public-friendly version of MetadataFormFieldValue from @box/metadata-filter\n// (string[] for enum type, range/float objects stay the same)\ntype EnumToStringArray<T> = T extends EnumType ? string[] : T;\ntype ExternalMetadataFormFieldValue = EnumToStringArray<MetadataFormFieldValue>;\n\nexport type ExternalFilterValues = Record<\n    string,\n    {\n        options?: FilterValues[string]['options'] | MetadataTemplateFieldOption[];\n        fieldType: FilterValues[string]['fieldType'] | MetadataFieldType;\n        value: ExternalMetadataFormFieldValue;\n    }\n>;\n\ntype ActionBarProps = Omit<\n    MetadataViewProps['actionBarProps'],\n    'initialFilterValues' | 'onFilterSubmit' | 'filterGroups'\n> & {\n    initialFilterValues?: ExternalFilterValues;\n    onFilterSubmit?: (filterValues: ExternalFilterValues) => void;\n};\n\nconst ITEM_FILTER_NAME = 'item_name';\n\n/**\n * Helper function to trim metadataFieldNamePrefix from column names\n * For example: 'metadata.enterprise_1515946.mdViewTemplate1.industry' -> 'industry'\n */\nfunction trimMetadataFieldPrefix(column: string): string {\n    // Check if the column starts with 'metadata.' and contains at least 2 dots\n    if (column.startsWith('metadata.') && column.split('.').length >= 3) {\n        // Split by dots and take everything after the first 3 parts\n        // metadata.enterprise_1515946.mdViewTemplate1.industry -> industry\n        const parts = column.split('.');\n        return parts.slice(3).join('.');\n    }\n    return column;\n}\n\nfunction transformInitialFilterValuesToInternal(\n    publicValues?: ExternalFilterValues,\n): Record<string, { value: MetadataFormFieldValue }> | undefined {\n    if (!publicValues) return undefined;\n\n    return Object.entries(publicValues).reduce<Record<string, { value: MetadataFormFieldValue }>>(\n        (acc, [key, { value }]) => {\n            acc[key] = Array.isArray(value) ? { value: { enum: value } } : { value };\n            return acc;\n        },\n        {},\n    );\n}\n\nexport function convertFilterValuesToExternal(fields: FilterValues): ExternalFilterValues {\n    return Object.entries(fields).reduce<ExternalFilterValues>((acc, [key, field]) => {\n        const { value, options, fieldType } = field;\n\n        // Transform the value based on its type\n        const transformedValue: ExternalMetadataFormFieldValue =\n            'enum' in value && Array.isArray(value.enum)\n                ? value.enum // Convert enum type to string array\n                : (value as RangeType | FloatType); // Keep range/float objects as-is\n\n        acc[key === ITEM_FILTER_NAME ? FIELD_ITEM_NAME : key] = {\n            options,\n            fieldType,\n            value: transformedValue,\n        };\n\n        return acc;\n    }, {});\n}\n\n// Internal helper function for component use\nfunction transformInternalFieldsToPublic(fields: FilterValues): ExternalFilterValues {\n    return convertFilterValuesToExternal(fields);\n}\n\nexport interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items' | 'actionBarProps'> {\n    actionBarProps?: ActionBarProps;\n    currentCollection: Collection;\n    metadataTemplate: MetadataTemplate;\n    onMetadataFilter: (fields: ExternalFilterValues) => void;\n    /* Internally controlled onSortChange prop for the MetadataView component. */\n    onSortChange?: (sortBy: Key, sortDirection: string) => void;\n}\n\nconst MetadataViewContainer = ({\n    actionBarProps,\n    columns,\n    currentCollection,\n    metadataTemplate,\n    onMetadataFilter,\n    onSortChange: onSortChangeInternal,\n    tableProps,\n    ...rest\n}: MetadataViewContainerProps) => {\n    const { formatMessage } = useIntl();\n    const { items = [] } = currentCollection;\n    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit } = actionBarProps ?? {};\n\n    const newColumns = React.useMemo(() => {\n        let clonedColumns = cloneDeep(columns);\n\n        const hasItemNameField = clonedColumns.some((col: Column) => col.id === FIELD_ITEM_NAME);\n\n        if (!hasItemNameField) {\n            clonedColumns = [\n                {\n                    allowsSorting: true,\n                    id: FIELD_ITEM_NAME,\n                    isItemMetadata: true,\n                    isRowHeader: true,\n                    minWidth: 250,\n                    maxWidth: 250,\n                    textValue: formatMessage(messages.name),\n                    type: 'string',\n                },\n                ...clonedColumns,\n            ];\n        }\n\n        return clonedColumns;\n    }, [columns, formatMessage]);\n\n    const filterGroups = React.useMemo(() => {\n        const clonedTemplate = cloneDeep(metadataTemplate);\n        let fields = clonedTemplate?.fields || [];\n\n        // Check if item_name field already exists to avoid duplicates\n        const hasItemNameField = fields.some((field: MetadataTemplateField) => field.key === ITEM_FILTER_NAME);\n\n        if (!hasItemNameField) {\n            fields = [\n                {\n                    key: ITEM_FILTER_NAME,\n                    displayName: formatMessage(messages.name),\n                    type: 'string',\n                    shouldRenderChip: true,\n                },\n                ...fields,\n            ];\n        }\n\n        return [\n            {\n                toggleable: true,\n                filters:\n                    fields?.map(field => {\n                        return {\n                            id: field.key,\n                            name: field.displayName,\n                            fieldType: field.type,\n                            options: field.options?.map(({ key }) => key) || [],\n                            shouldRenderChip: true,\n                        };\n                    }) || [],\n            },\n        ];\n    }, [formatMessage, metadataTemplate]);\n\n    const initialFilterValues = React.useMemo(\n        () => transformInitialFilterValuesToInternal(initialFilterValuesProp),\n        [initialFilterValuesProp],\n    );\n\n    const handleFilterSubmit = React.useCallback(\n        (fields: FilterValues) => {\n            const transformed = transformInternalFieldsToPublic(fields);\n            onMetadataFilter(transformed);\n            if (onFilterSubmit) {\n                onFilterSubmit(transformed);\n            }\n        },\n        [onFilterSubmit, onMetadataFilter],\n    );\n\n    const transformedActionBarProps = React.useMemo(() => {\n        return {\n            ...actionBarProps,\n            initialFilterValues,\n            onFilterSubmit: handleFilterSubmit,\n            filterGroups,\n        };\n    }, [actionBarProps, initialFilterValues, handleFilterSubmit, filterGroups]);\n\n    // Create a wrapper function that calls both. The wrapper function should follow the signature of onSortChange from RAC\n    const handleSortChange = React.useCallback(\n        ({ column, direction }: SortDescriptor) => {\n            // Call the internal onSortChange first\n            // API accepts asc/desc \"https://developer.box.com/reference/post-metadata-queries-execute-read/\"\n            if (onSortChangeInternal) {\n                const trimmedColumn = trimMetadataFieldPrefix(String(column));\n                onSortChangeInternal(trimmedColumn, direction === 'ascending' ? 'ASC' : 'DESC');\n            }\n            const onSortChangeExternal = tableProps?.onSortChange;\n            // Then call the original customer-provided onSortChange if it exists\n            // Accepts \"ascending\" / \"descending\" (https://react-spectrum.adobe.com/react-aria/Table.html)\n            if (onSortChangeExternal) {\n                onSortChangeExternal({\n                    column,\n                    direction,\n                });\n            }\n        },\n        [onSortChangeInternal, tableProps],\n    );\n\n    // Create new tableProps with our wrapper function\n    const newTableProps = {\n        ...tableProps,\n        onSortChange: handleSortChange,\n    };\n\n    return (\n        <MetadataView\n            actionBarProps={transformedActionBarProps}\n            columns={newColumns}\n            items={items}\n            tableProps={newTableProps}\n            {...rest}\n        />\n    );\n};\n\nexport default MetadataViewContainer;\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,36 +18,14 @@ const metadataQuery = {
   // query_params: { arg1: 'value' },
 
   ancestor_folder_id: '0',
-  fields: [`name`, `${metadataSourceFieldName}.industry`, `${metadataSourceFieldName}.last_contacted_at`, `${metadataSourceFieldName}.role`]
+  fields: [`${metadataSourceFieldName}.industry`, `${metadataSourceFieldName}.last_contacted_at`, `${metadataSourceFieldName}.role`, `${metadataSourceFieldName}.number`]
 };
-const fieldsToShow = [{
-  key: `name`
-}, {
-  key: `${metadataSourceFieldName}.industry`,
-  canEdit: true
-}, {
-  key: `${metadataSourceFieldName}.last_contacted_at`,
-  canEdit: true
-}, {
-  key: `${metadataSourceFieldName}.role`,
-  canEdit: true
-}];
 const columns = mockSchema.fields.map(field => {
-  if (field.key === 'name') {
-    return {
-      textValue: field.displayName,
-      id: 'name',
-      type: 'string',
-      allowsSorting: true,
-      minWidth: 250,
-      maxWidth: 250,
-      isRowHeader: true
-    };
-  }
   if (field.type === 'date') {
     return {
       textValue: field.displayName,
       id: `${metadataSourceFieldName}.${field.key}`,
+      key: `${metadataSourceFieldName}.${field.key}`,
       type: field.type,
       allowsSorting: true,
       minWidth: 200,
@@ -61,6 +39,7 @@ const columns = mockSchema.fields.map(field => {
   return {
     textValue: field.displayName,
     id: `${metadataSourceFieldName}.${field.key}`,
+    key: `${metadataSourceFieldName}.${field.key}`,
     type: field.type,
     allowsSorting: true,
     minWidth: 200,
@@ -78,7 +57,6 @@ export const metadataView = {
       }
     },
     metadataQuery,
-    fieldsToShow,
     defaultView,
     features: {
       contentExplorer: {

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

@@ -1 +1 @@
-{"version":3,"file":"MetadataView.stories.js","names":["React","get","http","HttpResponse","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","EID","templateName","metadataSource","metadataSourceFieldName","metadataQuery","from","ancestor_folder_id","fields","fieldsToShow","key","canEdit","columns","map","field","textValue","displayName","id","type","allowsSorting","minWidth","maxWidth","isRowHeader","cellRenderer","item","column","dateValue","Date","toLocaleDateString","defaultView","metadataView","args","metadataViewProps","tableProps","isSelectAllEnabled","features","contentExplorer","metadataViewV2","render","createElement","style","padding","border","height","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json"],"sources":["../../../../src/elements/content-explorer/stories/MetadataView.stories.tsx"],"sourcesContent":["import React from 'react';\nimport get from 'lodash/get';\nimport { http, HttpResponse } from 'msw';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport ContentExplorer from '../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../constants';\nimport { mockMetadata, mockSchema } from '../../common/__mocks__/mockMetadata';\nimport { mockRootFolder } from '../../common/__mocks__/mockRootFolder';\n\nconst EID = '0';\nconst templateName = 'templateName';\nconst metadataSource = `enterprise_${EID}.${templateName}`;\nconst metadataSourceFieldName = `metadata.${metadataSource}`;\n\nconst metadataQuery = {\n    from: metadataSource,\n\n    // // Filter items in the folder by existing metadata key\n    // query: 'key = :arg1',\n    //\n    // // Display items with value\n    // query_params: { arg1: 'value' },\n\n    ancestor_folder_id: '0',\n    fields: [\n        `name`,\n        `${metadataSourceFieldName}.industry`,\n        `${metadataSourceFieldName}.last_contacted_at`,\n        `${metadataSourceFieldName}.role`,\n    ],\n};\n\nconst fieldsToShow = [\n    { key: `name` },\n    { key: `${metadataSourceFieldName}.industry`, canEdit: true },\n    { key: `${metadataSourceFieldName}.last_contacted_at`, canEdit: true },\n    { key: `${metadataSourceFieldName}.role`, canEdit: true },\n];\n\nconst columns = mockSchema.fields.map(field => {\n    if (field.key === 'name') {\n        return {\n            textValue: field.displayName,\n            id: 'name',\n            type: 'string',\n            allowsSorting: true,\n            minWidth: 250,\n            maxWidth: 250,\n            isRowHeader: true,\n        };\n    }\n\n    if (field.type === 'date') {\n        return {\n            textValue: field.displayName,\n            id: `${metadataSourceFieldName}.${field.key}`,\n            type: field.type,\n            allowsSorting: true,\n            minWidth: 200,\n            maxWidth: 200,\n            cellRenderer: (item, column) => {\n                const dateValue = get(item, column.id);\n                return dateValue ? new Date(dateValue).toLocaleDateString() : '';\n            },\n        };\n    }\n\n    return {\n        textValue: field.displayName,\n        id: `${metadataSourceFieldName}.${field.key}`,\n        type: field.type,\n        allowsSorting: true,\n        minWidth: 200,\n        maxWidth: 200,\n    };\n});\nconst defaultView = 'metadata'; // Required prop to paint the metadata view. If not provided, you'll get regular folder view.\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n        },\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n        features: {\n            contentExplorer: {\n                metadataViewV2: true,\n            },\n        },\n    },\n    render: args => {\n        return (\n            <div style={{ padding: '50px', border: '1px solid #ccc', height: '500px' }}>\n                <ContentExplorer {...args} />\n            </div>\n        );\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/MetadataView',\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":[]}
+{"version":3,"file":"MetadataView.stories.js","names":["React","get","http","HttpResponse","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","EID","templateName","metadataSource","metadataSourceFieldName","metadataQuery","from","ancestor_folder_id","fields","columns","map","field","type","textValue","displayName","id","key","allowsSorting","minWidth","maxWidth","cellRenderer","item","column","dateValue","Date","toLocaleDateString","defaultView","metadataView","args","metadataViewProps","tableProps","isSelectAllEnabled","features","contentExplorer","metadataViewV2","render","createElement","style","padding","border","height","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json"],"sources":["../../../../src/elements/content-explorer/stories/MetadataView.stories.tsx"],"sourcesContent":["import React from 'react';\nimport get from 'lodash/get';\nimport { http, HttpResponse } from 'msw';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport ContentExplorer from '../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../constants';\nimport { mockMetadata, mockSchema } from '../../common/__mocks__/mockMetadata';\nimport { mockRootFolder } from '../../common/__mocks__/mockRootFolder';\n\nconst EID = '0';\nconst templateName = 'templateName';\nconst metadataSource = `enterprise_${EID}.${templateName}`;\nconst metadataSourceFieldName = `metadata.${metadataSource}`;\n\nconst metadataQuery = {\n    from: metadataSource,\n\n    // // Filter items in the folder by existing metadata key\n    // query: 'key = :arg1',\n    //\n    // // Display items with value\n    // query_params: { arg1: 'value' },\n\n    ancestor_folder_id: '0',\n    fields: [\n        `${metadataSourceFieldName}.industry`,\n        `${metadataSourceFieldName}.last_contacted_at`,\n        `${metadataSourceFieldName}.role`,\n        `${metadataSourceFieldName}.number`,\n    ],\n};\n\nconst columns = mockSchema.fields.map(field => {\n    if (field.type === 'date') {\n        return {\n            textValue: field.displayName,\n            id: `${metadataSourceFieldName}.${field.key}`,\n            key: `${metadataSourceFieldName}.${field.key}`,\n            type: field.type,\n            allowsSorting: true,\n            minWidth: 200,\n            maxWidth: 200,\n            cellRenderer: (item, column) => {\n                const dateValue = get(item, column.id);\n                return dateValue ? new Date(dateValue).toLocaleDateString() : '';\n            },\n        };\n    }\n\n    return {\n        textValue: field.displayName,\n        id: `${metadataSourceFieldName}.${field.key}`,\n        key: `${metadataSourceFieldName}.${field.key}`,\n        type: field.type,\n        allowsSorting: true,\n        minWidth: 200,\n        maxWidth: 200,\n    };\n});\nconst defaultView = 'metadata'; // Required prop to paint the metadata view. If not provided, you'll get regular folder view.\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n        },\n        metadataQuery,\n        defaultView,\n        features: {\n            contentExplorer: {\n                metadataViewV2: true,\n            },\n        },\n    },\n    render: args => {\n        return (\n            <div style={{ padding: '50px', border: '1px solid #ccc', height: '500px' }}>\n                <ContentExplorer {...args} />\n            </div>\n        );\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/MetadataView',\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/elements/content-explorer/stories/tests/MetadataView-visual.stories.js

@@ -8,6 +8,7 @@ import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/ind
 import { Sign } from '@box/blueprint-web-assets/icons/Line';
 import { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';
 import noop from 'lodash/noop';
+import orderBy from 'lodash/orderBy';
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
@@ -33,15 +34,11 @@ const metadataQuery = {
   }],
   fields: [
   // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field
-  ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`), 'name']
+  ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`)]
 };
 
 // Used for metadata view v1
 const fieldsToShow = [{
-  key: `${metadataFieldNamePrefix}.name`,
-  canEdit: false,
-  displayName: 'Alias'
-}, {
   key: `${metadataFieldNamePrefix}.industry`,
   canEdit: true
 }, {
@@ -53,15 +50,7 @@ const fieldsToShow = [{
 }];
 
 // Used for metadata view v2
-const columns = [{
-  // Always include the name column
-  textValue: 'Name',
-  id: 'name',
-  type: 'string',
-  allowsSorting: true,
-  minWidth: 150,
-  maxWidth: 150
-}, ...mockSchema.fields.map(field => ({
+const columns = [...mockSchema.fields.map(field => ({
   textValue: field.displayName,
   id: `${metadataFieldNamePrefix}.${field.key}`,
   type: field.type,
@@ -131,25 +120,20 @@ const metadataViewV2WithBulkItemActions = _objectSpread(_objectSpread({}, metada
 export const metadataViewV2 = {
   args: metadataViewV2ElementProps
 };
-
-// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented
 export const metadataViewV2SortsFromHeader = {
   args: metadataViewV2ElementProps,
   play: async ({
     canvas
   }) => {
-    await waitFor(() => {
-      expect(canvas.getByRole('row', {
-        name: /Industry/i
-      })).toBeInTheDocument();
-    });
-    const firstRow = canvas.getByRole('row', {
-      name: /Industry/i
-    });
-    const industryHeader = within(firstRow).getByRole('columnheader', {
+    const industryHeader = await canvas.findByRole('columnheader', {
       name: 'Industry'
     });
-    userEvent.click(industryHeader);
+    expect(industryHeader).toBeInTheDocument();
+    const firstRow = await canvas.findByRole('row', {
+      name: /Child 2/i
+    });
+    expect(firstRow).toBeInTheDocument();
+    await userEvent.click(industryHeader);
   }
 };
 export const metadataViewV2WithCustomActions = {
@@ -173,13 +157,13 @@ export const metadataViewV2WithCustomActions = {
 };
 const initialFilterActionBarProps = {
   initialFilterValues: {
-    'industry-filter': {
+    industry: {
       value: ['Legal']
     },
     'mimetype-filter': {
       value: ['boxnoteType', 'documentType', 'threedType']
     },
-    'role-filter': {
+    role: {
       value: ['Developer', 'Business Owner', 'Marketing']
     }
   }
@@ -263,6 +247,43 @@ export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu = {
     expect(downloadAction).toBeInTheDocument();
   }
 };
+export const sidePanelOpenWithMultipleItemsSelected = {
+  args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
+    metadataViewProps: {
+      columns,
+      tableProps: {
+        isSelectAllEnabled: true
+      }
+    }
+  }),
+  play: async ({
+    canvas
+  }) => {
+    await waitFor(() => {
+      expect(canvas.getByRole('row', {
+        name: /Child 2/i
+      })).toBeInTheDocument();
+    });
+
+    // Select the first row by clicking its checkbox
+    const firstItem = canvas.getByRole('row', {
+      name: /Child 2/i
+    });
+    const checkbox = within(firstItem).getByRole('checkbox');
+    await userEvent.click(checkbox);
+
+    // Select the second row by clicking its checkbox
+    const secondItem = canvas.getAllByRole('row', {
+      name: /Child 1/i
+    })[0];
+    const secondCheckbox = within(secondItem).getByRole('checkbox');
+    await userEvent.click(secondCheckbox);
+    const metadataButton = canvas.getByRole('button', {
+      name: 'Metadata'
+    });
+    await userEvent.click(metadataButton);
+  }
+};
 const meta = {
   title: 'Elements/ContentExplorer/tests/MetadataView/visual',
   component: ContentExplorer,
@@ -273,7 +294,22 @@ const meta = {
   },
   parameters: {
     msw: {
-      handlers: [http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {
+      handlers: [
+      // Note that the Metadata API backend normally handles the sorting. The mocks below simulate the sorting for specific cases, but may not 100% accurately reflect the backend behavior.
+      http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({
+        request
+      }) => {
+        const body = await request.clone().json();
+        const orderByDirection = body.order_by[0].direction;
+        const orderByFieldKey = body.order_by[0].field_key;
+
+        // Hardcoded case for sorting by industry
+        if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {
+          const sortedMetadata = orderBy(mockMetadata.entries, 'metadata.enterprise_0.templateName.industry', 'asc');
+          return HttpResponse.json(_objectSpread(_objectSpread({}, mockMetadata), {}, {
+            entries: sortedMetadata
+          }));
+        }
         return HttpResponse.json(mockMetadata);
       }), http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
         return HttpResponse.json(mockSchema);

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

@@ -1 +1 @@
-{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","Download","SignMeOthers","Sign","expect","fn","userEvent","waitFor","within","screen","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","order_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowsSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithInlineCustomActionsElementProps","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","metadataViewV2WithBulkItemActions","bulkItemActions","metadataViewV2SortsFromHeader","play","canvas","getByRole","name","toBeInTheDocument","firstRow","industryHeader","click","metadataViewV2WithCustomActions","ellipsesButton","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","sidePanelOpenWithSingleItemSelected","checkbox","metadataButton","metadataViewV2WithBulkItemActionMenuShowsItemActionMenu","findByRole","ellipsisButton","downloadAction","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 { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';\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    order_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        allowsSorting: 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        allowsSorting: 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\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\nconst metadataViewV2WithInlineCustomActionsElementProps = {\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\nconst metadataViewV2WithBulkItemActions = {\n    ...metadataViewV2ElementProps,\n    bulkItemActions: [\n        {\n            label: 'Download',\n            onClick: fn(),\n        },\n    ],\n    metadataViewProps: {\n        columns,\n        tableProps: {\n            isSelectAllEnabled: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\n// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented\nexport const metadataViewV2SortsFromHeader: Story = {\n    args: metadataViewV2ElementProps,\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Industry/i })).toBeInTheDocument();\n        });\n\n        const firstRow = canvas.getByRole('row', { name: /Industry/i });\n        const industryHeader = within(firstRow).getByRole('columnheader', { name: 'Industry' });\n        userEvent.click(industryHeader);\n    },\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: metadataViewV2WithInlineCustomActionsElementProps,\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\nexport const sidePanelOpenWithSingleItemSelected: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n\n        // Select the first row by clicking its checkbox\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });\n        await userEvent.click(metadataButton);\n    },\n};\n\nexport const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {\n    args: metadataViewV2WithBulkItemActions,\n    play: async ({ canvas }) => {\n        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });\n        expect(firstRow).toBeInTheDocument();\n\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });\n        expect(ellipsisButton).toBeInTheDocument();\n        await userEvent.click(ellipsisButton);\n\n        const downloadAction = screen.getByRole('menuitem', { name: 'Download' });\n        expect(downloadAction).toBeInTheDocument();\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\ntype Story = StoryObj<typeof meta>;\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","Download","SignMeOthers","Sign","expect","fn","userEvent","waitFor","within","screen","noop","orderBy","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","order_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","columns","textValue","displayName","id","type","allowsSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithInlineCustomActionsElementProps","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","metadataViewV2WithBulkItemActions","bulkItemActions","metadataViewV2SortsFromHeader","play","canvas","industryHeader","findByRole","name","toBeInTheDocument","firstRow","click","metadataViewV2WithCustomActions","getByRole","ellipsesButton","initialFilterActionBarProps","initialFilterValues","industry","value","role","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","sidePanelOpenWithSingleItemSelected","checkbox","metadataButton","metadataViewV2WithBulkItemActionMenuShowsItemActionMenu","ellipsisButton","downloadAction","sidePanelOpenWithMultipleItemsSelected","firstItem","secondItem","getAllByRole","secondCheckbox","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","request","body","clone","json","orderByDirection","orderByFieldKey","sortedMetadata","entries","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 { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';\n\nimport noop from 'lodash/noop';\nimport orderBy from 'lodash/orderBy';\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    order_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    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\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    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowsSorting: 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\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\nconst metadataViewV2WithInlineCustomActionsElementProps = {\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\nconst metadataViewV2WithBulkItemActions = {\n    ...metadataViewV2ElementProps,\n    bulkItemActions: [\n        {\n            label: 'Download',\n            onClick: fn(),\n        },\n    ],\n    metadataViewProps: {\n        columns,\n        tableProps: {\n            isSelectAllEnabled: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2SortsFromHeader: Story = {\n    args: metadataViewV2ElementProps,\n    play: async ({ canvas }) => {\n        const industryHeader = await canvas.findByRole('columnheader', { name: 'Industry' });\n        expect(industryHeader).toBeInTheDocument();\n\n        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });\n        expect(firstRow).toBeInTheDocument();\n\n        await userEvent.click(industryHeader);\n    },\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: metadataViewV2WithInlineCustomActionsElementProps,\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: { value: ['Legal'] },\n        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },\n        role: { 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\nexport const sidePanelOpenWithSingleItemSelected: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n\n        // Select the first row by clicking its checkbox\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });\n        await userEvent.click(metadataButton);\n    },\n};\n\nexport const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {\n    args: metadataViewV2WithBulkItemActions,\n    play: async ({ canvas }) => {\n        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });\n        expect(firstRow).toBeInTheDocument();\n\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });\n        expect(ellipsisButton).toBeInTheDocument();\n        await userEvent.click(ellipsisButton);\n\n        const downloadAction = screen.getByRole('menuitem', { name: 'Download' });\n        expect(downloadAction).toBeInTheDocument();\n    },\n};\n\nexport const sidePanelOpenWithMultipleItemsSelected: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n        },\n    },\n\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n\n        // Select the first row by clicking its checkbox\n        const firstItem = canvas.getByRole('row', { name: /Child 2/i });\n        const checkbox = within(firstItem).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        // Select the second row by clicking its checkbox\n        const secondItem = canvas.getAllByRole('row', { name: /Child 1/i })[0];\n        const secondCheckbox = within(secondItem).getByRole('checkbox');\n        await userEvent.click(secondCheckbox);\n\n        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });\n        await userEvent.click(metadataButton);\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                // Note that the Metadata API backend normally handles the sorting. The mocks below simulate the sorting for specific cases, but may not 100% accurately reflect the backend behavior.\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({ request }) => {\n                    const body = await request.clone().json();\n                    const orderByDirection = body.order_by[0].direction;\n                    const orderByFieldKey = body.order_by[0].field_key;\n\n                    // Hardcoded case for sorting by industry\n                    if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {\n                        const sortedMetadata = orderBy(\n                            mockMetadata.entries,\n                            'metadata.enterprise_0.templateName.industry',\n                            'asc',\n                        );\n                        return HttpResponse.json({ ...mockMetadata, entries: sortedMetadata });\n                    }\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\ntype Story = StoryObj<typeof meta>;\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}