From 7709b854582be81855b7c7de655a6082f27e8b15 Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Wed, 9 Mar 2022 18:42:40 -0800 Subject: [PATCH 1/3] Refactor entire implementer tools configuration section -- just moving files around --- .../configuration/configuration.component.tsx | 4 ++-- .../configuration/configuration.styles.scss | 12 ----------- .../src/configuration/configuration.test.tsx | 2 +- .../config-subtree.component.tsx | 2 +- .../config-tree-for-module.component.tsx | 0 .../config-tree.component.tsx | 4 ++-- .../config-tree.styles.scss | 3 +++ .../description.component.tsx | 2 +- .../description.styles.scss | 2 +- .../interactive-editor/display-value.scss | 5 +++++ .../display-value.tsx | 2 +- .../editable-value.component.tsx | 2 +- .../editable-value.styles.scss | 2 +- .../extension-configure-tree.tsx | 0 .../extension-slots-config-tree.tsx | 2 +- .../layout/layout.styles.css | 0 .../layout/subtree.component.tsx | 0 .../layout/tree-container.component.tsx | 0 .../interactive-editor/value-editor.scss | 5 +++++ .../{ => interactive-editor}/value-editor.tsx | 2 +- .../value-editors/array-editor.styles.css | 0 .../value-editors/array-editor.tsx | 0 .../value-editors/concept-search.resource.tsx | 0 .../value-editors/concept-search.styles.scss | 0 .../value-editors/concept-search.tsx | 0 .../value-editors/extension-slot-add.tsx | 0 .../value-editors/extension-slot-order.tsx | 0 .../value-editors/extension-slot-remove.tsx | 0 .../value-editors/object-editor.styles.css | 0 .../value-editors/object-editor.tsx | 0 .../person-attribute-search.resource.tsx | 0 .../value-editors/person-attribute-search.tsx | 0 .../value-editors/uuid-search.scss | 2 +- .../value-editors/value-editor-field.tsx | 0 .../translations/en.json | 5 +++-- .../translations/es.json | 21 ++++++++++++------- 36 files changed, 44 insertions(+), 35 deletions(-) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/config-subtree.component.tsx (97%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/config-tree-for-module.component.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/config-tree.component.tsx (88%) create mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.styles.scss rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/description.component.tsx (96%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/description.styles.scss (89%) create mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.scss rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/display-value.tsx (96%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/editable-value.component.tsx (99%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/editable-value.styles.scss (87%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/extension-configure-tree.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/extension-slots-config-tree.tsx (98%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/layout/layout.styles.css (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/layout/subtree.component.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/layout/tree-container.component.tsx (100%) create mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.scss rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editor.tsx (97%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/array-editor.styles.css (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/array-editor.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/concept-search.resource.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/concept-search.styles.scss (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/concept-search.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/extension-slot-add.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/extension-slot-order.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/extension-slot-remove.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/object-editor.styles.css (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/object-editor.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/person-attribute-search.resource.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/person-attribute-search.tsx (100%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/uuid-search.scss (87%) rename packages/apps/esm-implementer-tools-app/src/configuration/{ => interactive-editor}/value-editors/value-editor-field.tsx (100%) 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 index 3ee997585..1607a5ef5 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx +++ b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx @@ -22,8 +22,8 @@ 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"; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss index 93ea9c196..6bd8ba08e 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss +++ b/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; -} diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx index 85ff30449..edfc1bb85 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx +++ b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx @@ -11,7 +11,7 @@ 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; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/config-subtree.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-subtree.component.tsx similarity index 97% rename from packages/apps/esm-implementer-tools-app/src/configuration/config-subtree.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-subtree.component.tsx index 960662ff1..14b63469a 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/config-subtree.component.tsx +++ b/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"; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/config-tree-for-module.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree-for-module.component.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/config-tree-for-module.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree-for-module.component.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/config-tree.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.component.tsx similarity index 88% rename from packages/apps/esm-implementer-tools-app/src/configuration/config-tree.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.component.tsx index df4866bbc..dd5da0796 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/config-tree.component.tsx +++ b/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 ? ( {moduleName}} + title={
{moduleName}
} className={styles.fullWidthAccordion} key={`accordion-${moduleName}`} > diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.styles.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/config-tree.styles.scss new file mode 100644 index 000000000..2372ca672 --- /dev/null +++ b/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; +} diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/description.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.component.tsx similarity index 96% rename from packages/apps/esm-implementer-tools-app/src/configuration/description.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.component.tsx index f95897304..fb18ec2c7 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/description.component.tsx +++ b/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() { diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/description.styles.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.styles.scss similarity index 89% rename from packages/apps/esm-implementer-tools-app/src/configuration/description.styles.scss rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.styles.scss index cc017f1d7..15002e444 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/description.styles.scss +++ b/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"); diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.scss new file mode 100644 index 000000000..add5c372a --- /dev/null +++ b/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; +} diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.tsx similarity index 96% rename from packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.tsx index cd807abba..044ae27a8 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx +++ b/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; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/editable-value.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.component.tsx similarity index 99% rename from packages/apps/esm-implementer-tools-app/src/configuration/editable-value.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.component.tsx index e1642e64e..c2b061ee3 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/editable-value.component.tsx +++ b/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"; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/editable-value.styles.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.styles.scss similarity index 87% rename from packages/apps/esm-implementer-tools-app/src/configuration/editable-value.styles.scss rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/editable-value.styles.scss index a6d18c9b3..2a5b76d5b 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/editable-value.styles.scss +++ b/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; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/extension-configure-tree.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/extension-configure-tree.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/extension-configure-tree.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/extension-configure-tree.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/extension-slots-config-tree.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/extension-slots-config-tree.tsx similarity index 98% rename from packages/apps/esm-implementer-tools-app/src/configuration/extension-slots-config-tree.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/extension-slots-config-tree.tsx index 68767a79a..5186f657f 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/extension-slots-config-tree.tsx +++ b/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 }; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/layout/layout.styles.css b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/layout/layout.styles.css similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/layout/layout.styles.css rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/layout/layout.styles.css diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/layout/subtree.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/layout/subtree.component.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/layout/subtree.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/layout/subtree.component.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/layout/tree-container.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/layout/tree-container.component.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/layout/tree-container.component.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/layout/tree-container.component.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.scss new file mode 100644 index 000000000..d1d57bf95 --- /dev/null +++ b/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; +} diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.tsx similarity index 97% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editor.tsx index c07ac2bc9..323c7f169 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx +++ b/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"; diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/array-editor.styles.css b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/array-editor.styles.css similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/array-editor.styles.css rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/array-editor.styles.css diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/array-editor.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/array-editor.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/array-editor.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/array-editor.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.resource.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/concept-search.resource.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.resource.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/concept-search.resource.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.styles.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/concept-search.styles.scss similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.styles.scss rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/concept-search.styles.scss diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/concept-search.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/concept-search.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/extension-slot-add.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/extension-slot-add.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/extension-slot-add.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/extension-slot-add.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/extension-slot-order.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/extension-slot-order.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/extension-slot-order.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/extension-slot-order.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/extension-slot-remove.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/extension-slot-remove.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/extension-slot-remove.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/extension-slot-remove.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/object-editor.styles.css b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/object-editor.styles.css similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/object-editor.styles.css rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/object-editor.styles.css diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/object-editor.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/object-editor.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/object-editor.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/object-editor.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.resource.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/person-attribute-search.resource.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.resource.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/person-attribute-search.resource.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/person-attribute-search.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/person-attribute-search.tsx diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/uuid-search.scss b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/uuid-search.scss similarity index 87% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/uuid-search.scss rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/uuid-search.scss index f69afe9de..c0ded99fd 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/uuid-search.scss +++ b/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"); diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/value-editor-field.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/value-editor-field.tsx similarity index 100% rename from packages/apps/esm-implementer-tools-app/src/configuration/value-editors/value-editor-field.tsx rename to packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/value-editor-field.tsx diff --git a/packages/apps/esm-implementer-tools-app/translations/en.json b/packages/apps/esm-implementer-tools-app/translations/en.json index c1d0d05f6..006578d22 100644 --- a/packages/apps/esm-implementer-tools-app/translations/en.json +++ b/packages/apps/esm-implementer-tools-app/translations/en.json @@ -1,14 +1,15 @@ { "activeItemSourceText": "The current value comes from ", "backendModules": "Backend Modules", - "clearTemporaryConfig": "Clear Temporary Config", + "clearConfig": "Clear Local Config", "configuration": "Configuration", "devConfig": "Dev Config", - "downloadTemporaryConfig": "Download Temporary Config", + "downloadConfig": "Download Config", "edit": "Edit", "editValueButtonText": "Edit", "installedVersion": "Installed Version", "itemDescriptionSourceDefaultText": "The current value is the default.", + "jsonEditor": "JSON Editor", "missing": "Missing", "moduleName": "Module Name", "requiredVersion": "Required Version", diff --git a/packages/apps/esm-implementer-tools-app/translations/es.json b/packages/apps/esm-implementer-tools-app/translations/es.json index 76394a26a..64ecaf647 100644 --- a/packages/apps/esm-implementer-tools-app/translations/es.json +++ b/packages/apps/esm-implementer-tools-app/translations/es.json @@ -1,13 +1,20 @@ { - "backendModules": "Módulos backend", - "clearTemporaryConfig": "Borrar configuración temporal", + "activeItemSourceText": "El valor coriente viene de ", + "backendModules": "Modulos backend", + "clearConfig": "Borrar config", "configuration": "Configuración", - "devConfig": "Configuración de desarrollo", - "downloadTemporaryConfig": "Descargar configuración temporal", + "devConfig": "Valores defectos experimentales", + "downloadConfig": "Descargar config", "edit": "Editar", + "editValueButtonText": "Editar", "installedVersion": "Versión instalada", - "missing": "Desaparecido", + "itemDescriptionSourceDefaultText": "El valor coriente es lo predeterminado.", + "jsonEditor": "Editar como JSON", + "missing": "Falta", + "moduleName": "Nombre de modulo", "requiredVersion": "Versión requerida", - "uiEditor": "Editora de interfaz de usuario", - "implementerTools": "Herramientas de implementación" + "resetToDefaultValueButtonText": "Volver al valor predeterminado", + "uiEditor": "Editór visual", + "value": "Valor", + "view": "Vista" } From 63f385f2f59babe8eaba9a7985d2018e3d41151c Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Wed, 9 Mar 2022 18:41:26 -0800 Subject: [PATCH 2/3] (feat) Add JSON editor to implementer tools --- .../esm-implementer-tools-app/package.json | 2 + .../configuration/configuration.component.tsx | 59 ++++++++++------ .../src/configuration/configuration.test.tsx | 6 +- .../json-editor/json-editor.component.tsx | 67 +++++++++++++++++++ .../json-editor/json-editor.scss | 11 +++ .../esm-implementer-tools-app/src/store.ts | 19 ++++++ .../translations/en.json | 4 +- yarn.lock | 26 +++++++ 8 files changed, 169 insertions(+), 25 deletions(-) create mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.component.tsx create mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.scss diff --git a/packages/apps/esm-implementer-tools-app/package.json b/packages/apps/esm-implementer-tools-app/package.json index 8f92267f1..86661ce77 100644 --- a/packages/apps/esm-implementer-tools-app/package.json +++ b/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" } 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 index 1607a5ef5..319007b53 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx +++ b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx @@ -28,6 +28,10 @@ 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 = () => { const { isUIEditorEnabled, toggleIsUIEditorEnabled, + isJsonModeEnabled, + toggleIsJsonModeEnabled, isConfigToolbarOpen, toggleIsToolbarOpen, } = useStore(implementerToolsStore, actions); @@ -134,6 +143,9 @@ export const Configuration: React.FC = () => { : combinedConfig; }, [filterText, combinedConfig]); + const mainContentHeight = isConfigToolbarOpen + ? "calc(50vh - 7rem)" + : "calc(50vh - 2rem)"; return ( <>
@@ -153,6 +165,14 @@ export const Configuration: React.FC = () => { onChange={(e) => setFilterText(e.target.value)} /> + + + = () => { onToggle={toggleIsUIEditorEnabled} /> - + - + @@ -200,20 +220,19 @@ export const Configuration: React.FC = () => { ) : null}
-
-
- -
-
- -
+
+ {isJsonModeEnabled ? ( + + ) : ( + <> +
+ +
+
+ +
+ + )}
); diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx index edfc1bb85..56be7f896 100644 --- a/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx +++ b/packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx @@ -15,7 +15,7 @@ import { 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(``, () => { 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 () => { diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.component.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/json-editor/json-editor.component.tsx new file mode 100644 index 000000000..15263288c --- /dev/null +++ b/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 ( +
+ { + setEditorValue(v); + }} + /> +
+ +
+ {error} +
+
+
+ ); +} 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 new file mode 100644 index 000000000..65abaaaa2 --- /dev/null +++ b/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; +} diff --git a/packages/apps/esm-implementer-tools-app/src/store.ts b/packages/apps/esm-implementer-tools-app/src/store.ts index e29cfb309..5afbd6d45 100644 --- a/packages/apps/esm-implementer-tools-app/src/store.ts +++ b/packages/apps/esm-implementer-tools-app/src/store.ts @@ -9,6 +9,7 @@ export interface ImplementerToolsStore { openTabIndex: number; isConfigToolbarOpen: boolean; isUIEditorEnabled: boolean; + isJsonModeEnabled: boolean; } export interface ActiveItemDescription { @@ -27,6 +28,7 @@ export const implementerToolsStore: Store = openTabIndex: 0, isConfigToolbarOpen: getIsConfigToolbarOpen(), isUIEditorEnabled: getIsUIEditorEnabled(), + isJsonModeEnabled: getIsJsonModeEnabled(), }); export const setHasAlert = implementerToolsStore.action( @@ -52,6 +54,7 @@ export const showModuleDiagnostics = implementerToolsStore.action((state) => ({ let lastValueOfIsOpen = getIsImplementerToolsOpen(); let lastValueOfConfigToolbarOpen = getIsConfigToolbarOpen(); let lastValueOfIsUiEditorEnabled = getIsUIEditorEnabled(); +let lastValueOfIsJsonModeEnabled = getIsJsonModeEnabled(); implementerToolsStore.subscribe((state) => { if (state.isOpen != lastValueOfIsOpen) { @@ -66,6 +69,10 @@ implementerToolsStore.subscribe((state) => { setIsConfigToolbarOpen(state.isConfigToolbarOpen); lastValueOfConfigToolbarOpen = state.isConfigToolbarOpen; } + if (state.isJsonModeEnabled != lastValueOfIsJsonModeEnabled) { + setIsJsonModeEnabled(state.isJsonModeEnabled); + lastValueOfIsJsonModeEnabled = state.isJsonModeEnabled; + } }); function getIsImplementerToolsOpen(): boolean { @@ -109,3 +116,15 @@ function getIsUIEditorEnabled(): boolean { function setIsUIEditorEnabled(enabled: boolean) { localStorage.setItem("openmrs:isUIEditorEnabled", JSON.stringify(enabled)); } + +function getIsJsonModeEnabled(): boolean { + return ( + JSON.parse( + localStorage.getItem("openmrs:getIsJsonModeEnabled") || "false" + ) ?? false + ); +} + +function setIsJsonModeEnabled(enabled: boolean) { + localStorage.setItem("openmrs:getIsJsonModeEnabled", JSON.stringify(enabled)); +} diff --git a/packages/apps/esm-offline-tools-app/translations/en.json b/packages/apps/esm-offline-tools-app/translations/en.json index 32eb2243d..5edcc5b95 100644 --- a/packages/apps/esm-offline-tools-app/translations/en.json +++ b/packages/apps/esm-offline-tools-app/translations/en.json @@ -19,8 +19,8 @@ "offlineActionsTableAction": "Action", "offlineActionsTableCreatedOn": "Date & Time", "offlineActionsTableDeleteAction": "Delete action", - "offlineActionsTableDeleteActions": "Delete {count} actions", - "offlineActionsTableDeleteActions_plural": "Delete {count} actions", + "offlineActionsTableDeleteActions_one": "Delete {count} actions", + "offlineActionsTableDeleteActions_other": "Delete {count} actions", "offlineActionsTableError": "Error", "offlineActionsTablePatient": "Patient", "offlineActionsUpdateOfflinePatients": "Update offline patients", diff --git a/yarn.lock b/yarn.lock index f81989a20..4bc2e549a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4333,6 +4333,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8: mime-types "~2.1.34" negotiator "0.6.3" +ace-builds@^1.4.13, ace-builds@^1.4.14: + version "1.4.14" + resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.14.tgz#2c41ccbccdd09e665d3489f161a20baeb3a3c852" + integrity sha512-NBOQlm9+7RBqRqZwimpgquaLeTJFayqb9UEPtTkpC3TkkwDnlsT/TwsCC0svjt9kEZ6G9mH5AEOHSz6Q/HrzQQ== + acorn-globals@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45" @@ -7420,6 +7425,11 @@ dezalgo@^1.0.0: asap "^2.0.0" wrappy "1" +diff-match-patch@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37" + integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw== + diff-sequences@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1" @@ -11620,6 +11630,11 @@ lodash.findlast@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.findlast/-/lodash.findlast-4.6.0.tgz#ea8bb78cf2e7e7804fc8aeb7d1953e07fe31fbc8" integrity sha1-6ou3jPLn54BPyK630ZU+B/4x+8g= +lodash.get@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" + integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= + lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" @@ -14474,6 +14489,17 @@ raw-loader@^3.1.0: loader-utils "^1.1.0" schema-utils "^2.0.1" +react-ace@^9.5.0: + version "9.5.0" + resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-9.5.0.tgz#b6c32b70d404dd821a7e01accc2d76da667ff1f7" + integrity sha512-4l5FgwGh6K7A0yWVMQlPIXDItM4Q9zzXRqOae8KkCl6MkOob7sC1CzHxZdOGvV+QioKWbX2p5HcdOVUv6cAdSg== + dependencies: + ace-builds "^1.4.13" + diff-match-patch "^1.0.5" + lodash.get "^4.4.2" + lodash.isequal "^4.5.0" + prop-types "^15.7.2" + react-clientside-effect@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz#e2c4dc3c9ee109f642fac4f5b6e9bf5bcd2219a3" From 1671246855b993150ca241700ce00b893cb01979 Mon Sep 17 00:00:00 2001 From: Brandon Istenes Date: Thu, 10 Mar 2022 16:38:34 -0800 Subject: [PATCH 3/3] Lazy load the implementer tools --- .../src/implementer-tools.component.tsx | 6 ++++-- .../esm-implementer-tools-app/src/ui-editor/ui-editor.tsx | 2 +- 2 files changed, 5 insertions(+), 3 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 index ec8bf514a..e25a2bfed 100644 --- 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,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); diff --git a/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx b/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx index fe96b5193..516101cd4 100644 --- a/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx +++ b/packages/apps/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx @@ -7,7 +7,7 @@ import { Portal } from "./portal"; import { ExtensionOverlay } from "./extension-overlay.component"; import { ImplementerToolsStore, implementerToolsStore } from "../store"; -export function UiEditor() { +export default function UiEditor() { const { slots, extensions } = useExtensionInternalStore(); const { isOpen: implementerToolsIsOpen } = useStore(implementerToolsStore);