(feat) O3-4058 Add ability to delete tab definition

src/components/interactive-builder/delete-config-detail-modal.component.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import {
+  type ExtensionSlot,
+  type DashboardConfig,
+  type Schema,
+  type TabDefinition,
+  type WidgetTypes,
+} from '../../types';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, Stack } from '@carbon/react';
+import styles from './modals.scss';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
+
+interface DeleteConfigDetailModalProps {
+  closeModal: () => void;
+  schema: Schema;
+  onSchemaChange: (schema: Schema) => void;
+  slotDetails: DashboardConfig;
+  tabDefinition: TabDefinition;
+  configurationKey: string;
+  widgetType: WidgetTypes;
+}
+
+const DeleteConfigDetailModal: React.FC<DeleteConfigDetailModalProps> = ({
+  schema,
+  onSchemaChange,
+  closeModal,
+  slotDetails,
+  tabDefinition,
+  configurationKey,
+  widgetType,
+}) => {
+  const { t } = useTranslation();
+  const schemaBasePath = schema['@openmrs/esm-patient-chart-app'];
+
+  const updateSchema = (schema: Schema) => {
+    try {
+      const updatedSchema = {
+        ...schema,
+        '@openmrs/esm-patient-chart-app': {
+          ...schemaBasePath,
+          extensionSlots: {
+            ...schemaBasePath.extensionSlots,
+            [slotDetails?.slot]: {
+              ...schemaBasePath.extensionSlots[slotDetails?.slot],
+              configure: {
+                ...schemaBasePath.extensionSlots[slotDetails?.slot]?.configure,
+                [configurationKey]: {
+                  ...schemaBasePath.extensionSlots[slotDetails?.slot]?.configure[configurationKey],
+                  [widgetType]: schemaBasePath.extensionSlots[slotDetails?.slot]?.configure[configurationKey]?.[
+                    widgetType
+                  ]?.filter((def) => {
+                    const retainedConfigs = def.tabName !== tabDefinition.tabName;
+                    return retainedConfigs;
+                  }),
+                },
+              },
+            } as ExtensionSlot,
+          },
+        },
+      };
+
+      onSchemaChange(updatedSchema);
+      showSnackbar({
+        title: t('success', 'Success!'),
+        kind: 'success',
+        isLowContrast: true,
+        subtitle: t('tabConfigurationDeleted', 'Tab configuration deleted'),
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        showSnackbar({
+          title: t('errorDeletingConfiguration', 'Error deleting configuration'),
+          kind: 'error',
+          subtitle: error.message,
+        });
+      }
+    }
+  };
+
+  const handleDeleteConfiguration = () => {
+    updateSchema(schema);
+    closeModal();
+  };
+  return (
+    <>
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('deleteConfigDetailsConfirmationText', 'Are you sure you want to delete this configuration?')}
+      />
+      <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
+        <ModalBody>
+          <Stack gap={5}>
+            <p>
+              {t('menuSlot', 'Menu Slot')} : {slotDetails?.slot}
+            </p>
+            <p className={styles.subheading}>
+              {t('tabName', 'Tab name')} : {tabDefinition?.tabName}
+            </p>
+            <p className={styles.subheading}>
+              {t('headerTitle', 'Header title')} : {tabDefinition?.headerTitle}
+            </p>
+          </Stack>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={handleDeleteConfiguration}>
+          <span>{t('deleteConfiguration', 'Delete configuration')}</span>
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteConfigDetailModal;

src/components/interactive-builder/interactive-builder.component.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import { showModal, AddIcon, EditIcon } from '@openmrs/esm-framework';
+import { showModal, AddIcon, EditIcon, TrashCanIcon } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
 import { Button, Accordion, AccordionItem, Tile } from '@carbon/react';
-import { DefinitionTypes, type DynamicExtensionSlot, type Schema } from '../../types';
+import { DefinitionTypes, WidgetTypes, type DynamicExtensionSlot, type Schema } from '../../types';
 import styles from './interactive-builder.scss';
 import { getSubMenuSlotDetails } from '../../helpers';
 
@@ -107,6 +107,21 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps)
     submenuSlotKey
   ] as DynamicExtensionSlot;
 
