Ensure that templates on home only occupy 1 row (#4546)

Author: CompuIves

packages/app/src/app/pages/NewDashboard/Components/VariableGrid/index.tsx

@@ -310,14 +310,17 @@ export const VariableGrid = ({
                 'skeleton-row',
                 'blank-row-fill',
                 'new-sandbox',
+                'template',
+                'sandbox',
               ].includes(item.type)
             ) {
               filledItems.push({ ...item, viewMode });
             }
 
             if (item.type === 'header') {
-              if (columnCount === 1) filledItems.push(item);
-              else {
+              if (columnCount === 1) {
+                filledItems.push(item);
+              } else {
                 const { showMoreLink, showMoreLabel, ...fields } = item;
                 filledItems.push(fields);
                 let blanks = columnCount - 1;
@@ -333,7 +336,25 @@ export const VariableGrid = ({
               }
             } else if (item.type === 'new-sandbox' && viewMode === 'grid') {
               filledItems.push(item);
-            } else if (item.type === 'sandbox') {
+            } else if (item.type === 'sandbox' || item.type === 'template') {
+              if (
+                item.type === 'template' &&
+                item.optional &&
+                viewMode === 'grid'
+              ) {
+                // If it's optional we don't show it if we're on the second row already
+                const previousRowItem = items[index - columnCount];
+
+                if (
+                  previousRowItem?.type === 'template' ||
+                  previousRowItem?.type === 'new-sandbox'
+                ) {
+                  // Don't add if this one is optional and we're on the second row
+                  return;
+                }
+              }
+              filledItems.push(item);
+
               const nextItem = items[index + 1];
               if (nextItem && nextItem.type === 'header') {
                 const currentIndex = filledItems.length - 1;

packages/app/src/app/pages/NewDashboard/Content/routes/Home/index.tsx

@@ -26,7 +26,7 @@ export const Home = () => {
   }, [actions.dashboard, activeTeam]);
 
   const templates: DashboardGridItem[] = (sandboxes.TEMPLATE_HOME || []).map(
-    template => {
+    (template, i) => {
       const { sandbox, ...templateValues } = template;
 
       const dashboardTemplate: DashboardTemplate = {
@@ -35,6 +35,7 @@ export const Home = () => {
         template: templateValues,
         autoFork: true,
         noDrag: true,
+        optional: i >= 3,
       };
 
       return dashboardTemplate;

packages/app/src/app/pages/NewDashboard/types.ts

@@ -33,6 +33,10 @@ export type DashboardTemplate = {
   };
   noDrag?: boolean;
   autoFork?: boolean;
+  /**
+   * Whether this column should be hidden if it's on the second row of subsequent templates
+   */
+  optional?: boolean;
 };
 
 export type DashboardFolder = DELETE_ME_COLLECTION &