From 68995560b9ad39ea25114283f7bad6813b09bbbb Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Wed, 23 Feb 2022 03:03:22 +0530
Subject: [PATCH] UI FIX for searching UUIDs in implementer's tools(e.g.
 concepts, personattributetype) and better readability of data (#334)

---
 .../configuration/configuration.styles.scss   |  4 ++
 .../src/configuration/configuration.test.tsx  |  2 +-
 .../src/configuration/display-value.tsx       | 26 +++++---
 .../src/configuration/value-editor.tsx        |  8 +--
 .../value-editors/concept-search.tsx          | 55 ++++++++++-------
 .../person-attribute-search.scss              | 41 -------------
 .../value-editors/person-attribute-search.tsx | 59 +++++++++++--------
 .../value-editors/uuid-search.scss            | 23 ++++++++
 .../src/implementer-tools.button.tsx          |  8 +--
 .../src/implementer-tools.component.tsx       |  5 +-
 .../src/implementer-tools.styles.scss         |  7 +--
 .../translations/en.json                      |  3 +-
 12 files changed, 125 insertions(+), 116 deletions(-)
 delete mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.scss
 create mode 100644 packages/apps/esm-implementer-tools-app/src/configuration/value-editors/uuid-search.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 e1e855dbd..93ea9c196 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
@@ -64,3 +64,7 @@
 .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 95a40c251..85ff30449 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
@@ -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");
diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx
index 4699f6e82..cd807abba 100644
--- a/packages/apps/esm-implementer-tools-app/src/configuration/display-value.tsx
+++ b/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
diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx
index 4f96846d3..c07ac2bc9 100644
--- a/packages/apps/esm-implementer-tools-app/src/configuration/value-editor.tsx
+++ b/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>
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/value-editors/concept-search.tsx
index 505cf4ad5..6d75e00db 100644
--- a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.tsx
+++ b/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>
   );
diff --git a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.scss b/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.scss
deleted file mode 100644
index 2ff7d0a1a..000000000
--- a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@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"] {
-  display: flex;
-  position: relative;
-  width: 20em;
-}
-
-.autocomplete [role="listbox"] {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-flow: column wrap;
-  background-color: whitesmoke;
-  color: #fff;
-}
-
-.autocomplete li {
-  line-height: 0.75rem;
-  padding: 0.5em;
-  display: block;
-  border-bottom: 0.125rem solid #718096;
-  outline: 0;
-  margin: 0;
-  color: #000;
-}
-
-.autocomplete [role="option"]:hover {
-  background-color: #38a169;
-  border-color: #38a169;
-  color: #f7fafc;
-}
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/value-editors/person-attribute-search.tsx
index 5c0f5c3fa..540e2edab 100644
--- a/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/person-attribute-search.tsx
+++ b/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>
   );
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/value-editors/uuid-search.scss
new file mode 100644
index 000000000..d8dab38f8
--- /dev/null
+++ b/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;
+}
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx b/packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx
index 72a06f8ab..0b98a5547 100644
--- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx
+++ b/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>
   );
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 8ab277d69..ec8bf514a 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
@@ -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",
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
index 7dc9ba7b2..0886797dd 100644
--- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
+++ b/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 {
diff --git a/packages/apps/esm-implementer-tools-app/translations/en.json b/packages/apps/esm-implementer-tools-app/translations/en.json
index b3eeda523..c1d0d05f6 100644
--- a/packages/apps/esm-implementer-tools-app/translations/en.json
+++ b/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"
 }