Merge pull request #1497 from AppQuality/UN-2207-filter-out-global-templates

UN-2207-filter-out-global-templates

Author: marcbon

src/pages/Dashboard/LaunchCampaignCards.tsx

@@ -46,16 +46,28 @@ const LaunchCampaignCards = () => {
     [promoTemplates, workspaceNoStrapiTemplates, workspaceStrapiTemplates]
   );
 
+  // Remove duplicated template ids from allTemplates (remove from promoTemplates if already in workspace templates)
+  const uniqueTemplateIds = new Set<number>();
+  const uniqueAllTemplates = allTemplates.filter((template) => {
+    if (uniqueTemplateIds.has(template.id)) {
+      return false;
+    }
+    uniqueTemplateIds.add(template.id);
+    return true;
+  });
+
   const handleCloseDrawer = () => {
     setIsDrawerOpen(false);
   };
 
   const handleClick = useCallback(
     (tid: number) => {
-      setSelectedTemplate(allTemplates.find((template) => template.id === tid));
+      setSelectedTemplate(
+        uniqueAllTemplates.find((template) => template.id === tid)
+      );
       setIsDrawerOpen(true);
     },
-    [allTemplates, setSelectedTemplate, setIsDrawerOpen]
+    [uniqueAllTemplates, setSelectedTemplate, setIsDrawerOpen]
   );
 
   if (!data) return null;
