Skip to content

Commit

Permalink
UI FIX for searching UUIDs in implementer's tools(e.g. concepts, pers…
Browse files Browse the repository at this point in the history
…onattributetype) and better readability of data (#334)
  • Loading branch information
vasharma05 authored Feb 22, 2022
1 parent 71239eb commit 6899556
Show file tree
Hide file tree
Showing 12 changed files with 125 additions and 116 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,7 @@
.valueEditorButtons {
margin-top: $spacing-03;
}

.smallListCell {
padding: $spacing-03;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
);
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -20,11 +20,7 @@ const ImplementerToolsButton: React.FC = () => {
name="ImplementerToolsIcon"
onClick={togglePopup}
>
{isOpen ? (
<Close20 />
) : (
<Tools20 className={styles.popupTriggerButton} />
)}
{isOpen ? <Close20 /> : <Tools24 />}
</HeaderGlobalAction>
</UserHasAccess>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -34,7 +35,7 @@ function PopupHandler() {
description: "Found modules with unresolved backend dependencies.",
action: (
<NotificationActionButton onClick={showModuleDiagnostics}>
View
{t("view", "View")}
</NotificationActionButton>
),
kind: "error",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/apps/esm-implementer-tools-app/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,6 @@
"requiredVersion": "Required Version",
"resetToDefaultValueButtonText": "Reset to default",
"uiEditor": "UI Editor",
"value": "Value"
"value": "Value",
"view": "View"
}

0 comments on commit 6899556

Please sign in to comment.