+  const handleDeleteConfigDetailModal = useCallback(
+    (slotDetails, tabDefinition, configurationKey, widgetType) => {
+      const dispose = showModal('delete-config-detail-modal', {
+        closeModal: () => dispose(),
+        schema,
+        onSchemaChange,
+        slotDetails,
+        tabDefinition,
+        configurationKey,
+        widgetType,
+      });
+    },
+    [schema, onSchemaChange],
+  );
+
   return (
     <div className={styles.interactiveBuilderContainer}>
       {!navGroupTitle ? (
@@ -161,6 +176,21 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps)
                             renderIcon={(props) => <EditIcon size={16} {...props} />}
                             iconDescription={t('editTabDefinition', 'Edit tab definition')}
                           />
+                          <Button
+                            size="md"
+                            kind={'tertiary'}
+                            hasIconOnly
+                            renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
+                            iconDescription={t('deleteTabDefinition', 'Delete tab definition')}
+                            onClick={() => {
+                              handleDeleteConfigDetailModal(
+                                submenuDetails,
+                                tabDefinition,
+                                configurationKey,
+                                DefinitionTypes.TAB_DEFINITION,
+                              );
+                            }}
+                          />
                         </div>
                         <p className={styles.subheading}>{t('tabName', 'Tab name')}</p>
                         <p>{tabDefinition?.tabName}</p>
@@ -213,6 +243,21 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps)
                             renderIcon={(props) => <EditIcon size={16} {...props} />}
                             iconDescription={t('editTileDefinition', 'Edit tile definition')}
                           />
+                          <Button
+                            size="md"
+                            kind={'tertiary'}
+                            hasIconOnly
+                            renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
+                            iconDescription={t('deleteTileDefinition', 'Delete tile definition')}
+                            onClick={() => {
+                              handleDeleteConfigDetailModal(
+                                submenuDetails,
+                                tileDefinition,
+                                configurationKey,
+                                DefinitionTypes.TILE_DEFINITION,
+                              );
+                            }}
+                          />
                         </div>
                         <p className={styles.subheading}>{t('headerTitle', 'Header title')}</p>
                         <p>{tileDefinition?.tilesHeader}</p>

src/components/interactive-builder/interactive-builder.scss

@@ -120,6 +120,7 @@
 .editStatusIcon {
   display: flex;
   justify-content: right;
+  gap: layout.$spacing-03;
 }
 
 .tileContainer {

src/index.ts

@@ -39,3 +39,8 @@ export const configureColumnModal = getAsyncLifecycle(
   () => import('./components/interactive-builder/add-columns-modal.component'),
   options,
 );
+
+export const deleteConfigDetailModal = getAsyncLifecycle(
+  () => import('./components/interactive-builder/delete-config-detail-modal.component'),
+  options,
+);

src/routes.json

@@ -38,6 +38,10 @@
     {
       "name": "configure-columns-modal",
       "component": "configureColumnModal"
+    },
+    {
+      "name": "delete-config-detail-modal",
+      "component": "deleteConfigDetailModal"
     }
   ]
 }

translations/am.json

@@ -22,7 +22,11 @@
   "creationSuccessMessage": "ክሊኒካል እይታ በስኬት ተመልሷል",
   "dashboards": "ዳሽቦርዶች",
   "date": "Date",
+  "deleteConfigDetailsConfirmationText": "Are you sure you want to delete this configuration?",
+  "deleteConfiguration": "Delete configuration",
   "deleteSchema": "ስኬምን ይሰርዝ",
+  "deleteTabDefinition": "Delete tab definition",
+  "deleteTileDefinition": "Delete tile definition",
   "displayTitle": "Display title",
   "displayTitlePlaceholder": "e.g. Clinical Visit Encounters",
   "downloadSchema": "ስኬምን ይውረድ",
@@ -36,6 +40,7 @@
   "errorCreatingPackage": "የእቃ መለያ ማፍለጊያ አለም",
   "errorCreatingSubmenu": "የንብረት መለያ ማፍለጊያ አለም",
   "errorCreatingTabColumns": "Error creating tab columns",
+  "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "የቦታ ስም አገኘበት",
   "errorSaving": "ማስታወሻ አለም",
   "false": "False",
@@ -84,6 +89,7 @@
   "submenuCreated": "አዲስ ንብረት ተፈጠር",
   "success": "ስኬታማ!",
   "tabColumnsCreated": "Tab columns created",
+  "tabConfigurationDeleted": "Tab configuration deleted",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",

translations/en.json

@@ -22,7 +22,11 @@
   "creationSuccessMessage": "Clinical view saved successfully",
   "dashboards": "Dashboards",
   "date": "Date",
+  "deleteConfigDetailsConfirmationText": "Are you sure you want to delete this configuration?",
+  "deleteConfiguration": "Delete configuration",
   "deleteSchema": "Delete schema",
+  "deleteTabDefinition": "Delete tab definition",
+  "deleteTileDefinition": "Delete tile definition",
   "displayTitle": "Display title",
   "displayTitlePlaceholder": "e.g. Clinical Visit Encounters",
   "downloadSchema": "Download schema",
@@ -36,6 +40,7 @@
   "errorCreatingPackage": "Error creating package",
   "errorCreatingSubmenu": "Error creating submenu",
   "errorCreatingTabColumns": "Error creating tab columns",
+  "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "Error",
   "errorSaving": "Error saving",
   "false": "False",
@@ -84,6 +89,7 @@
   "submenuCreated": "New submenu created",
   "success": "Success!",
   "tabColumnsCreated": "Tab columns created",
+  "tabConfigurationDeleted": "Tab configuration deleted",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",

translations/es.json

@@ -22,7 +22,11 @@
   "creationSuccessMessage": "Vista clínica guardada con éxito",
   "dashboards": "Paneles de control",
   "date": "Date",
+  "deleteConfigDetailsConfirmationText": "Are you sure you want to delete this configuration?",
+  "deleteConfiguration": "Delete configuration",
   "deleteSchema": "Eliminar esquema",
