fix(content-explorer): Fix flaky SubheaderV2 folder title

Author: jfox-box

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,20 +389,40 @@ 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,
                 percentLoaded: 100,
             },
             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
      *

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);
+                }),
             ],
         },
     },

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);
+                }),
             ],
         },
     },