@openmrs/esm-implementer-tools-app 3.3.2-pre.31 → 3.3.2-pre.48

package/src/configuration/configuration.test.tsx

@@ -90,8 +90,7 @@ const mockImplToolsConfig = {
   },
 };
 
-// TODO: Fix configuration test suite post carbon upgrade
-describe.skip(`<Configuration />`, () => {
+describe(`<Configuration />`, () => {
   afterEach(() => {
     implementerToolsConfigStore.setState({ config: {} });
     temporaryConfigStore.setState({ config: {} });
@@ -103,15 +102,12 @@ describe.skip(`<Configuration />`, () => {
     render(<Configuration />);
   }
 
-  it("renders the configuration component inside the implementer tools panel", () => {
+  it(`renders without dying`, async () => {
     renderConfiguration();
-
-    screen.getByRole("switch", { name: /Dev Config/i });
-    screen.getByRole("switch", { name: /JSON Editor/i });
-    screen.getByRole("switch", { name: /UI Editor/i });
-    screen.getByRole("button", { name: /Clear Local Config/i });
-    screen.getByRole("button", { name: /Download Config/i });
-    screen.getByRole("textbox", { name: /Search configuration/i });
+    await screen.findByText("Dev Config");
+    screen.getByText("UI Editor");
+    screen.getByText("Clear Local Config");
+    screen.getByText("Download Config");
   });
 
   it("displays correct boolean value and editor", async () => {
@@ -120,22 +116,17 @@ describe.skip(`<Configuration />`, () => {
         "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
       },
     });
-
     renderConfiguration();
-
-    const rowElement = screen
-      .getByText("hasHat")
-      .closest(".cds--structured-list-row");
+    const rowElement = (await screen.findByText("hasHat")).closest(
+      ".bx--structured-list-row"
+    );
     expect(rowElement).toBeInTheDocument();
-
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
       const value = row.getByText("false");
       const editButton = row.getByText("Edit").parentElement as any;
-      userEvent.click(editButton);
+      fireEvent.click(editButton);
       const editor = await row.findByRole("checkbox");
-      screen.getByRole("x");
-      screen.debug(undefined, 100000);
       fireEvent.click(editor);
       fireEvent.click(row.getByText("Save"));
       // The mocked temporaryConfigStore.getState seems to be producing something
@@ -163,31 +154,27 @@ describe.skip(`<Configuration />`, () => {
         "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
       },
     });
-
     renderConfiguration();
-
     const rowElement = (await screen.findByText("hatUuid")).closest(
-      ".cds--structured-list-row"
+      ".bx--structured-list-row"
     );
     expect(rowElement).toBeInTheDocument();
-
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
       const valueButton = row.getByText("38c650cf-85d5-41b4-b0b1-46709248acca");
       const editButton = row.getByText("Edit").parentElement as any;
-      userEvent.click(editButton);
-      screen.debug(undefined, 1000000);
-      // const editor = await row.findByRole("combobox");
-      // userEvent.type(editor, "fed");
-      // expect(mockPerformConceptSearch).toHaveBeenCalledWith("fed");
-      // const targetConcept = await row.findByText("Fedora");
-      // userEvent.click(targetConcept);
-      // userEvent.click(row.getByText("Save"));
-      // expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
-      //   config: {
-      //     "@openmrs/mario": { hatUuid: "61523693-72e2-456d-8c64-8c5293febeb6" },
-      //   },
-      // });
+      fireEvent.click(editButton);
+      const editor = await row.findByRole("combobox");
+      userEvent.type(editor, "fed");
+      expect(mockPerformConceptSearch).toHaveBeenCalledWith("fed");
+      const targetConcept = await row.findByText("Fedora");
+      userEvent.click(targetConcept);
+      userEvent.click(row.getByText("Save"));
+      expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
+        config: {
+          "@openmrs/mario": { hatUuid: "61523693-72e2-456d-8c64-8c5293febeb6" },
+        },
+      });
     }
   });
 
@@ -197,14 +184,11 @@ describe.skip(`<Configuration />`, () => {
         "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
       },
     });
-
     renderConfiguration();
-
     const rowElement = (await screen.findByText("numberFingers")).closest(
-      ".cds--structured-list-row"
+      ".bx--structured-list-row"
     );
     expect(rowElement).toBeInTheDocument();
-
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
       const valueButton = row.getByText("8");
@@ -228,14 +212,11 @@ describe.skip(`<Configuration />`, () => {
         "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
       },
     });
-
     renderConfiguration();
-
     const rowElement = (await screen.findByText("nemesisName")).closest(
-      ".cds--structured-list-row"
+      ".bx--structured-list-row"
     );
     expect(rowElement).toBeInTheDocument();
-
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
       const valueButton = row.getByText("Waluigi");
@@ -257,14 +238,11 @@ describe.skip(`<Configuration />`, () => {
         "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
       },
     });
-
     renderConfiguration();
-
     const rowElement = (await screen.findByText("mustacheUuid")).closest(
-      ".cds--structured-list-row"
+      ".bx--structured-list-row"
     );
     expect(rowElement).toBeInTheDocument();
-
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
       const valueButton = row.getByText("181aee4a-5664-42da-8699-c36d28083bd0");
@@ -289,7 +267,7 @@ describe.skip(`<Configuration />`, () => {
     });
     renderConfiguration();
     const rowElement = (await screen.findByText("favoriteNumbers")).closest(
-      ".cds--structured-list-row"
+      ".bx--structured-list-row"
     );
     expect(rowElement).toBeInTheDocument();
     if (rowElement) {
@@ -303,7 +281,7 @@ describe.skip(`<Configuration />`, () => {
       userEvent.type(firstValue, "5");
       const secondRowElement = row
         .getByDisplayValue("12")
-        .closest(".cds--structured-list-row");
+        .closest(".bx--structured-list-row");
       expect(secondRowElement).toBeInTheDocument();
       // I can't get the add or remove buttons to work in tests.
       if (secondRowElement) {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./config-tree.styles.scss";
-import { Accordion, AccordionItem } from "@carbon/react";
+import { Accordion, AccordionItem } from "carbon-components-react";
 import { ConfigTreeForModule } from "./config-tree-for-module.component";
 
 export interface ConfigTreeProps {

package/src/configuration/interactive-editor/config-tree.styles.scss

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

package/src/configuration/interactive-editor/description.styles.scss

@@ -1,26 +1,23 @@
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
-@import "~@openmrs/esm-styleguide/src/vars";
 @import "../../implementer-tools.styles.scss";
 
 .path {
-  @include type.type-style("heading-02");
-  margin-bottom: spacing.$spacing-03;
+  @include carbon--type-style("productive-heading-02");
+  margin-bottom: $spacing-03;
 }
 
 .description {
-  @include type.type-style("body-compact-01");
-  margin-bottom: spacing.$spacing-05;
+  @include carbon--type-style("body-short-01");
+  margin-bottom: $spacing-05;
 }
 
 .source {
-  @include type.type-style("body-compact-01");
+  @include carbon--type-style("body-short-01");
   font-style: italic;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: $spacing-03;
 }
 
 .value {
   font-family: monospace;
-  margin-top: spacing.$spacing-03;
-  margin-left: spacing.$spacing-03;
+  margin-top: $spacing-03;
+  margin-left: $spacing-03;
 }

package/src/configuration/interactive-editor/display-value.scss

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

package/src/configuration/interactive-editor/display-value.tsx

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

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

@@ -2,9 +2,10 @@ import React, { useState, useEffect, useRef } from "react";
 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 Edit16 from "@carbon/icons-react/es/edit/16";
 import styles from "./editable-value.styles.scss";
-import { Button } from "@carbon/react";
-import { Edit, Reset } from "@carbon/react/icons";
+import { Button } from "carbon-components-react";
 import {
   ConfigValue,
   Validator,
@@ -124,12 +125,12 @@ export default function EditableValue({
               iconDescription={t("editValueButtonText", "Edit")}
               onClick={() => setEditing(true)}
               ref={activeConfigRef}
-              renderIcon={(props) => <Edit size={16} {...props} />}
+              renderIcon={Edit16}
               hasIconOnly
             />
             {element._source == "temporary config" ? (
               <Button
-                renderIcon={(props) => <Reset size={16} {...props} />}
+                renderIcon={Reset16}
                 size="sm"
                 kind="ghost"
                 iconDescription={t(

package/src/configuration/interactive-editor/editable-value.styles.scss

@@ -1,4 +1,3 @@
-@use "@carbon/styles/scss/spacing";
 @import "../../implementer-tools.styles.scss";
 
 .secretButton {
@@ -21,9 +20,9 @@
 
 .elementValue {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .editValueButton {
-  margin-left: spacing.$spacing-05;
+  margin-left: $spacing-05;
 }

package/src/configuration/interactive-editor/layout/subtree.component.tsx

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

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

@@ -1,5 +1,8 @@
 import React, { ReactNode } from "react";
-import { StructuredListBody, StructuredListWrapper } from "@carbon/react";
+import {
+  StructuredListBody,
+  StructuredListWrapper,
+} from "carbon-components-react";
 import styles from "./layout.styles.css";
 
 export interface TreeContainerProps {

package/src/configuration/interactive-editor/value-editor.scss

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

package/src/configuration/interactive-editor/value-editor.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "@carbon/react";
-import { Close, Save } from "@carbon/react/icons";
+import Close16 from "@carbon/icons-react/es/close/16";
+import Save16 from "@carbon/icons-react/es/save/16";
+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 "./value-editor.scss";
+import { useTranslation } from "react-i18next";
 
 export type CustomValueType = "add" | "remove" | "order" | "configure";
 
@@ -58,18 +59,14 @@ export function ValueEditor({
       />
       <div className={styles.valueEditorButtons}>
         <Button
-          renderIcon={(props) => <Save {...props} size={16} />}
+          renderIcon={Save16}
           kind="primary"
           onClick={() => handleSave(JSON.stringify(tmpValue))}
         >
           {t("saveValueButtonText", "Save")}
         </Button>
-        <Button
-          renderIcon={(props) => <Close {...props} size={16} />}
-          kind="secondary"
-          onClick={handleClose}
-        >
-          {t("cancelButtonText", "Cancel")}
+        <Button renderIcon={Close16} kind="secondary" onClick={handleClose}>
+          {t("CancelButtonText", "Cancel")}
         </Button>
       </div>
     </div>

package/src/configuration/interactive-editor/value-editors/array-editor.styles.css

@@ -1,8 +1,8 @@
-.arrayEditor :global(.cds--structured-list-td) {
+.arrayEditor :global(.bx--structured-list-td) {
   padding: 0.25rem 3rem 0.25rem 1rem;
 }
 
-.arrayEditor :global(.cds--structured-list) {
+.arrayEditor :global(.bx--structured-list) {
   margin-bottom: 0.25rem;
 }
 

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

@@ -1,6 +1,9 @@
 import React, { useMemo } from "react";
 import cloneDeep from "lodash-es/cloneDeep";
 import uniqueId from "lodash-es/uniqueId";
+import Add16 from "@carbon/icons-react/es/add/16";
+import TrashCan16 from "@carbon/icons-react/es/trash-can/16";
+import styles from "./array-editor.styles.css";
 import { Type } from "@openmrs/esm-framework";
 import {
   Button,
@@ -9,11 +12,9 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "@carbon/react";
-import { Add, TrashCan } from "@carbon/react/icons";
+} from "carbon-components-react";
 import { ValueEditorField } from "./value-editor-field";
 import { ConfigValueDescriptor } from "../editable-value.component";
-import styles from "./array-editor.styles.css";
 
 interface ArrayEditorProps {
   element: ConfigValueDescriptor;
@@ -51,7 +52,7 @@ export function ArrayEditor({
               </StructuredListCell>
               <StructuredListCell className={styles.buttonCell}>
                 <Button
-                  renderIcon={(props) => <TrashCan {...props} size={16} />}
+                  renderIcon={TrashCan16}
                   size="sm"
                   kind="secondary"
                   iconDescription="Remove"
@@ -68,7 +69,7 @@ export function ArrayEditor({
           <StructuredListRow>
             <StructuredListCell>
               <Button
-                renderIcon={(props) => <Add {...props} size={16} />}
+                renderIcon={Add16}
                 size="sm"
                 iconDescription="Add"
                 hasIconOnly

package/src/configuration/interactive-editor/value-editors/concept-search.styles.scss

@@ -1,8 +1,7 @@
-@use "@carbon/styles/scss/type";
 @import "../../implementer-tools.styles.scss";
 
 .activeConceptUuid {
-  @include type.type-style("body-compact-01");
+  @include carbon--type-style("body-short-01");
   color: $ui-05;
   margin-bottom: $spacing-03;
   padding-bottom: $spacing-03;

package/src/configuration/interactive-editor/value-editors/concept-search.tsx

@@ -11,7 +11,7 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "@carbon/react";
+} from "carbon-components-react";
 import { useTranslation } from "react-i18next";
 
 interface ConceptSearchBoxProps {

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { MultiSelect } from "@carbon/react";
+import { MultiSelect } from "carbon-components-react";
 import {
   ExtensionInternalStore,
   getExtensionInternalStore,

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { MultiSelect } from "@carbon/react";
+import { MultiSelect } from "carbon-components-react";
 import { useAssignedExtensions } from "@openmrs/esm-framework";
 
 export function ExtensionSlotRemove({

package/src/configuration/interactive-editor/value-editors/object-editor.styles.css

@@ -1,8 +1,8 @@
-.objectEditor :global(.cds--structured-list-td) {
+.objectEditor :global(.bx--structured-list-td) {
   padding: 0.25rem 3rem 0.25rem 1rem;
 }
 
-.objectEditor :global(.cds--structured-list) {
+.objectEditor :global(.bx--structured-list) {
   margin-bottom: 0.25rem;
 }
 

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

@@ -5,7 +5,7 @@ import {
   StructuredListRow,
   StructuredListWrapper,
   Tile,
-} from "@carbon/react";
+} from "carbon-components-react";
 import { ValueEditorField } from "./value-editor-field";
 import { ConfigValueDescriptor } from "../editable-value.component";
 import { Type } from "@openmrs/esm-framework";

package/src/configuration/interactive-editor/value-editors/patient-identifier-type-search.tsx

@@ -11,7 +11,7 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "@carbon/react";
+} from "carbon-components-react";
 
 interface PatientIdentifierTypeSearchBoxProps {
   value: string;

package/src/configuration/interactive-editor/value-editors/person-attribute-search.tsx

@@ -9,7 +9,7 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-} from "@carbon/react";
+} from "carbon-components-react";
 
 interface PersonAttributeTypeSearchBoxProps {
   value: string;

package/src/configuration/interactive-editor/value-editors/uuid-search.scss

@@ -1,12 +1,10 @@
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
 @import "../../../implementer-tools.styles.scss";
 
 .activeUuid {
-  @include type.type-style("body-compact-01");
+  @include carbon--type-style("body-short-01");
   color: $ui-05;
-  margin-bottom: spacing.$spacing-03;
-  padding-bottom: spacing.$spacing-03;
+  margin-bottom: $spacing-03;
+  padding-bottom: $spacing-03;
   border-bottom: 1px solid $ui-03;
 }
 
@@ -17,9 +15,9 @@
 }
 
 .listbox {
-  box-shadow: 0 0 spacing.$spacing-03;
+  box-shadow: 0 0 $spacing-03;
 }
 
 .smallListCell {
-  padding: spacing.$spacing-03;
+  padding: $spacing-03;
 }

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

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

package/src/configuration/json-editor/json-editor.component.tsx

@@ -3,12 +3,12 @@ import {
   temporaryConfigStore,
   useStore,
 } from "@openmrs/esm-framework/src/internal";
-import { Button } from "@carbon/react";
 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 */
@@ -55,7 +55,7 @@ export default function JsonEditor({ height }: JsonEditorProps) {
         }}
       />
       <div className={style.toolbar}>
-        <Button size="md" type="submit" onClick={updateTemporaryConfig}>
+        <Button type="submit" onClick={updateTemporaryConfig}>
           Update
         </Button>
         <div

package/src/implementer-tools.button.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { HeaderGlobalAction } from "@carbon/react";
-import { Close, Tools } from "@carbon/react/icons";
+import Close20 from "@carbon/icons-react/es/close/20";
+import Tools24 from "@carbon/icons-react/es/tools/24";
+import { HeaderGlobalAction } from "carbon-components-react";
 import { UserHasAccess, useStore } from "@openmrs/esm-framework";
 import { implementerToolsStore, togglePopup } from "./store";
 import styles from "./implementer-tools.styles.scss";
@@ -19,7 +20,7 @@ const ImplementerToolsButton: React.FC = () => {
         name="ImplementerToolsIcon"
         onClick={togglePopup}
       >
-        {isOpen ? <Close size={20} /> : <Tools size={20} />}
+        {isOpen ? <Close20 /> : <Tools24 />}
       </HeaderGlobalAction>
     </UserHasAccess>
   );

package/src/implementer-tools.component.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { NotificationActionButton } from "@carbon/react";
+import { NotificationActionButton } from "carbon-components-react";
 import {
   showNotification,
   UserHasAccess,
@@ -43,7 +43,7 @@ function PopupHandler() {
         kind: "error",
       });
     }
-  }, [t, shouldShowNotification]);
+  }, [shouldShowNotification]);
 
   const { isOpen, isUIEditorEnabled, openTabIndex } = useStore(
     implementerToolsStore

package/src/implementer-tools.styles.scss

@@ -1,17 +1,17 @@
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
+@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
 @import "~@openmrs/esm-styleguide/src/vars";
 
 .productiveHeading01 {
-  @include type.type-style("heading-compact-01");
+  @include carbon--type-style("productive-heading-01");
 }
 
 .productiveHeading02 {
-  @include type.type-style("heading-compact-02");
+  @include carbon--type-style("productive-heading-02");
 }
 
 .bodyShort01 {
-  @include type.type-style("body-compact-01");
+  @include carbon--type-style("body-short-01");
 }
 
 .toolStyles {

package/src/popup/popup.component.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import { Button, ContentSwitcher, Switch } from "@carbon/react";
-import { Close } from "@carbon/react/icons";
+import Close16 from "@carbon/icons-react/es/close/16";
+import styles from "./popup.styles.scss";
+import { Button, ContentSwitcher, Switch } from "carbon-components-react";
 import { useTranslation } from "react-i18next";
 import { Configuration } from "../configuration/configuration.component";
 import { ModuleDiagnostics } from "../backend-dependencies/backend-dependencies.component";
 import { FrontendModule } from "../backend-dependencies/openmrs-backend-dependencies";
-import styles from "./popup.styles.scss";
 
 interface DevToolsPopupProps {
   close(): void;
@@ -39,11 +39,10 @@ export default function Popup({ close, frontendModules }: DevToolsPopupProps) {
         <div>
           <Button
             kind="secondary"
-            renderIcon={(props) => <Close size={16} {...props} />}
+            renderIcon={Close16}
             iconDescription="Close"
             onClick={close}
             hasIconOnly
-            size="sm"
           />
         </div>
       </div>