+  "deleteTabDefinition": "Delete tab definition",
+  "deleteTileDefinition": "Delete tile definition",
   "displayTitle": "Display title",
   "displayTitlePlaceholder": "e.g. Clinical Visit Encounters",
   "downloadSchema": "Descargar esquema",
@@ -36,6 +40,7 @@
   "errorCreatingPackage": "Error al crear el paquete",
   "errorCreatingSubmenu": "Error al crear el submenú",
   "errorCreatingTabColumns": "Error creating tab columns",
+  "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "Error",
   "errorSaving": "Error al guardar",
   "false": "False",
@@ -84,6 +89,7 @@
   "submenuCreated": "Nuevo submenú creado",
   "success": "¡Éxito!",
   "tabColumnsCreated": "Tab columns created",
+  "tabConfigurationDeleted": "Tab configuration deleted",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",

translations/fr.json

@@ -22,7 +22,11 @@
   "creationSuccessMessage": "Vue clinique enregistrée avec succès",
   "dashboards": "Tableaux de bord",
   "date": "Date",
+  "deleteConfigDetailsConfirmationText": "Are you sure you want to delete this configuration?",
+  "deleteConfiguration": "Delete configuration",
   "deleteSchema": "Supprimer le schéma",
+  "deleteTabDefinition": "Delete tab definition",
+  "deleteTileDefinition": "Delete tile definition",
   "displayTitle": "Display title",
   "displayTitlePlaceholder": "e.g. Clinical Visit Encounters",
   "downloadSchema": "Télécharger le schéma",
@@ -36,6 +40,7 @@
   "errorCreatingPackage": "Erreur lors de la création du package",
   "errorCreatingSubmenu": "Erreur lors de la création du sous-menu",
   "errorCreatingTabColumns": "Error creating tab columns",
+  "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "Erreur",
   "errorSaving": "Erreur lors de l'enregistrement",
   "false": "False",
@@ -84,6 +89,7 @@
   "submenuCreated": "Nouveau sous-menu créé",
   "success": "Succès !",
   "tabColumnsCreated": "Tab columns created",
+  "tabConfigurationDeleted": "Tab configuration deleted",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",

translations/he.json

@@ -22,7 +22,11 @@
   "creationSuccessMessage": "התצוגה הקלינית נשמרה בהצלחה",
   "dashboards": "דשבורדים",
   "date": "Date",
+  "deleteConfigDetailsConfirmationText": "Are you sure you want to delete this configuration?",
+  "deleteConfiguration": "Delete configuration",
   "deleteSchema": "מחק סכימה",
+  "deleteTabDefinition": "Delete tab definition",
+  "deleteTileDefinition": "Delete tile definition",
   "displayTitle": "Display title",
   "displayTitlePlaceholder": "e.g. Clinical Visit Encounters",
   "downloadSchema": "הורד סכימה",
@@ -36,6 +40,7 @@
   "errorCreatingPackage": "שגיאה ביצירת חבילה",
   "errorCreatingSubmenu": "שגיאה ביצירת תפריט משנה",
   "errorCreatingTabColumns": "Error creating tab columns",
+  "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "שגיאה",
   "errorSaving": "שגיאה בשמירה",
   "false": "False",
@@ -84,6 +89,7 @@
   "submenuCreated": "תפריט משנה חדש נוצר",
   "success": "הצלחה!",
   "tabColumnsCreated": "Tab columns created",
+  "tabConfigurationDeleted": "Tab configuration deleted",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",

translations/km.json

@@ -22,7 +22,11 @@
   "creationSuccessMessage": "ទស្សនៈគ្លីនិកបានរក្សាទុកដោយជោគជ័យ",
   "dashboards": "ដាស្បូត",
   "date": "Date",
+  "deleteConfigDetailsConfirmationText": "Are you sure you want to delete this configuration?",
+  "deleteConfiguration": "Delete configuration",
   "deleteSchema": "លុបស្គីមា",
+  "deleteTabDefinition": "Delete tab definition",
+  "deleteTileDefinition": "Delete tile definition",
   "displayTitle": "Display title",
   "displayTitlePlaceholder": "e.g. Clinical Visit Encounters",
   "downloadSchema": "ទាញយកស្គីមា",
@@ -36,6 +40,7 @@
   "errorCreatingPackage": "កំហុសក្នុងការបង្កើតកញ្ចប់",
   "errorCreatingSubmenu": "កំហុសក្នុងការបង្កើតម៉ឺនុយរង",
   "errorCreatingTabColumns": "Error creating tab columns",
+  "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "កំហុស",
   "errorSaving": "កំហុសក្នុងការរក្សាទុក",
   "false": "False",
@@ -84,6 +89,7 @@
   "submenuCreated": "ម៉ឺនុយរងថ្មីត្រូវបានបង្កើត",
   "success": "ជោគជ័យ!",
   "tabColumnsCreated": "Tab columns created",
+  "tabConfigurationDeleted": "Tab configuration deleted",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",