feat(metadata-view): default sortBy

src/constants.js

@@ -168,6 +168,19 @@ export const FIELD_CLASSIFICATION: 'classification' = 'classification';
 export const FIELD_ENTERPRISE: 'enterprise' = 'enterprise';
 export const FIELD_HOSTNAME: 'hostname' = 'hostname';
 
+/* ----------------------- Item-Prefixed Fields for MD Query API --------------------------- */
+const ITEM_PREFIX = 'item.';
+export const FIELD_ITEM_TYPE = `${ITEM_PREFIX}${FIELD_TYPE}`;
+export const FIELD_ITEM_NAME = `${ITEM_PREFIX}${FIELD_NAME}`;
+export const FIELD_ITEM_DESCRIPTION = `${ITEM_PREFIX}${FIELD_DESCRIPTION}`;
+export const FIELD_ITEM_EXTENSION = `${ITEM_PREFIX}${FIELD_EXTENSION}`;
+export const FIELD_ITEM_OWNED_BY = `${ITEM_PREFIX}${FIELD_OWNED_BY}`;
+export const FIELD_ITEM_CREATED_AT = `${ITEM_PREFIX}${FIELD_CREATED_AT}`;
+export const FIELD_ITEM_MODIFIED_AT = `${ITEM_PREFIX}${FIELD_MODIFIED_AT}`;
+export const FIELD_ITEM_CONTENT_CREATED_AT = `${ITEM_PREFIX}${FIELD_CONTENT_CREATED_AT}`;
+export const FIELD_ITEM_CONTENT_MODIFIED_AT = `${ITEM_PREFIX}${FIELD_CONTENT_MODIFIED_AT}`;
+export const FIELD_ITEM_QUICK_SEARCH_CONTENT = `${ITEM_PREFIX}quick_search_content`;
+
 /* ----------------------- Permissions --------------------------- */
 export const PERMISSION_CAN_COMMENT = 'can_comment';
 export const PERMISSION_CAN_CREATE_ANNOTATIONS = 'can_create_annotations';

src/elements/content-explorer/ContentExplorer.tsx

@@ -49,6 +49,7 @@ import {
     DEFAULT_HOSTNAME_STATIC,
     DEFAULT_SEARCH_DEBOUNCE,
     SORT_ASC,
+    FIELD_ITEM_NAME,
     FIELD_NAME,
     FIELD_PERMISSIONS_CAN_SHARE,
     FIELD_SHARED_LINK,
@@ -454,12 +455,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             metadataQueryClone.limit = DEFAULT_PAGE_SIZE;
         }
 
-        metadataQueryClone.order_by = [
-            {
-                field_key: sortBy,
-                direction: sortDirection,
-            },
-        ];
         // Reset search state, the view and show busy indicator
         this.setState({
             searchQuery: '',
@@ -468,8 +463,22 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         });
 
         if (isFeatureEnabled(features, 'contentExplorer.metadataViewV2')) {
+            metadataQueryClone.order_by = [
+                {
+                    // Default to the prefixed name field for metadata view v2 only, while not touching the default sortBy for other views.
+                    field_key: sortBy === FIELD_NAME ? FIELD_ITEM_NAME : sortBy,
+                    direction: sortDirection,
+                },
+            ];
+
             this.metadataQueryAPIHelper = new MetadataQueryAPIHelperV2(this.api);
         } else {
+            metadataQueryClone.order_by = [
+                {
+                    field_key: sortBy,
+                    direction: sortDirection,
+                },
+            ];
             this.metadataQueryAPIHelper = new MetadataQueryAPIHelper(this.api);
         }
 

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

@@ -21,7 +21,7 @@ const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
 const metadataQuery = {
     from: metadataScopeAndKey,
     ancestor_folder_id: '0',
-    sort_by: [
+    order_by: [
         {
             field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema
             direction: 'asc',
@@ -49,15 +49,15 @@ const columns = [
         textValue: 'Name',
         id: 'name',
         type: 'string',
-        allowSorting: true,
+        allowsSorting: true,
         minWidth: 150,
         maxWidth: 150,
     },
     ...mockSchema.fields.map(field => ({
         textValue: field.displayName,
         id: `${metadataFieldNamePrefix}.${field.key}`,
         type: field.type,
-        allowSorting: true,
+        allowsSorting: true,
         minWidth: 150,
         maxWidth: 150,
     })),
@@ -94,6 +94,20 @@ export const metadataViewV2: Story = {
     args: metadataViewV2ElementProps,
 };
 
+// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented
+export const metadataViewV2SortsFromHeader: Story = {
+    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', { name: 'Industry' });
+        userEvent.click(industryHeader);
+    },
+};
+
 export const metadataViewV2WithCustomActions: Story = {
     args: {
         ...metadataViewV2ElementProps,