@@ -85,7 +97,7 @@ const LaunchCampaignCards = () => {
           </Paragraph>
         </Col>
       </Row>
-      <ServiceTiles onClick={handleClick} promoTemplates={allTemplates} />
+      <ServiceTiles onClick={handleClick} promoTemplates={uniqueAllTemplates} />
       {selectedTemplate && (
         <PlanCreationInterface
           isOpen={isDrawerOpen}

src/pages/Dashboard/PromoContext.tsx

@@ -48,9 +48,6 @@ export const PromoContextProvider = ({ children }: { children: ReactNode }) => {
   const { data: workspaceTemplatesData } = useGetWorkspacesByWidTemplatesQuery(
     {
       wid: activeWorkspace?.id.toString() || '',
-      filterBy: {
-        isPromo: 0,
-      },
       orderBy: 'order',
       order: 'asc',
     },
@@ -74,26 +71,30 @@ export const PromoContextProvider = ({ children }: { children: ReactNode }) => {
 
   const workspaceStrapiTemplates = useMemo(() => {
     if (!workspaceTemplatesData) return [];
-    return workspaceTemplatesData.items.reduce<
-      PromoContextProps['promoTemplates']
-    >((acc, template) => {
-      if ('strapi' in template) {
-        acc.push(template);
-      }
-      return acc;
-    }, []);
+    return workspaceTemplatesData.items
+      .filter(
+        (template) => template.workspace_id // Filter out global templates (those without a workspace_id)
+      )
+      .reduce<PromoContextProps['promoTemplates']>((acc, template) => {
+        if ('strapi' in template) {
+          acc.push(template);
+        }
+        return acc;
+      }, []);
   }, [workspaceTemplatesData]);
 
   const workspaceNoStrapiTemplates = useMemo(() => {
     if (!workspaceTemplatesData) return [];
-    return workspaceTemplatesData.items.reduce<
-      PromoContextProps['promoTemplates']
-    >((acc, template) => {
-      if (!('strapi' in template)) {
-        acc.push(template);
-      }
-      return acc;
-    }, []);
+    return workspaceTemplatesData.items
+      .filter(
+        (template) => template.workspace_id // Filter out global templates (those without a workspace_id)
+      )
+      .reduce<PromoContextProps['promoTemplates']>((acc, template) => {
+        if (!('strapi' in template)) {
+          acc.push(template);
+        }
+        return acc;
+      }, []);
   }, [workspaceTemplatesData]);
 
   const PromoContextValue = useMemo(

src/pages/Dashboard/empty-state/projectEmptyState.tsx

@@ -60,16 +60,28 @@ export const ProjectEmptyState = () => {
     [promoTemplates, workspaceNoStrapiTemplates, workspaceStrapiTemplates]
   );
 
+  // Remove duplicated template ids from allTemplates (remove from promoTemplates if already in workspace templates)
+  const uniqueTemplateIds = new Set<number>();
+  const uniqueAllTemplates = allTemplates.filter((template) => {
+    if (uniqueTemplateIds.has(template.id)) {
+      return false;
+    }
+    uniqueTemplateIds.add(template.id);
+    return true;
+  });
+
   const handleCloseDrawer = useCallback(() => {
     setIsDrawerOpen(false);
   }, [setIsDrawerOpen]);
 
   const handleClick = useCallback(
     (tid: number) => {
-      setSelectedTemplate(allTemplates.find((template) => template.id === tid));
+      setSelectedTemplate(
+        uniqueAllTemplates.find((template) => template.id === tid)
+      );
       setIsDrawerOpen(true);
     },
-    [allTemplates, setSelectedTemplate, setIsDrawerOpen]
+    [uniqueAllTemplates, setSelectedTemplate, setIsDrawerOpen]
   );
 
   return (
@@ -107,7 +119,7 @@ export const ProjectEmptyState = () => {
             <div style={{ zIndex: 1, position: 'relative' }}>
               <ServiceTiles
                 onClick={handleClick}
-                promoTemplates={allTemplates}
+                promoTemplates={uniqueAllTemplates}
               />
             </div>
             <UGLogoMedium

src/pages/Templates/Context.tsx

@@ -115,8 +115,15 @@ export const TemplatesContextProvider = ({
 
   // Set promo templates when promoData changes
   useEffect(() => {
-    setPromoTemplates(promoData?.items || []);
-  }, [promoData]);
+    const uniqueTailoredIds = new Set(
+      data?.items.filter(isTailoredTemplate).map((template) => template.id)
+    );
+    setPromoTemplates(
+      promoData?.items.filter(
+        (template) => !uniqueTailoredIds.has(template.id) // Remove duplicated template ids from promo templates
+      ) || []
+    );
+  }, [promoData, data]);
 
   // Build array of categories with templates for the frontend
   const templatesByCategory = useMemo(() => {

tests/e2e/dashboard_home.spec.ts

@@ -37,7 +37,7 @@ test.describe('Home page', () => {
   test('should show a list of suggested templates in promo', async () => {
     await expect(dashboard.elements().title()).toBeVisible();
     await expect(promoList.elements().promoList()).toBeVisible();
-    await expect(promoList.elements().promoListItems()).toHaveCount(10);
+    await expect(promoList.elements().promoListItems()).toHaveCount(5);
   });
 
   test('should open the create plan interface when clicking on a promo item, a more info should go to the single template', async ({

tests/e2e/project.spec.ts

@@ -35,7 +35,7 @@ test.describe('project page', () => {
       project.projectCampaigns.length
     );
     await expect(promoList.elements().promoList()).toBeVisible();
-    await expect(promoList.elements().promoListItems()).toHaveCount(10);
+    await expect(promoList.elements().promoListItems()).toHaveCount(5);
   });
 
   test('the invite users button should be visible', async () => {
@@ -147,7 +147,7 @@ test.describe('project page empty state', () => {
   test('should display no campaigns, a list of suggested templates in promo', async () => {
     await expect(project.elements().projectsTable()).not.toBeVisible();
     await expect(promoList.elements().promoList()).toBeVisible();
-    await expect(promoList.elements().promoListItems()).toHaveCount(10);
+    await expect(promoList.elements().promoListItems()).toHaveCount(5);
   });
 
   test('should open the create plan interface when clicking on a promo item, a more info should go to the single template', async ({

tests/fixtures/components/PromoList.ts

@@ -23,6 +23,9 @@ export class PromoList {
   }
 
   async mockPromoTemplates() {
+    // Mocks 2 requests:
+    // - /workspaces/:wid/templates?orderBy=order&order=asc&filterBy[isPromo]=1
+    // - /workspaces/:wid/templates?orderBy=order&order=asc
     await this.page.route('*/**/api/workspaces/1/templates*', async (route) => {
       await route.fulfill({
         path: 'tests/api/workspaces/wid/templates/_get/200_promo.json',