Merge remote-tracking branch 'origin/master' into research-questions-…

…download

services/cms/src/blocks/ResearchConsentCheckbox/ResearchConsentCheckBoxEditor.tsx → services/cms/src/blocks/ResearchConsentQuestion/ResearchConsentQuestionEditor.tsx

@@ -4,43 +4,46 @@ import { BlockEditProps } from "@wordpress/blocks"
 import React from "react"
 import { useTranslation } from "react-i18next"
 
+import ErrorBanner from "../../shared-module/components/ErrorBanner"
 import CheckBox from "../../shared-module/components/InputFields/CheckBox"
 import BlockPlaceholderWrapper from "../BlockPlaceholderWrapper"
 
-import { CheckBoxAttributes } from "."
+import { ResearchConsentQuestionAttributes } from "."
 
 const ResearchConsentCheckBoxEditor: React.FC<
-  React.PropsWithChildren<BlockEditProps<CheckBoxAttributes>>
+  React.PropsWithChildren<BlockEditProps<ResearchConsentQuestionAttributes>>
 > = ({ clientId, attributes, isSelected, setAttributes }) => {
   const { content } = attributes
   const { t } = useTranslation()
 
   return (
     <BlockPlaceholderWrapper
       id={clientId}
-      title={t("title-research-form-checkbox")}
+      title={t("title-research-form-question")}
       explanation={t("research-form-checkbox-description")}
     >
       <div
         className={css`
-          display: flex;
-          flex-direction: rox;
-          align-items: baseline;
-          padding: 1rem;
+          padding: 1rem 0;
           width: 100%;
+          display: flex;
         `}
       >
-        <CheckBox label={"  "} checked={isSelected} />
-
+        <b>{t("label-question")}: </b>
         <RichText
           className={css`
             width: 100%;
+            margin-left: 0.25rem;
           `}
           tagName="span"
+          label={t("title-research-form-question")}
           value={content}
           onChange={(value: string) => setAttributes({ content: value })}
         />
       </div>
+      {(attributes.content ?? "").split(/\s+/).length < 3 && (
+        <ErrorBanner error={t("error-question-too-short")} variant="readOnly" />
+      )}
     </BlockPlaceholderWrapper>
   )
 }

services/cms/src/blocks/ResearchConsentQuestion/index.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+import { formatLtr } from "@wordpress/icons"
+
+import ResearchConsentCheckBoxEditor from "./ResearchConsentQuestionEditor"
+import ResearchConsentCheckBoxSave from "./ResearchConsentQuestionSave"
+
+export interface ResearchConsentQuestionAttributes {
+  content: string
+}
+
+const ResearchConsentQuestionConfiguration: BlockConfiguration<ResearchConsentQuestionAttributes> =
+  {
+    title: "Research Form Question",
+    description: "Used to add a new question to the research consent form",
+    category: "text",
+    attributes: {
+      content: {
+        type: "string",
+        source: "html",
+        selector: "span",
+      },
+    },
+    icon: formatLtr,
+    edit: ResearchConsentCheckBoxEditor,
+    save: ResearchConsentCheckBoxSave,
+  }
+
+export default ResearchConsentQuestionConfiguration

services/cms/src/blocks/index.tsx

@@ -28,7 +28,7 @@ import LearningObjectives from "./LearningObjectives"
 import Map from "./Map"
 import PagesInChapter from "./PagesInChapter"
 import PartnersBlock from "./Partners"
-import ResearchConsentCheckBox from "./ResearchConsentCheckbox"
+import ResearchFormQuestion from "./ResearchConsentQuestion"
 import TableBox from "./TableBox"
 import TopLevelPage from "./TopLevelPage"
 import UnsupportedBlock from "./UnsupportedBlock"
@@ -91,7 +91,7 @@ export const blockTypeMapForTopLevelPages = [
 ] as Array<[string, BlockConfiguration<Record<string, any>>]>
 
 export const blockTypeMapForResearchConsentForm = [
-  ["moocfi/research-consent-checkbox", ResearchConsentCheckBox],
+  ["moocfi/research-consent-question", ResearchFormQuestion],
 ] as Array<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [string, BlockConfiguration<Record<string, any>>]

services/cms/src/components/editors/ResearchConsentFormEditor.tsx

@@ -43,7 +43,7 @@ const ResearchFormEditor: React.FC<React.PropsWithChildren<ResearchFormEditorPro
     modifyBlocks((data.content ?? []) as BlockInstance[], [
       ...allowedResearchFormCoreBlocks,
       // eslint-disable-next-line i18next/no-literal-string
-      "moocfi/research-consent-checkbox",
+      "moocfi/research-consent-question",
     ]) as BlockInstance[],
   )
   const courseId = useContext(CourseContext)?.courseId
@@ -52,7 +52,7 @@ const ResearchFormEditor: React.FC<React.PropsWithChildren<ResearchFormEditorPro
     modifyBlocks((data.content ?? []) as BlockInstance[], [
       ...allowedResearchFormCoreBlocks,
       // eslint-disable-next-line i18next/no-literal-string
-      "moocfi/research-consent-checkbox",
+      "moocfi/research-consent-question",
     ]) as BlockInstance[],
   )
 

services/cms/src/pages/courses/[id]/research-form-edit.tsx

@@ -4,12 +4,12 @@ import dynamic from "next/dynamic"
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
 
