diff --git a/src/elements/content-explorer/ContentExplorer.tsx b/src/elements/content-explorer/ContentExplorer.tsx index 404253121f..d3d05964ba 100644 --- a/src/elements/content-explorer/ContentExplorer.tsx +++ b/src/elements/content-explorer/ContentExplorer.tsx @@ -338,7 +338,7 @@ class ContentExplorer extends Component { * @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 { 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 { 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 { }, 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 { 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 * diff --git a/src/elements/content-explorer/stories/MetadataView.stories.tsx b/src/elements/content-explorer/stories/MetadataView.stories.tsx index cb19394aca..ba7bc705df 100644 --- a/src/elements/content-explorer/stories/MetadataView.stories.tsx +++ b/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 = { 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); + }), ], }, }, diff --git a/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx b/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx index 93cecdca8a..0f4377080b 100644 --- a/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx +++ b/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 = { 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); + }), ], }, },