Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Feb 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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"
}