(fix) O3-3678: Implementer tools JSON editor crashes when typing (#1097)

openmrs · Jul 29, 2024 · 4d3f1b0 · 4d3f1b0
1 parent 5a63a34
commit 4d3f1b0
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 49 deletions.
diff --git a/...pps/esm-implementer-tools-app/src/backend-dependencies/backend-dependencies.component.tsx b/...pps/esm-implementer-tools-app/src/backend-dependencies/backend-dependencies.component.tsx
@@ -28,11 +28,11 @@ export const BackendDependencies: React.FC<BackendDependencies> = ({ backendDepe
       },
       {
         key: 'installedVersion',
-        header: t('installedVersion', 'Installed Version'),
+        header: t('installedVersion', 'Installed version'),
       },
       {
         key: 'requiredVersion',
-        header: t('requiredVersion', 'Required Version'),
+        header: t('requiredVersion', 'Required version'),
       },
     ],
     [t],
@@ -43,7 +43,7 @@ export const BackendDependencies: React.FC<BackendDependencies> = ({ backendDepe
       <DataTable rows={[]} headers={headers}>
         {({ headers, getTableProps, getHeaderProps }) => (
           <TableContainer title="">
-            <Table {...getTableProps()} >
+            <Table {...getTableProps()}>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (

diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx
@@ -139,14 +139,14 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                 <Toggle
                   className={styles.toggle}
                   id="jsonModeSwitch"
-                  labelText={t('jsonEditor', 'JSON Editor')}
+                  labelText={t('jsonEditor', 'JSON editor')}
                   onToggle={toggleIsJsonModeEnabled}
                   toggled={isJsonModeEnabled}
                 />
                 <Toggle
                   className={styles.toggle}
                   id="uiEditorSwitch"
-                  labelText={t('uiEditor', 'UI Editor')}
+                  labelText={t('uiEditor', 'UI editor')}
                   toggled={isUIEditorEnabled}
                   onToggle={toggleIsUIEditorEnabled}
                 />
@@ -161,7 +161,7 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                     temporaryConfigStore.setState({ config: {} });
                   }}
                 >
-                  {t('clearConfig', 'Clear Local Config')}
+                  {t('clearConfig', 'Clear local config')}
                 </Button>
                 <Button
                   kind="secondary"
@@ -178,7 +178,7 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                     download="temporary_config.json"
                     href={window.URL.createObjectURL(tempConfigObjUrl)}
                   >
-                    {t('downloadConfig', 'Download Config')}
+                    {t('downloadConfig', 'Download config')}
                   </a>
                 </Button>
               </Column>

diff --git a/.../esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.component.tsx b/.../esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.component.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
-import styles from './config-tree.styles.scss';
+import React from 'react';
 import { Accordion, AccordionItem } from '@carbon/react';
 import { ConfigTreeForModule } from './config-tree-for-module.component';
 import { implementerToolsStore } from '../../store';
 import { useStore } from 'zustand';
+import styles from './config-tree.styles.scss';
 
 export interface ConfigTreeProps {
   config: Record<string, any>;

diff --git a/...es/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.component.tsx b/...es/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.component.tsx
@@ -1,18 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { clearConfigErrors, temporaryConfigStore, useStore } from '@openmrs/esm-framework/src/internal';
 import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 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 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-dracula';
+import { clearConfigErrors, temporaryConfigStore, useStore } from '@openmrs/esm-framework/src/internal';
+import styles from './json-editor.scss';
 
 export interface JsonEditorProps {
   /** A CSS value */
   height: string;
 }
 
 export default function JsonEditor({ height }: JsonEditorProps) {
+  const { t } = useTranslation();
   const temporaryConfig = useStore(temporaryConfigStore);
   const [editorValue, setEditorValue] = useState('');
   const [error, setError] = useState('');
@@ -40,23 +42,27 @@ export default function JsonEditor({ height }: JsonEditorProps) {
   return (
     <div>
       <AceEditor
+        defaultValue={JSON.stringify(temporaryConfig.config, null, 2)}
+        fontSize="1rem"
+        height={`calc(${height} - 3rem)`}
         key={key}
         mode="json"
-        theme="github"
-        defaultValue={JSON.stringify(temporaryConfig.config, null, 2)}
+        onChange={(v) => setEditorValue(v)}
+        showGutter
+        showPrintMargin={false}
         tabSize={2}
-        fontSize="12pt"
+        theme="dracula"
         width="100vw"
-        height={`calc(${height} - 3rem)`}
-        onChange={(v) => {
-          setEditorValue(v);
-        }}
       />
-      <div className={style.toolbar}>
+      <div className={styles.toolbar}>
         <Button size="md" type="submit" onClick={updateTemporaryConfig}>
-          Update
+          {t('updateConfig', 'Update config')}
         </Button>
-        <div className={style.alert} style={{ backgroundColor: error ? '#d03030' : 'inherit' }}>
+        <div
+          className={classNames(styles.alert, {
+            [styles.errorBackground]: error,
+          })}
+        >
           {error}
         </div>
       </div>

diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.scss b/packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.scss
@@ -1,3 +1,4 @@
+@use '@carbon/colors';
 @use '@carbon/react/scss/theme';
 @use '@carbon/styles/scss/components/button';
 
@@ -19,3 +20,7 @@
   width: 100%;
   padding-left: 2em;
 }
+
+.errorBackground {
+  background-color: colors.$red-60;
+}
diff --git a/packages/apps/esm-implementer-tools-app/src/feature-flags/feature-flags.component.tsx b/packages/apps/esm-implementer-tools-app/src/feature-flags/feature-flags.component.tsx
@@ -11,9 +11,9 @@ import {
   TableRow,
   Toggle,
 } from '@carbon/react';
-import styles from './frontend-modules.scss';
-import { registerFeatureFlag, useStore } from '@openmrs/esm-framework';
+import { useStore } from '@openmrs/esm-framework';
 import { featureFlagsStore, setFeatureFlag } from '@openmrs/esm-framework/src/internal';
+import styles from './feature-flags.scss';
 
 export function FeatureFlags() {
   const { flags } = useStore(featureFlagsStore);

diff --git a/...p/src/feature-flags/frontend-modules.scss → ...-app/src/feature-flags/feature-flags.scss b/...p/src/feature-flags/frontend-modules.scss → ...-app/src/feature-flags/feature-flags.scss
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
@@ -1,14 +1,14 @@
 import React, { useMemo, useState } from 'react';
-import { Button, ContentSwitcher, Switch } from '@carbon/react';
+import { ContentSwitcher, IconButton, Switch } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { CloseIcon } from '@openmrs/esm-framework';
 import { Configuration } from '../configuration/configuration.component';
 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 { CloseIcon } from '@openmrs/esm-framework';
 
 interface DevToolsPopupProps {
   close(): void;
@@ -52,22 +52,32 @@ export default function Popup({
             onChange={(switcherItem: SwitcherItem) => {
               setActiveTab(switcherItem.index);
             }}
+            size="lg"
           >
-            <Switch name="configuration-tab" text={t('configuration', 'Configuration')} className="darkThemeSwitch"/>
-            <Switch name="frontend-modules-tab" text={t('frontendModules', 'Frontend Modules')} className="darkThemeSwitch"/>
-            <Switch name="backend-modules-tab" text={t('backendModules', 'Backend Modules')} className="darkThemeSwitch"/>
-            <Switch name="feature-flags-tab" text={t('featureFlags', 'Feature Flags')} className="darkThemeSwitch"/>
+            <Switch name="configuration-tab" text={t('configuration', 'Configuration')} className="darkThemeSwitch" />
+            <Switch
+              name="frontend-modules-tab"
+              text={t('frontendModules', 'Frontend modules')}
+              className="darkThemeSwitch"
+            />
+            <Switch
+              name="backend-modules-tab"
+              text={t('backendModules', 'Backend modules')}
+              className="darkThemeSwitch"
+            />
+            <Switch name="feature-flags-tab" text={t('featureFlags', 'Feature flags')} className="darkThemeSwitch" />
           </ContentSwitcher>
         </div>
         <div>
-          <Button
+          <IconButton
+            align="left"
+            className={styles.closeButton}
             kind="secondary"
-            renderIcon={(props) => <CloseIcon size={16} {...props} />}
-            iconDescription="Close"
+            label={t('close', 'Close')}
             onClick={close}
-            hasIconOnly
-            size="sm"
-          />
+          >
+            <CloseIcon />
+          </IconButton>
         </div>
       </div>
       <div className={styles.content}>{tabContent}</div>

diff --git a/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss b/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
@@ -62,3 +62,9 @@
   z-index: 2;
   background-color: theme.$background;
 }
+
+.closeButton {
+  svg {
+    fill: theme.$icon-primary;
+  }
+}
diff --git a/packages/apps/esm-implementer-tools-app/translations/en.json b/packages/apps/esm-implementer-tools-app/translations/en.json
@@ -1,28 +1,30 @@
 {
   "activeItemSourceText": "The current value comes from ",
-  "backendModules": "Backend Modules",
+  "backendModules": "Backend modules",
   "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
-  "clearConfig": "Clear Local Config",
+  "clearConfig": "Clear local config",
+  "close": "Close",
   "configuration": "Configuration",
   "description": "Description",
-  "downloadConfig": "Download Config",
+  "downloadConfig": "Download config",
   "edit": "Edit",
   "editValueButtonText": "Edit",
   "enabled": "Enabled",
   "extensions": "Extensions",
-  "featureFlag": "Feature Flag",
-  "featureFlags": "Feature Flags",
-  "frontendModules": "Frontend Modules",
-  "installedVersion": "Installed Version",
+  "featureFlag": "Feature flag",
+  "featureFlags": "Feature flags",
+  "frontendModules": "Frontend modules",
+  "installedVersion": "Installed version",
   "itemDescriptionSourceDefaultText": "The current value is the default.",
-  "jsonEditor": "JSON Editor",
+  "jsonEditor": "JSON editor",
   "missing": "Missing",
-  "moduleName": "Module Name",
+  "moduleName": "Module name",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
-  "uiEditor": "UI Editor",
+  "uiEditor": "UI editor",
   "unknownVersion": "unknown",
+  "updateConfig": "Update config",
   "value": "Value",
   "viewModules": "View modules"
 }
diff --git a/packages/tooling/webpack-config/src/index.ts b/packages/tooling/webpack-config/src/index.ts
@@ -337,7 +337,6 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
         '@openmrs/esm-framework': '@openmrs/esm-framework/src/internal',
         'lodash.debounce': 'lodash-es/debounce',
         'lodash.findlast': 'lodash-es/findLast',
-        'lodash.isequal': 'lodash-es/isEqual',
         'lodash.omit': 'lodash-es/omit',
         'lodash.throttle': 'lodash-es/throttle',
       },