feat(client): display FED workshop blocks in grid layout (#56090)

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, {

client/src/templates/Introduction/super-block-intro.tsx

@@ -306,6 +306,7 @@ export const query = graphql`
             order
             superBlock
             dashedName
+            blockType
           }
         }
       }

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);
+    });
+  });
+});

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);
 };