fix(metadata-editor): dont show filter dropdown for one visible instance (#3802)

* fix(metadata-editor): dont show filter dropdown for one visible instance

* fix(metadata-editor): dont show filter dropdown for one visible instance

* fix(metadata-sidebar): dont show filter dropdown for one visible instanc

Author: wpiesiak

src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -197,9 +197,9 @@ function MetadataSidebarRedesign({
     const { handleSetFilteredTemplates, filteredTemplates, templateInstancesList } =
         useMetadataSidebarFilteredTemplates(history, filteredTemplateIds, templateInstances);
     const filterDropdown =
-        isSuccess && isViewMode && appliedTemplateInstances.length > 1 ? (
+        isSuccess && isViewMode && visibleTemplateInstances.length > 1 ? (
             <FilterInstancesDropdown
-                appliedTemplates={appliedTemplateInstances as MetadataTemplate[]}
+                appliedTemplates={visibleTemplateInstances as MetadataTemplate[]}
                 selectedTemplates={filteredTemplates}
                 setSelectedTemplates={handleSetFilteredTemplates}
             />

src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx

@@ -299,6 +299,51 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         expect(screen.getByRole('heading', { level: 4, name: 'Visible Template' })).toBeInTheDocument();
     });
 
+    test('should render filter dropdown when more than one templates are present', () => {
+        mockUseSidebarMetadataFetcher.mockReturnValue({
+            extractSuggestions: jest.fn(),
+            handleCreateMetadataInstance: jest.fn(),
+            handleDeleteMetadataInstance: jest.fn(),
+            handleUpdateMetadataInstance: jest.fn(),
+            templateInstances: [mockCustomTemplateInstance, mockVisibleTemplateInstance],
+            templates: mockTemplates,
+            errorMessage: null,
+            status: STATUS.SUCCESS,
+            file: mockFile,
+        });
+
+        renderComponent();
+
+        const filterDropdown = screen.getByRole('combobox');
+        expect(filterDropdown.textContent).toContain('All Templates');
+    });
+
+    test.each([
+        [[mockVisibleTemplateInstance, mockHiddenTemplateInstance]], // One visible and one hidden template
+        [[mockVisibleTemplateInstance]], // One visible template
+        [[]], // No templates
+        [[mockHiddenTemplateInstance]], // One hidden template
+    ])(
+        'should not render filter dropdown when only one or none visible template is present',
+        (templateInstances: MetadataTemplateInstance[]) => {
+            mockUseSidebarMetadataFetcher.mockReturnValue({
+                extractSuggestions: jest.fn(),
+                handleCreateMetadataInstance: jest.fn(),
+                handleDeleteMetadataInstance: jest.fn(),
+                handleUpdateMetadataInstance: jest.fn(),
+                templateInstances,
+                templates: mockTemplates,
+                errorMessage: null,
+                status: STATUS.SUCCESS,
+                file: mockFile,
+            });
+
+            renderComponent();
+
+            expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+        },
+    );
+
     test('should render metadata filterd instance list when fileterd templates are present and matching', () => {
         mockUseSidebarMetadataFetcher.mockReturnValue({
             extractSuggestions: jest.fn(),

src/elements/content-sidebar/__tests__/useMetadataSidebarFilteredTemplates.test.tsx

@@ -26,6 +26,16 @@ const templateInstances = [
     },
 ];
 
+const hiddenTemplateInstances = {
+    id: 'template3',
+    canEdit: true,
+    fields: [],
+    hidden: true,
+    scope: 'enterprise_123',
+    templateKey: 'temlpate_1',
+    type: 'metadata_template',
+};
+
 describe('useMetadataSidebarFilteredTemplates', () => {
     beforeEach(() => {
         jest.clearAllMocks();
@@ -96,4 +106,25 @@ describe('useMetadataSidebarFilteredTemplates', () => {
 
         expect(result.current.templateInstancesList).toEqual(templateInstances);
     });
+
+    test('should filter out hidden template instances', () => {
+        const filteredTemplateIds = ['template1'];
+        const templateInstancesWithHidden = [...templateInstances, hiddenTemplateInstances];
+        const { result } = renderHook(() =>
+            useMetadataSidebarFilteredTemplates(history, filteredTemplateIds, templateInstancesWithHidden),
+        );
+
+        expect(result.current.filteredTemplates).toEqual(['template1']);
+        expect(result.current.templateInstancesList).toEqual([templateInstances[0]]);
+    });
+
+    test('should filter out non existing template instances', () => {
+        const filteredTemplateIds = ['template1', 'template4'];
+        const { result } = renderHook(() =>
+            useMetadataSidebarFilteredTemplates(history, filteredTemplateIds, templateInstances),
+        );
+
+        expect(result.current.filteredTemplates).toEqual(['template1']);
+        expect(result.current.templateInstancesList).toEqual([templateInstances[0]]);
+    });
 });

src/elements/content-sidebar/hooks/useMetadataSidebarFilteredTemplates.tsx

@@ -20,7 +20,7 @@ export function useMetadataSidebarFilteredTemplates(
 
     React.useEffect(() => {
         const matchingFilteredTemplateIds = templateInstances
-            .filter(instance => filteredTemplateIds.includes(instance.id))
+            .filter(instance => filteredTemplateIds.includes(instance.id) && !instance.hidden)
             .map(instance => instance.id);
 
         setFilteredTemplates(matchingFilteredTemplateIds);
@@ -37,7 +37,7 @@ export function useMetadataSidebarFilteredTemplates(
 
     const templateInstancesList = React.useMemo(() => {
         const filteredTemplateInstances = templateInstances.filter((instance: MetadataTemplateInstance) =>
-            filteredTemplates.some((template: string) => template === instance.id),
+            filteredTemplates.some((template: string) => template === instance.id && !instance.hidden),
         );
         return filteredTemplates.length === 0 ? templateInstances : filteredTemplateInstances;
     }, [templateInstances, filteredTemplates]);

src/elements/content-sidebar/stories/__mocks__/MetadataSidebarRedesignedMocks.ts

@@ -68,7 +68,19 @@ export const mockGlobalMetadataTemplates = {
 export const mockEmptyMetadataInstances = {
     url: `${apiV2Path}/files/${fileIdWithoutMetadata}/metadata`,
     response: {
-        entries: [],
+        entries: [
+            {
+                id: '2cb618ed-f31e-4172-b354-534524246653',
+                $version: 1,
+                $type: 'Secrets-453ffc2f-bf5a-464c-a004-432342',
+                $parent: 'file_415542803939',
+                $typeVersion: 1,
+                $template: 'secrets',
+                $scope: 'enterprise_173733877',
+                myAttribute: 'Secrets',
+                $canEdit: true,
+            },
+        ],
     },
 };