Fix raw html in the research form checkbox label (#1252)

* Fix raw html in the research form checkbox label * Fixes
rage · Mar 19, 2024 · 47e4365 · 47e4365
1 parent 9b27c0b
commit 47e4365
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/services/cms/src/blocks/ResearchConsentCheckbox/ResearchConsentCheckBoxEditor.tsx b/services/cms/src/blocks/ResearchConsentCheckbox/ResearchConsentCheckBoxEditor.tsx
@@ -4,6 +4,7 @@ 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"
 
@@ -41,6 +42,9 @@ const ResearchConsentCheckBoxEditor: React.FC<
           onChange={(value: string) => setAttributes({ content: value })}
         />
       </div>
+      {(attributes.content ?? "").split(/\s+/).length < 3 && (
+        <ErrorBanner error={t("error-question-too-short")} variant="readOnly" />
+      )}
     </BlockPlaceholderWrapper>
   )
 }

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.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])}
       />

diff --git a/shared-module/src/components/InputFields/CheckBox.tsx b/shared-module/src/components/InputFields/CheckBox.tsx
@@ -78,10 +78,21 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   error?: boolean
   checked?: boolean
   onChangeByValue?: (checked: boolean, name?: string) => void
+  labelIsRawHtml?: boolean
 }
 
 const CheckBox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ onChangeByValue, onChange, className, checked, ...rest }: CheckboxProps, ref) => {
+  (
+    {
+      onChangeByValue,
+      onChange,
+      className,
+      checked,
+      labelIsRawHtml = false,
+      ...rest
+    }: CheckboxProps,
+    ref,
+  ) => {
     const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       if (onChangeByValue) {
         const {
@@ -112,7 +123,12 @@ const CheckBox = forwardRef<HTMLInputElement, CheckboxProps>(
             ref={ref}
             {...rest}
           />
-          <span>{rest.label}</span>
+          {/* eslint-disable-next-line react/no-danger-with-children */}
+          <span
+            dangerouslySetInnerHTML={labelIsRawHtml ? { __html: rest.label } : undefined}
+            // eslint-disable-next-line react/no-children-prop
+            children={labelIsRawHtml ? undefined : rest.label}
+          />
         </Label>
         {rest.error && (
           <span

diff --git a/shared-module/src/locales/en/cms.json b/shared-module/src/locales/en/cms.json
@@ -38,6 +38,7 @@
   "error": "Error",
   "error-cannot-render-editor-for-exercise-service-x": "Cannot render editor for exercise service {{slug}}.",
   "error-cannot-render-exercise-task-missing-url": "Cannot render exercise task, missing url.",
+  "error-question-too-short": "Question is too short.",
   "error-spec-not-parseable": "Spec not parseable.",
   "exercise-custom-view-block": "Exercise Custom View block",
   "exercise-custom-view-block-explanation": "A view to an exercise service that is not related to an exercise.",

diff --git a/shared-module/src/locales/fi/cms.json b/shared-module/src/locales/fi/cms.json
@@ -38,6 +38,7 @@
   "error": "Virhe",
   "error-cannot-render-editor-for-exercise-service-x": "En pysty renderöimään editoria tehtäväpalvelulle {{slug}}.",
   "error-cannot-render-exercise-task-missing-url": "Harjoitustehtävää ei voi renderöidä, URL-osoite puuttuu.",
+  "error-question-too-short": "Kysymys on liian lyhyt.",
   "error-spec-not-parseable": "Mallivastausta ei voida parsia",
   "exercise-custom-view-block": "Mukautettu näkymä lohko",
   "exercise-custom-view-block-explanation": "Näkymä tehtäväpalveluun, joka ei liity tehtävään.",