@openmrs/esm-implementer-tools-app 3.2.0 → 3.2.1-pre.1015

package/src/configuration/description.component.tsx

@@ -1,28 +1,42 @@
 import React from "react";
-import styles from "./description.styles.css";
+import styles from "./description.styles.scss";
 import { useStore } from "@openmrs/esm-framework";
 import { implementerToolsStore } from "../store";
+import { useTranslation } from "react-i18next";
 
 export function Description() {
+  const { t } = useTranslation();
   const { activeItemDescription } = useStore(implementerToolsStore);
   return (
     <div>
       {activeItemDescription ? (
         <>
-          <p className={styles.path}>
+          <h2 className={styles.path}>
             {activeItemDescription.path.slice(1).join(" → ")}
-          </p>
+          </h2>
           <p className={styles.description}>
             {activeItemDescription.description}
           </p>
           <p className={styles.source}>
             {activeItemDescription.source === "default" ? (
-              <>The current value is the default.</>
+              <>
+                {t(
+                  "itemDescriptionSourceDefaultText",
+                  "The current value is the default."
+                )}
+              </>
             ) : activeItemDescription.source ? (
-              <>The current value comes from {activeItemDescription.source}.</>
+              <>
+                {t("activeItemSourceText", "The current value comes from ")}
+                {activeItemDescription.source}
+              </>
             ) : null}
           </p>
-          {activeItemDescription.value ? <p>Value:</p> : null}
+          {activeItemDescription.value ? (
+            <h4 className={styles.productiveHeading01}>
+              {t("value", "Value")}
+            </h4>
+          ) : null}
           <p className={styles.value}>
             {Array.isArray(activeItemDescription.value)
               ? activeItemDescription.value.map((v, i) => (

package/src/configuration/description.styles.scss

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

package/src/configuration/display-value.tsx

@@ -1,4 +1,6 @@
+import { StructuredListCell, StructuredListRow } from "carbon-components-react";
 import React from "react";
+import styles from "./configuration.styles.scss";
 
 export interface DisplayValueProps {
   value: any;
@@ -7,26 +9,36 @@ export interface DisplayValueProps {
 export function DisplayValue({ value }: DisplayValueProps) {
   // TODO: Make this show the concept name for ConceptUUID type values
   return (
-    <>
+    <div>
       {Array.isArray(value)
         ? typeof value[0] === "object"
           ? value.map((v, i) => (
-              <div key={`${v}-${i}`} style={{ marginBottom: "1em" }}>
-                <DisplayValue value={v} />
-              </div>
+              <StructuredListRow key={`${v}-${i}`}>
+                <StructuredListCell className={styles.smallListCell}>
+                  {i + 1}
+                </StructuredListCell>
+                <StructuredListCell className={styles.smallListCell}>
+                  <DisplayValue value={v} />
+                </StructuredListCell>
+              </StructuredListRow>
             ))
-          : value.join(", ")
+          : `[ ${value.join(", ")} ]`
         : typeof value === "object" && value !== null
         ? Object.entries(value).map(([k, v], i) => (
-            <div key={`${k}-${i}`}>
-              {k}: <DisplayValue value={v} />
-            </div>
+            <StructuredListRow key={`${k}-${i}`}>
+              <StructuredListCell className={styles.smallListCell}>
+                {k}
+              </StructuredListCell>
+              <StructuredListCell className={styles.smallListCell}>
+                <DisplayValue value={v} />
+              </StructuredListCell>
+            </StructuredListRow>
           ))
         : typeof value === "string" || typeof value === "number"
         ? value
         : value == null
         ? "none"
         : JSON.stringify(value)}
-    </>
+    </div>
   );
 }

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

@@ -3,7 +3,8 @@ import isEqual from "lodash-es/isEqual";
 import unset from "lodash-es/unset";
 import cloneDeep from "lodash-es/cloneDeep";
 import Reset16 from "@carbon/icons-react/es/reset/16";
-import styles from "./editable-value.styles.css";
+import Edit16 from "@carbon/icons-react/es/edit/16";
+import styles from "./editable-value.styles.scss";
 import { Button } from "carbon-components-react";
 import {
   ConfigValue,
@@ -15,6 +16,7 @@ import {
 import { ValueEditor, CustomValueType } from "./value-editor";
 import { implementerToolsStore, ImplementerToolsStore } from "../store";
 import { DisplayValue } from "./display-value";
+import { useTranslation } from "react-i18next";
 
 export interface EditableValueProps {
   path: Array<string>;
@@ -41,6 +43,7 @@ export default function EditableValue({
   const [editing, setEditing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const activeConfigRef = useRef<HTMLButtonElement>(null);
+  const { t } = useTranslation();
 
   const closeEditor = () => {
     setEditing(false);
@@ -114,25 +117,26 @@ export default function EditableValue({
             />
           </>
         ) : (
-          <>
-            <button
-              className={`${styles.secretButton} ${
-                element._source == "temporary config"
-                  ? styles.overriddenValue
-                  : ""
-              }`}
+          <div className={styles.elementValue}>
+            <DisplayValue value={element._value} />
+            <Button
+              kind="ghost"
+              size="sm"
+              iconDescription={t("editValueButtonText", "Edit")}
               onClick={() => setEditing(true)}
               ref={activeConfigRef}
-            >
-              <DisplayValue value={element._value} />
-            </button>
+              renderIcon={Edit16}
+              hasIconOnly
+            />
             {element._source == "temporary config" ? (
               <Button
-                style={{ marginLeft: "1em" }}
                 renderIcon={Reset16}
                 size="sm"
-                kind="tertiary"
-                iconDescription="Reset to default"
+                kind="ghost"
+                iconDescription={t(
+                  "resetToDefaultValueButtonText",
+                  "Reset to default"
+                )}
                 hasIconOnly
                 onClick={() => {
                   temporaryConfigStore.setState(
@@ -144,7 +148,7 @@ export default function EditableValue({
                 }}
               />
             ) : null}
-          </>
+          </div>
         )}
         {error && <div className={styles.error}>{error}</div>}
       </div>

package/src/configuration/{editable-value.styles.css → editable-value.styles.scss}

@@ -1,3 +1,5 @@
+@import "../implementer-tools.styles.scss";
+
 .secretButton {
   background: none;
   color: #474b6b;
@@ -15,3 +17,12 @@
 .overriddenValue {
   color: #2020a0;
 }
+
+.elementValue {
+  display: flex;
+  align-items: flex-start;
+}
+
+.editValueButton {
+  margin-left: $spacing-05;
+}

package/src/configuration/extension-slots-config-tree.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React from "react";
 import EditableValue from "./editable-value.component";
 import isEqual from "lodash-es/isEqual";
 import {
-  extensionStore,
   ExtensionSlotConfigureValueObject,
-  useExtensionStore,
-  ExtensionStore,
+  useAssignedExtensions,
 } from "@openmrs/esm-framework";
 import { ExtensionConfigureTree } from "./extension-configure-tree";
 import { Subtree } from "./layout/subtree.component";
@@ -43,7 +41,7 @@ export function ExtensionSlotsConfigTree({
         <ExtensionSlotConfigTree
           key={slotName}
           config={extensionsConfig?.[slotName]}
-          path={[moduleName, "extensions", slotName]}
+          path={[moduleName, "extensionSlots", slotName]}
         />
       ))}
     </Subtree>
@@ -56,28 +54,16 @@ interface ExtensionSlotConfigProps {
 }
 
 function ExtensionSlotConfigTree({ config, path }: ExtensionSlotConfigProps) {
-  const [assignedExtensions, setAssignedExtensions] = useState<Array<string>>(
-    []
-  );
   const moduleName = path[0];
   const slotName = path[2];
-
-  useEffect(() => {
-    function update(state) {
-      setAssignedExtensions(
-        state.slots[slotName]?.instances?.[moduleName]?.assignedIds
-      );
-    }
-    update(extensionStore.getState());
-    return extensionStore.subscribe(update);
-  }, []);
+  const assignedExtensions = useAssignedExtensions(slotName);
 
   function setActiveExtensionSlotOnMouseEnter(moduleName, slotName) {
     if (!implementerToolsStore.getState().configPathBeingEdited) {
       implementerToolsStore.setState({
         activeItemDescription: {
           path: [moduleName, slotName],
-          value: assignedExtensions,
+          value: assignedExtensions.map((e) => e.id),
         },
       });
     }

package/src/configuration/value-editor.tsx

@@ -5,7 +5,8 @@ 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.css";
+import styles from "./configuration.styles.scss";
+import { useTranslation } from "react-i18next";
 
 export type CustomValueType = "add" | "remove" | "order" | "configure";
 
@@ -28,6 +29,7 @@ export function ValueEditor({
 }: ValueEditorProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [tmpValue, setTmpValue] = useState(element._value);
+  const { t } = useTranslation();
 
   const valueType = customType ?? element._type;
 
@@ -58,20 +60,14 @@ export function ValueEditor({
       <div className={styles.valueEditorButtons}>
         <Button
           renderIcon={Save16}
-          size="sm"
           kind="primary"
-          iconDescription="Save"
-          hasIconOnly
           onClick={() => handleSave(JSON.stringify(tmpValue))}
-        />
-        <Button
-          renderIcon={Close16}
-          size="sm"
-          kind="secondary"
-          iconDescription="Cancel"
-          hasIconOnly
-          onClick={handleClose}
-        />
+        >
+          {t("saveValueButtonText", "Save")}
+        </Button>
+        <Button renderIcon={Close16} kind="secondary" onClick={handleClose}>
+          {t("CancelButtonText", "Cancel")}
+        </Button>
       </div>
     </div>
   );

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

@@ -67,8 +67,7 @@ export function ArrayEditor({
             </StructuredListRow>
           ))}
           <StructuredListRow>
-            <StructuredListCell></StructuredListCell>
-            <StructuredListCell className={styles.buttonCell}>
+            <StructuredListCell>
               <Button
                 renderIcon={Add16}
                 size="sm"

package/src/configuration/value-editors/{concept-search.styles.css → concept-search.styles.scss}

@@ -1,3 +1,13 @@
+@import "../../implementer-tools.styles.scss";
+
+.activeConceptUuid {
+  @include carbon--type-style("body-short-01");
+  color: $ui-05;
+  margin-bottom: $spacing-03;
+  padding-bottom: $spacing-03;
+  border-bottom: 1px solid $ui-03;
+}
+
 .autocomplete,
 .autocomplete > [role="combobox"] {
   display: flex;

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

@@ -5,17 +5,26 @@ import {
   fetchConceptByUuid,
   performConceptSearch,
 } from "./concept-search.resource";
-import styles from "./concept-search.styles.css";
+import styles from "./uuid-search.scss";
+import {
+  Search,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from "carbon-components-react";
+import { useTranslation } from "react-i18next";
 
 interface ConceptSearchBoxProps {
+  value: string;
   setConcept: (concept) => void;
 }
 
-export function ConceptSearchBox({ setConcept }: ConceptSearchBoxProps) {
+export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
   const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState([]);
-  const [activeConceptUuid, setActiveConceptUuid] = useState<any>("");
+  const [activeConceptUuid, setActiveConceptUuid] = useState<any>(value);
   const searchTimeoutInMs = 300;
+  const { t } = useTranslation();
 
   const id = useMemo(() => uniqueId(), []);
 
@@ -48,42 +57,55 @@ export function ConceptSearchBox({ setConcept }: ConceptSearchBoxProps) {
   }, [searchTerm]);
 
   return (
-    <div className={styles.autocomplete}>
-      <input
-        type="text"
-        autoComplete="off"
-        autoCapitalize="off"
-        aria-autocomplete="list"
-        role="combobox"
-        aria-label="Look up concept by name"
-        aria-controls={`searchbox-${id}`}
-        aria-expanded={searchResults.length > 0}
-        placeholder="Look up concept by name"
-        autoFocus
-        onChange={($event) => {
-          handleSearchTermChange($event.target.value);
-        }}
-      />
-      <div id={`searchbox-${id}`}>
-        <ul role="listbox">
-          {!!searchResults.length &&
-            searchResults.map((concept: any) => (
-              <li
+    <div>
+      {activeConceptUuid && (
+        <p className={styles.activeUuid}>{activeConceptUuid}</p>
+      )}
+      <div className={styles.autocomplete}>
+        <Search
+          id={`searchbox-${id}`}
+          labelText=""
+          type="text"
+          size="sm"
+          autoComplete="off"
+          autoCapitalize="off"
+          aria-autocomplete="list"
+          role="combobox"
+          aria-label={t("searchConceptHelperText", "Concept Name")}
+          aria-controls={`searchbox-${id}`}
+          aria-expanded={searchResults.length > 0}
+          placeholder={t("searchConceptHelperText", "Concept Name")}
+          onChange={($event) => {
+            handleSearchTermChange($event.target.value);
+          }}
+        />
+        {!!searchResults.length && (
+          <StructuredListWrapper
+            selection
+            id={`searchbox-${id}`}
+            className={styles.listbox}
+          >
+            {searchResults.map((concept: any) => (
+              <StructuredListRow
                 key={concept.uuid}
                 role="option"
-                style={{ padding: "5px" }}
                 onClick={() => {
                   handleUuidChange(concept);
                 }}
                 aria-selected="true"
               >
-                {concept.display}
-              </li>
+                <StructuredListCell className={styles.smallListCell}>
+                  {concept.display}
+                </StructuredListCell>
+              </StructuredListRow>
             ))}
-          {searchTerm && searchResults && !searchResults.length && (
-            <li>No matching results found.</li>
-          )}
-        </ul>
+          </StructuredListWrapper>
+        )}
+        {searchTerm && searchResults && !searchResults.length && (
+          <p className={styles.bodyShort01}>
+            {t("noConceptsFoundText", "No matching results found")}
+          </p>
+        )}
       </div>
     </div>
   );

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

@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { MultiSelect } from "carbon-components-react";
-import { ExtensionStore, extensionStore } from "@openmrs/esm-framework";
+import {
+  ExtensionInternalStore,
+  getExtensionInternalStore,
+} from "@openmrs/esm-framework";
+
+const extensionInternalStore = getExtensionInternalStore();
 
 export function ExtensionSlotAdd({ value, setValue }) {
   const [availableExtensions, setAvailableExtensions] = useState<Array<string>>(
@@ -8,11 +13,11 @@ export function ExtensionSlotAdd({ value, setValue }) {
   );
 
   useEffect(() => {
-    function update(state: ExtensionStore) {
+    function update(state: ExtensionInternalStore) {
       setAvailableExtensions(Object.keys(state.extensions));
     }
-    update(extensionStore.getState());
-    return extensionStore.subscribe(update);
+    update(extensionInternalStore.getState());
+    return extensionInternalStore.subscribe(update);
   }, []);
 
   return (

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { MultiSelect } from "carbon-components-react";
-import { useAssignedExtensionIds } from "@openmrs/esm-framework";
+import { useAssignedExtensions } from "@openmrs/esm-framework";
 
 export function ExtensionSlotRemove({
   slotName,
@@ -8,7 +8,7 @@ export function ExtensionSlotRemove({
   value,
   setValue,
 }) {
-  const assignedIds = useAssignedExtensionIds(slotName);
+  const assignedIds = useAssignedExtensions(slotName).map((e) => e.id);
 
   return (
     <MultiSelect.Filterable

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

@@ -0,0 +1,18 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+export function fetchPersonAttributeTypeByUuid(
+  personAttributeTypeUuid: string
+) {
+  return openmrsFetch(
+    `/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`,
+    {
+      method: "GET",
+    }
+  );
+}
+
+export function performPersonAttributeTypeSearch(query: string) {
+  return openmrsFetch(`/ws/rest/v1/personattributetype/?q=${query}`, {
+    method: "GET",
+  });
+}

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

@@ -0,0 +1,123 @@
+import React, { useState, useEffect, useMemo } from "react";
+import debounce from "lodash-es/debounce";
+import uniqueId from "lodash-es/uniqueId";
+import { performPersonAttributeTypeSearch } from "./person-attribute-search.resource";
+import styles from "./uuid-search.scss";
+import { useTranslation } from "react-i18next";
+import {
+  Search,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from "carbon-components-react";
+
+interface PersonAttributeTypeSearchBoxProps {
+  value: string;
+  setPersonAttributeUuid: (personAttributeType) => void;
+}
+
+export function PersonAttributeTypeSearchBox({
+  setPersonAttributeUuid,
+  value,
+}: PersonAttributeTypeSearchBoxProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+  const [activePersonAttributeUuid, setActivePersonAttributeUuid] =
+    useState<any>(value);
+  const { t } = useTranslation();
+  const searchTimeoutInMs = 300;
+
+  const id = useMemo(() => uniqueId(), []);
+
+  const handleUuidChange = (personAttributeType) => {
+    setActivePersonAttributeUuid(personAttributeType.uuid);
+    resetSearch();
+    setPersonAttributeUuid(personAttributeType.uuid);
+  };
+
+  const resetSearch = () => {
+    setSearchTerm("");
+    setSearchResults([]);
+  };
+
+  const handleSearchTermChange = debounce((searchTerm) => {
+    setSearchTerm(searchTerm);
+  }, searchTimeoutInMs);
+
+  useEffect(() => {
+    const ac = new AbortController();
+
+    if (searchTerm && searchTerm.length >= 2) {
+      performPersonAttributeTypeSearch(searchTerm).then(
+        ({ data: { results } }) => {
+          setSearchResults(results.slice(0, 9));
+        }
+      );
+    } else {
+      setSearchResults([]);
+    }
+    return () => ac.abort();
+  }, [searchTerm]);
+
+  return (
+    <div>
+      {activePersonAttributeUuid && (
+        <p className={styles.activeUuid}>{activePersonAttributeUuid}</p>
+      )}
+      <div className={styles.autocomplete}>
+        <Search
+          id={`search-input-${id}`}
+          labelText=""
+          type="text"
+          size="sm"
+          autoComplete="off"
+          autoCapitalize="off"
+          aria-autocomplete="list"
+          role="combobox"
+          aria-label={t(
+            "searchPersonAttributeHelperText",
+            "Person attribute type name"
+          )}
+          aria-controls={`searchbox-${id}`}
+          aria-expanded={searchResults.length > 0}
+          placeholder={t(
+            "searchPersonAttributeHelperText",
+            "Person attribute type name"
+          )}
+          onChange={($event) => {
+            handleSearchTermChange($event.target.value);
+          }}
+        />
+
+        {!!searchResults.length && (
+          <StructuredListWrapper
+            selection
+            className={styles.listbox}
+            id={`searchbox-${id}`}
+          >
+            {searchResults.map((personAttributeType: any) => (
+              <StructuredListRow
+                key={personAttributeType.uuid}
+                role="option"
+                onClick={() => {
+                  handleUuidChange(personAttributeType);
+                }}
+                aria-selected="true"
+              >
+                <StructuredListCell className={styles.smallListCell}>
+                  {personAttributeType.display}
+                </StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListWrapper>
+        )}
+
+        {searchTerm && searchResults && !searchResults.length && (
+          <p className={styles.bodyShort01}>
+            {t("noPersonAttributeFoundText", "No matching results found")}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+@import "../../implementer-tools.styles.scss";
+
+.activeUuid {
+  @include carbon--type-style("body-short-01");
+  color: $ui-05;
+  margin-bottom: $spacing-03;
+  padding-bottom: $spacing-03;
+  border-bottom: 1px solid $ui-03;
+}
+
+.autocomplete,
+.autocomplete > [role="combobox"] {
+  position: relative;
+  width: 20em;
+}
+
+.listbox {
+  box-shadow: 0 0 $spacing-03;
+}
+
+.smallListCell {
+  padding: $spacing-03;
+}