(feat) O3-1164 Should be able to edit config JSON in implementer tools

packages/apps/esm-implementer-tools-app/package.json

@@ -54,8 +54,10 @@
     "@openmrs/esm-framework": "^3.2.0",
     "@openmrs/webpack-config": "^3.2.0",
     "@types/carbon-components-react": "^7.24.0",
+    "ace-builds": "^1.4.14",
     "jest": "^26.6.3",
     "react": "^16.13.1",
+    "react-ace": "^9.5.0",
     "react-dom": "^16.13.1",
     "rxjs": "^6.5.3"
   }

packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx

@@ -22,12 +22,16 @@ import {
 } 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 { ConfigTree } from "./interactive-editor/config-tree.component";
+import { Description } from "./interactive-editor/description.component";
 import cloneDeep from "lodash-es/cloneDeep";
 import isEmpty from "lodash-es/isEmpty";
 import styles from "./configuration.styles.scss";
 
+const JsonEditor = React.lazy(
+  () => import("./json-editor/json-editor.component")
+);
+
 function isLeaf(configNode: Config) {
   return (
     configNode.hasOwnProperty("_default") ||
@@ -44,6 +48,9 @@ const actions = {
   toggleIsToolbarOpen({ isConfigToolbarOpen }: ImplementerToolsStore) {
     return { isConfigToolbarOpen: !isConfigToolbarOpen };
   },
+  toggleIsJsonModeEnabled({ isJsonModeEnabled }: ImplementerToolsStore) {
+    return { isJsonModeEnabled: !isJsonModeEnabled };
+  },
 };
 
 const configActions = {
@@ -78,6 +85,8 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
   const {
     isUIEditorEnabled,
     toggleIsUIEditorEnabled,
+    isJsonModeEnabled,
+    toggleIsJsonModeEnabled,
     isConfigToolbarOpen,
     toggleIsToolbarOpen,
   } = useStore(implementerToolsStore, actions);
@@ -134,6 +143,9 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
       : combinedConfig;
   }, [filterText, combinedConfig]);
 
+  const mainContentHeight = isConfigToolbarOpen
+    ? "calc(50vh - 7rem)"
+    : "calc(50vh - 2rem)";
   return (
     <>
       <div className={styles.tools}>
@@ -153,6 +165,14 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                   onChange={(e) => setFilterText(e.target.value)}
                 />
               </Column>
+              <Column sm={1} md={1}>
+                <Toggle
+                  id="jsonModeSwitch"
+                  labelText={t("jsonEditor", "JSON Editor")}
+                  onToggle={toggleIsJsonModeEnabled}
+                  toggled={isJsonModeEnabled}
+                />
+              </Column>
               <Column sm={1} md={1}>
                 <Toggle
                   id="devConfigSwitch"
@@ -169,51 +189,50 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                   onToggle={toggleIsUIEditorEnabled}
                 />
               </Column>
-              <Column sm={1} md={2} className={styles.actionButton}>
+              <Column sm={1} md={1} className={styles.actionButton}>
                 <Button
                   kind="danger"
-                  iconDescription="Clear temporary config"
+                  iconDescription="Clear local config"
                   renderIcon={TrashCan16}
                   onClick={() => {
                     temporaryConfigStore.setState({ config: {} });
                   }}
                 >
-                  {t("clearTemporaryConfig", "Clear Temporary Config")}
+                  {t("clearConfig", "Clear Local Config")}
                 </Button>
               </Column>
-              <Column sm={1} md={2} className={styles.actionButton}>
+              <Column sm={1} md={1} className={styles.actionButton}>
                 <Button
                   kind="secondary"
-                  iconDescription="Download temporary config"
+                  iconDescription="Download config"
                   renderIcon={Download16}
                 >
                   <a
                     className={styles.downloadLink}
                     download="temporary_config.json"
                     href={window.URL.createObjectURL(tempConfigObjUrl)}
                   >
-                    {t("downloadTemporaryConfig", "Download Temporary Config")}
+                    {t("downloadConfig", "Download Config")}
                   </a>
                 </Button>
               </Column>
             </Row>
           </Grid>
         ) : null}
       </div>
-      <div
-        className={styles.mainContent}
-        style={{
-          height: isConfigToolbarOpen
-            ? "calc(50vh - 7rem)"
-            : "calc(50vh - 2rem)",
-        }}
-      >
-        <div className={styles.configTreePane}>
-          <ConfigTree config={filteredConfig} />
-        </div>
-        <div className={styles.descriptionPane}>
-          <Description />
-        </div>
+      <div className={styles.mainContent} style={{ height: mainContentHeight }}>
+        {isJsonModeEnabled ? (
+          <JsonEditor height={mainContentHeight} />
+        ) : (
+          <>
+            <div className={styles.configTreePane}>
+              <ConfigTree config={filteredConfig} />
+            </div>
+            <div className={styles.descriptionPane}>
+              <Description />
+            </div>
+          </>
+        )}
       </div>
     </>
   );

packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss

@@ -51,20 +51,8 @@
   min-width: 8em;
 }
 
-.fullWidthAccordion :global(.bx--accordion__content) {
-  padding-right: 0;
-}
-
 .toggleToolbarButton {
   width: 100%;
   display: flex;
   justify-content: flex-end;
 }
-
-.valueEditorButtons {
-  margin-top: $spacing-03;
-}
-
-.smallListCell {
-  padding: $spacing-03;
-}

packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx

@@ -11,11 +11,11 @@ import { Configuration } from "./configuration.component";
 import {
   performConceptSearch,
   fetchConceptByUuid,
-} from "./value-editors/concept-search.resource";
+} from "./interactive-editor/value-editors/concept-search.resource";
 
 const mockPerformConceptSearch = performConceptSearch as jest.Mock;
 const mockFetchConceptByUuid = fetchConceptByUuid as jest.Mock;
-jest.mock("./value-editors/concept-search.resource", () => ({
+jest.mock("./interactive-editor/value-editors/concept-search.resource", () => ({
   fetchConceptByUuid: jest.fn(),
   performConceptSearch: jest.fn(),
 }));
@@ -106,8 +106,8 @@ describe(`<Configuration />`, () => {
     renderConfiguration();
     await screen.findByText("Dev Config");
     screen.getByText("UI Editor");
-    screen.getByText("Clear Temporary Config");
-    screen.getByText("Download Temporary Config");
+    screen.getByText("Clear Local Config");
+    screen.getByText("Download Config");
   });
 
   it("displays correct boolean value and editor", async () => {

packages/apps/esm-implementer-tools-app/src/configuration/config-subtree.component.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-subtree.component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import EditableValue from "./editable-value.component";
-import { implementerToolsStore } from "../store";
+import { implementerToolsStore } from "../../store";
 import isEqual from "lodash-es/isEqual";
 import { Subtree } from "./layout/subtree.component";
 

packages/apps/esm-implementer-tools-app/src/configuration/config-tree.component.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./configuration.styles.scss";
+import styles from "./config-tree.styles.scss";
 import { Accordion, AccordionItem } from "carbon-components-react";
 import { ConfigTreeForModule } from "./config-tree-for-module.component";
 
@@ -17,7 +17,7 @@ export function ConfigTree({ config }: ConfigTreeProps) {
             const moduleConfig = config[moduleName];
             return Object.keys(moduleConfig).length ? (
               <AccordionItem
-                title={<h6 className={styles.moduleName}>{moduleName}</h6>}
+                title={<h6>{moduleName}</h6>}
                 className={styles.fullWidthAccordion}
                 key={`accordion-${moduleName}`}
               >

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.styles.scss

@@ -0,0 +1,3 @@
+.fullWidthAccordion :global(.bx--accordion__content) {
+  padding-right: 0;
+}

packages/apps/esm-implementer-tools-app/src/configuration/description.component.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./description.styles.scss";
 import { useStore } from "@openmrs/esm-framework";
-import { implementerToolsStore } from "../store";
+import { implementerToolsStore } from "../../store";
 import { useTranslation } from "react-i18next";
 
 export function Description() {

packages/apps/esm-implementer-tools-app/src/configuration/description.styles.scss → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.styles.scss

@@ -1,4 +1,4 @@
-@import "../implementer-tools.styles.scss";
+@import "../../implementer-tools.styles.scss";
 
 .path {
   @include carbon--type-style("productive-heading-02");

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.scss

@@ -0,0 +1,5 @@
+@import "../../implementer-tools.styles.scss";
+
+.smallListCell {
+  padding: $spacing-03;
+}

packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.tsx

@@ -1,6 +1,6 @@
 import { StructuredListCell, StructuredListRow } from "carbon-components-react";
 import React from "react";
-import styles from "./configuration.styles.scss";
+import styles from "./display-value.scss";
 
 export interface DisplayValueProps {
   value: any;

packages/apps/esm-implementer-tools-app/src/configuration/editable-value.component.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.component.tsx

@@ -14,7 +14,7 @@ import {
   temporaryConfigStore,
 } from "@openmrs/esm-framework";
 import { ValueEditor, CustomValueType } from "./value-editor";
-import { implementerToolsStore, ImplementerToolsStore } from "../store";
+import { implementerToolsStore, ImplementerToolsStore } from "../../store";
 import { DisplayValue } from "./display-value";
 import { useTranslation } from "react-i18next";
 

packages/apps/esm-implementer-tools-app/src/configuration/editable-value.styles.scss → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.styles.scss

@@ -1,4 +1,4 @@
-@import "../implementer-tools.styles.scss";
+@import "../../implementer-tools.styles.scss";
 
 .secretButton {
   background: none;

packages/apps/esm-implementer-tools-app/src/configuration/extension-slots-config-tree.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/extension-slots-config-tree.tsx

@@ -7,7 +7,7 @@ import {
 } from "@openmrs/esm-framework";
 import { ExtensionConfigureTree } from "./extension-configure-tree";
 import { Subtree } from "./layout/subtree.component";
-import { implementerToolsStore } from "../store";
+import { implementerToolsStore } from "../../store";
 
 interface ExtensionSlotsConfigTreeProps {
   extensionsConfig: { [key: string]: any };

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.scss

@@ -0,0 +1,5 @@
+@import "../../implementer-tools.styles.scss";
+
+.valueEditorButtons {
+  margin-top: $spacing-03;
+}

packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.tsx

@@ -5,7 +5,7 @@ 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";
-import styles from "./configuration.styles.scss";
+import styles from "./value-editor.scss";
 import { useTranslation } from "react-i18next";
 
 export type CustomValueType = "add" | "remove" | "order" | "configure";

packages/apps/esm-implementer-tools-app/src/configuration/value-editors/uuid-search.scss → packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/uuid-search.scss

@@ -1,4 +1,4 @@
-@import "../../implementer-tools.styles.scss";
+@import "../../../implementer-tools.styles.scss";
 
 .activeUuid {
   @include carbon--type-style("body-short-01");

packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.component.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { temporaryConfigStore, useStore } from "@openmrs/esm-framework";
+import AceEditor from "react-ace";
+import style from "./json-editor.scss";
+
+import "ace-builds/src-noconflict/mode-java";
+import "ace-builds/src-noconflict/theme-github";
+import { Button } from "carbon-components-react";
+
+export interface JsonEditorProps {
+  /** A CSS value */
+  height: string;
+}
+
+export default function JsonEditor({ height }: JsonEditorProps) {
+  const temporaryConfig = useStore(temporaryConfigStore);
+  const [editorValue, setEditorValue] = useState("");
+  const [error, setError] = useState("");
+  const [key, setKey] = useState(`ace-editor`);
+
+  const updateTemporaryConfig = useCallback(() => {
+    let config;
+    try {
+      config = JSON.parse(editorValue);
+    } catch (e) {
+      setError(e.message);
+      return;
+    }
+    setError("");
+    temporaryConfigStore.setState({ config });
+  }, [editorValue, temporaryConfigStore]);
+
+  useEffect(() => {
+    if (editorValue != JSON.stringify(temporaryConfig.config, null, 2)) {
+      setKey((k) => `${k}+`); // just keep appendingplus signs
+    }
+  }, [temporaryConfig.config]);
+
+  return (
+    <div>
+      <AceEditor
+        key={key}
+        mode="json"
+        theme="github"
+        defaultValue={JSON.stringify(temporaryConfig.config, null, 2)}
+        tabSize={2}
+        fontSize="12pt"
+        width="100vw"
+        height={`calc(${height} - 3rem)`}
+        onChange={(v) => {
+          setEditorValue(v);
+        }}
+      />
+      <div className={style.toolbar}>
+        <Button type="submit" onClick={updateTemporaryConfig}>
+          Update
+        </Button>
+        <div
+          className={style.alert}
+          style={{ backgroundColor: error ? "#d03030" : "inherit" }}
+        >
+          {error}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.scss

@@ -0,0 +1,11 @@
+.toolbar {
+  display: flex;
+}
+
+.alert {
+  color: white;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-left: 2em;
+}

packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import Popup from "./popup/popup.component";
 import { NotificationActionButton } from "carbon-components-react";
 import {
   showNotification,
@@ -11,11 +10,14 @@ import {
   showModuleDiagnostics,
   togglePopup,
 } from "./store";
-import { UiEditor } from "./ui-editor/ui-editor";
+
 import { useBackendDependencies } from "./backend-dependencies/useBackendDependencies";
 import { hasInvalidDependencies } from "./backend-dependencies/openmrs-backend-dependencies";
 import { useTranslation } from "react-i18next";
 
+const Popup = React.lazy(() => import("./popup/popup.component"));
+const UiEditor = React.lazy(() => import("./ui-editor/ui-editor"));
+
 function PopupHandler() {
   const frontendModules = useBackendDependencies();
   const [shouldShowNotification, setShouldShowNotification] = useState(false);