@openmrs/esm-form-builder-app 2.0.2-pre.574 → 2.0.2-pre.586

package/src/components/interactive-builder/edit-question-modal.component.tsx

@@ -1,13 +1,16 @@
-import React, { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import debounce from 'lodash-es/debounce';
+import flattenDeep from 'lodash-es/flattenDeep';
 import {
   Button,
   ComposedModal,
   Form,
   FormGroup,
   FormLabel,
-  Layer,
   InlineLoading,
+  InlineNotification,
+  Layer,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -21,19 +24,17 @@ import {
   Tag,
   TextInput,
   Tile,
-} from "@carbon/react";
-import { ArrowUpRight } from "@carbon/react/icons";
-import debounce from "lodash-es/debounce";
-import flattenDeep from "lodash-es/flattenDeep";
-import { showNotification, showToast, useConfig } from "@openmrs/esm-framework";
-import type { RenderType } from "@openmrs/openmrs-form-engine-lib";
-
-import type { Concept, ConceptMapping, Question, Schema } from "../../types";
-import { useConceptLookup } from "../../hooks/useConceptLookup";
-import { useConceptName } from "../../hooks/useConceptName";
-import styles from "./question-modal.scss";
-
-type EditQuestionModalProps = {
+} from '@carbon/react';
+import { ArrowUpRight } from '@carbon/react/icons';
+import { showNotification, showToast, useConfig } from '@openmrs/esm-framework';
+import type { RenderType } from '@openmrs/openmrs-form-engine-lib';
+
+import type { Concept, ConceptMapping, Question, QuestionType, Schema } from '../../types';
+import { useConceptLookup } from '../../hooks/useConceptLookup';
+import { useConceptName } from '../../hooks/useConceptName';
+import styles from './question-modal.scss';
+
+interface EditQuestionModalProps {
   onModalChange: (showModal: boolean) => void;
   onQuestionEdit: (question: Question) => void;
   onSchemaChange: (schema: Schema) => void;
@@ -44,7 +45,17 @@ type EditQuestionModalProps = {
   schema: Schema;
   sectionIndex: number;
   showModal: boolean;
-};
+}
+
+interface Config {
+  fieldTypes: Array<RenderType>;
+  questionTypes: Array<QuestionType>;
+}
+
+interface Item {
+  id: string;
+  text: string;
+}
 
 const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
   questionToEdit,
@@ -59,36 +70,45 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
   onQuestionEdit,
 }) => {
   const { t } = useTranslation();
-  const { fieldTypes, questionTypes } = useConfig();
-  const [max, setMax] = useState("");
-  const [min, setMin] = useState("");
-  const [questionLabel, setQuestionLabel] = useState("");
-  const [questionType, setQuestionType] = useState("");
-  const [isQuestionRequired, setIsQuestionRequired] = useState(false);
-  const [fieldType, setFieldType] = useState<RenderType>(null);
-  const [questionId, setQuestionId] = useState("");
-  const [selectedConcept, setSelectedConcept] = useState(null);
-  const [conceptMappings, setConceptMappings] = useState<ConceptMapping[]>(
-    questionToEdit.questionOptions.conceptMappings
+  const { fieldTypes, questionTypes }: Config = useConfig();
+
+  const [answersChanged, setAnswersChanged] = useState(false);
+  const [answersFromConcept, setAnswersFromConcept] = useState<
+    Array<{
+      concept: string;
+      label: string;
+    }>
+  >([]);
+  const [conceptMappings, setConceptMappings] = useState<Array<ConceptMapping> | undefined>(
+    questionToEdit.questionOptions.conceptMappings,
   );
-  const [rows, setRows] = useState(2);
-  const [conceptToLookup, setConceptToLookup] = useState("");
-  const [answersFromConcept, setAnswersFromConcept] = useState([]);
-  const [selectedAnswers, setSelectedAnswers] = useState([]);
+  const [conceptToLookup, setConceptToLookup] = useState('');
+  const [fieldType, setFieldType] = useState<RenderType | null>(null);
+  const [isQuestionRequired, setIsQuestionRequired] = useState(false);
+  const [max, setMax] = useState('');
+  const [min, setMin] = useState('');
+  const [questionId, setQuestionId] = useState('');
+  const [questionLabel, setQuestionLabel] = useState('');
+  const [questionType, setQuestionType] = useState<QuestionType | null>(null);
+  const [rows, setRows] = useState('');
+  const [selectedAnswers, setSelectedAnswers] = useState<
+    Array<{
+      id: string;
+      text: string;
+    }>
+  >([]);
+  const [selectedConcept, setSelectedConcept] = useState<Concept | null>(null);
+
   const { concepts, isLoadingConcepts } = useConceptLookup(conceptToLookup);
-  const { conceptName, isLoadingConceptName } = useConceptName(
-    questionToEdit.questionOptions.concept
+  const { conceptName, conceptNameLookupError, isLoadingConceptName } = useConceptName(
+    questionToEdit.questionOptions.concept,
   );
-  const [answersChanged, setAnswersChanged] = useState(false);
 
-  const hasConceptChanged =
-    selectedConcept &&
-    questionToEdit?.questionOptions?.concept !== selectedConcept;
+  const hasConceptChanged = selectedConcept && questionToEdit?.questionOptions?.concept !== selectedConcept?.uuid;
 
-  const debouncedSearch = useMemo(
-    () => debounce((searchTerm) => setConceptToLookup(searchTerm), 500),
-    []
-  );
+  const debouncedSearch = useMemo(() => {
+    return debounce((searchTerm: string) => setConceptToLookup(searchTerm), 500) as (searchTerm: string) => void;
+  }, []);
 
   const handleConceptChange = (searchTerm: string) => {
     if (searchTerm) {
@@ -97,26 +117,24 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
   };
 
   const handleConceptSelect = (concept: Concept) => {
-    setConceptToLookup("");
+    setConceptToLookup('');
     setSelectedAnswers([]);
     setSelectedConcept(concept);
     setConceptMappings(
       concept?.mappings?.map((conceptMapping) => {
-        const data = conceptMapping.display.split(": ");
+        const data = conceptMapping.display.split(': ');
         return {
           relationship: conceptMapping.conceptMapType.display,
           type: data[0],
           value: data[1],
         };
-      })
+      }),
     );
     setAnswersFromConcept(
-      concept?.answers?.length
-        ? concept.answers.map((answer) => ({
-            concept: answer?.uuid,
-            label: answer?.display,
-          }))
-        : []
+      concept?.answers?.map((answer) => ({
+        concept: answer?.uuid,
+        label: answer?.display,
+      })) ?? [],
     );
   };
 
@@ -133,7 +151,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       });
     });
 
