Add new snackbar to the form builder (#210)

openmrs · Dec 5, 2023 · ba49af7 · ba49af7
1 parent fb558ed
commit ba49af7
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 747 deletions.
diff --git a/src/components/action-buttons/action-buttons.component.tsx b/src/components/action-buttons/action-buttons.component.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, ComposedModal, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import type { TFunction } from 'i18next';
 import { useParams } from 'react-router-dom';
-import { showToast, showNotification } from '@openmrs/esm-framework';
+import { showSnackbar } from '@openmrs/esm-framework';
 
 import type { Schema } from '../../types';
 import { publishForm, unpublishForm } from '../../forms.resource';
@@ -32,22 +32,21 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
     try {
       await publishForm(form.uuid);
 
-      showToast({
+      showSnackbar({
         title: t('formPublished', 'Form published'),
         kind: 'success',
-        critical: true,
-        description: `${form.name} ` + t('formPublishedSuccessfully', 'form was published successfully'),
+        isLowContrast: true,
+        subtitle: `${form.name} ` + t('formPublishedSuccessfully', 'form was published successfully'),
       });
 
       setStatus('published');
       await mutate();
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorPublishingForm', 'Error publishing form'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
         setStatus('error');
       }
@@ -60,22 +59,21 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
     try {
       await unpublishForm(form.uuid);
 
-      showToast({
+      showSnackbar({
         title: t('formUnpublished', 'Form unpublished'),
         kind: 'success',
-        critical: true,
-        description: `${form.name} ` + t('formUnpublishedSuccessfully', 'form was unpublished successfully'),
+        isLowContrast: true,
+        subtitle: `${form.name} ` + t('formUnpublishedSuccessfully', 'form was unpublished successfully'),
       });
 
       setStatus('unpublished');
       await mutate();
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorUnpublishingForm', 'Error unpublishing form'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
         setStatus('error');
       }
@@ -103,7 +101,6 @@ function ActionButtons({ schema, t }: ActionButtonsProps) {
             {t('unpublishForm', 'Unpublish form')}
           </Button>
         ) : null}
-
         {showUnpublishModal ? (
           <ComposedModal open={true} onClose={() => setShowUnpublishModal(false)} preventCloseOnClickOutside>
             <ModalHeader

diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx
@@ -31,8 +31,7 @@ import { Add, DocumentImport, Download, Edit, TrashCan } from '@carbon/react/ico
 import {
   type FetchResponse,
   navigate,
-  showNotification,
-  showToast,
+  showSnackbar,
   useConfig,
   useLayoutType,
   usePagination,
@@ -106,23 +105,22 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
       deleteForm(formUuid)
         .then(async (res: FetchResponse) => {
           if (res.status === 204) {
-            showToast({
+            showSnackbar({
               title: t('formDeleted', 'Form deleted'),
               kind: 'success',
-              critical: true,
-              description: `${form.name} ` + t('formDeletedSuccessfully', 'deleted successfully'),
+              isLowContrast: true,
+              subtitle: `${form.name} ` + t('formDeletedSuccessfully', 'deleted successfully'),
             });
 
             await mutate();
             setShowDeleteFormModal(false);
           }
         })
         .catch((e: Error) =>
-          showNotification({
+          showSnackbar({
             title: t('errorDeletingForm', 'Error deleting form'),
             kind: 'error',
-            critical: true,
-            description: e?.message,
+            subtitle: e?.message,
           }),
         )
         .finally(() => setIsDeleting(false));

diff --git a/src/components/interactive-builder/add-question-modal.component.tsx b/src/components/interactive-builder/add-question-modal.component.tsx
@@ -24,7 +24,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { ArrowUpRight } from '@carbon/react/icons';
-import { showNotification, showToast, useConfig } from '@openmrs/esm-framework';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import type { RenderType } from '@openmrs/openmrs-form-engine-lib';
 
 import type { Answer, Concept, ConceptMapping, Question, Schema } from '../../types';
@@ -162,19 +162,18 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
       setAnswers([]);
       setSelectedAnswers([]);
 
-      showToast({
+      showSnackbar({
         title: t('success', 'Success!'),
         kind: 'success',
-        critical: true,
-        description: t('questionCreated', 'New question created'),
+        isLowContrast: true,
+        subtitle: t('questionCreated', 'New question created'),
       });
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorCreatingQuestion', 'Error creating question'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       }
     }

diff --git a/src/components/interactive-builder/delete-page-modal.component.tsx b/src/components/interactive-builder/delete-page-modal.component.tsx
@@ -1,7 +1,7 @@
 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 { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
 
 interface DeletePageModalProps {
@@ -30,19 +30,18 @@ const DeletePageModal: React.FC<DeletePageModalProps> = ({
       onSchemaChange({ ...schema });
       resetIndices();
 
-      showToast({
+      showSnackbar({
         title: t('success', 'Success!'),
         kind: 'success',
-        critical: true,
-        description: t('pageDeleted', 'Page deleted'),
+        isLowContrast: true,
+        subtitle: t('pageDeleted', 'Page deleted'),
       });
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorDeletingPage', 'Error deleting page'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       }
     }

diff --git a/src/components/interactive-builder/delete-question-modal.component.tsx b/src/components/interactive-builder/delete-question-modal.component.tsx
@@ -1,7 +1,7 @@
 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 { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
 
 interface DeleteQuestionModal {
@@ -34,19 +34,18 @@ const DeleteQuestionModal: React.FC<DeleteQuestionModal> = ({
       onSchemaChange({ ...schema });
       resetIndices();
 
-      showToast({
+      showSnackbar({
         title: t('success', 'Success!'),
         kind: 'success',
-        critical: true,
-        description: t('QuestionDeleted', 'Question deleted'),
+        isLowContrast: true,
+        subtitle: t('QuestionDeleted', 'Question deleted'),
       });
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorDeletingQuestion', 'Error deleting question'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       }
     }

diff --git a/src/components/interactive-builder/delete-section-modal.component.tsx b/src/components/interactive-builder/delete-section-modal.component.tsx
@@ -1,7 +1,7 @@
 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 { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
 
 interface DeleteSectionModal {
@@ -32,19 +32,18 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
       onSchemaChange({ ...schema });
       resetIndices();
 
-      showToast({
+      showSnackbar({
         title: t('success', 'Success!'),
         kind: 'success',
-        critical: true,
-        description: t('SectionDeleted', 'Section deleted'),
+        isLowContrast: true,
+        subtitle: t('SectionDeleted', 'Section deleted'),
       });
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorDeletingSection', 'Error deleting section'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       }
     }

diff --git a/src/components/interactive-builder/edit-question-modal.component.tsx b/src/components/interactive-builder/edit-question-modal.component.tsx
@@ -26,7 +26,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { ArrowUpRight } from '@carbon/react/icons';
-import { showNotification, showToast, useConfig } from '@openmrs/esm-framework';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import type { RenderType } from '@openmrs/openmrs-form-engine-lib';
 
 import type { Concept, ConceptMapping, Question, QuestionType, Schema } from '../../types';
@@ -209,21 +209,20 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       setSelectedAnswers([]);
       onQuestionEdit(null);
 
-      showToast({
+      showSnackbar({
         title: t('success', 'Success!'),
         kind: 'success',
-        critical: true,
-        description: t('questionUpdated', 'Question updated'),
+        isLowContrast: true,
+        subtitle: t('questionUpdated', 'Question updated'),
       });
 
       onModalChange(false);
     } catch (error) {
       if (error instanceof Error) {
-        showNotification({
+        showSnackbar({
           title: t('errorUpdatingQuestion', 'Error updating question'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       }
     }

diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -5,7 +5,7 @@ import { DndContext, KeyboardSensor, MouseSensor, useSensor, useSensors } from '
 import { Accordion, AccordionItem, Button, InlineLoading } from '@carbon/react';
 import { Add, TrashCan } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
-import { showToast, showNotification } from '@openmrs/esm-framework';
+import { showSnackbar } from '@openmrs/esm-framework';
 import type { OHRIFormSchema } from '@openmrs/openmrs-form-engine-lib';
 
 import type { Schema, Question } from '../../types';
@@ -105,18 +105,17 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({ isLoading, onSc
 
         onSchemaChange({ ...schema });
 
-        showToast({
+        showSnackbar({
           title: t('success', 'Success!'),
           kind: 'success',
-          critical: true,
-          description: t('formRenamed', 'Form renamed'),
+          isLowContrast: true,
+          subtitle: t('formRenamed', 'Form renamed'),
         });
       } catch (error) {
-        showNotification({
+        showSnackbar({
           title: t('errorRenamingForm', 'Error renaming form'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       }
     },
@@ -132,19 +131,18 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({ isLoading, onSc
 
         onSchemaChange({ ...schema });
 
-        showToast({
+        showSnackbar({
           title: t('success', 'Success!'),
           kind: 'success',
-          critical: true,
-          description: t('pageRenamed', 'Page renamed'),
+          isLowContrast: true,
+          subtitle: t('pageRenamed', 'Page renamed'),
         });
       } catch (error) {
         if (error instanceof Error) {
-          showNotification({
+          showSnackbar({
             title: t('errorRenamingPage', 'Error renaming page'),
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            subtitle: error?.message,
           });
         }
       }
@@ -162,19 +160,18 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({ isLoading, onSc
 
         resetIndices();
 
-        showToast({
+        showSnackbar({
           title: t('success', 'Success!'),
           kind: 'success',
-          critical: true,
-          description: t('sectionRenamed', 'Section renamed'),
+          isLowContrast: true,
+          subtitle: t('sectionRenamed', 'Section renamed'),
         });
       } catch (error) {
         if (error instanceof Error) {
-          showNotification({
+          showSnackbar({
             title: t('errorRenamingSection', 'Error renaming section'),
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            subtitle: error?.message,
           });
         }
       }
@@ -193,22 +190,21 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({ isLoading, onSc
         onSchemaChange({ ...schema });
         resetIndices();
 
-        showToast({
+        showSnackbar({
           title: t('success', 'Success!'),
           kind: 'success',
-          critical: true,
-          description: t(
+          isLowContrast: true,
+          subtitle: t(
             'questionDuplicated',
             "Question duplicated. Please change the duplicated question's ID to a unique, camelcased value",
           ),
         });
       } catch (error) {
         if (error instanceof Error) {
-          showNotification({
+          showSnackbar({
             title: t('errorDuplicatingQuestion', 'Error duplicating question'),
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            subtitle: error?.message,
           });
         }
       }