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

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

@@ -1,16 +1,10 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Button,
-  ComposedModal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
-import { showNotification, showToast } from "@openmrs/esm-framework";
-import type { Schema } from "../../types";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ComposedModal, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showNotification, showToast } from '@openmrs/esm-framework';
+import type { Schema } from '../../types';
 
-type DeleteQuestionModal = {
+interface DeleteQuestionModal {
   onModalChange: (showModal: boolean) => void;
   onSchemaChange: (schema: Schema) => void;
   resetIndices: () => void;
@@ -19,7 +13,7 @@ type DeleteQuestionModal = {
   questionIndex: number;
   schema: Schema;
   showModal: boolean;
-};
+}
 
 const DeleteQuestionModal: React.FC<DeleteQuestionModal> = ({
   onModalChange,
@@ -33,56 +27,40 @@ const DeleteQuestionModal: React.FC<DeleteQuestionModal> = ({
 }) => {
   const { t } = useTranslation();
 
-  const deleteQuestion = (
-    pageIndex: number,
-    sectionIndex: number,
-    questionIndex: number
-  ) => {
+  const deleteQuestion = (pageIndex: number, sectionIndex: number, questionIndex: number) => {
     try {
-      schema.pages[pageIndex].sections[sectionIndex].questions.splice(
-        questionIndex,
-        1
-      );
+      schema.pages[pageIndex].sections[sectionIndex].questions.splice(questionIndex, 1);
 
       onSchemaChange({ ...schema });
       resetIndices();
 
       showToast({
-        title: t("success", "Success!"),
-        kind: "success",
+        title: t('success', 'Success!'),
+        kind: 'success',
         critical: true,
-        description: t("QuestionDeleted", "Question deleted"),
+        description: t('QuestionDeleted', 'Question deleted'),
       });
     } catch (error) {
-      showNotification({
-        title: t("errorDeletingQuestion", "Error deleting question"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorDeletingQuestion', 'Error deleting question'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
     }
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
-      <ModalHeader
-        title={t(
-          "deleteQuestionConfirmation",
-          "Are you sure you want to delete this question?"
-        )}
-      />
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={t('deleteQuestionConfirmation', 'Are you sure you want to delete this question?')} />
       <ModalBody>
-        <p>
-          {t("deleteQuestionExplainerText", "This action cannot be undone.")}
-        </p>
+        <p>{t('deleteQuestionExplainerText', 'This action cannot be undone.')}</p>
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={() => onModalChange(false)}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button
           kind="danger"
@@ -91,7 +69,7 @@ const DeleteQuestionModal: React.FC<DeleteQuestionModal> = ({
             onModalChange(false);
           }}
         >
-          <span>{t("deleteQuestion", "Delete question")}</span>
+          <span>{t('deleteQuestion', 'Delete question')}</span>
         </Button>
       </ModalFooter>
     </ComposedModal>

package/src/components/interactive-builder/delete-section-modal.component.tsx

@@ -1,16 +1,10 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Button,
-  ComposedModal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
-import { showNotification, showToast } from "@openmrs/esm-framework";
-import type { Schema } from "../../types";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ComposedModal, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showNotification, showToast } from '@openmrs/esm-framework';
+import type { Schema } from '../../types';
 
-type DeleteSectionModal = {
+interface DeleteSectionModal {
   onModalChange: (showModal: boolean) => void;
   onSchemaChange: (schema: Schema) => void;
   resetIndices: () => void;
@@ -18,7 +12,7 @@ type DeleteSectionModal = {
   sectionIndex: number;
   schema: Schema;
   showModal: boolean;
-};
+}
 
 const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
   onModalChange,
@@ -39,44 +33,37 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
       resetIndices();
 
       showToast({
-        title: t("success", "Success!"),
-        kind: "success",
+        title: t('success', 'Success!'),
+        kind: 'success',
         critical: true,
-        description: t("SectionDeleted", "Section deleted"),
+        description: t('SectionDeleted', 'Section deleted'),
       });
     } catch (error) {
-      showNotification({
-        title: t("errorDeletingSection", "Error deleting section"),
-        kind: "error",
-        critical: true,
-        description: error?.message,
-      });
+      if (error instanceof Error) {
+        showNotification({
+          title: t('errorDeletingSection', 'Error deleting section'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
     }
   };
 
   return (
-    <ComposedModal
-      open={showModal}
-      onClose={() => onModalChange(false)}
-      preventCloseOnClickOutside
-    >
-      <ModalHeader
-        title={t(
-          "deleteSectionConfirmation",
-          "Are you sure you want to delete this section?"
-        )}
-      />
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={t('deleteSectionConfirmation', 'Are you sure you want to delete this section?')} />
       <ModalBody>
         <p>
           {t(
-            "deleteSectionExplainerText",
-            "Deleting this section will delete all the questions associated with it. This action cannot be undone."
+            'deleteSectionExplainerText',
+            'Deleting this section will delete all the questions associated with it. This action cannot be undone.',
           )}
         </p>
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={() => onModalChange(false)}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button
           kind="danger"
@@ -85,7 +72,7 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
             onModalChange(false);
           }}
         >
-          <span>{t("deleteSection", "Delete section")}</span>
+          <span>{t('deleteSection', 'Delete section')}</span>
         </Button>
       </ModalFooter>
     </ComposedModal>

package/src/components/interactive-builder/draggable-question.component.tsx

@@ -1,26 +1,22 @@
-import React from "react";
-import { useDraggable } from "@dnd-kit/core";
-import { CSS } from "@dnd-kit/utilities";
-import { useTranslation } from "react-i18next";
-import { Button, CopyButton } from "@carbon/react";
-import { Draggable, Edit, TrashCan } from "@carbon/react/icons";
-import type { Question } from "../../types";
-import styles from "./draggable-question.scss";
+import React from 'react';
+import { useDraggable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { useTranslation } from 'react-i18next';
+import { Button, CopyButton } from '@carbon/react';
+import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
+import type { Question } from '../../types';
+import styles from './draggable-question.scss';
 
-type DraggableQuestionProps = {
+interface DraggableQuestionProps {
   question: Question;
   pageIndex: number;
   sectionIndex: number;
   questionIndex: number;
-  handleDuplicateQuestion: (
-    question: Question,
-    pageId: number,
-    sectionId: number
-  ) => void;
+  handleDuplicateQuestion: (question: Question, pageId: number, sectionId: number) => void;
   handleEditButtonClick: (question: Question) => void;
   handleDeleteButtonClick: (question: Question) => void;
   questionCount: number;
-};
+}
 
 export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   question,
@@ -35,11 +31,10 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   const { t } = useTranslation();
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
-  const { attributes, listeners, transform, isDragging, setNodeRef } =
-    useDraggable({
-      id: draggableId,
-      disabled: questionCount <= 1,
-    });
+  const { attributes, listeners, transform, isDragging, setNodeRef } = useDraggable({
+    id: draggableId,
+    disabled: questionCount <= 1,
+  });
 
   const style = {
     transform: CSS.Translate.toString(transform),
@@ -50,12 +45,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   return (
     <div className={dragStyles} style={style}>
       <div className={styles.iconAndName}>
-        <div
-          className={styles.dragIconContainer}
-          ref={setNodeRef}
-          {...attributes}
-          {...listeners}
-        >
+        <div className={styles.dragIconContainer} ref={setNodeRef} {...attributes} {...listeners}>
           <Draggable className={styles.dragIcon} size={16} />
         </div>
         <p className={styles.questionLabel}>{question.label}</p>
@@ -64,18 +54,15 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         <CopyButton
           align="top"
           className="cds--btn--sm"
-          feedback={t("duplicated", "Duplicated") + "!"}
-          iconDescription={t("duplicateQuestion", "Duplicate question")}
+          feedback={t('duplicated', 'Duplicated') + '!'}
+          iconDescription={t('duplicateQuestion', 'Duplicate question')}
           kind="ghost"
-          onClick={() =>
-            !isDragging &&
-            handleDuplicateQuestion(question, pageIndex, sectionIndex)
-          }
+          onClick={() => !isDragging && handleDuplicateQuestion(question, pageIndex, sectionIndex)}
         />
         <Button
           enterDelayMs={300}
           hasIconOnly
-          iconDescription={t("editQuestion", "Edit question")}
+          iconDescription={t('editQuestion', 'Edit question')}
           kind="ghost"
           onClick={() => {
             if (!isDragging) {
@@ -88,7 +75,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
         <Button
           enterDelayMs={300}
           hasIconOnly
-          iconDescription={t("deleteQuestion", "Delete question")}
+          iconDescription={t('deleteQuestion', 'Delete question')}
           kind="ghost"
           onClick={handleDeleteButtonClick}
           renderIcon={(props) => <TrashCan size={16} {...props} />}

package/src/components/interactive-builder/draggable-question.scss

@@ -33,14 +33,14 @@
   cursor: pointer;
 
   :hover {
-    background-color: colors.$white-0;
+    background-color: colors.$gray-20;
   }
 }
 
 .dragIcon {
   margin: 0 layout.$spacing-03;
   padding: 0.25rem;
-  color: colors.$gray-50;
+  color: colors.$gray-80;
   margin-top: 0.25rem;
   width: 1.5rem;
   height: 1.5rem;

package/src/components/interactive-builder/droppable-container.component.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { useDroppable } from "@dnd-kit/core";
+import React from 'react';
+import { useDroppable } from '@dnd-kit/core';
 
-type DroppableProps = {
+interface DroppableProps {
   id: string;
   children: React.ReactNode;
-};
+}
 
 export function Droppable({ id, children }: DroppableProps) {
   const { isOver, setNodeRef } = useDroppable({
@@ -12,7 +12,7 @@ export function Droppable({ id, children }: DroppableProps) {
   });
 
   const style = {
-    border: `1px solid ${isOver ? "#005d5d" : "transparent"}`,
+    border: `1px solid ${isOver ? '#005d5d' : 'transparent'}`,
   };
 
   return (