-import { CheckBoxAttributes } from "../../../blocks/ResearchConsentCheckbox"
+import { ResearchConsentQuestionAttributes } from "../../../blocks/ResearchConsentQuestion"
 import CourseContext from "../../../contexts/CourseContext"
 import {
   fetchResearchFormWithCourseId,
   upsertResearchForm,
-  upsertResearchFormQuestion,
+  upsertResearchFormQuestions,
 } from "../../../services/backend/courses"
 import {
   NewResearchForm,
@@ -80,8 +80,24 @@ const ResearchForms: React.FC<React.PropsWithChildren<ResearchFormProps>> = ({ q
     await getResearchForm.refetch()
   }
   const mutate = useToastMutation(
-    (form: NewResearchForm) => {
-      return upsertResearchForm(assertNotNullOrUndefined(courseId), form)
+    async (form: NewResearchForm) => {
+      if (!isBlockInstanceArray(form.content)) {
+        throw new Error("content is not block instance")
+      }
+      const researchForm = await upsertResearchForm(assertNotNullOrUndefined(courseId), form)
+      const questions: NewResearchFormQuestion[] = []
+      form.content.forEach((block) => {
+        if (isMoocfiCheckbox(block)) {
+          const newResearchQuestion: NewResearchFormQuestion = {
+            question_id: block.clientId,
+            course_id: researchForm.course_id,
+            research_consent_form_id: researchForm.id,
+            question: block.attributes.content,
+          }
+          questions.push(newResearchQuestion)
+        }
+        upsertResearchFormQuestions(researchForm.id, questions)
+      })
     },
     {
       notify: true,
@@ -91,25 +107,9 @@ const ResearchForms: React.FC<React.PropsWithChildren<ResearchFormProps>> = ({ q
     },
   )
   const handleSave = async (form: NewResearchForm): Promise<ResearchForm> => {
-    const researchForm = await mutate.mutateAsync(form)
-
-    if (!isBlockInstanceArray(form.content)) {
-      throw new Error("content is not block instance")
-    }
-    form.content.forEach((block) => {
-      if (isMoocfiCheckbox(block)) {
-        const newResearchQuestion: NewResearchFormQuestion = {
-          question_id: block.clientId,
-          course_id: researchForm.course_id,
-          research_consent_form_id: researchForm.id,
-          question: block.attributes.content,
-        }
-        upsertResearchFormQuestion(researchForm.id, newResearchQuestion)
-      }
-    })
-
-    await getResearchForm.refetch()
-    return researchForm
+    await mutate.mutateAsync(form)
+    const newData = await getResearchForm.refetch()
+    return newData.data as ResearchForm
   }
 
   return (
@@ -150,8 +150,10 @@ function isBlockInstanceArray(obj: unknown): obj is BlockInstance[] {
   return true
 }
 
-function isMoocfiCheckbox(obj: BlockInstance): obj is BlockInstance<CheckBoxAttributes> {
-  return obj.name === "moocfi/research-consent-checkbox"
+function isMoocfiCheckbox(
+  obj: BlockInstance,
+): obj is BlockInstance<ResearchConsentQuestionAttributes> {
+  return obj.name === "moocfi/research-consent-question"
 }
 
 const exported = withErrorBoundary(withSignedIn(dontRenderUntilQueryParametersReady(ResearchForms)))

services/cms/src/services/backend/courses.ts

@@ -57,12 +57,12 @@ export const upsertResearchForm = async (
   return validateResponse(response, isResearchForm)
 }
 
-export const upsertResearchFormQuestion = async (
+export const upsertResearchFormQuestions = async (
   courseId: string,
-  data: NewResearchFormQuestion,
+  data: NewResearchFormQuestion[],
 ): Promise<ResearchFormQuestion> => {
   const response = await cmsClient.put(
-    `/courses/${courseId}/research-consent-form-question`,
+    `/courses/${courseId}/research-consent-form-questions`,
     data,
     {
       responseType: "json",

services/course-material/src/components/ContentRenderer/index.tsx

@@ -62,7 +62,7 @@ import LearningObjectiveBlock from "./moocfi/LearningObjectiveBlock"
 import Map from "./moocfi/Map"
 import PagesInChapterBlock from "./moocfi/PagesInChapterBlock"
 import PartnersBlock from "./moocfi/PartnersBlock"
-import ResearchFormCheckBoxBlock from "./moocfi/ResearchFormCheckBoxBlock"
+import ResearchConsentQuestionBlock from "./moocfi/ResearchConsentQuestionBlock"
 import TableBox from "./moocfi/TableBox"
 import TopLevelPageBlock from "./moocfi/TopLevelPagesBlock/index"
 
@@ -154,7 +154,7 @@ export const blockToRendererMap: { [blockName: string]: any } = {
   "moocfi/map": Map,
   "moocfi/author": AuthorBlock,
   "moocfi/author-inner-block": AuthorInnerBlock,
-  "moocfi/research-consent-checkbox": ResearchFormCheckBoxBlock,
+  "moocfi/research-consent-question": ResearchConsentQuestionBlock,
   "moocfi/exercise-custom-view-block": ExerciseCustomViewBlock,
 }
 

services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx → services/course-material/src/components/ContentRenderer/moocfi/ResearchConsentQuestionBlock.tsx

@@ -30,6 +30,7 @@ const ResearchFormCheckBoxBlock: React.FC<
     <>
       <CheckBox
         label={parseText(props.data.attributes.content, terms).parsedText}
+        labelIsRawHtml
         checked={questionIdsAndAnswers[props.data.clientId]}
         onChange={() => handleChange(!questionIdsAndAnswers[props.data.clientId])}
       />

services/course-material/src/pages/[organizationSlug]/exams/[id].tsx

@@ -191,7 +191,7 @@ const Exam: React.FC<React.PropsWithChildren<ExamProps>> = ({ query }) => {
         <div id="exam-instructions">
           <ExamStartBanner
             onStart={async () => {
-              await enrollInExam(examId)
+              await enrollInExam(examId, false)
               exam.refetch()
             }}
             examEnrollmentData={exam.data.enrollment_data}