UI FIX for searching UUIDs in implementer's tools(e.g. concepts, personattributetype) and better readability of data

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

@@ -64,3 +64,7 @@
 .valueEditorButtons {
   margin-top: $spacing-03;
 }
+
+.smallListCell {
+  padding: $spacing-03;
+}

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

@@ -272,7 +272,7 @@ describe(`<Configuration />`, () => {
     expect(rowElement).toBeInTheDocument();
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
-      const valueButton = row.getByText("4, 12");
+      const valueButton = row.getByText("[ 4, 12 ]");
       const editButton = row.getByText("Edit").parentElement as any;
       fireEvent.click(editButton);
       const firstValue = row.getByDisplayValue("4");

packages/apps/esm-implementer-tools-app/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;
@@ -11,16 +13,26 @@ export function DisplayValue({ value }: DisplayValueProps) {
       {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

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

@@ -60,18 +60,12 @@ export function ValueEditor({
       <div className={styles.valueEditorButtons}>
         <Button
           renderIcon={Save16}
-          // size="sm"
           kind="primary"
           onClick={() => handleSave(JSON.stringify(tmpValue))}
         >
           {t("saveValueButtonText", "Save")}
         </Button>
-        <Button
-          renderIcon={Close16}
-          // size="sm"
-          kind="secondary"
-          onClick={handleClose}
-        >
+        <Button renderIcon={Close16} kind="secondary" onClick={handleClose}>
           {t("CancelButtonText", "Cancel")}
         </Button>
       </div>

packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.tsx

@@ -5,8 +5,13 @@ import {
   fetchConceptByUuid,
   performConceptSearch,
 } from "./concept-search.resource";
-import styles from "./concept-search.styles.scss";
-import { Search } from "carbon-components-react";
+import styles from "./uuid-search.scss";
+import {
+  Search,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from "carbon-components-react";
 import { useTranslation } from "react-i18next";
 
 interface ConceptSearchBoxProps {
@@ -75,27 +80,33 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
             handleSearchTermChange($event.target.value);
           }}
         />
-        <div id={`searchbox-${id}`}>
-          <ul role="listbox">
-            {!!searchResults.length &&
-              searchResults.map((concept: any) => (
-                <li
-                  key={concept.uuid}
-                  role="option"
-                  style={{ padding: "5px" }}
-                  onClick={() => {
-                    handleUuidChange(concept);
-                  }}
-                  aria-selected="true"
-                >
+        {!!searchResults.length && (
+          <StructuredListWrapper
+            selection
+            id={`searchbox-${id}`}
+            className={styles.listbox}
+          >
+            {searchResults.map((concept: any) => (
+              <StructuredListRow
+                key={concept.uuid}
+                role="option"
+                onClick={() => {
+                  handleUuidChange(concept);
+                }}
+                aria-selected="true"
+              >
+                <StructuredListCell className={styles.smallListCell}>
                   {concept.display}
-                </li>
-              ))}
-            {searchTerm && searchResults && !searchResults.length && (
-              <li>{t("noConceptsFoundText", "No matching results found")}</li>
-            )}
-          </ul>
-        </div>
+                </StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListWrapper>
+        )}
+        {searchTerm && searchResults && !searchResults.length && (
+          <p className={styles.bodyShort01}>
+            {t("noConceptsFoundText", "No matching results found")}
+          </p>
+        )}
       </div>
     </div>
   );

packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.tsx

@@ -2,9 +2,14 @@ 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 "./person-attribute-search.scss";
+import styles from "./uuid-search.scss";
 import { useTranslation } from "react-i18next";
-import { Search } from "carbon-components-react";
+import {
+  Search,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from "carbon-components-react";
 
 interface PersonAttributeTypeSearchBoxProps {
   value: string;
@@ -86,29 +91,35 @@ export function PersonAttributeTypeSearchBox({
             handleSearchTermChange($event.target.value);
           }}
         />
-        <div id={`searchbox-${id}`}>
-          <ul role="listbox">
-            {!!searchResults.length &&
-              searchResults.map((personAttributeType: any) => (
-                <li
-                  key={personAttributeType.uuid}
-                  role="option"
-                  style={{ padding: "5px" }}
-                  onClick={() => {
-                    handleUuidChange(personAttributeType);
-                  }}
-                  aria-selected="true"
-                >
+
+        {!!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}
-                </li>
-              ))}
-            {searchTerm && searchResults && !searchResults.length && (
-              <li>
-                {t("noPersonAttributeFoundText", "No matching results found")}
-              </li>
-            )}
-          </ul>
-        </div>
+                </StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListWrapper>
+        )}
+
+        {searchTerm && searchResults && !searchResults.length && (
+          <p className={styles.bodyShort01}>
+            {t("noPersonAttributeFoundText", "No matching results found")}
+          </p>
+        )}
       </div>
     </div>
   );

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

@@ -0,0 +1,23 @@
+@import "../../implementer-tools.styles.scss";
+
+.activePersonAttributeUuid {
+  @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;
+}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Close20 from "@carbon/icons-react/es/close/20";
-import Tools20 from "@carbon/icons-react/es/tools/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";
@@ -20,11 +20,7 @@ const ImplementerToolsButton: React.FC = () => {
         name="ImplementerToolsIcon"
         onClick={togglePopup}
       >
-        {isOpen ? (
-          <Close20 />
-        ) : (
-          <Tools20 className={styles.popupTriggerButton} />
-        )}
+        {isOpen ? <Close20 /> : <Tools24 />}
       </HeaderGlobalAction>
     </UserHasAccess>
   );

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

@@ -14,11 +14,12 @@ import {
 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";
 
 function PopupHandler() {
   const frontendModules = useBackendDependencies();
   const [shouldShowNotification, setShouldShowNotification] = useState(false);
-
+  const { t } = useTranslation();
   useEffect(() => {
     // displaying toast if modules are missing
     setShouldShowNotification(
@@ -34,7 +35,7 @@ function PopupHandler() {
         description: "Found modules with unresolved backend dependencies.",
         action: (
           <NotificationActionButton onClick={showModuleDiagnostics}>
-            View
+            {t("view", "View")}
           </NotificationActionButton>
         ),
         kind: "error",

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

@@ -10,11 +10,8 @@
   @include carbon--type-style("productive-heading-02");
 }
 
-.popupTriggerButton {
-  height: 25px !important;
-  width: 25px !important;
-  position: relative;
-  border-radius: 2px;
+.bodyShort01 {
+  @include carbon--type-style("body-short-01");
 }
 
 .toolStyles {

packages/apps/esm-implementer-tools-app/translations/en.json

@@ -14,5 +14,6 @@
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
   "uiEditor": "UI Editor",
-  "value": "Value"
+  "value": "Value",
+  "view": "View"
 }