fix: filter out experience entries

contentful · Oct 14, 2024 · 826a51d · 826a51d
1 parent 49dc734
commit 826a51d
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 7 deletions.
diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.tsx
@@ -18,6 +18,23 @@ configure({
 const CONTENT_TYPE_1 = { name: 'name-1', sys: { id: 'ID_1' } };
 const CONTENT_TYPE_2 = { name: 'name-2', sys: { id: 'ID_2' } };
 const CONTENT_TYPE_3 = { name: 'name-3', sys: { id: 'ID_3' } };
+const EXPERIENCE_TYPE = {
+  name: 'experience-type',
+  sys: { id: 'ID_4' },
+  metadata: {
+    annotations: {
+      ContentType: [
+        {
+          sys: {
+            id: 'Contentful:ExperienceType',
+            type: 'Link',
+            linkType: 'Annotation',
+          },
+        },
+      ],
+    },
+  },
+};
 
 describe('CreateEntryMenuTrigger general', () => {
   const props = {
@@ -140,4 +157,35 @@ describe('CreateEntryMenuTrigger general', () => {
     expect(suggestedContentType).toBeDefined();
     expect(suggestedContentType.textContent).toBe(props.contentTypes[0].name);
   });
+
+  it('filters out content types with Contentful:ExperienceType annotation', () => {
+    const contentTypesWithExperience = [
+      CONTENT_TYPE_1,
+      CONTENT_TYPE_2,
+      CONTENT_TYPE_3,
+      EXPERIENCE_TYPE,
+    ] as ContentType[];
+
+    const { getByTestId, getAllByTestId } = render(
+      <CreateEntryMenuTrigger {...props} contentTypes={contentTypesWithExperience}>
+        {stub}
+      </CreateEntryMenuTrigger>
+    );
+
+    act(() => {
+      fireEvent.click(getByTestId('menu-trigger'));
+    });
+
+    const contentTypeItems = getAllByTestId('contentType');
+    expect(contentTypeItems).toHaveLength(3); // Only 3 content types should be rendered
+    expect(contentTypeItems[0].textContent).toBe('name-1');
+    expect(contentTypeItems[1].textContent).toBe('name-2');
+    expect(contentTypeItems[2].textContent).toBe('name-3');
+
+    // Ensure the experience type is not rendered
+    const experienceTypeItem = contentTypeItems.find(
+      (item) => item.textContent === 'experience-type'
+    );
+    expect(experienceTypeItem).toBeUndefined();
+  });
 });
diff --git a/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.tsx b/packages/reference/src/components/CreateEntryLinkButton/CreateEntryMenuTrigger.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 
 import { TextInput, Menu, MenuProps } from '@contentful/f36-components';
 import { SearchIcon } from '@contentful/f36-icons';
@@ -104,6 +104,18 @@ export const CreateEntryMenuTrigger = ({
   */
   const [dropdownWidth, setDropdownWidth] = useState();
 
+  // Filter out content types with the Contentful:ExperienceType annotation
+  const filteredContentTypes = useMemo(
+    () =>
+      contentTypes.filter((contentType) => {
+        const annotations = get(contentType, 'metadata.annotations.ContentType', []);
+        return !annotations.some(
+          (annotation) => get(annotation, 'sys.id') === 'Contentful:ExperienceType'
+        );
+      }),
+    [contentTypes]
+  );
+
   const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
 
   const closeMenu = () => setOpen(false);
@@ -157,10 +169,12 @@ export const CreateEntryMenuTrigger = ({
       </Menu.SectionTitle>
     ) : null;
 
-  const isSearchable = contentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
+  const isSearchable = filteredContentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
   const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
-  const suggestedContentType = contentTypes.find((ct) => ct.sys.id === suggestedContentTypeId);
-  const filteredContentTypes = contentTypes.filter(
+  const suggestedContentType = filteredContentTypes.find(
+    (ct) => ct.sys.id === suggestedContentTypeId
+  );
+  const searchFilteredContentTypes = filteredContentTypes.filter(
     (ct) =>
       !searchInput || get(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase())
   );
@@ -210,7 +224,7 @@ export const CreateEntryMenuTrigger = ({
               </>
             )}
 
-            {searchInput && renderSearchResultsCount(filteredContentTypes.length)}
+            {searchInput && renderSearchResultsCount(searchFilteredContentTypes.length)}
             {suggestedContentType && !searchInput && (
               <>
                 <Menu.SectionTitle>Suggested Content Type</Menu.SectionTitle>
@@ -221,8 +235,8 @@ export const CreateEntryMenuTrigger = ({
               </>
             )}
             {!searchInput && <Menu.SectionTitle>{contentTypesLabel}</Menu.SectionTitle>}
-            {filteredContentTypes.length ? (
-              filteredContentTypes.map((contentType, i) => (
+            {searchFilteredContentTypes.length ? (
+              searchFilteredContentTypes.map((contentType, i) => (
                 <Menu.Item
                   testId="contentType"
                   key={`${get(contentType, 'name')}-${i}`}