(feat) Tweaks to the ActionableNotification component (#758)

openmrs · Aug 28, 2023 · d13f727 · d13f727
1 parent da40164
commit d13f727
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 34 deletions.
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { NotificationActionButton } from "@carbon/react";
 import {
-  showNotification,
+  showActionableNotification,
   UserHasAccess,
   useStore,
 } from "@openmrs/esm-framework";
@@ -24,8 +23,9 @@ function PopupHandler() {
   const backendDependencies = useBackendDependencies();
   const [shouldShowNotification, setShouldShowNotification] = useState(false);
   const { t } = useTranslation();
+
   useEffect(() => {
-    // displaying toast if modules are missing
+    // displaying actionable notification if backend modules have missing dependencies
     setShouldShowNotification(
       (alreadyShowing) =>
         alreadyShowing || hasInvalidDependencies(backendDependencies)
@@ -35,14 +35,19 @@ function PopupHandler() {
   useEffect(() => {
     // only show notification max. 1 time
     if (shouldShowNotification) {
-      showNotification({
-        description: "Found modules with unresolved backend dependencies.",
-        action: (
-          <NotificationActionButton onClick={showModuleDiagnostics}>
-            {t("view", "View")}
-          </NotificationActionButton>
-        ),
+      showActionableNotification({
+        critical: false,
         kind: "error",
+        subtitle: t(
+          "checkImplementerToolsMessage",
+          "Check the Backend Modules tab in the Implementer Tools for more details"
+        ),
+        title: t(
+          "modulesWithMissingDependenciesWarning",
+          "Some modules have unresolved backend dependencies"
+        ),
+        actionButtonLabel: t("viewModules", "View modules"),
+        onActionButtonClick: showModuleDiagnostics,
       });
     }
   }, [t, shouldShowNotification]);

diff --git a/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx b/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
@@ -3,12 +3,12 @@ import { Button, ContentSwitcher, Switch } from "@carbon/react";
 import { Close } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
 import { Configuration } from "../configuration/configuration.component";
-import type { FrontendModule } from "../types";
 import { FrontendModules } from "../frontend-modules/frontend-modules.component";
 import { BackendDependencies } from "../backend-dependencies/backend-dependencies.component";
+import { FeatureFlags } from "../feature-flags/feature-flags.component";
+import type { FrontendModule } from "../types";
 import type { ResolvedDependenciesModule } from "../backend-dependencies/openmrs-backend-dependencies";
 import styles from "./popup.styles.scss";
-import { FeatureFlags } from "../feature-flags/feature-flags.component";
 
 interface DevToolsPopupProps {
   close(): void;
@@ -17,19 +17,28 @@ interface DevToolsPopupProps {
   visibleTabIndex?: number;
 }
 
+interface SwitcherItem {
+  index: number;
+  name: string;
+  text: string;
+}
+
 export default function Popup({
   close,
   frontendModules,
   backendDependencies,
+  visibleTabIndex = 0,
 }: DevToolsPopupProps) {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState(
+    visibleTabIndex ? visibleTabIndex : 0
+  );
   const tabContent = useMemo(() => {
     if (activeTab == 0) {
       return <Configuration />;
-    } else if (activeTab == 1) {
+    } else if (activeTab === 1) {
       return <FrontendModules frontendModules={frontendModules} />;
-    } else if (activeTab == 2) {
+    } else if (activeTab === 2) {
       return <BackendDependencies backendDependencies={backendDependencies} />;
     } else {
       return <FeatureFlags />;
@@ -41,8 +50,9 @@ export default function Popup({
       <div className={styles.topBar}>
         <div className={styles.tabs}>
           <ContentSwitcher
-            onChange={(c) => {
-              setActiveTab((c as any).index);
+            selectedIndex={activeTab}
+            onChange={(switcherItem: SwitcherItem) => {
+              setActiveTab(switcherItem.index);
             }}
           >
             <Switch

diff --git a/packages/apps/esm-implementer-tools-app/src/store.ts b/packages/apps/esm-implementer-tools-app/src/store.ts
@@ -42,13 +42,14 @@ export const togglePopup = () =>
   implementerToolsStore.setState((state) => ({
     ...state,
     isOpen: !state.isOpen,
+    openTabIndex: 0,
   }));
 
 export const showModuleDiagnostics = () =>
   implementerToolsStore.setState((state) => ({
     ...state,
     isOpen: true,
-    openTabIndex: 1,
+    openTabIndex: 2,
   }));
 
 /* Set up localStorage-serialized state elements */

diff --git a/packages/apps/esm-implementer-tools-app/translations/am.json b/packages/apps/esm-implementer-tools-app/translations/am.json
@@ -1,6 +1,7 @@
 {
   "activeItemSourceText": "The current value comes from ",
   "backendModules": "Backend Modules",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Clear Local Config",
   "configuration": "Configuration",
   "description": "Description",
@@ -17,10 +18,11 @@
   "jsonEditor": "JSON Editor",
   "missing": "Missing",
   "moduleName": "Module Name",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",
-  "view": "View"
+  "viewModules": "View modules"
 }
diff --git a/packages/apps/esm-implementer-tools-app/translations/en.json b/packages/apps/esm-implementer-tools-app/translations/en.json
@@ -1,6 +1,7 @@
 {
   "activeItemSourceText": "The current value comes from ",
   "backendModules": "Backend Modules",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Clear Local Config",
   "configuration": "Configuration",
   "description": "Description",
@@ -17,10 +18,11 @@
   "jsonEditor": "JSON Editor",
   "missing": "Missing",
   "moduleName": "Module Name",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",
-  "view": "View"
+  "viewModules": "View modules"
 }
diff --git a/packages/apps/esm-implementer-tools-app/translations/es.json b/packages/apps/esm-implementer-tools-app/translations/es.json
@@ -1,6 +1,7 @@
 {
   "activeItemSourceText": "El valor coriente viene de ",
   "backendModules": "Modulos backend",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Borrar config",
   "configuration": "Configuración",
   "description": "Description",
@@ -17,10 +18,11 @@
   "jsonEditor": "Editar como JSON",
   "missing": "Falta",
   "moduleName": "Nombre de modulo",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Versión requerida",
   "resetToDefaultValueButtonText": "Volver al valor predeterminado",
   "uiEditor": "Editór visual",
   "unknownVersion": "unknown",
   "value": "Valor",
-  "view": "Vista"
+  "viewModules": "View modules"
 }
diff --git a/packages/apps/esm-implementer-tools-app/translations/fr.json b/packages/apps/esm-implementer-tools-app/translations/fr.json
@@ -1,6 +1,7 @@
 {
   "activeItemSourceText": "The current value comes from ",
   "backendModules": "Backend Modules",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Clear Local Config",
   "configuration": "Configuration",
   "description": "Description",
@@ -17,10 +18,11 @@
   "jsonEditor": "JSON Editor",
   "missing": "Missing",
   "moduleName": "Module Name",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",
-  "view": "View"
+  "viewModules": "View modules"
 }
diff --git a/packages/apps/esm-implementer-tools-app/translations/he.json b/packages/apps/esm-implementer-tools-app/translations/he.json
@@ -1,6 +1,7 @@
 {
   "activeItemSourceText": "הערך הנוכחי מגיע מ",
   "backendModules": "מודולים בצד השרת",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "נקה תצורה מקומית",
   "configuration": "תצורה",
   "description": "Description",
@@ -17,10 +18,11 @@
   "jsonEditor": "עורך JSON",
   "missing": "חסר",
   "moduleName": "שם המודול",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "גרסה נדרשת",
   "resetToDefaultValueButtonText": "איפוס לברירת מחדל",
   "uiEditor": "עורך ממשק משתמש",
   "unknownVersion": "לא ידוע",
   "value": "ערך",
-  "view": "צפה"
+  "viewModules": "View modules"
 }
diff --git a/packages/apps/esm-implementer-tools-app/translations/km.json b/packages/apps/esm-implementer-tools-app/translations/km.json
@@ -1,6 +1,7 @@
 {
   "activeItemSourceText": "The current value comes from ",
   "backendModules": "Backend Modules",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Clear Local Config",
   "configuration": "Configuration",
   "description": "Description",
@@ -17,10 +18,11 @@
   "jsonEditor": "JSON Editor",
   "missing": "Missing",
   "moduleName": "Module Name",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",
-  "view": "View"
+  "viewModules": "View modules"
 }
diff --git a/packages/framework/esm-styleguide/src/notifications/_actionable-notifications.scss b/packages/framework/esm-styleguide/src/notifications/_actionable-notifications.scss
@@ -5,9 +5,11 @@
   position: fixed;
   width: 100%;
   display: flex;
+  bottom: 2rem;
+  display: flex;
   flex-direction: column;
-  margin-left: 0.2rem;
-  bottom: spacing.$spacing-07;
+  align-items: center;
+  justify-content: center;
 }
 
 .omrs-actionable-notification-mounting,

diff --git a/packages/framework/esm-styleguide/src/notifications/actionable-notification.component.tsx b/packages/framework/esm-styleguide/src/notifications/actionable-notification.component.tsx
@@ -48,24 +48,20 @@ export const ActionableNotificationComponent: React.FC<
 
   const handleActionClick = () => {
     onActionButtonClick();
-    progressActionLabel
-      ? setActionText(progressActionLabel)
-      : setActionText("Taking Action..");
+    progressActionLabel && setActionText(progressActionLabel);
   };
 
   return (
     <ActionableNotification
       kind={kind || "info"}
       actionButtonLabel={actionText}
-      ariaLabel="closes notification"
+      ariaLabel="Closes actionable notification"
       onActionButtonClick={handleActionClick}
-      onClose={function noRefCheck() {}}
-      onCloseButtonClick={function noRefCheck() {}}
-      statusIconDescription="notification"
+      statusIconDescription="Actionable notification"
       subtitle={subtitle}
       title={title}
       lowContrast={critical}
-      inline={true}
+      inline
       {...props}
     />
   );