From 8dbb5f93d096b5978a883826842075f5b80ffd93 Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Tue, 22 Feb 2022 23:46:58 +0530 Subject: [PATCH 1/7] Fixed the design issue in the search box for concept uuid --- .../value-editors/concept-search.tsx | 55 ++++++++++-------- .../person-attribute-search.scss | 41 ------------- .../value-editors/person-attribute-search.tsx | 57 +++++++++++-------- .../value-editors/uuid-search.scss | 19 +++++++ .../src/implementer-tools.styles.scss | 4 ++ 5 files changed, 88 insertions(+), 88 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/value-editors/concept-search.tsx b/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/concept-search.tsx index 505cf4ad5..8af0941d3 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,31 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) { handleSearchTermChange($event.target.value); }} /> -
- -
+ + {!!searchResults.length && + searchResults.map((concept: any) => ( + { + handleUuidChange(concept); + }} + aria-selected="true" + > + {concept.display} + + ))} + + {searchTerm && searchResults && !searchResults.length && ( +

+ {t("noConceptsFoundText", "No matching results found")} +

+ )} ); 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..da9fc6eaf 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,33 @@ export function PersonAttributeTypeSearchBox({ handleSearchTermChange($event.target.value); }} /> -
- -
+ + + ))} + + {searchTerm && searchResults && !searchResults.length && ( +

+ {t("noPersonAttributeFoundText", "No matching results found")} +

+ )} ); 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..d90f32427 --- /dev/null +++ b/packages/apps/esm-implementer-tools-app/src/configuration/value-editors/uuid-search.scss @@ -0,0 +1,19 @@ +@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; +} 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..d45a97b7e 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,6 +10,10 @@ @include carbon--type-style("productive-heading-02"); } +.bodyShort01 { + @include carbon--type-style("body-short-01"); +} + .popupTriggerButton { height: 25px !important; width: 25px !important; From 5d9fe211945524aa7ae0bc9ca696456b4e49c0b3 Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Tue, 22 Feb 2022 23:52:53 +0530 Subject: [PATCH 2/7] Fixed the size for implementor tools button --- .../src/implementer-tools.button.tsx | 8 ++------ .../src/implementer-tools.component.tsx | 5 +++-- .../src/implementer-tools.styles.scss | 7 ------- 3 files changed, 5 insertions(+), 15 deletions(-) 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 ? ( - - ) : ( - - )} + {isOpen ? : } ); 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: ( - View + {t("view", "View")} ), 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 d45a97b7e..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 @@ -14,13 +14,6 @@ @include carbon--type-style("body-short-01"); } -.popupTriggerButton { - height: 25px !important; - width: 25px !important; - position: relative; - border-radius: 2px; -} - .toolStyles { background-color: transparent; } From 10d36ca57ae89ccb677d11ca47158f120d2d52bb Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Tue, 22 Feb 2022 23:53:57 +0530 Subject: [PATCH 3/7] Updated translations --- packages/apps/esm-implementer-tools-app/translations/en.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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" } From 3a300709b9a285c5a4fb78ef304805fb6ed4d050 Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Tue, 22 Feb 2022 23:55:48 +0530 Subject: [PATCH 4/7] Removed comments --- .../src/configuration/value-editor.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) 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({
-
From bece51a24428dbd6b904f4cb25c2d12cfcffff99 Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Wed, 23 Feb 2022 01:13:50 +0530 Subject: [PATCH 5/7] Improved readability of array and objects --- .../configuration/configuration.styles.scss | 4 +++ .../src/configuration/display-value.tsx | 26 ++++++++++++++----- 2 files changed, 23 insertions(+), 7 deletions(-) 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/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) => ( -
- -
+ + + {i + 1} + + + + + )) - : value.join(", ") + : `[ ${value.join(", ")} ]` : typeof value === "object" && value !== null ? Object.entries(value).map(([k, v], i) => ( -
- {k}: -
+ + + {k} + + + + + )) : typeof value === "string" || typeof value === "number" ? value From 01848917ee02c8742d36f05af0e6ed614efaabae Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Wed, 23 Feb 2022 01:19:26 +0530 Subject: [PATCH 6/7] Updated tests --- .../src/configuration/configuration.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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(``, () => { 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"); From 03adffef8c4cb0f5ff30a6630fd9043c14dd8f1c Mon Sep 17 00:00:00 2001 From: Vineet Sharma Date: Wed, 23 Feb 2022 01:41:34 +0530 Subject: [PATCH 7/7] Minor fixup --- .../value-editors/concept-search.tsx | 22 ++++++++++--------- .../value-editors/person-attribute-search.tsx | 22 ++++++++++--------- .../value-editors/uuid-search.scss | 4 ++++ 3 files changed, 28 insertions(+), 20 deletions(-) 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 8af0941d3..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 @@ -80,26 +80,28 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) { handleSearchTermChange($event.target.value); }} /> - - {!!searchResults.length && - searchResults.map((concept: any) => ( + {!!searchResults.length && ( + + {searchResults.map((concept: any) => ( { handleUuidChange(concept); }} aria-selected="true" > - {concept.display} + + {concept.display} + ))} - + + )} {searchTerm && searchResults && !searchResults.length && (

{t("noConceptsFoundText", "No matching results found")} 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 da9fc6eaf..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 @@ -91,28 +91,30 @@ export function PersonAttributeTypeSearchBox({ handleSearchTermChange($event.target.value); }} /> - - {!!searchResults.length && - searchResults.map((personAttributeType: any) => ( + + {!!searchResults.length && ( + + {searchResults.map((personAttributeType: any) => ( { handleUuidChange(personAttributeType); }} aria-selected="true" > - + {personAttributeType.display} ))} - + + )} + {searchTerm && searchResults && !searchResults.length && (

{t("noPersonAttributeFoundText", "No matching results found")} 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 index d90f32427..d8dab38f8 100644 --- 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 @@ -17,3 +17,7 @@ .listbox { box-shadow: 0 0 $spacing-03; } + +.smallListCell { + padding: $spacing-03; +}