-    const questionIds = flattenDeep(nestedIds);
+    const questionIds: Array<string> = flattenDeep(nestedIds);
 
     return questionIds.includes(idToTest);
   };
@@ -152,11 +170,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       }));
     } else if (hasConceptChanged && answersFromConcept.length === 0) {
       mappedAnswers = [];
-    } else if (
-      hasConceptChanged &&
-      answersFromConcept?.length > 0 &&
-      selectedAnswers?.length
-    ) {
+    } else if (hasConceptChanged && answersFromConcept?.length > 0 && selectedAnswers?.length) {
       mappedAnswers = selectedAnswers?.length
         ? selectedAnswers.map((answer) => ({
             concept: answer.id,
@@ -171,30 +185,22 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       const data = {
         label: questionLabel ? questionLabel : questionToEdit.label,
         type: questionType ? questionType : questionToEdit.type,
-        required: isQuestionRequired
-          ? isQuestionRequired
-          : /true/.test(questionToEdit?.required?.toString()),
+        required: isQuestionRequired ? isQuestionRequired : /true/.test(questionToEdit?.required?.toString()),
         id: questionId ? questionId : questionToEdit.id,
         questionOptions: {
-          rendering: fieldType
-            ? fieldType
-            : questionToEdit.questionOptions.rendering,
-          concept: selectedConcept?.uuid
-            ? selectedConcept.uuid
-            : questionToEdit.questionOptions.concept,
-          conceptMappings: conceptMappings?.length
-            ? conceptMappings
-            : questionToEdit.questionOptions.conceptMappings,
+          rendering: fieldType ? fieldType : questionToEdit.questionOptions.rendering,
+          concept: selectedConcept?.uuid ? selectedConcept.uuid : questionToEdit.questionOptions.concept,
+          conceptMappings: conceptMappings?.length ? conceptMappings : questionToEdit.questionOptions.conceptMappings,
           answers: mappedAnswers,
         },
       };
 
-      schema.pages[pageIndex].sections[sectionIndex].questions[questionIndex] =
-        data;
+      schema.pages[pageIndex].sections[sectionIndex].questions[questionIndex] = data;
+
       onSchemaChange({ ...schema });
       resetIndices();
-      setQuestionLabel("");
-      setQuestionId("");
+      setQuestionLabel('');
+      setQuestionId('');
       setIsQuestionRequired(false);
       setQuestionType(null);
       setFieldType(null);
@@ -202,41 +208,38 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       setConceptMappings([]);
       setSelectedAnswers([]);
       onQuestionEdit(null);
+
       showToast({
-        title: t("success", "Success!"),
-        kind: "success",
+        title: t('success', 'Success!'),
+        kind: 'success',
         critical: true,
-        description: t("questionUpdated", "Question updated"),
+        description: t('questionUpdated', 'Question updated'),
       });
+
       onModalChange(false);
     } catch (error) {
-      showNotification({
-        title: t("errorUpdatingQuestion", "Error updating question"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorUpdatingQuestion', 'Error updating question'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
     }
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
-      <ModalHeader title={t("editQuestion", "Edit question")} />
-      <Form
-        className={styles.form}
-        onSubmit={(event) => event.preventDefault()}
-      >
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={t('editQuestion', 'Edit question')} />
+      <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <Stack gap={5}>
             <TextInput
               defaultValue={questionToEdit.label}
               id={questionToEdit.id}
-              labelText={t("questionLabel", "Label")}
-              onChange={(event) => setQuestionLabel(event.target.value)}
+              labelText={t('questionLabel', 'Label')}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuestionLabel(event.target.value)}
               required
             />
 
@@ -244,45 +247,35 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
               defaultValue={questionToEdit.id}
               id="questionId"
               invalid={questionIdExists(questionId)}
-              invalidText={t(
-                "questionIdExists",
-                "This question ID already exists in your schema"
-              )}
-              labelText={t(
-                "questionId",
-                "Question ID (prefer using camel-case for IDs)"
-              )}
-              onChange={(event) => setQuestionId(event.target.value)}
+              invalidText={t('questionIdExists', 'This question ID already exists in your schema')}
+              labelText={t('questionId', 'Question ID (prefer using camel-case for IDs)')}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuestionId(event.target.value)}
               placeholder={t(
-                "questionIdPlaceholder",
-                'Enter a unique ID e.g. "anaesthesiaType" for a question asking about the type of anaesthesia.'
+                'questionIdPlaceholder',
+                'Enter a unique ID e.g. "anaesthesiaType" for a question asking about the type of anaesthesia.',
               )}
               required
             />
 
             <RadioButtonGroup
-              defaultSelected={
-                /true/.test(questionToEdit?.required?.toString())
-                  ? "required"
-                  : "optional"
-              }
+              defaultSelected={/true/.test(questionToEdit?.required?.toString()) ? 'required' : 'optional'}
               name="isQuestionRequired"
               legendText={t(
-                "isQuestionRequiredOrOptional",
-                "Is this question a required or optional field? Required fields must be answered before the form can be submitted."
+                'isQuestionRequiredOrOptional',
+                'Is this question a required or optional field? Required fields must be answered before the form can be submitted.',
               )}
             >
               <RadioButton
                 id="questionIsNotRequired"
                 defaultChecked={true}
-                labelText={t("optional", "Optional")}
+                labelText={t('optional', 'Optional')}
                 onClick={() => setIsQuestionRequired(false)}
                 value="optional"
               />
               <RadioButton
                 id="questionIsRequired"
                 defaultChecked={false}
-                labelText={t("required", "Required")}
+                labelText={t('required', 'Required')}
                 onClick={() => setIsQuestionRequired(true)}
                 value="required"
               />
@@ -290,99 +283,85 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
 
             <Select
               defaultValue={questionToEdit.type}
-              onChange={(event) => setQuestionType(event.target.value)}
-              id={"questionType"}
-              invalidText={t("typeRequired", "Type is required")}
-              labelText={t("questionType", "Question type")}
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                setQuestionType(event.target.value as QuestionType)
+              }
+              id={'questionType'}
+              invalidText={t('typeRequired', 'Type is required')}
+              labelText={t('questionType', 'Question type')}
               required
             >
-              {!questionType && (
-                <SelectItem
-                  text={t("chooseQuestionType", "Choose a question type")}
-                  value=""
-                />
-              )}
+              {!questionType && <SelectItem text={t('chooseQuestionType', 'Choose a question type')} value="" />}
               {questionTypes.map((questionType, key) => (
-                <SelectItem
-                  text={questionType}
-                  value={questionType}
-                  key={key}
-                />
+                <SelectItem text={questionType} value={questionType} key={key} />
               ))}
             </Select>
 
             <Select
               defaultValue={questionToEdit.questionOptions.rendering}
-              onChange={(event) => setFieldType(event.target.value)}
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldType(event.target.value as RenderType)}
               id="renderingType"
-              invalidText={t(
-                "validFieldTypeRequired",
-                "A valid field type value is required"
-              )}
-              labelText={t("fieldType", "Field type")}
+              invalidText={t('validFieldTypeRequired', 'A valid field type value is required')}
+              labelText={t('fieldType', 'Field type')}
               required
             >
-              {!fieldType && (
-                <SelectItem
-                  text={t("chooseFieldType", "Choose a field type")}
-                  value=""
-                />
-              )}
+              {!fieldType && <SelectItem text={t('chooseFieldType', 'Choose a field type')} value="" />}
               {fieldTypes.map((fieldType, key) => (
                 <SelectItem text={fieldType} value={fieldType} key={key} />
               ))}
             </Select>
 
-            {fieldType === "number" ? (
+            {fieldType === 'number' ? (
               <>
                 <TextInput
                   id="min"
                   labelText="Min"
-                  value={min || ""}
-                  onChange={(event) => setMin(event.target.value)}
+                  value={min || ''}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setMin(event.target.value)}
                   required
                 />
                 <TextInput
                   id="max"
                   labelText="Max"
-                  value={max || ""}
-                  onChange={(event) => setMax(event.target.value)}
+                  value={max || ''}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setMax(event.target.value)}
                   required
                 />
               </>
-            ) : fieldType === "textarea" ? (
+            ) : fieldType === 'textarea' ? (
               <TextInput
                 id="textAreaRows"
-                labelText={t("rows", "Rows")}
-                value={rows || ""}
-                onChange={(event) => setRows(event.target.value)}
+                labelText={t('rows', 'Rows')}
+                value={rows || ''}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setRows(event.target.value)}
                 required
               />
             ) : null}
 
-            {fieldType !== "ui-select-extended" && (
+            {fieldType !== 'ui-select-extended' && (
               <div>
                 <FormLabel className={styles.label}>
-                  {t("searchForBackingConcept", "Search for a backing concept")}
+                  {t('searchForBackingConcept', 'Search for a backing concept')}
                 </FormLabel>
-                {isLoadingConceptName ? (
-                  <InlineLoading
-                    className={styles.loader}
-                    description={t("loading", "Loading") + "..."}
+                {conceptNameLookupError ? (
+                  <InlineNotification
+                    kind="error"
+                    lowContrast
+                    className={styles.error}
+                    title={t('errorFetchingConceptName', "Couldn't resolve concept name")}
+                    subtitle={t('conceptDoesNotExist', 'The linked concept does not exist in your dictionary.')}
                   />
+                ) : null}
+                {isLoadingConceptName ? (
+                  <InlineLoading className={styles.loader} description={t('loading', 'Loading') + '...'} />
                 ) : (
                   <>
                     <Search
                       defaultValue={conceptName}
                       id="conceptLookup"
                       onClear={() => setSelectedConcept(null)}
-                      onChange={(e) =>
-                        handleConceptChange(e.target.value?.trim())
-                      }
-                      placeholder={t(
-                        "searchConcept",
-                        "Search using a concept name or UUID"
-                      )}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleConceptChange(e.target.value?.trim())}
+                      placeholder={t('searchConcept', 'Search using a concept name or UUID')}
                       required
                       size="md"
                       value={selectedConcept?.display}
@@ -391,12 +370,9 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                       if (!conceptToLookup) return null;
                       if (isLoadingConcepts)
                         return (
-                          <InlineLoading
-                            className={styles.loader}
-                            description={t("searching", "Searching") + "..."}
-                          />
+                          <InlineLoading className={styles.loader} description={t('searching', 'Searching') + '...'} />
                         );
-                      if (concepts && concepts?.length && !isLoadingConcepts) {
+                      if (concepts?.length && !isLoadingConcepts) {
                         return (
                           <ul className={styles.conceptList}>
                             {concepts?.map((concept, index) => (
@@ -416,10 +392,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                         <Layer>
                           <Tile className={styles.emptyResults}>
                             <span>
-                              {t(
-                                "noMatchingConcepts",
-                                "No concepts were found that match"
-                              )}{" "}
+                              {t('noMatchingConcepts', 'No concepts were found that match')}{' '}
                               <strong>"{conceptToLookup}".</strong>
                             </span>
                           </Tile>
@@ -427,19 +400,16 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                           <div className={styles.oclLauncherBanner}>
                             {
                               <p className={styles.bodyShort01}>
-                                {t(
-                                  "conceptSearchHelpText",
-                                  "Can't find a concept?"
-                                )}
+                                {t('conceptSearchHelpText', "Can't find a concept?")}
                               </p>
                             }
                             <a
                               className={styles.oclLink}
                               target="_blank"
                               rel="noopener noreferrer"
-                              href={"https://app.openconceptlab.org/"}
+                              href={'https://app.openconceptlab.org/'}
                             >
-                              {t("searchInOCL", "Search in OCL")}
+                              {t('searchInOCL', 'Search in OCL')}
                               <ArrowUpRight size={16} />
                             </a>
                           </div>
@@ -451,25 +421,23 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
               </div>
             )}
 
-            {conceptMappings && conceptMappings.length ? (
+            {conceptMappings?.length ? (
               <FormGroup>
-                <FormLabel className={styles.label}>
-                  {t("mappings", "Mappings")}
-                </FormLabel>
+                <FormLabel className={styles.label}>{t('mappings', 'Mappings')}</FormLabel>
                 <table className={styles.tableStriped}>
                   <thead>
                     <tr>
-                      <th>{t("relationship", "Relationship")}</th>
-                      <th>{t("source", "Source")}</th>
-                      <th>{t("code", "Code")}</th>
+                      <th>{t('relationship', 'Relationship')}</th>
+                      <th>{t('source', 'Source')}</th>
+                      <th>{t('code', 'Code')}</th>
                     </tr>
                   </thead>
                   <tbody>
                     {conceptMappings.map((mapping, index) => (
                       <tr key={`mapping-${index}`}>
-                        <td>{mapping.relationship ?? "--"}</td>
-                        <td>{mapping.type ?? "--"}</td>
-                        <td>{mapping.value ?? "--"}</td>
+                        <td>{mapping.relationship ?? '--'}</td>
+                        <td>{mapping.type ?? '--'}</td>
+                        <td>{mapping.value ?? '--'}</td>
                       </tr>
                     ))}
                   </tbody>
@@ -477,48 +445,40 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
               </FormGroup>
             ) : null}
 
-            {!hasConceptChanged &&
-            questionToEdit?.questionOptions?.answers &&
-            questionToEdit?.questionOptions.answers?.length ? (
+            {!hasConceptChanged && questionToEdit?.questionOptions.answers?.length ? (
               <MultiSelect
                 className={styles.multiSelect}
                 direction="top"
                 id="selectAnswers"
-                itemToString={(item) => item.text}
-                initialSelectedItems={questionToEdit?.questionOptions?.answers?.map(
-                  (answer) => ({
-                    id: answer.concept,
-                    text: answer.label,
-                  })
-                )}
-                items={questionToEdit?.questionOptions?.answers?.map(
-                  (answer) => ({
-                    id: answer.concept,
-                    text: answer.label ?? "",
-                  })
-                )}
-                onChange={({ selectedItems }) => {
+                itemToString={(item: Item) => item.text}
+                initialSelectedItems={questionToEdit?.questionOptions?.answers?.map((answer) => ({
+                  id: answer.concept,
+                  text: answer.label,
+                }))}
+                items={questionToEdit?.questionOptions?.answers?.map((answer) => ({
+                  id: answer.concept,
+                  text: answer.label ?? '',
+                }))}
+                onChange={({
+                  selectedItems,
+                }: {
+                  selectedItems: Array<{
+                    id: string;
+                    text: string;
+                  }>;
+                }) => {
                   setAnswersChanged(true);
                   setSelectedAnswers(selectedItems.sort());
                 }}
                 size="md"
-                titleText={t(
-                  "selectAnswersToDisplay",
-                  "Select answers to display"
-                )}
+                titleText={t('selectAnswersToDisplay', 'Select answers to display')}
               />
             ) : null}
 
-            {!hasConceptChanged &&
-            questionToEdit?.questionOptions?.answers?.length &&
-            !answersChanged ? (
+            {!hasConceptChanged && questionToEdit?.questionOptions?.answers?.length && !answersChanged ? (
               <div>
                 {questionToEdit?.questionOptions?.answers?.map((answer) => (
-                  <Tag
-                    className={styles.tag}
-                    key={answer?.concept}
-                    type={"blue"}
-                  >
+                  <Tag className={styles.tag} key={answer?.concept} type={'blue'}>
                     {answer?.label}
                   </Tag>
                 ))}
@@ -530,30 +490,28 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                 className={styles.multiSelect}
                 direction="top"
                 id="selectAnswers"
-                itemToString={(item) => item.text}
+                itemToString={(item: Item) => item.text}
                 items={answersFromConcept.map((answer) => ({
                   id: answer.concept,
                   text: answer.label,
                 }))}
-                onChange={({ selectedItems }) =>
-                  setSelectedAnswers(selectedItems.sort())
-                }
+                onChange={({
+                  selectedItems,
+                }: {
+                  selectedItems: Array<{
+                    id: string;
+                    text: string;
+                  }>;
+                }) => setSelectedAnswers(selectedItems.sort())}
                 size="md"
-                titleText={t(
-                  "selectAnswersToDisplay",
-                  "Select answers to display"
-                )}
+                titleText={t('selectAnswersToDisplay', 'Select answers to display')}
               />
             ) : null}
 
-            {(hasConceptChanged || answersChanged) && (
+            {(hasConceptChanged ?? answersChanged) && (
               <div>
                 {selectedAnswers.map((selectedAnswer) => (
-                  <Tag
-                    className={styles.tag}
-                    key={selectedAnswer.id}
-                    type={"blue"}
-                  >
+                  <Tag className={styles.tag} key={selectedAnswer.id} type={'blue'}>
                     {selectedAnswer.text}
                   </Tag>
                 ))}
@@ -563,10 +521,10 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
         </ModalBody>
         <ModalFooter>
           <Button onClick={() => onModalChange(false)} kind="secondary">
-            {t("cancel", "Cancel")}
+            {t('cancel', 'Cancel')}
           </Button>
           <Button onClick={handleUpdateQuestion}>
-            <span>{t("save", "Save")}</span>
+            <span>{t('save', 'Save')}</span>
           </Button>
         </ModalFooter>
       </Form>