From c8f156dc66eb41295457e5e20feef3a3548cf093 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 13 Sep 2024 06:21:46 -0700
Subject: [PATCH] feat(client): display FED workshop blocks in grid layout
 (#56090)

---
 .../Introduction/components/block.tsx         |  6 ++-
 .../Introduction/super-block-intro.tsx        |  1 +
 client/src/utils/curriculum-layout.test.ts    | 37 +++++++++++++++++++
 client/src/utils/curriculum-layout.ts         | 18 ++++++---
 4 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 client/src/utils/curriculum-layout.test.ts

diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index 271675379b1..209fe4b7a3a 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -115,7 +115,11 @@ class Block extends Component<BlockProps> {
     });
 
     const isGridBlock = challenges.some(({ challenge }) => {
-      return isGridBased(superBlock, challenge.challengeType);
+      return isGridBased({
+        superBlock,
+        challengeType: challenge.challengeType,
+        blockType: challenge.blockType
+      });
     });
 
     const isAudited = isAuditedSuperBlock(curriculumLocale, superBlock, {
diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx
index fa51b35a3e6..dd71dbc6646 100644
--- a/client/src/templates/Introduction/super-block-intro.tsx
+++ b/client/src/templates/Introduction/super-block-intro.tsx
@@ -306,6 +306,7 @@ export const query = graphql`
             order
             superBlock
             dashedName
+            blockType
           }
         }
       }
diff --git a/client/src/utils/curriculum-layout.test.ts b/client/src/utils/curriculum-layout.test.ts
new file mode 100644
index 00000000000..8a0b0925b06
--- /dev/null
+++ b/client/src/utils/curriculum-layout.test.ts
@@ -0,0 +1,37 @@
+import { BlockTypes } from '../../../shared/config/blocks';
+import { challengeTypes } from '../../../shared/config/challenge-types';
+import { SuperBlocks } from '../../../shared/config/curriculum';
+
+import { isGridBased, gridBasedSuperBlocks } from './curriculum-layout';
+
+describe('isGridBased', () => {
+  it(`should return false if challenge type is ${challengeTypes.pythonProject}`, () => {
+    expect(
+      isGridBased({
+        superBlock: SuperBlocks.SciCompPy,
+        challengeType: challengeTypes.pythonProject
+      })
+    ).toEqual(false);
+  });
+
+  it(`should return true if block type is ${BlockTypes.workshop}`, () => {
+    expect(
+      isGridBased({
+        superBlock: SuperBlocks.FrontEndDevelopment,
+        challengeType: challengeTypes.html,
+        blockType: BlockTypes.workshop
+      })
+    ).toEqual(true);
+  });
+
+  it('should return true if the superblock is one of `gridBasedSuperBlocks`', () => {
+    gridBasedSuperBlocks.forEach(item => {
+      expect(
+        isGridBased({
+          superBlock: item,
+          challengeType: challengeTypes.html
+        })
+      ).toEqual(true);
+    });
+  });
+});
diff --git a/client/src/utils/curriculum-layout.ts b/client/src/utils/curriculum-layout.ts
index fb6ff615cb1..e2ed45b7174 100644
--- a/client/src/utils/curriculum-layout.ts
+++ b/client/src/utils/curriculum-layout.ts
@@ -1,24 +1,30 @@
+import { BlockTypes } from '../../../shared/config/blocks';
 import { challengeTypes } from '../../../shared/config/challenge-types';
 import { SuperBlocks } from '../../../shared/config/curriculum';
 
 // Show a grid layout on the superblock level
 
-const gridBasedSuperBlocks = [
+export const gridBasedSuperBlocks = [
   SuperBlocks.RespWebDesignNew,
   SuperBlocks.JsAlgoDataStructNew,
   SuperBlocks.SciCompPy,
   SuperBlocks.A2English
 ];
 
-export const isGridBased = (
-  superBlock: SuperBlocks,
-  challengeType: unknown = null
-) => {
+export const isGridBased = ({
+  superBlock,
+  challengeType,
+  blockType
+}: {
+  superBlock: SuperBlocks;
+  challengeType: number;
+  blockType?: BlockTypes; // blockType is currently only available in FrontEndDevelopment blocks
+}) => {
   // Python projects should not be displayed as a grid, but should be displayed
   // as a list of projects. Otherwise, if we do not do this the project will be
   // shown as a single certification project.
-
   if (challengeType === challengeTypes.pythonProject) return false;
+  if (blockType === BlockTypes.workshop) return true;
   return gridBasedSuperBlocks.includes(superBlock);
 };