@openmrs/esm-implementer-tools-app 3.1.10-pre.97 → 3.1.12-pre.599

package/src/configuration/extension-slots-config-tree.tsx

@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import EditableValue from "./editable-value.component";
 import isEqual from "lodash-es/isEqual";
 import {
   extensionStore,
   ExtensionSlotConfigureValueObject,
-  useStore,
+  useExtensionStore,
+  ExtensionStore,
 } from "@openmrs/esm-framework";
 import { ExtensionConfigureTree } from "./extension-configure-tree";
 import { Subtree } from "./layout/subtree.component";
 import { implementerToolsStore } from "../store";
 
 interface ExtensionSlotsConfigTreeProps {
-  config: { [key: string]: any };
+  extensionsConfig: { [key: string]: any };
   moduleName: string;
 }
 
@@ -33,20 +34,15 @@ interface ExtensionConfigureDescriptor {
 }
 
 export function ExtensionSlotsConfigTree({
-  config,
+  extensionsConfig,
   moduleName,
 }: ExtensionSlotsConfigTreeProps) {
-  const { extensionIdBySlotByModule } = useStore(implementerToolsStore);
-
-  const extensionSlotNames = Object.keys(
-    extensionIdBySlotByModule[moduleName] || {}
-  );
-
-  return extensionSlotNames.length ? (
-    <Subtree label={"extension slots"} leaf={false}>
-      {extensionSlotNames.map((slotName) => (
+  return extensionsConfig && Object.keys(extensionsConfig).length ? (
+    <Subtree label="extension slots" leaf={false}>
+      {Object.keys(extensionsConfig).map((slotName) => (
         <ExtensionSlotConfigTree
-          config={config?.[slotName]}
+          key={slotName}
+          config={extensionsConfig?.[slotName]}
           path={[moduleName, "extensions", slotName]}
         />
       ))}

package/src/configuration/layout/subtree.component.tsx

@@ -4,7 +4,7 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "carbon-components-react/es/components/StructuredList";
+} from "carbon-components-react";
 import styles from "./layout.styles.css";
 
 export interface SubtreeProps {

package/src/configuration/layout/tree-container.component.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import {
   StructuredListBody,
   StructuredListWrapper,
-} from "carbon-components-react/es/components/StructuredList";
+} from "carbon-components-react";
 import styles from "./layout.styles.css";
 
 export interface TreeContainerProps {

package/src/configuration/value-editor.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import Close16 from "@carbon/icons-react/es/close/16";
 import Save16 from "@carbon/icons-react/es/save/16";
-import Button from "carbon-components-react/es/components/Button";
+import { Button } from "carbon-components-react";
 import { Type } from "@openmrs/esm-framework";
 import { ConfigValueDescriptor } from "./editable-value.component";
 import { ValueEditorField } from "./value-editors/value-editor-field";

package/src/configuration/value-editors/array-editor.tsx

@@ -3,16 +3,16 @@ import cloneDeep from "lodash-es/cloneDeep";
 import uniqueId from "lodash-es/uniqueId";
 import Add16 from "@carbon/icons-react/es/add/16";
 import TrashCan16 from "@carbon/icons-react/es/trash-can/16";
-import Button from "carbon-components-react/es/components/Button";
 import styles from "./array-editor.styles.css";
 import { Type } from "@openmrs/esm-framework";
-import { Tile } from "carbon-components-react/es/components/Tile";
 import {
+  Button,
+  Tile,
   StructuredListBody,
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "carbon-components-react/es/components/StructuredList";
+} from "carbon-components-react";
 import { ValueEditorField } from "./value-editor-field";
 import { ConfigValueDescriptor } from "../editable-value.component";
 

package/src/configuration/value-editors/extension-slot-add.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import MultiSelect from "carbon-components-react/es/components/MultiSelect";
+import { MultiSelect } from "carbon-components-react";
 import { ExtensionStore, extensionStore } from "@openmrs/esm-framework";
 
 export function ExtensionSlotAdd({ value, setValue }) {

package/src/configuration/value-editors/extension-slot-order.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { useStore } from "@openmrs/esm-framework";
-import { implementerToolsStore } from "../../store";
 
 export function ExtensionSlotOrder({
   slotName,
@@ -8,7 +6,5 @@ export function ExtensionSlotOrder({
   value,
   setValue,
 }) {
-  const { extensionIdBySlotByModule } = useStore(implementerToolsStore);
-
   return <div>Todo: compose array with extension lookup</div>;
 }

package/src/configuration/value-editors/extension-slot-remove.tsx

@@ -1,7 +1,20 @@
 import React from "react";
-import MultiSelect from "carbon-components-react/es/components/MultiSelect";
-import { useStore } from "@openmrs/esm-framework";
-import { implementerToolsStore } from "../../store";
+import { MultiSelect } from "carbon-components-react";
+import {
+  ExtensionStore,
+  getAssignedIds,
+  useExtensionStore,
+} from "@openmrs/esm-framework";
+
+function getExtensionIds(
+  store: ExtensionStore,
+  moduleName: string,
+  slotName: string
+) {
+  const slot = store.slots[slotName];
+  const instance = slot.instances[moduleName];
+  return getAssignedIds(instance, slot.attachedIds);
+}
 
 export function ExtensionSlotRemove({
   slotName,
@@ -9,14 +22,13 @@ export function ExtensionSlotRemove({
   value,
   setValue,
 }) {
-  const { extensionIdBySlotByModule } = useStore(implementerToolsStore);
+  const store = useExtensionStore();
+  const assignedIds = getExtensionIds(store, slotModuleName, slotName);
 
   return (
     <MultiSelect.Filterable
       id={`add-select`}
-      items={extensionIdBySlotByModule[slotModuleName][
-        slotName
-      ].map((name) => ({ id: name, label: name }))}
+      items={assignedIds.map((id) => ({ id, label: id }))}
       placeholder="Select extensions"
       onChange={(value) => setValue(value.selectedItems.map((v) => v.id))}
       initialSelectedItems={value}

package/src/configuration/value-editors/object-editor.tsx

@@ -4,8 +4,8 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "carbon-components-react/es/components/StructuredList";
-import { Tile } from "carbon-components-react/es/components/Tile";
+  Tile,
+} from "carbon-components-react";
 import { ValueEditorField } from "./value-editor-field";
 import { ConfigValueDescriptor } from "../editable-value.component";
 import { Type } from "@openmrs/esm-framework";
@@ -29,7 +29,7 @@ export function ObjectEditor({
         <StructuredListBody>
           {Object.entries(element).map(([key, schema]) =>
             !key.startsWith("_") ? (
-              <StructuredListRow>
+              <StructuredListRow key={key}>
                 <StructuredListCell>
                   <ValueEditorField
                     element={{ _value: key, _source: element._source }}

package/src/configuration/value-editors/value-editor-field.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import uniqueId from "lodash-es/uniqueId";
-import Checkbox from "carbon-components-react/es/components/Checkbox";
-import NumberInput from "carbon-components-react/es/components/NumberInput";
-import TextInput from "carbon-components-react/es/components/TextInput";
+import { Checkbox, NumberInput, TextInput } from "carbon-components-react";
 import { Type } from "@openmrs/esm-framework";
 import { ConfigValueDescriptor } from "../editable-value.component";
 import { ValueType } from "../value-editor";

package/src/implementer-tools.button.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import Close20 from "@carbon/icons-react/es/close/20";
+import Tools20 from "@carbon/icons-react/es/tools/20";
+import { HeaderGlobalAction } from "carbon-components-react";
+import { UserHasAccess, useStore } from "@openmrs/esm-framework";
+import { implementerToolsStore, togglePopup } from "./store";
+import styles from "./implementer-tools.styles.css";
+
+const ImplementerToolsButton: React.FC = () => {
+  const { t } = useTranslation();
+  const { isOpen } = useStore(implementerToolsStore);
+
+  return (
+    <UserHasAccess privilege="coreapps.systemAdministration">
+      <HeaderGlobalAction
+        aria-label={t("implementerTools", "Implementer Tools")}
+        aria-labelledby="Implementer Tools"
+        className={styles.toolStyles}
+        name="ImplementerToolsIcon"
+        onClick={togglePopup}
+      >
+        {isOpen ? (
+          <Close20 />
+        ) : (
+          <Tools20 className={styles.popupTriggerButton} />
+        )}
+      </HeaderGlobalAction>
+    </UserHasAccess>
+  );
+};
+
+export default ImplementerToolsButton;

package/src/implementer-tools.component.tsx

@@ -1,104 +1,68 @@
 import React, { useState, useEffect } from "react";
-import { UserHasAccess, showToast, useStore } from "@openmrs/esm-framework";
 import Popup from "./popup/popup.component";
-import styles from "./implementer-tools.styles.css";
+import { NotificationActionButton } from "carbon-components-react";
 import {
-  checkModules,
-  MissingBackendModules,
-} from "./backend-dependencies/openmrs-backend-dependencies";
-import { NotificationActionButton } from "carbon-components-react/es/components/Notification";
+  showNotification,
+  UserHasAccess,
+  useStore,
+} from "@openmrs/esm-framework";
+import {
+  implementerToolsStore,
+  showModuleDiagnostics,
+  togglePopup,
+} from "./store";
 import { UiEditor } from "./ui-editor/ui-editor";
-import { implementerToolsStore } from "./store";
-
-export default function ImplementerTools() {
-  return (
-    <UserHasAccess privilege="coreapps.systemAdministration">
-      <PopupHandler />
-    </UserHasAccess>
-  );
-}
+import { useBackendDependencies } from "./backend-dependencies/useBackendDependencies";
+import { hasInvalidDependencies } from "./backend-dependencies/openmrs-backend-dependencies";
 
 function PopupHandler() {
-  const [hasAlert, setHasAlert] = useState(false);
-  const [visibleTabIndex, setVisibleTabIndex] = useState(0);
-  const [
-    modulesWithMissingBackendModules,
-    setModulesWithMissingBackendModules,
-  ] = useState<Array<MissingBackendModules>>([]);
-  const [
-    modulesWithWrongBackendModulesVersion,
-    setModulesWithWrongBackendModulesVersion,
-  ] = useState<Array<MissingBackendModules>>([]);
-  const { isOpen, isUIEditorEnabled } = useStore(implementerToolsStore);
+  const frontendModules = useBackendDependencies();
+  const [shouldShowNotification, setShouldShowNotification] = useState(false);
 
-  function togglePopup() {
-    implementerToolsStore.setState({ isOpen: !isOpen });
-  }
-
-  // loading missing modules
   useEffect(() => {
-    checkModules().then(
-      ({
-        modulesWithMissingBackendModules,
-        modulesWithWrongBackendModulesVersion,
-      }) => {
-        setModulesWithMissingBackendModules(modulesWithMissingBackendModules);
-        setModulesWithWrongBackendModulesVersion(
-          modulesWithWrongBackendModulesVersion
-        );
-      }
+    // displaying toast if modules are missing
+    setShouldShowNotification(
+      (alreadyShowing) =>
+        alreadyShowing || hasInvalidDependencies(frontendModules)
     );
-  }, []);
+  }, [frontendModules]);
 
-  // displaying toast if modules are missing
   useEffect(() => {
-    if (
-      !(
-        modulesWithMissingBackendModules.length ||
-        modulesWithWrongBackendModulesVersion.length
-      )
-    )
-      return;
-
-    const showModuleDiagnostics = () => {
-      setVisibleTabIndex(1);
-      if (!isOpen) {
-        togglePopup();
-      }
-      return false;
-    };
-
-    showToast({
-      description: "Found modules with unresolved backend dependencies.",
-      action: (
-        <NotificationActionButton onClick={showModuleDiagnostics}>
-          View
-        </NotificationActionButton>
-      ),
-      kind: "error",
-    });
-  }, [modulesWithMissingBackendModules, modulesWithWrongBackendModulesVersion]);
+    // only show notification max. 1 time
+    if (shouldShowNotification) {
+      showNotification({
+        description: "Found modules with unresolved backend dependencies.",
+        action: (
+          <NotificationActionButton onClick={showModuleDiagnostics}>
+            View
+          </NotificationActionButton>
+        ),
+        kind: "error",
+      });
+    }
+  }, [shouldShowNotification]);
 
+  const { isOpen, isUIEditorEnabled, openTabIndex } = useStore(
+    implementerToolsStore
+  );
   return (
     <>
-      <button
-        onClick={togglePopup}
-        className={`${styles.popupTriggerButton} ${
-          hasAlert ? styles.triggerButtonAlert : ""
-        }`}
-      />
       {isOpen ? (
         <Popup
           close={togglePopup}
-          setHasAlert={setHasAlert}
-          modulesWithMissingBackendModules={modulesWithMissingBackendModules}
-          modulesWithWrongBackendModulesVersion={
-            modulesWithWrongBackendModulesVersion
-          }
-          visibleTabIndex={visibleTabIndex}
+          frontendModules={frontendModules}
+          visibleTabIndex={openTabIndex}
         />
       ) : null}
       {isUIEditorEnabled ? <UiEditor /> : null}
     </>
   );
 }
+
+export default function ImplementerTools() {
+  return (
+    <UserHasAccess privilege="coreapps.systemAdministration">
+      <PopupHandler />
+    </UserHasAccess>
+  );
+}

package/src/implementer-tools.styles.css

@@ -1,14 +1,10 @@
 .popupTriggerButton {
-  z-index: 100000;
-  background-color: var(--omrs-color-interaction-minus-two);
-  height: 40px !important;
-  width: 40px !important;
-  bottom: 10px;
-  right: 8px;
-  position: fixed;
+  height: 25px !important;
+  width: 25px !important;
+  position: relative;
   border-radius: 2px;
 }
 
-.triggerButtonAlert {
-  background-color: var(--omrs-color-danger);
+.toolStyles {
+  background-color: transparent;
 }

package/src/index.ts

@@ -1,20 +1,46 @@
 import { getAsyncLifecycle } from "@openmrs/esm-framework";
 
+const frontendDependencies = {
+  "@openmrs/esm-framework": process.env.FRAMEWORK_VERSION,
+};
+
 function setupOpenMRS() {
+  const moduleName = "@openmrs/esm-implementer-tools-app";
+  const options = {
+    featureName: "Implementer Tools",
+    moduleName,
+  };
+
   return {
-    lifecycle: getAsyncLifecycle(
-      () => import("./implementer-tools.component"),
+    pages: [
+      {
+        route: () => true,
+        load: getAsyncLifecycle(
+          () => import("./implementer-tools.component"),
+          options
+        ),
+      },
+    ],
+    extensions: [
       {
-        featureName: "Implementer Tools",
-        moduleName: "@openmrs/esm-implementer-tools-app",
-      }
-    ),
-    activate: () => true,
+        id: "implementer-tools-button",
+        slot: "top-nav-actions-slot",
+        load: getAsyncLifecycle(
+          () => import("./implementer-tools.button"),
+          options
+        ),
+      },
+    ],
   };
 }
 
-const importTranslation = () => Promise.resolve();
+const importTranslation = require.context(
+  "../translations",
+  false,
+  /.json$/,
+  "lazy"
+);
 
-export { setupOpenMRS, importTranslation };
+export { setupOpenMRS, importTranslation, frontendDependencies };
 
 export { default as ConfigEditButton } from "./config-edit-button/config-edit-button.component";

package/src/popup/popup.component.tsx

@@ -1,30 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Close16 from "@carbon/icons-react/es/close/16";
-import Button from "carbon-components-react/es/components/Button";
-import ContentSwitcher from "carbon-components-react/es/components/ContentSwitcher";
-import Switch from "carbon-components-react/es/components/Switch";
 import styles from "./popup.styles.css";
+import { Button, ContentSwitcher, Switch } from "carbon-components-react";
+import { useTranslation } from "react-i18next";
 import { Configuration } from "../configuration/configuration.component";
-import { ModuleDiagnostics } from "../backend-dependencies/backend-dependecies.component";
-import { MissingBackendModules } from "../backend-dependencies/openmrs-backend-dependencies";
+import { ModuleDiagnostics } from "../backend-dependencies/backend-dependencies.component";
+import { FrontendModule } from "../backend-dependencies/openmrs-backend-dependencies";
 
 interface DevToolsPopupProps {
   close(): void;
-  setHasAlert(value: boolean): void;
-  modulesWithMissingBackendModules: Array<MissingBackendModules>;
-  modulesWithWrongBackendModulesVersion: Array<MissingBackendModules>;
+  frontendModules: Array<FrontendModule>;
   visibleTabIndex?: number;
 }
 
 export default function Popup(props: DevToolsPopupProps) {
-  const [configHasAlert, setConfigHasAlert] = useState(false);
-  const [diagnosticsHasAlert, setDiagnosticsHasAlert] = useState(false);
+  const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState(0);
 
-  useEffect(() => {
-    props.setHasAlert(configHasAlert || diagnosticsHasAlert);
-  }, [diagnosticsHasAlert, configHasAlert]);
-
   return (
     <div className={styles.popup}>
       <div className={styles.topBar}>
@@ -36,13 +28,13 @@ export default function Popup(props: DevToolsPopupProps) {
           >
             <Switch
               name="configuration-tab"
-              text="Configuration"
+              text={t("configuration", "Configuration")}
               onClick={() => {}}
               onKeyDown={() => {}}
             />
             <Switch
               name="backend-modules-tab"
-              text="Backend Modules"
+              text={t("backendModules", "Backend Modules")}
               onClick={() => {}}
               onKeyDown={() => {}}
             />
@@ -61,17 +53,9 @@ export default function Popup(props: DevToolsPopupProps) {
       </div>
       <div className={styles.content}>
         {activeTab == 0 ? (
-          <Configuration setHasAlert={setConfigHasAlert} />
+          <Configuration />
         ) : (
-          <ModuleDiagnostics
-            setHasAlert={setDiagnosticsHasAlert}
-            modulesWithMissingBackendModules={
-              props.modulesWithMissingBackendModules
-            }
-            modulesWithWrongBackendModulesVersion={
-              props.modulesWithWrongBackendModulesVersion
-            }
-          />
+          <ModuleDiagnostics frontendModules={props.frontendModules} />
         )}
       </div>
     </div>

package/src/popup/popup.styles.css

@@ -13,7 +13,6 @@
   justify-content: space-between;
   align-items: flex-start;
   box-sizing: border-box;
-  font-family: sans serif;
   overflow-y: auto;
 }
 
@@ -34,6 +33,7 @@
   justify-content: space-between;
   border-bottom: 1px solid #a0a0a0;
   z-index: 2;
+  background: #e0e0e0;
 }
 
 .closeButton {

package/src/store.ts

@@ -1,63 +1,58 @@
-import { createGlobalStore, extensionStore } from "@openmrs/esm-framework";
+import { createGlobalStore } from "@openmrs/esm-framework";
 import { Store } from "unistore";
-import merge from "lodash-es/merge";
 
 export interface ImplementerToolsStore {
   activeItemDescription?: ActiveItemDescription;
-  configPathBeingEdited: null | string[];
+  configPathBeingEdited: null | Array<string>;
   isOpen: boolean;
+  hasAlert: boolean;
+  openTabIndex: number;
   isConfigToolbarOpen: boolean;
   isUIEditorEnabled: boolean;
-  extensionIdBySlotByModule: Record<string, Record<string, Array<string>>>;
 }
 
 export interface ActiveItemDescription {
-  path: string[];
+  path: Array<string>;
   description?: string;
-  value?: string | string[];
+  value?: string | Array<string>;
   source?: string;
 }
 
-export const implementerToolsStore: Store<ImplementerToolsStore> = createGlobalStore(
-  "implementer-tools",
-  {
+export const implementerToolsStore: Store<ImplementerToolsStore> =
+  createGlobalStore("implementer-tools", {
     activeItemDescription: undefined,
     configPathBeingEdited: null,
     isOpen: getIsImplementerToolsOpen(),
+    hasAlert: false,
+    openTabIndex: 0,
     isConfigToolbarOpen: getIsConfigToolbarOpen(),
     isUIEditorEnabled: getIsUIEditorEnabled(),
-    extensionIdBySlotByModule: {},
-  }
+  });
+
+export const setHasAlert = implementerToolsStore.action(
+  (state, value: boolean) => ({
+    ...state,
+    hasAlert: value,
+  })
 );
 
-/* Set up subscriptions for module-slot-extension cache.
- * This cache exists so that implementer tools doesn't "forget" about
- * slots & extensions that are no longer mounted.
- */
+export const togglePopup = implementerToolsStore.action((state) => ({
+  ...state,
+  isOpen: !state.isOpen,
+}));
 
-extensionStore.subscribe((state) => {
-  const newValue = {};
-  for (let [slotName, slot] of Object.entries(state.slots)) {
-    for (let [moduleName, instance] of Object.entries(slot.instances)) {
-      if (!newValue[moduleName]) {
-        newValue[moduleName] = {};
-      }
-      newValue[moduleName][slotName] = instance.assignedIds;
-    }
-  }
-  implementerToolsStore.setState({
-    extensionIdBySlotByModule: merge(
-      implementerToolsStore.getState().extensionIdBySlotByModule,
-      newValue
-    ),
-  });
-});
+export const showModuleDiagnostics = implementerToolsStore.action((state) => ({
+  ...state,
+  isOpen: true,
+  openTabIndex: 1,
+}));
 
 /* Set up localStorage-serialized state elements */
 
 let lastValueOfIsOpen = getIsImplementerToolsOpen();
 let lastValueOfConfigToolbarOpen = getIsConfigToolbarOpen();
 let lastValueOfIsUiEditorEnabled = getIsUIEditorEnabled();
+
 implementerToolsStore.subscribe((state) => {
   if (state.isOpen != lastValueOfIsOpen) {
     setIsImplementerToolsOpen(state.isOpen);

package/src/ui-editor/extension-overlay.component.tsx

@@ -6,7 +6,7 @@ export interface ExtensionOverlayProps {
   extensionName: string;
   slotModuleName: string;
   slotName: string;
-  domElement: HTMLElement;
+  domElement: HTMLElement | null;
 }
 
 export function ExtensionOverlay({

package/src/ui-editor/styles.css

@@ -53,3 +53,10 @@
   top: 0;
   left: 0;
 }
+
+.exitButton {
+  position: fixed !important;
+  bottom: 0;
+  right: 0;
+  z-index: 999999;
+}