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

package/src/backend-dependencies/openmrs-backend-dependencies.ts

@@ -1,64 +1,81 @@
-import * as semver from "semver";
-import { openmrsFetch } from "@openmrs/esm-framework";
+import { isVersionSatisfied, openmrsFetch } from "@openmrs/esm-framework";
 import difference from "lodash-es/difference";
 
-const installedBackendModules: Array<Record<string, string>> = [];
-const modulesWithMissingBackendModules: MissingBackendModules[] = [];
-const modulesWithWrongBackendModulesVersion: MissingBackendModules[] = [];
+export type ResolvedBackendModuleType = "missing" | "version-mismatch" | "okay";
 
-let memorizedUnresolvedsBackendDeps: UnresolvedBackendDependencies;
+export interface ResolvedBackendModule {
+  name: string;
+  requiredVersion: string;
+  installedVersion?: string;
+  type: ResolvedBackendModuleType;
+}
 
-async function initInstalledBackendModules() {
-  try {
-    const response = await fetchInstalledBackendModules();
-    installedBackendModules.push(...response.data.results);
-  } catch (err) {
-    setTimeout(() => {
-      throw err;
-    });
-  }
+export interface FrontendModule {
+  name: string;
+  dependencies: Array<ResolvedBackendModule>;
 }
 
-export async function checkModules(): Promise<UnresolvedBackendDependencies> {
-  if (memorizedUnresolvedsBackendDeps) return memorizedUnresolvedsBackendDeps;
+interface Module {
+  moduleName: string;
+  backendDependencies: Record<string, string>;
+}
 
-  const modules = (window.installedModules ?? [])
-    .filter((module) => module[1].backendDependencies)
-    .map((module) => ({
-      backendDependencies: module[1].backendDependencies,
-      moduleName: module[0],
-    }));
+interface BackendModule {
+  uuid: string;
+  version: string;
+}
 
-  await initInstalledBackendModules();
-  modules.forEach((module) => checkIfModulesAreInstalled(module));
+let cachedFrontendModules: Array<FrontendModule>;
 
-  memorizedUnresolvedsBackendDeps = {
-    modulesWithMissingBackendModules,
-    modulesWithWrongBackendModulesVersion,
-  };
+async function initInstalledBackendModules(): Promise<Array<BackendModule>> {
+  try {
+    const response = await fetchInstalledBackendModules();
+    return response.data.results;
+  } catch (err) {
+    console.error(err);
+  }
 
-  return memorizedUnresolvedsBackendDeps;
+  return [];
 }
 
-function checkIfModulesAreInstalled(module: Module) {
+function checkIfModulesAreInstalled(
+  module: Module,
+  installedBackendModules: Array<BackendModule>
+): FrontendModule {
+  const dependencies: Array<ResolvedBackendModule> = [];
+
   const missingBackendModule = getMissingBackendModules(
-    module.backendDependencies
+    module.backendDependencies,
+    installedBackendModules
   );
+
   const installedAndRequiredModules = getInstalledAndRequiredBackendModules(
-    module.backendDependencies
+    module.backendDependencies,
+    installedBackendModules
   );
-  if (missingBackendModule.length > 0) {
-    modulesWithMissingBackendModules.push({
-      moduleName: module.moduleName,
-      backendModules: missingBackendModule,
-    });
-  }
-  if (installedAndRequiredModules.length > 0) {
-    modulesWithWrongBackendModulesVersion.push({
-      moduleName: module.moduleName,
-      backendModules: getMisMatchedBackendModules(installedAndRequiredModules),
-    });
-  }
+
+  dependencies.push(
+    ...missingBackendModule.map((m) => ({
+      name: m.uuid,
+      requiredVersion: m.version,
+      type: "missing" as ResolvedBackendModuleType,
+    })),
+    ...installedAndRequiredModules.map((m) => {
+      const requiredVersion = m.version;
+      const installedVersion = getInstalledVersion(m, installedBackendModules);
+      return {
+        name: m.uuid,
+        requiredVersion,
+        installedVersion,
+        type: getResolvedModuleType(requiredVersion, installedVersion),
+      };
+    })
+  );
+
+  return {
+    name: module.moduleName,
+    dependencies,
+  };
 }
 
 function fetchInstalledBackendModules() {
@@ -68,27 +85,34 @@ function fetchInstalledBackendModules() {
 }
 
 function getMissingBackendModules(
-  requiredBackendModules: Record<string, string>
-) {
+  requiredBackendModules: Record<string, string>,
+  installedBackendModules: Array<BackendModule>
+): Array<BackendModule> {
   const requiredBackendModulesUuids = Object.keys(requiredBackendModules);
   const installedBackendModuleUuids = installedBackendModules.map(
     (res) => res.uuid
   );
+
   const missingModules = difference(
     requiredBackendModulesUuids,
     installedBackendModuleUuids
   );
-  return missingModules.map((key) => {
-    return { uuid: key, version: requiredBackendModules[key] };
-  });
+
+  return missingModules.map((key) => ({
+    uuid: key,
+    version: requiredBackendModules[key],
+  }));
 }
 
 function getInstalledAndRequiredBackendModules(
-  requiredBackendModules: Record<string, string>
-) {
-  const requiredModules = Object.keys(requiredBackendModules).map((key) => {
-    return { uuid: key, version: requiredBackendModules[key] };
-  });
+  requiredBackendModules: Record<string, string>,
+  installedBackendModules: Array<BackendModule>
+): Array<BackendModule> {
+  const requiredModules = Object.keys(requiredBackendModules).map((key) => ({
+    uuid: key,
+    version: requiredBackendModules[key],
+  }));
+
   return requiredModules.filter((requiredModule) => {
     return installedBackendModules.find((installedModule) => {
       return requiredModule.uuid === installedModule.uuid;
@@ -96,51 +120,47 @@ function getInstalledAndRequiredBackendModules(
   });
 }
 
-function getMisMatchedBackendModules(
-  installedAndRequiredBackendModules: BackendModule[]
+function getInstalledVersion(
+  installedAndRequiredBackendModule: BackendModule,
+  installedBackendModules: Array<BackendModule>
 ) {
-  let misMatchedBackendModules: BackendModule[] = [];
-  for (let uuid in installedAndRequiredBackendModules) {
-    const installedVersion = installedBackendModules[uuid].version;
-    const requiredVersion = installedAndRequiredBackendModules[uuid].version;
-    const moduleName = installedAndRequiredBackendModules[uuid].uuid;
-
-    if (!isVersionInstalled(requiredVersion, installedVersion)) {
-      misMatchedBackendModules.push({
-        uuid: moduleName,
-        requiredVersion: requiredVersion,
-        version: installedVersion,
-      });
-    }
-  }
-  return misMatchedBackendModules;
-}
-
-function isVersionInstalled(requiredVersion: string, installedVersion: string) {
-  return semver.eq(
-    // @ts-ignore
-    semver.coerce(requiredVersion),
-    semver.coerce(installedVersion)
+  const moduleName = installedAndRequiredBackendModule.uuid;
+  return (
+    installedBackendModules.find((mod) => mod.uuid == moduleName)?.version ?? ""
   );
 }
 
-export interface UnresolvedBackendDependencies {
-  modulesWithMissingBackendModules: MissingBackendModules[];
-  modulesWithWrongBackendModulesVersion: MissingBackendModules[];
-}
+function getResolvedModuleType(
+  requiredVersion: string,
+  installedVersion: string
+): ResolvedBackendModuleType {
+  if (!isVersionSatisfied(requiredVersion, installedVersion)) {
+    return "version-mismatch";
+  }
 
-export interface BackendModule {
-  uuid: string;
-  version: string;
-  requiredVersion?: string;
+  return "okay";
 }
 
-export interface MissingBackendModules {
-  moduleName: string;
-  backendModules: BackendModule[];
+export async function checkModules(): Promise<Array<FrontendModule>> {
+  if (!cachedFrontendModules) {
+    const modules = (window.installedModules ?? [])
+      .filter((module) => module[1].backendDependencies)
+      .map((module) => ({
+        backendDependencies: module[1].backendDependencies,
+        moduleName: module[0],
+      }));
+
+    const installedBackendModules = await initInstalledBackendModules();
+    cachedFrontendModules = modules.map((m) =>
+      checkIfModulesAreInstalled(m, installedBackendModules)
+    );
+  }
+
+  return cachedFrontendModules;
 }
 
-export interface Module {
-  moduleName: string;
-  backendDependencies: Record<string, string>;
+export function hasInvalidDependencies(frontendModules: Array<FrontendModule>) {
+  return frontendModules.some((m) =>
+    m.dependencies.some((n) => n.type !== "okay")
+  );
 }

package/src/backend-dependencies/useBackendDependencies.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+import { checkModules, FrontendModule } from "./openmrs-backend-dependencies";
+
+export function useBackendDependencies() {
+  const [
+    modulesWithMissingBackendModules,
+    setModulesWithMissingBackendModules,
+  ] = useState<Array<FrontendModule>>([]);
+
+  useEffect(() => {
+    // loading missing modules
+    checkModules().then(setModulesWithMissingBackendModules);
+  }, []);
+
+  return modulesWithMissingBackendModules;
+}

package/src/config-edit-button/config-edit-button.component.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { implementerToolsStore } from "../store";
+import { useTranslation } from "react-i18next";
 
 interface ConfigEditButtonProps {
   configPath: string[];
@@ -8,13 +9,14 @@ interface ConfigEditButtonProps {
 export default function ConfigEditButton({
   configPath,
 }: ConfigEditButtonProps) {
+  const { t } = useTranslation();
   return (
     <button
       onClick={() => {
         implementerToolsStore.setState({ configPathBeingEdited: configPath });
       }}
     >
-      Edit
+      {t("edit", "Edit")}
     </button>
   );
 }

package/src/configuration/config-tree-for-module.component.tsx

@@ -16,7 +16,7 @@ export function ConfigTreeForModule({
   return (
     <TreeContainer>
       <ExtensionSlotsConfigTree
-        config={config.extensions}
+        extensionsConfig={config.extensions}
         moduleName={moduleName}
       />
       <ConfigSubtree

package/src/configuration/config-tree.component.tsx

@@ -1,19 +1,13 @@
 import React from "react";
 import styles from "./configuration.styles.css";
-import Accordion, {
-  AccordionItem,
-} from "carbon-components-react/es/components/Accordion";
+import { Accordion, AccordionItem } from "carbon-components-react";
 import { ConfigTreeForModule } from "./config-tree-for-module.component";
-import { useStore } from "@openmrs/esm-framework";
-import { implementerToolsStore } from "../store";
 
 export interface ConfigTreeProps {
   config: Record<string, any>;
 }
 
 export function ConfigTree({ config }: ConfigTreeProps) {
-  const { extensionIdBySlotByModule } = useStore(implementerToolsStore);
-
   return (
     <div>
       <Accordion align="start">
@@ -22,8 +16,7 @@ export function ConfigTree({ config }: ConfigTreeProps) {
             .sort()
             .map((moduleName) => {
               const moduleConfig = config[moduleName];
-              return Object.keys(moduleConfig).length ||
-                extensionIdBySlotByModule[moduleName] ? (
+              return Object.keys(moduleConfig).length ? (
                 <AccordionItem
                   title={<h6 className={styles.moduleName}>{moduleName}</h6>}
                   className={styles.fullWidthAccordion}

package/src/configuration/configuration.component.tsx

@@ -1,26 +1,41 @@
-import React from "react";
-import TrashCan16 from "@carbon/icons-react/es/trash-can/16";
-import Download16 from "@carbon/icons-react/es/download/16";
+import React, { useMemo, useState } from "react";
 import ChevronDown16 from "@carbon/icons-react/es/chevron--down/16";
 import ChevronUp16 from "@carbon/icons-react/es/chevron--up/16";
-import Button from "carbon-components-react/es/components/Button";
-import Toggle from "carbon-components-react/es/components/Toggle";
-import styles from "./configuration.styles.css";
+import Download16 from "@carbon/icons-react/es/download/16";
+import TrashCan16 from "@carbon/icons-react/es/trash-can/16";
 import {
+  Config,
   ConfigInternalStore,
   configInternalStore,
   implementerToolsConfigStore,
   temporaryConfigStore,
+  useExtensionStore,
   useStore,
 } from "@openmrs/esm-framework";
-import { Column, Grid, Row } from "carbon-components-react/es/components/Grid";
+import {
+  Button,
+  Column,
+  Grid,
+  Row,
+  TextInput,
+  Toggle,
+} from "carbon-components-react";
+import { useTranslation } from "react-i18next";
+import { implementerToolsStore, ImplementerToolsStore } from "../store";
 import { ConfigTree } from "./config-tree.component";
 import { Description } from "./description.component";
-import { implementerToolsStore, ImplementerToolsStore } from "../store";
+import cloneDeep from "lodash-es/cloneDeep";
+import isEmpty from "lodash-es/isEmpty";
+import styles from "./configuration.styles.css";
 
-export type ConfigurationProps = {
-  setHasAlert(value: boolean): void;
-};
+function isLeaf(configNode: Config) {
+  return (
+    configNode.hasOwnProperty("_default") ||
+    configNode["_type"] ||
+    configNode.hasOwnProperty("_value") ||
+    configNode.hasOwnProperty("_source")
+  );
+}
 
 const actions = {
   toggleIsUIEditorEnabled({ isUIEditorEnabled }: ImplementerToolsStore) {
@@ -37,7 +52,29 @@ const configActions = {
   },
 };
 
-export function Configuration({ setHasAlert }: ConfigurationProps) {
+interface OpenOrCloseButtonProps {
+  isConfigToolbarOpen: boolean;
+  toggleIsToolbarOpen(): void;
+}
+
+const OpenOrCloseButton: React.FC<OpenOrCloseButtonProps> = ({
+  isConfigToolbarOpen,
+  toggleIsToolbarOpen,
+}) => (
+  <Button
+    hasIconOnly
+    renderIcon={isConfigToolbarOpen ? ChevronUp16 : ChevronDown16}
+    onClick={toggleIsToolbarOpen}
+    kind="ghost"
+    size="small"
+    iconDescription={`${isConfigToolbarOpen ? "Hide" : "Show"} toolbar`}
+  />
+);
+
+export interface ConfigurationProps {}
+
+export const Configuration: React.FC<ConfigurationProps> = () => {
+  const { t } = useTranslation();
   const {
     isUIEditorEnabled,
     toggleIsUIEditorEnabled,
@@ -49,7 +86,9 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
     configActions
   );
   const { config } = useStore(implementerToolsConfigStore);
+  const extensionStore = useExtensionStore();
   const tempConfigStore = useStore(temporaryConfigStore);
+  const [filterText, setFilterText] = useState("");
   const tempConfig = tempConfigStore.config;
   const tempConfigObjUrl = new Blob(
     [JSON.stringify(tempConfig, undefined, 2)],
@@ -58,16 +97,60 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
     }
   );
 
+  const combinedConfig = useMemo(() => {
+    const result = cloneDeep(config);
+    for (let slot of Object.values(extensionStore.slots)) {
+      for (let moduleName of Object.keys(slot.instances)) {
+        if (!result[moduleName].extensions) {
+          result[moduleName].extensions = {};
+        }
+        if (!result[moduleName].extensions[slot.name]) {
+          result[moduleName].extensions[slot.name] = {};
+        }
+      }
+    }
+    return result;
+  }, [config, extensionStore]);
+
+  const filteredConfig = useMemo(() => {
+    function getRelatedBranches(inputTree: Config, filterText: string) {
+      const result = {};
+      for (let k of Object.keys(inputTree)) {
+        if (k.includes(filterText)) {
+          result[k] = cloneDeep(inputTree[k]);
+        } else {
+          if (!isLeaf(inputTree[k])) {
+            const kSubtreeResult = getRelatedBranches(inputTree[k], filterText);
+            if (!isEmpty(kSubtreeResult)) {
+              result[k] = kSubtreeResult;
+            }
+          }
+        }
+      }
+      return result;
+    }
+    return filterText
+      ? getRelatedBranches(combinedConfig, filterText)
+      : combinedConfig;
+  }, [filterText, combinedConfig]);
+
   return (
     <>
       <div className={styles.tools}>
         {isConfigToolbarOpen ? (
           <Grid style={{ margin: "0.25rem", padding: "0.5em 1.5em" }}>
             <Row>
+              <Column sm={1} md={2}>
+                <TextInput
+                  id="extensionSearch"
+                  labelText="Search configuration"
+                  onChange={(e) => setFilterText(e.target.value)}
+                />
+              </Column>
               <Column sm={1} md={1}>
                 <Toggle
                   id="devConfigSwitch"
-                  labelText="Dev Config"
+                  labelText={t("devConfig", "Dev Config")}
                   onToggle={toggleDevDefaults}
                   toggled={devDefaultsAreOn}
                 />
@@ -75,7 +158,7 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
               <Column sm={1} md={1} className={styles.actionButton}>
                 <Toggle
                   id="uiEditorSwitch"
-                  labelText="UI Editor"
+                  labelText={t("uiEditor", "UI Editor")}
                   toggled={isUIEditorEnabled}
                   onToggle={toggleIsUIEditorEnabled}
                 />
@@ -89,7 +172,7 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
                     temporaryConfigStore.setState({ config: {} });
                   }}
                 >
-                  Clear Temporary Config
+                  {t("clearTemporaryConfig", "Clear Temporary Config")}
                 </Button>
               </Column>
               <Column sm={1} md={2} className={styles.actionButton}>
@@ -103,7 +186,7 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
                     download="temporary_config.json"
                     href={window.URL.createObjectURL(tempConfigObjUrl)}
                   >
-                    Download Temporary Config
+                    {t("downloadTemporaryConfig", "Download Temporary Config")}
                   </a>
                 </Button>
               </Column>
@@ -127,7 +210,7 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
         }}
       >
         <div className={styles.configTreePane}>
-          <ConfigTree config={config} />
+          <ConfigTree config={filteredConfig} />
         </div>
         <div className={styles.descriptionPane}>
           <Description />
@@ -135,17 +218,4 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
       </div>
     </>
   );
-}
-
-function OpenOrCloseButton({ isConfigToolbarOpen, toggleIsToolbarOpen }) {
-  return (
-    <Button
-      hasIconOnly
-      renderIcon={isConfigToolbarOpen ? ChevronUp16 : ChevronDown16}
-      onClick={toggleIsToolbarOpen}
-      kind="ghost"
-      size="small"
-      iconDescription={`${isConfigToolbarOpen ? "Hide" : "Show"} toolbar`}
-    ></Button>
-  );
-}
+};

package/src/configuration/configuration.test.tsx

@@ -99,7 +99,7 @@ describe(`<Configuration />`, () => {
   });
 
   function renderConfiguration() {
-    render(<Configuration setHasAlert={() => {}} />);
+    render(<Configuration />);
   }
 
   it(`renders without dying`, async () => {
@@ -127,7 +127,7 @@ describe(`<Configuration />`, () => {
       fireEvent.click(valueButton);
       const editor = await row.findByRole("checkbox");
       fireEvent.click(editor);
-      fireEvent.click(row.getByText("Save"));
+      fireEvent.click(row.getByText("Save").parentElement as any);
       // The mocked temporaryConfigStore.getState seems to be producing something
       // that doesn't work right, causing the `set` call and consequently this
       // `setState` call not to work either.
@@ -167,7 +167,7 @@ describe(`<Configuration />`, () => {
       expect(mockPerformConceptSearch).toHaveBeenCalledWith("fed");
       const targetConcept = await row.findByText("Fedora");
       userEvent.click(targetConcept);
-      userEvent.click(row.getByText("Save"));
+      userEvent.click(row.getByText("Save").parentElement as any);
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
         config: {
           "@openmrs/mario": { hatUuid: "61523693-72e2-456d-8c64-8c5293febeb6" },
@@ -196,7 +196,7 @@ describe(`<Configuration />`, () => {
       expect(editor).toHaveAttribute("type", "number");
       userEvent.clear(editor);
       userEvent.type(editor, "11");
-      userEvent.click(row.getByText("Save"));
+      userEvent.click(row.getByText("Save").parentElement as any);
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
         config: { "@openmrs/mario": { numberFingers: 11 } },
       });
@@ -221,7 +221,7 @@ describe(`<Configuration />`, () => {
       const editor = await row.findByRole("textbox");
       userEvent.clear(editor);
       userEvent.type(editor, "Bowser");
-      userEvent.click(row.getByText("Save"));
+      userEvent.click(row.getByText("Save").parentElement as any);
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
         config: { "@openmrs/mario": { nemesisName: "Bowser" } },
       });
@@ -247,7 +247,7 @@ describe(`<Configuration />`, () => {
       userEvent.clear(editor);
       const newUuid = "34f03796-f0e2-4f64-9e9a-28fb49a94baf";
       userEvent.type(editor, newUuid);
-      userEvent.click(row.getByText("Save"));
+      userEvent.click(row.getByText("Save").parentElement as any);
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
         config: { "@openmrs/mario": { mustacheUuid: newUuid } },
       });

package/src/configuration/description.component.tsx

@@ -25,7 +25,9 @@ export function Description() {
           {activeItemDescription.value ? <p>Value:</p> : null}
           <p className={styles.value}>
             {Array.isArray(activeItemDescription.value)
-              ? activeItemDescription.value.map((v) => <p key={v}>{v}</p>)
+              ? activeItemDescription.value.map((v, i) => (
+                  <p key={`${v}-${i}`}>{v}</p>
+                ))
               : activeItemDescription.value}
           </p>
         </>

package/src/configuration/display-value.tsx

@@ -10,15 +10,15 @@ export function DisplayValue({ value }: DisplayValueProps) {
     <>
       {Array.isArray(value)
         ? typeof value[0] === "object"
-          ? value.map((v) => (
-              <div style={{ marginBottom: "1em" }}>
+          ? value.map((v, i) => (
+              <div key={`${v}-${i}`} style={{ marginBottom: "1em" }}>
                 <DisplayValue value={v} />
               </div>
             ))
           : value.join(", ")
         : typeof value === "object" && value !== null
-        ? Object.entries(value).map(([k, v]) => (
-            <div>
+        ? Object.entries(value).map(([k, v], i) => (
+            <div key={`${k}-${i}`}>
               {k}: <DisplayValue value={v} />
             </div>
           ))

package/src/configuration/editable-value.component.tsx

@@ -3,8 +3,8 @@ import isEqual from "lodash-es/isEqual";
 import unset from "lodash-es/unset";
 import cloneDeep from "lodash-es/cloneDeep";
 import Reset16 from "@carbon/icons-react/es/reset/16";
-import Button from "carbon-components-react/es/components/Button";
 import styles from "./editable-value.styles.css";
+import { Button } from "carbon-components-react";
 import {
   ConfigValue,
   Validator,
@@ -136,7 +136,10 @@ export default function EditableValue({
                 hasIconOnly
                 onClick={() => {
                   temporaryConfigStore.setState(
-                    unset(temporaryConfigStore.getState(), ["config", ...path])
+                    unset(temporaryConfigStore.getState(), [
+                      "config",
+                      ...path,
+                    ]) as any
                   );
                 }}
               />