chore(metadata-view): streamline storybook (#4212)

* chore(metadata-view): streamline storybook

* feat(metadata-view): streamline storybook

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: jpan-box

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

@@ -5,45 +5,61 @@ import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
 
-const EID = '0';
-const templateName = 'templateName';
-const metadataSource = `enterprise_${EID}.${templateName}`;
-const metadataSourceFieldName = `metadata.${metadataSource}`;
+// 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;
 
-const metadataQuery = {
-    from: metadataSource,
-
-    // // Filter items in the folder by existing metadata key
-    // query: 'key = :arg1',
-    //
-    // // Display items with value
-    // query_params: { arg1: 'value' },
+const metadataScopeAndKey = `${templateScope}.${templateKey}`;
+const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
 
-    ancestor_folder_id: '313259567207',
+// This is the body of the metadata query API call.
+// https://developer.box.com/guides/metadata/queries/syntax/
+const metadataQuery = {
+    from: metadataScopeAndKey,
+    ancestor_folder_id: '0',
+    sort_by: [
+        {
+            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema
+            direction: 'asc',
+        },
+    ],
     fields: [
-        `${metadataSourceFieldName}.name`,
-        `${metadataSourceFieldName}.industry`,
-        `${metadataSourceFieldName}.last_contacted_at`,
-        `${metadataSourceFieldName}.role`,
+        // 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',
     ],
 };
 
+// Used for metadata view v1
 const fieldsToShow = [
-    { key: `${metadataSourceFieldName}.name`, canEdit: false, displayName: 'Alias' },
-    { key: `${metadataSourceFieldName}.industry`, canEdit: true },
-    { key: `${metadataSourceFieldName}.last_contacted_at`, canEdit: true },
-    { key: `${metadataSourceFieldName}.role`, canEdit: true },
+    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },
+    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },
+    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },
+    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },
+];
+
+// Used for metadata view v2
+const columns = [
+    {
+        // Always include the name column
+        textValue: 'Name',
+        id: 'name',
+        type: 'string',
+        allowSorting: true,
+        minWidth: 150,
+        maxWidth: 150,
+    },
+    ...mockSchema.fields.map(field => ({
+        textValue: field.displayName,
+        id: `${metadataFieldNamePrefix}.${field.key}`,
+        type: field.type,
+        allowSorting: true,
+        minWidth: 150,
+        maxWidth: 150,
+    })),
 ];
 
-const columns = mockSchema.fields.map(field => ({
-    textValue: field.displayName,
-    id: `${metadataSourceFieldName}.${field.key}`,
-    type: field.type,
-    allowSorting: true,
-    minWidth: 150,
-    maxWidth: 150,
-}));
-const defaultView = 'metadata'; // Required prop to paint the metadata view. If not provided, you'll get regular folder view.
+// Switches ContentExplorer to use Metadata View over standard, folder-based view.
+const defaultView = 'metadata';
 
 type Story = StoryObj<typeof ContentExplorer>;
 
@@ -55,7 +71,7 @@ export const metadataView: Story = {
     },
 };
 
-export const withNewMetadataView: Story = {
+export const metadataViewV2: Story = {
     args: {
         metadataViewProps: {
             columns,