From 9005790985c59816db7378265460755d31ba95b0 Mon Sep 17 00:00:00 2001
From: george-misan <george.eyoyibo@gmail.com>
Date: Wed, 16 Oct 2024 22:29:55 +0300
Subject: [PATCH] resolve review findings

---
 .../cms/src/blocks/Ingress/IngressEditor.tsx  |  4 +-
 .../src/blocks/LogoLink/LogoLinkEditor.tsx    |  6 +-
 .../ContentRenderer/moocfi/Ingress.tsx        |  4 +-
 .../src/components/FeedbackDialog.tsx         |  4 +-
 .../pages/[organizationSlug]/exams/[id].tsx   |  6 +-
 .../exams/testexam/[id].tsx                   |  4 +-
 .../Matrix/MatrixCell.tsx                     |  8 +-
 .../matrix/TableCellContent.tsx               |  4 +-
 .../multiple-choice-dropdown/index.tsx        |  2 +-
 .../QuizComponents/multiple-choice/index.tsx  |  2 +-
 .../impl-by-quiz-item-type/Matrix.tsx         |  3 +-
 .../quizzes/create-and-save-quizzes.spec.ts   | 86 ++++++++++---------
 12 files changed, 74 insertions(+), 59 deletions(-)

diff --git a/services/cms/src/blocks/Ingress/IngressEditor.tsx b/services/cms/src/blocks/Ingress/IngressEditor.tsx
index 23a3b82519e4..b7e2b9cb912f 100644
--- a/services/cms/src/blocks/Ingress/IngressEditor.tsx
+++ b/services/cms/src/blocks/Ingress/IngressEditor.tsx
@@ -25,7 +25,7 @@ const IngressEditor: React.FC<
       >
         <RichText
           className={css`
-            color: ##1a2333;
+            color: #1a2333;
             font-weight: 700;
             font-size: 3.5rem;
             line-height: 4.375rem;
@@ -40,7 +40,7 @@ const IngressEditor: React.FC<
         />
         <RichText
           className={css`
-            color: ##1a2333;
+            color: #1a2333;
             font-weight: normal;
             font-size: 1.75rem;
             line-height: 1.35;
diff --git a/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx b/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx
index 1ca90bcf33a4..caef3e9a7b14 100644
--- a/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx
+++ b/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx
@@ -31,7 +31,11 @@ const LogoLinkEditor: React.FC<React.PropsWithChildren<BlockEditProps<Record<str
         `}
       >
         <div>
-          <InnerBlocks template={LOGO_LINK_TEMPLATE} allowedBlocks={ALLOWED_NESTED_BLOCKS} />
+          <InnerBlocks
+            template={LOGO_LINK_TEMPLATE}
+            allowedBlocks={ALLOWED_NESTED_BLOCKS}
+            templateLock="all"
+          />
         </div>
       </div>
     </BlockWrapper>
diff --git a/services/course-material/src/components/ContentRenderer/moocfi/Ingress.tsx b/services/course-material/src/components/ContentRenderer/moocfi/Ingress.tsx
index 0c0be4fdf8f7..39da0b0c630b 100644
--- a/services/course-material/src/components/ContentRenderer/moocfi/Ingress.tsx
+++ b/services/course-material/src/components/ContentRenderer/moocfi/Ingress.tsx
@@ -24,7 +24,7 @@ const Ingress: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockA
       {props.data.attributes.title && (
         <h2
           className={css`
-            color: ##1a2333;
+            color: #1a2333;
             font-weight: 700;
             font-size: 3.5rem;
             line-height: 4.375rem;
@@ -38,7 +38,7 @@ const Ingress: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockA
       )}
       <h3
         className={css`
-          color: ##1a2333;
+          color: #1a2333;
           font-weight: normal;
           font-size: 1.75rem;
           line-height: 1.35;
diff --git a/services/course-material/src/components/FeedbackDialog.tsx b/services/course-material/src/components/FeedbackDialog.tsx
index 46f611dab972..59e7fd5ea31a 100644
--- a/services/course-material/src/components/FeedbackDialog.tsx
+++ b/services/course-material/src/components/FeedbackDialog.tsx
@@ -175,7 +175,7 @@ const FeedbackDialog: React.FC<React.PropsWithChildren<Props>> = ({
                 )}
                 <div
                   className={css`
-                    font-family: Inter, sans-serif;
+                    font-family: ${primaryFont};
                     font-style: normal;
                     font-weight: normal;
                     font-size: 16px;
@@ -192,7 +192,7 @@ const FeedbackDialog: React.FC<React.PropsWithChildren<Props>> = ({
                 </div>
                 <button
                   className={css`
-                    font-family: Inter, sans-serif;
+                    font-family: ${primaryFont};
                     font-style: normal;
                     font-weight: normal;
                     font-size: 13px;
diff --git a/services/course-material/src/pages/[organizationSlug]/exams/[id].tsx b/services/course-material/src/pages/[organizationSlug]/exams/[id].tsx
index 00b796be30da..0c8a435e7c39 100644
--- a/services/course-material/src/pages/[organizationSlug]/exams/[id].tsx
+++ b/services/course-material/src/pages/[organizationSlug]/exams/[id].tsx
@@ -22,7 +22,7 @@ import Spinner from "@/shared-module/common/components/Spinner"
 import HideTextInSystemTests from "@/shared-module/common/components/system-tests/HideTextInSystemTests"
 import { withSignedIn } from "@/shared-module/common/contexts/LoginStateContext"
 import useToastMutation from "@/shared-module/common/hooks/useToastMutation"
-import { baseTheme, headingFont } from "@/shared-module/common/styles"
+import { baseTheme, headingFont, primaryFont } from "@/shared-module/common/styles"
 import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 import dontRenderUntilQueryParametersReady, {
   SimplifiedUrlQuery,
@@ -131,7 +131,7 @@ const Exam: React.FC<React.PropsWithChildren<ExamProps>> = ({ query }) => {
       >
         <div
           className={css`
-            font-family: Inter, sans-serif;
+            font-family: ${primaryFont};
             font-size: 30px;
             font-style: normal;
             font-weight: 600;
@@ -147,7 +147,7 @@ const Exam: React.FC<React.PropsWithChildren<ExamProps>> = ({ query }) => {
         </div>
         <div
           className={css`
-            font-family: Inter, sans-serif;
+            font-family: ${primaryFont};
             font-size: 20px;
             font-style: normal;
             font-weight: 500;
diff --git a/services/course-material/src/pages/[organizationSlug]/exams/testexam/[id].tsx b/services/course-material/src/pages/[organizationSlug]/exams/testexam/[id].tsx
index 8b6300573d16..dbfc3fc4efc1 100644
--- a/services/course-material/src/pages/[organizationSlug]/exams/testexam/[id].tsx
+++ b/services/course-material/src/pages/[organizationSlug]/exams/testexam/[id].tsx
@@ -32,7 +32,7 @@ import Spinner from "@/shared-module/common/components/Spinner"
 import HideTextInSystemTests from "@/shared-module/common/components/system-tests/HideTextInSystemTests"
 import { withSignedIn } from "@/shared-module/common/contexts/LoginStateContext"
 import useToastMutation from "@/shared-module/common/hooks/useToastMutation"
-import { baseTheme, fontWeights, headingFont } from "@/shared-module/common/styles"
+import { baseTheme, fontWeights, headingFont, primaryFont } from "@/shared-module/common/styles"
 import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 import dontRenderUntilQueryParametersReady, {
   SimplifiedUrlQuery,
@@ -187,7 +187,7 @@ const Exam: React.FC<React.PropsWithChildren<ExamProps>> = ({ query }) => {
         </div>
         <div
           className={css`
-            font-family: Inter, sans-serif;
+            font-family: ${primaryFont};
             font-size: 20px;
             font-style: normal;
             font-weight: 500;
diff --git a/services/quizzes/src/components/exercise-service-views/AnswerExercise/impl-by-quiz-item-type/Matrix/MatrixCell.tsx b/services/quizzes/src/components/exercise-service-views/AnswerExercise/impl-by-quiz-item-type/Matrix/MatrixCell.tsx
index acbc2553b154..b780a609f270 100644
--- a/services/quizzes/src/components/exercise-service-views/AnswerExercise/impl-by-quiz-item-type/Matrix/MatrixCell.tsx
+++ b/services/quizzes/src/components/exercise-service-views/AnswerExercise/impl-by-quiz-item-type/Matrix/MatrixCell.tsx
@@ -2,6 +2,8 @@ import { css } from "@emotion/css"
 import styled from "@emotion/styled"
 import { useState } from "react"
 
+import { primaryFont } from "@/shared-module/common/styles/typography"
+
 interface CellInputStyleProps {
   row: number
   column: number
@@ -16,7 +18,7 @@ const cellInputStyle = ({ column, row, cellText, matrixSize, isActive }: CellInp
     font-size: 2.8vw;
     font-size: 1.375rem;
     color: #313947;
-    font-family: Inter, sans-serif;
+    font-family: ${primaryFont};
     display: block;
     width: 3.125rem;
     height: 3.125rem;
@@ -73,7 +75,7 @@ const MatrixCell: React.FunctionComponent<React.PropsWithChildren<MatrixCellProp
         font-size: 2.8vw;
         font-size: 1.375rem;
         font-weight: 600;
-        font-family: Inter, sans-serif;
+        font-family: ${primaryFont};
       `}
     >
       <div
@@ -87,6 +89,8 @@ const MatrixCell: React.FunctionComponent<React.PropsWithChildren<MatrixCellProp
         <CellInputContainer
           // eslint-disable-next-line i18next/no-literal-string
           aria-label={`row: ${row}, column: ${column}`}
+          data-testid="matrix-cell"
+          className="matrix-cell"
           column={column}
           row={row}
           name={cellText}
diff --git a/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/matrix/TableCellContent.tsx b/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/matrix/TableCellContent.tsx
index c51c4d450b13..5309220ad5d7 100644
--- a/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/matrix/TableCellContent.tsx
+++ b/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/matrix/TableCellContent.tsx
@@ -2,7 +2,7 @@ import { css } from "@emotion/css"
 import styled from "@emotion/styled"
 import React, { useState } from "react"
 
-import { baseTheme } from "@/shared-module/common/styles"
+import { baseTheme, primaryFont } from "@/shared-module/common/styles"
 
 interface CellInputStyleProps {
   row: number
@@ -17,7 +17,7 @@ const cellInputStyle = ({ column, row, cellText, matrixSize, isActive }: CellInp
     position: relative;
     font-size: 2.8vw;
     font-size: 22px;
-    font-family: Inter, sans-serif;
+    font-family: ${primaryFont};
     display: block;
     width: 50px;
     height: 50px;
diff --git a/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice-dropdown/index.tsx b/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice-dropdown/index.tsx
index 8cbc8d6635dc..680265539eba 100644
--- a/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice-dropdown/index.tsx
+++ b/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice-dropdown/index.tsx
@@ -338,7 +338,7 @@ const MultipleChoiceEditor: React.FC<MultipleChoiceEditorProps> = ({ quizItemId
               className={css`
                 color: #414246;
                 font-size: 14px;
-                font-family: Inter, sans-serif;
+                font-family: ${primaryFont};
                 display: block;
                 margin-bottom: 8px;
                 ${!selected.allowSelectingMultipleOptions && "opacity: 0.5;"}
diff --git a/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice/index.tsx b/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice/index.tsx
index 8e103984a02f..3545e20696a4 100644
--- a/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice/index.tsx
+++ b/services/quizzes/src/components/exercise-service-views/ExerciseEditor/QuizComponents/multiple-choice/index.tsx
@@ -359,7 +359,7 @@ const MultipleChoiceEditor: React.FC<MultipleChoiceEditorProps> = ({ quizItemId
                 color: #414246;
                 font-size: 14px;
                 margin-bottom: 8px;
-                font-family: Inter, sans-serif;
+                font-family: ${primaryFont};
                 display: block;
                 ${!selected.allowSelectingMultipleOptions && "opacity: 0.5;"}
               `}
diff --git a/services/quizzes/src/components/exercise-service-views/ViewSubmission/impl-by-quiz-item-type/Matrix.tsx b/services/quizzes/src/components/exercise-service-views/ViewSubmission/impl-by-quiz-item-type/Matrix.tsx
index fa786bdabcf2..f7298b23183c 100644
--- a/services/quizzes/src/components/exercise-service-views/ViewSubmission/impl-by-quiz-item-type/Matrix.tsx
+++ b/services/quizzes/src/components/exercise-service-views/ViewSubmission/impl-by-quiz-item-type/Matrix.tsx
@@ -9,6 +9,7 @@ import { PublicSpecQuizItemMatrix } from "../../../../../types/quizTypes/publicS
 
 import { QuizItemSubmissionComponentProps } from "."
 
+import { primaryFont } from "@/shared-module/common/styles/typography"
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 
 const MatrixTableContainer = styled.table`
@@ -259,7 +260,7 @@ const MatrixTable: React.FC<React.PropsWithChildren<MatrixTableProps>> = ({
                           padding: 0;
                           font-size: 2.8vw;
                           font-size: 1.375rem;
-                          font-family: Inter, sans-serif;
+                          font-family: ${primaryFont};
                         `}
                       >
                         <div
diff --git a/system-tests/src/tests/quizzes/create-and-save-quizzes.spec.ts b/system-tests/src/tests/quizzes/create-and-save-quizzes.spec.ts
index c1611ab16628..fc8ebed52059 100644
--- a/system-tests/src/tests/quizzes/create-and-save-quizzes.spec.ts
+++ b/system-tests/src/tests/quizzes/create-and-save-quizzes.spec.ts
@@ -336,46 +336,52 @@ const createMatrix = async (frame: Locator) => {
     await frame
       .getByRole("button", { name: "Matrix Assignment to write answer in the form of a matrix" })
       .click()
-    await frame.locator(".css-aklx7n-CellInputContainer").click()
-    await frame.locator(".css-aklx7n-CellInputContainer").fill("1")
-    await frame.locator(".css-864jm6-CellInputContainer").first().click()
-    await frame.locator(".css-3jjv4o-CellInputContainer").fill("0")
-    await frame.locator(".css-864jm6-CellInputContainer").first().click()
-    await frame.locator(".css-3jjv4o-CellInputContainer").fill("0")
-    await frame
-      .locator("tr:nth-child(2) > td > .css-v1bss2 > .css-864jm6-CellInputContainer")
-      .first()
-      .click()
-    await frame.locator(".css-3jjv4o-CellInputContainer").fill("0")
-    await frame
-      .locator("tr:nth-child(2) > td:nth-child(2) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .click()
-    await frame
-      .locator("tr:nth-child(2) > td:nth-child(2) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .fill("1")
-    await frame
-      .locator("tr:nth-child(2) > td:nth-child(3) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .click()
-    await frame
-      .locator("tr:nth-child(2) > td:nth-child(3) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .fill("0")
-    await frame
-      .locator("tr:nth-child(3) > td > .css-v1bss2 > .css-864jm6-CellInputContainer")
-      .first()
-      .click()
-    await frame.locator(".css-3jjv4o-CellInputContainer").fill("0")
-    await frame
-      .locator("tr:nth-child(3) > td:nth-child(2) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .click()
-    await frame
-      .locator("tr:nth-child(3) > td:nth-child(2) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .fill("0")
-    await frame
-      .locator("tr:nth-child(3) > td:nth-child(3) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .click()
-    await frame
-      .locator("tr:nth-child(3) > td:nth-child(3) > .css-v1bss2 > .css-aklx7n-CellInputContainer")
-      .fill("1")
+    // Define the values to fill in the matrix
+    const matrixValues = [
+      [1, 0, 0],
+      [0, 1, 0],
+      [0, 0, 1],
+    ]
+
+    // Wait for the matrix container to exist based on its text and class
+    const matrixContainerLocator = frame.locator(".css-1sprzkc-EditorTitle") // Targeting the .EditorTitle class with text "Matrix"
+    await matrixContainerLocator.waitFor({ state: "attached", timeout: 30000 })
+
+    // Scroll the matrix container into view
+    await matrixContainerLocator.scrollIntoViewIfNeeded()
+
+    // Use the class that works for the first cell
+    const firstCellLocator = frame.locator(".css-12zb2oa-CellInputContainer").first()
+
+    // Scroll the first matrix cell into view
+    await firstCellLocator.scrollIntoViewIfNeeded()
+
+    // Ensure the first cell is visible before clicking
+    await firstCellLocator.waitFor({ state: "visible", timeout: 30000 })
+
+    // Click the first cell
+    try {
+      await firstCellLocator.click({ timeout: 10000 })
+    } catch (error) {
+      console.error("Click on the first cell failed:", error)
+    }
+
+    // Loop through the matrix rows and columns to fill the matrix cells
+    for (let row = 0; row < matrixValues.length; row++) {
+      for (let col = 0; col < matrixValues[row].length; col++) {
+        const cellLocator = frame.locator(`.matrix-cell.row-${row}.column-${col}`)
+
+        // Wait for the cell to be visible
+        await cellLocator.scrollIntoViewIfNeeded()
+        await cellLocator.waitFor({ state: "visible", timeout: 30000 })
+
+        // Click the cell based on the row and column
+        await cellLocator.click()
+
+        // Fill the cell with the appropriate value
+        await cellLocator.fill(String(matrixValues[row][col]))
+      }
+    }
   })
 }