From 6ce83b5d2e5d1f3ac8195b96523565358adeb041 Mon Sep 17 00:00:00 2001 From: Eric Musyoka Date: Fri, 3 May 2024 15:24:51 +0300 Subject: [PATCH 1/6] Add theme to key value component --- .../components/CommodityList/Default/List.tsx | 2 +- .../CommodityList/Eusm/ViewDetails.tsx | 2 +- .../src/components/GroupList/index.tsx | 2 +- .../src/components/HealthCareDetail/index.tsx | 2 +- .../ViewDetails/LocationDetails/index.tsx | 6 ++--- .../src/Questionnaire/details.tsx | 2 +- .../src/components/KeyValuePairs/index.css | 17 ++++++++++++ .../src/components/KeyValuePairs/index.tsx | 27 ++++++++++++++----- 8 files changed, 45 insertions(+), 15 deletions(-) diff --git a/packages/fhir-group-management/src/components/CommodityList/Default/List.tsx b/packages/fhir-group-management/src/components/CommodityList/Default/List.tsx index 4aac50e68..19eae4689 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Default/List.tsx +++ b/packages/fhir-group-management/src/components/CommodityList/Default/List.tsx @@ -59,7 +59,7 @@ const keyValueDetailRender = (obj: IGroup, t: TFunction) => { }; return value ? (
- +
) : null; })} diff --git a/packages/fhir-group-management/src/components/CommodityList/Eusm/ViewDetails.tsx b/packages/fhir-group-management/src/components/CommodityList/Eusm/ViewDetails.tsx index 5e8eddb96..08f101cdb 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Eusm/ViewDetails.tsx +++ b/packages/fhir-group-management/src/components/CommodityList/Eusm/ViewDetails.tsx @@ -112,7 +112,7 @@ export const EusmViewDetails = (props: EusmViewDetailsProps) => { }; return value ? (
- +
) : null; })} diff --git a/packages/fhir-group-management/src/components/GroupList/index.tsx b/packages/fhir-group-management/src/components/GroupList/index.tsx index 5324cd106..d858b8adc 100644 --- a/packages/fhir-group-management/src/components/GroupList/index.tsx +++ b/packages/fhir-group-management/src/components/GroupList/index.tsx @@ -38,7 +38,7 @@ const keyValueDetailRender = (obj: IGroup, t: TFunction) => { }; return value ? (
- +
) : null; })} diff --git a/packages/fhir-healthcare-service/src/components/HealthCareDetail/index.tsx b/packages/fhir-healthcare-service/src/components/HealthCareDetail/index.tsx index 8990c9d07..c74d6642d 100644 --- a/packages/fhir-healthcare-service/src/components/HealthCareDetail/index.tsx +++ b/packages/fhir-healthcare-service/src/components/HealthCareDetail/index.tsx @@ -82,7 +82,7 @@ export const ViewDetails = (props: ViewDetailsProps) => { }; return value ? (
- +
) : null; })} diff --git a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx index 77e289e6d..b21171bd1 100644 --- a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx +++ b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx @@ -90,12 +90,12 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { }} >
- ID: {id} + ID23: {id}

Version: {version}
- +
@@ -110,7 +110,7 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { const keyValuePairing = { [key]: value }; return ( - + ); })} diff --git a/packages/fhir-resources/src/Questionnaire/details.tsx b/packages/fhir-resources/src/Questionnaire/details.tsx index 75491ae0f..c4b9f439b 100644 --- a/packages/fhir-resources/src/Questionnaire/details.tsx +++ b/packages/fhir-resources/src/Questionnaire/details.tsx @@ -76,7 +76,7 @@ export const QuestionnaireDetails = (props: QuestionnaireDetailsProps) => { {description ? (
- +
) : null} diff --git a/packages/react-utils/src/components/KeyValuePairs/index.css b/packages/react-utils/src/components/KeyValuePairs/index.css index 1e6b3cdc1..c00fa9a94 100644 --- a/packages/react-utils/src/components/KeyValuePairs/index.css +++ b/packages/react-utils/src/components/KeyValuePairs/index.css @@ -33,3 +33,20 @@ dl.singleKeyValue { dl dt { font-weight: 400; } + +.singleKeyValue-pair__default dt { + color: rgba(0, 0, 0, 0.65); +} + +.singleKeyValue-pair__default dd { + color: rgba(0, 0, 0, 0.85) +} + + +.singleKeyValue-pair__light dt { + color: rgba(0, 0, 0, 0.45); +} + +.singleKeyValue-pair__light dd { + color: rgba(0, 0, 0, 0.65) +} \ No newline at end of file diff --git a/packages/react-utils/src/components/KeyValuePairs/index.tsx b/packages/react-utils/src/components/KeyValuePairs/index.tsx index c2d4a40e5..1ebb2a18f 100644 --- a/packages/react-utils/src/components/KeyValuePairs/index.tsx +++ b/packages/react-utils/src/components/KeyValuePairs/index.tsx @@ -1,7 +1,18 @@ import React from 'react'; import './index.css'; -type KeyValuePairs = Record; +export type SingleKeyValueClassOptions = 'light' | 'default'; +export type SingleKeyValueClass = Record; +export type KeyValuePairs = Record; +export interface SingleKeyNestedValueProps { + theme?: SingleKeyValueClassOptions; + data: KeyValuePairs; +} + +const singleKeyValueClass: SingleKeyValueClass = { + light: 'singleKeyValue-pair__light', + default: 'singleKeyValue-pair__default', +}; export const KeyValueGrid = (props: KeyValuePairs) => { return ( @@ -23,16 +34,18 @@ export const KeyValueGrid = (props: KeyValuePairs) => { * * @param props - key value pair map */ -export const SingleKeyNestedValue = (props: KeyValuePairs) => { - const firstPair = Object.entries(props)[0]; +export const SingleKeyNestedValue = (props: SingleKeyNestedValueProps) => { + const { data, theme = 'default' } = props; + const firstPair = Object.entries(data)[0]; // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (firstPair === undefined) return null; const [key, value] = firstPair; + const keyValueClass = singleKeyValueClass[theme]; return (
-
-
{key}
-
{value}
+
+
{key}
+
{value}
); @@ -48,7 +61,7 @@ export const renderObjectAsKeyvalue = (obj: Record) => { <> {Object.entries(obj).map(([key, value]) => { const props = { - [key]: value, + data: { [key]: value } as KeyValuePairs, }; return value ? (
From 001e37138b273035b0519ed1e03f3a7bfc72cd48 Mon Sep 17 00:00:00 2001 From: Eric Musyoka Date: Fri, 3 May 2024 16:02:45 +0300 Subject: [PATCH 2/6] Add component for displaying key value data --- .../ViewDetails/LocationDetails/index.tsx | 19 +++----------- .../src/components/KeyValuePairs/index.tsx | 25 ++++++++++++++++++- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx index b21171bd1..b952f6474 100644 --- a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx +++ b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx @@ -1,8 +1,8 @@ import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation'; import { useMls } from '../../../mls'; import React from 'react'; -import { SingleKeyNestedValue } from '@opensrp/react-utils'; -import { Descriptions, Divider, Typography } from 'antd'; +import { KeyValuesDescriptions, SingleKeyNestedValue } from '@opensrp/react-utils'; +import { Divider, Typography } from 'antd'; import { Link } from 'react-router-dom'; import { parseLocationDetails } from '../utils'; import { URL_LOCATION_UNIT_EDIT } from '../../../constants'; @@ -95,7 +95,7 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { Version: {version}
- +
@@ -104,18 +104,7 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { margin: '0', }} /> -
- - {Object.entries(otherDetailsMap).map(([key, value]) => { - const keyValuePairing = { [key]: value }; - return ( - - - - ); - })} - -
+ ); }; diff --git a/packages/react-utils/src/components/KeyValuePairs/index.tsx b/packages/react-utils/src/components/KeyValuePairs/index.tsx index 1ebb2a18f..30abec41d 100644 --- a/packages/react-utils/src/components/KeyValuePairs/index.tsx +++ b/packages/react-utils/src/components/KeyValuePairs/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import './index.css'; +import { Descriptions } from 'antd'; export type SingleKeyValueClassOptions = 'light' | 'default'; export type SingleKeyValueClass = Record; @@ -32,7 +33,7 @@ export const KeyValueGrid = (props: KeyValuePairs) => { /** * Use for single key value pair * - * @param props - key value pair map + * @param props - component data and theme */ export const SingleKeyNestedValue = (props: SingleKeyNestedValueProps) => { const { data, theme = 'default' } = props; @@ -72,3 +73,25 @@ export const renderObjectAsKeyvalue = (obj: Record) => { ); }; + + +/** + * Dryed out util for displaying keyValue ui under antD Description component + * + * @param props - component data and theme + */ +export const KeyValuesDescriptions = (props: SingleKeyNestedValueProps) => { + const { data, theme } = props; + return ( + + {Object.entries(data).map(([key, value]) => { + const keyValuePairing = { [key]: value }; + return ( + + + + ); + })} + + ); +}; From 336f20a86c9987b1447332ea024895856dcd0b26 Mon Sep 17 00:00:00 2001 From: Eric Musyoka Date: Fri, 3 May 2024 16:36:21 +0300 Subject: [PATCH 3/6] Add component for displaying key value pair on same line --- .../ViewDetails/LocationDetails/index.tsx | 16 +++--- .../src/components/KeyValuePairs/index.tsx | 50 ++++++++++++++++++- 2 files changed, 58 insertions(+), 8 deletions(-) diff --git a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx index b952f6474..438d06ac7 100644 --- a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx +++ b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx @@ -1,7 +1,11 @@ import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation'; import { useMls } from '../../../mls'; import React from 'react'; -import { KeyValuesDescriptions, SingleKeyNestedValue } from '@opensrp/react-utils'; +import { + KeyValuesDescriptions, + ListFlatKeyValues, + SingleKeyNestedValue, +} from '@opensrp/react-utils'; import { Divider, Typography } from 'antd'; import { Link } from 'react-router-dom'; import { parseLocationDetails } from '../utils'; @@ -61,6 +65,10 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { const dateCreatedKeyPairing = { [t('Date Last Updated')]: lastUpdated, }; + const headerLeftData = { + ID: id, + Version: version, + }; return (
{ width: '100%', }} > -
- ID23: {id} -

- Version: {version} -
+
diff --git a/packages/react-utils/src/components/KeyValuePairs/index.tsx b/packages/react-utils/src/components/KeyValuePairs/index.tsx index 30abec41d..0793e0839 100644 --- a/packages/react-utils/src/components/KeyValuePairs/index.tsx +++ b/packages/react-utils/src/components/KeyValuePairs/index.tsx @@ -1,6 +1,8 @@ import React from 'react'; import './index.css'; -import { Descriptions } from 'antd'; +import { Descriptions, Typography } from 'antd'; + +const { Text } = Typography; export type SingleKeyValueClassOptions = 'light' | 'default'; export type SingleKeyValueClass = Record; @@ -9,6 +11,10 @@ export interface SingleKeyNestedValueProps { theme?: SingleKeyValueClassOptions; data: KeyValuePairs; } +export interface ListFlatKeyValuesProps { + data: KeyValuePairs; + classnames?: string; +} const singleKeyValueClass: SingleKeyValueClass = { light: 'singleKeyValue-pair__light', @@ -74,7 +80,6 @@ export const renderObjectAsKeyvalue = (obj: Record) => { ); }; - /** * Dryed out util for displaying keyValue ui under antD Description component * @@ -95,3 +100,44 @@ export const KeyValuesDescriptions = (props: SingleKeyNestedValueProps) => { ); }; + +/** + * Use for displaying single key value pair on same line + * + * @param obj - obj with info to be displayed + */ +export const SingleFlatKeyValue = (obj: KeyValuePairs) => { + const firstPair = Object.entries(obj)[0]; + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (firstPair === undefined) return null; + const [key, value] = firstPair; + + return ( + + {key}: {value} + + ); +}; + +/** + * Use for displaying multiple key value pair + * Each key value pair is displayed on it's own line + * + * @param props - data and styling class for the component + */ +export const ListFlatKeyValues = (props: ListFlatKeyValuesProps) => { + const { data, classnames } = props; + return ( +
+ {Object.entries(data).map(([key, value]) => { + const keyValuePairing = { [key]: value }; + return ( + <> + +

+ + ); + })} +
+ ); +}; From f7f9ab01b338f5f0ee7bc84feae8e2b77b56d2a6 Mon Sep 17 00:00:00 2001 From: Eric Musyoka Date: Fri, 3 May 2024 18:16:07 +0300 Subject: [PATCH 4/6] Create a generic details view component --- .../ViewDetails/LocationDetails/index.tsx | 57 +++-------------- .../ResourceDetails/index.tsx | 61 +++++++++++++++++++ .../components/GenericDetailsView/index.css | 37 +++++++++++ .../components/GenericDetailsView/index.tsx | 1 + .../src/components/KeyValuePairs/index.tsx | 2 +- packages/react-utils/src/index.tsx | 1 + 6 files changed, 110 insertions(+), 49 deletions(-) create mode 100644 packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx create mode 100644 packages/react-utils/src/components/GenericDetailsView/index.css create mode 100644 packages/react-utils/src/components/GenericDetailsView/index.tsx diff --git a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx index 438d06ac7..93bcb4830 100644 --- a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx +++ b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx @@ -1,18 +1,11 @@ import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation'; import { useMls } from '../../../mls'; import React from 'react'; -import { - KeyValuesDescriptions, - ListFlatKeyValues, - SingleKeyNestedValue, -} from '@opensrp/react-utils'; -import { Divider, Typography } from 'antd'; +import { ResourceDetails } from '@opensrp/react-utils'; import { Link } from 'react-router-dom'; import { parseLocationDetails } from '../utils'; import { URL_LOCATION_UNIT_EDIT } from '../../../constants'; -const { Text } = Typography; - const GeometryRender = ({ geometry }: { geometry?: string }) => { let formattedGeo = geometry ?? ''; try { @@ -70,45 +63,13 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { Version: version, }; return ( -
-
-
- {name} - {t('Edit details')} -
- -
- -
- -
-
-
- - -
+ {t('Edit details')}} + bodyData={otherDetailsMap} + status={{ title: 'Active', color: 'green' }} + /> ); }; diff --git a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx new file mode 100644 index 000000000..569a1f8aa --- /dev/null +++ b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx @@ -0,0 +1,61 @@ +import { Divider, Tag, Typography } from 'antd'; +import React from 'react'; +import { + KeyValuesDescriptions, + ListFlatKeyValues, + SingleKeyNestedValue, +} from '../../KeyValuePairs'; +import '../index.css'; + +const { Text } = Typography; + +export interface ResourceDetailsProps { + title: React.ReactNode; + headerLeftData: Record; + dateData?: Record; + headerActions?: React.ReactNode; + status?: { + title: string; + color: string; + }; + bodyData: Record; + footer?: React.ReactNode; +} + +export const ResourceDetails = (props: ResourceDetailsProps) => { + const { title, headerLeftData, dateData, headerActions, bodyData, footer, status } = props; + return ( +
+
+
+ + {title} + {status && ( + + {status.title} + + )} + + {headerActions && <>{headerActions}} +
+ +
+ + {dateData && ( +
+ +
+ )} +
+
+ + + {footer && ( + <> + + {footer} + + )} +
+ ); +}; diff --git a/packages/react-utils/src/components/GenericDetailsView/index.css b/packages/react-utils/src/components/GenericDetailsView/index.css new file mode 100644 index 000000000..1d7fff4e4 --- /dev/null +++ b/packages/react-utils/src/components/GenericDetailsView/index.css @@ -0,0 +1,37 @@ +.details-section { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 16px; + gap: 16px; + background: #FAFAFA; + border-radius: 6px; +} + +.details-section .header-top { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.header-top .title { + font-size: 16px; + font-weight: 600; +} + +.header-top .status { + padding: 2px 6px; + margin-left: 8px; +} + +.details-section .header-bottom { + display: flex; + flex-direction: row; + gap: 32px; + justify-content: space-between; + width: 100%; +} + +.details-section .divider { + margin: 0; +} \ No newline at end of file diff --git a/packages/react-utils/src/components/GenericDetailsView/index.tsx b/packages/react-utils/src/components/GenericDetailsView/index.tsx new file mode 100644 index 000000000..519cfb114 --- /dev/null +++ b/packages/react-utils/src/components/GenericDetailsView/index.tsx @@ -0,0 +1 @@ +export * from './ResourceDetails'; diff --git a/packages/react-utils/src/components/KeyValuePairs/index.tsx b/packages/react-utils/src/components/KeyValuePairs/index.tsx index 0793e0839..98e0f02e5 100644 --- a/packages/react-utils/src/components/KeyValuePairs/index.tsx +++ b/packages/react-utils/src/components/KeyValuePairs/index.tsx @@ -6,7 +6,7 @@ const { Text } = Typography; export type SingleKeyValueClassOptions = 'light' | 'default'; export type SingleKeyValueClass = Record; -export type KeyValuePairs = Record; +export type KeyValuePairs = Record; export interface SingleKeyNestedValueProps { theme?: SingleKeyValueClassOptions; data: KeyValuePairs; diff --git a/packages/react-utils/src/index.tsx b/packages/react-utils/src/index.tsx index c12d0c713..0115be2ac 100644 --- a/packages/react-utils/src/index.tsx +++ b/packages/react-utils/src/index.tsx @@ -23,3 +23,4 @@ export * from './components/PrivateRoute'; export * from './components/fhirDataTypes'; export * from './components/NoData'; export * from './components/AsyncSelect'; +export * from './components/GenericDetailsView'; From e77a508cc90f816a475000bc1c3bd0d161bb78be Mon Sep 17 00:00:00 2001 From: Eric Musyoka Date: Fri, 3 May 2024 20:02:19 +0300 Subject: [PATCH 5/6] Add and update tests --- .../tests/__snapshots__/index.test.tsx.snap | 230 ++++++------------ .../ViewDetails/tests/index.test.tsx | 6 +- .../tests/__snapshots__/list.test.tsx.snap | 30 +-- .../CommodityList/Default/tests/list.test.tsx | 2 +- .../tests/__snapshots__/list.test.tsx.snap | 90 ++----- .../CommodityList/Eusm/tests/list.test.tsx | 2 +- .../Eusm/tests/viewDetails.test.tsx | 4 +- .../tests/__snapshots__/index.test.tsx.snap | 40 +-- .../components/GroupList/tests/index.test.tsx | 2 +- .../ViewDetails/LocationDetails/index.tsx | 1 - .../tests/__snapshots__/index.test.tsx.snap | 40 +-- .../ListView/tests/index.test.tsx | 2 +- .../ResourceDetails/index.tsx | 14 +- .../ResourceDetails/tests/index.test.tsx | 53 ++++ .../src/components/KeyValuePairs/index.tsx | 4 +- .../KeyValuePairs/tests/index.test.tsx | 46 +++- 16 files changed, 249 insertions(+), 317 deletions(-) create mode 100644 packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx diff --git a/packages/fhir-care-team/src/components/ViewDetails/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-care-team/src/components/ViewDetails/tests/__snapshots__/index.test.tsx.snap index 319bcf7d3..66bb3d084 100644 --- a/packages/fhir-care-team/src/components/ViewDetails/tests/__snapshots__/index.test.tsx.snap +++ b/packages/fhir-care-team/src/components/ViewDetails/tests/__snapshots__/index.test.tsx.snap @@ -2,16 +2,12 @@ exports[`1157 - view details errors out for careTeam 3500 1`] = `
-
+
CareTeam ID
-
+
3500
@@ -19,16 +15,12 @@ exports[`1157 - view details errors out for careTeam 3500 1`] = ` exports[`1157 - view details errors out for careTeam 3500 2`] = `
-
+
Name
-
+
Peter James Charlmers Care team
@@ -36,16 +28,12 @@ exports[`1157 - view details errors out for careTeam 3500 2`] = ` exports[`1157 - view details errors out for careTeam 3500 3`] = `
-
+
status
-
+
active
@@ -53,16 +41,12 @@ exports[`1157 - view details errors out for careTeam 3500 3`] = ` exports[`1157 - view details errors out for careTeam 3500 4`] = `
-
+
Participants
-
+
  • -
    +
    Patient
    -
    +
      @@ -101,16 +81,12 @@ exports[`1157 - view details errors out for careTeam 3500 4`] = ` exports[`1157 - view details errors out for careTeam 3500 5`] = `
      -
      +
      Patient
      -
      +
        @@ -124,16 +100,12 @@ exports[`1157 - view details errors out for careTeam 3500 5`] = ` exports[`1157 - view details errors out for careTeam 3500 6`] = `
        -
        +
        Managing organizations
        -
        +
        -
        +
        CareTeam ID
        -
        +
        142534
        @@ -172,16 +140,12 @@ exports[`Closes on clicking cancel (X) 1`] = ` exports[`Closes on clicking cancel (X) 2`] = `
        -
        +
        Identifier
        -
        +
        99c4dde5-3aca-4a4b-8b33-b50142e05da6
        @@ -189,16 +153,12 @@ exports[`Closes on clicking cancel (X) 2`] = ` exports[`Closes on clicking cancel (X) 3`] = `
        -
        +
        Name
        -
        +
        Brown Bag
        @@ -206,16 +166,12 @@ exports[`Closes on clicking cancel (X) 3`] = ` exports[`Closes on clicking cancel (X) 4`] = `
        -
        +
        status
        -
        +
        active
        @@ -223,16 +179,12 @@ exports[`Closes on clicking cancel (X) 4`] = ` exports[`Closes on clicking cancel (X) 5`] = `
        -
        +
        Participants
        -
        +
        • -
          +
          Practitioner
          -
          +
            @@ -271,16 +219,12 @@ exports[`Closes on clicking cancel (X) 5`] = ` exports[`Closes on clicking cancel (X) 6`] = `
            -
            +
            Practitioner
            -
            +
              @@ -294,16 +238,12 @@ exports[`Closes on clicking cancel (X) 6`] = ` exports[`Closes on clicking cancel (X) 7`] = `
              -
              +
              Managing organizations
              -
              +
              -
              +
              CareTeam ID
              -
              +
              131411
              @@ -342,16 +278,12 @@ exports[`works correctly 1`] = ` exports[`works correctly 2`] = `
              -
              +
              Identifier
              -
              +
              93bc9c3d-6321-41b0-9b93-1275d7114e22
              @@ -359,16 +291,12 @@ exports[`works correctly 2`] = ` exports[`works correctly 3`] = `
              -
              +
              Name
              -
              +
              Care Team One
              @@ -376,16 +304,12 @@ exports[`works correctly 3`] = ` exports[`works correctly 4`] = `
              -
              +
              status
              -
              +
              active
              @@ -393,16 +317,12 @@ exports[`works correctly 4`] = ` exports[`works correctly 5`] = `
              -
              +
              Participants
              -
              +
              • -
                +
                Practitioner
                -
                +
                  @@ -444,16 +360,12 @@ exports[`works correctly 5`] = ` exports[`works correctly 6`] = `
                  -
                  +
                  Practitioner
                  -
                  +
                    @@ -470,16 +382,12 @@ exports[`works correctly 6`] = ` exports[`works correctly 7`] = `
                    -
                    +
                    Managing organizations
                    -
                    +
                    { // see view details contents const keyValuePairs = document.querySelectorAll( - 'div[data-testid="key-value"] .singleKeyValue-pair' + 'div[data-testid="key-value"] .singleKeyValue-pair__default' ); keyValuePairs.forEach((pair) => { expect(pair).toMatchSnapshot(); @@ -105,7 +105,7 @@ test('Closes on clicking cancel (X) ', async () => { // see view details contents const keyValuePairs = document.querySelectorAll( - 'div[data-testid="key-value"] .singleKeyValue-pair' + 'div[data-testid="key-value"] .singleKeyValue-pair__default' ); keyValuePairs.forEach((pair) => { expect(pair).toMatchSnapshot(); @@ -145,7 +145,7 @@ test('1157 - view details errors out for careTeam 3500', async () => { // see view details contents const keyValuePairs = document.querySelectorAll( - 'div[data-testid="key-value"] .singleKeyValue-pair' + 'div[data-testid="key-value"] .singleKeyValue-pair__default' ); keyValuePairs.forEach((pair) => { expect(pair).toMatchSnapshot(); diff --git a/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap b/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap index e8658ae9a..1b90313b2 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap +++ b/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap @@ -2,16 +2,12 @@ exports[`renders correctly when listing resources 3`] = `
                    -
                    +
                    Commodity Id
                    -
                    +
                    e50eb835-7827-4001-b233-e1dda721d4e8
                    @@ -19,16 +15,12 @@ exports[`renders correctly when listing resources 3`] = ` exports[`renders correctly when listing resources 4`] = `
                    -
                    +
                    Name
                    -
                    +
                    Amoxicillin 250mg Tablets
                    @@ -36,16 +28,12 @@ exports[`renders correctly when listing resources 4`] = ` exports[`renders correctly when listing resources 5`] = `
                    -
                    +
                    Active
                    -
                    +
                    Disabled
                    diff --git a/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx b/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx index 2aa9ef480..efe5585f6 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx +++ b/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx @@ -159,7 +159,7 @@ test('renders correctly when listing resources', async () => { // see view details contents const keyValuePairs = document.querySelectorAll( - 'div[data-testid="key-value"] .singleKeyValue-pair' + 'div[data-testid="key-value"] .singleKeyValue-pair__default' ); keyValuePairs.forEach((pair) => { expect(pair).toMatchSnapshot(); diff --git a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap index 4bafc91b1..8b9ef1533 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap +++ b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap @@ -2,16 +2,12 @@ exports[`renders correctly when listing resources 3`] = `
                    -
                    +
                    Product Id
                    -
                    +
                    52cffa51-fa81-49aa-9944-5b45d9e4c117
                    @@ -19,16 +15,12 @@ exports[`renders correctly when listing resources 3`] = ` exports[`renders correctly when listing resources 4`] = `
                    -
                    +
                    Material Number
                    -
                    +
                    52cffa51-fa81-49aa-9944-5b45d9e4c117
                    @@ -36,16 +28,12 @@ exports[`renders correctly when listing resources 4`] = ` exports[`renders correctly when listing resources 5`] = `
                    -
                    +
                    Name
                    -
                    +
                    Bed nets
                    @@ -53,16 +41,12 @@ exports[`renders correctly when listing resources 5`] = ` exports[`renders correctly when listing resources 6`] = `
                    -
                    +
                    Active
                    -
                    +
                    Active
                    @@ -70,16 +54,12 @@ exports[`renders correctly when listing resources 6`] = ` exports[`renders correctly when listing resources 7`] = `
                    -
                    +
                    Attractive item
                    -
                    +
                    No
                    @@ -87,16 +67,12 @@ exports[`renders correctly when listing resources 7`] = ` exports[`renders correctly when listing resources 8`] = `
                    -
                    +
                    Is it there
                    -
                    +
                    yes
                    @@ -104,16 +80,12 @@ exports[`renders correctly when listing resources 8`] = ` exports[`renders correctly when listing resources 9`] = `
                    -
                    +
                    Is it in good condition
                    -
                    +
                    Yes, no tears, and inocuated
                    @@ -121,16 +93,12 @@ exports[`renders correctly when listing resources 9`] = ` exports[`renders correctly when listing resources 10`] = `
                    -
                    +
                    Is it being used appropriately
                    -
                    +
                    Hanged at correct height and covers averagely sized beds
                    @@ -138,16 +106,12 @@ exports[`renders correctly when listing resources 10`] = ` exports[`renders correctly when listing resources 11`] = `
                    -
                    +
                    Accountability period (in months)
                    -
                    +
                    12
                    diff --git a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx index 12501948e..1b066461c 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx +++ b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx @@ -159,7 +159,7 @@ test('renders correctly when listing resources', async () => { // see view details contents const keyValuePairs = document.querySelectorAll( - 'div[data-testid="key-value"] .singleKeyValue-pair' + 'div[data-testid="key-value"] .singleKeyValue-pair__default' ); keyValuePairs.forEach((pair) => { expect(pair).toMatchSnapshot(); diff --git a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/viewDetails.test.tsx b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/viewDetails.test.tsx index 887452cec..a0535d74b 100644 --- a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/viewDetails.test.tsx +++ b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/viewDetails.test.tsx @@ -92,7 +92,7 @@ test('test error on attached binary request', async () => { await waitForElementToBeRemoved(document.querySelector('.ant-spin')); - const commodityValues = [...document.querySelectorAll('.singleKeyValue-pair')].map( + const commodityValues = [...document.querySelectorAll('.singleKeyValue-pair__default')].map( (keyValue) => keyValue.textContent ); expect(commodityValues).toEqual([ @@ -128,7 +128,7 @@ test('test missing binary in commodity', async () => { await waitForElementToBeRemoved(document.querySelector('.ant-spin')); - const commodityValues = [...document.querySelectorAll('.singleKeyValue-pair')].map( + const commodityValues = [...document.querySelectorAll('.singleKeyValue-pair__default')].map( (keyValue) => keyValue.textContent ); expect(commodityValues).toEqual([ diff --git a/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap index 11689151c..ed4fc6567 100644 --- a/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap +++ b/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap @@ -2,16 +2,12 @@ exports[`renders correctly when listing resources 3`] = `
                    -
                    +
                    Id
                    -
                    +
                    49778
                    @@ -19,16 +15,12 @@ exports[`renders correctly when listing resources 3`] = ` exports[`renders correctly when listing resources 4`] = `
                    -
                    +
                    Name
                    -
                    +
                    Jan27Test
                    @@ -36,16 +28,12 @@ exports[`renders correctly when listing resources 4`] = ` exports[`renders correctly when listing resources 5`] = `
                    -
                    +
                    Active
                    -
                    +
                    Inactive
                    @@ -53,16 +41,12 @@ exports[`renders correctly when listing resources 5`] = ` exports[`renders correctly when listing resources 6`] = `
                    -
                    +
                    Last updated
                    -
                    +
                    4/27/2022
                    diff --git a/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx b/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx index afbcac3e0..3ad477575 100644 --- a/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx +++ b/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx @@ -185,7 +185,7 @@ test('renders correctly when listing resources', async () => { // see view details contents const keyValuePairs = document.querySelectorAll( - 'div[data-testid="key-value"] .singleKeyValue-pair' + 'div[data-testid="key-value"] .singleKeyValue-pair__default' ); keyValuePairs.forEach((pair) => { expect(pair).toMatchSnapshot(); diff --git a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx index 93bcb4830..70b7015c7 100644 --- a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx +++ b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx @@ -69,7 +69,6 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { dateData={dateCreatedKeyPairing} headerActions={{t('Edit details')}} bodyData={otherDetailsMap} - status={{ title: 'Active', color: 'green' }} /> ); }; diff --git a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap index 494011307..e3bcb211a 100644 --- a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap +++ b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap @@ -60,16 +60,12 @@ exports[`renders correctly when listing organizations: Search 1 page 1 2`] = ` exports[`renders correctly when listing organizations: single key value pairs detail section 1`] = `
                    -
                    +
                    Team id
                    -
                    +
                    205
                    @@ -77,16 +73,12 @@ exports[`renders correctly when listing organizations: single key value pairs de exports[`renders correctly when listing organizations: single key value pairs detail section 2`] = `
                    -
                    +
                    Team identifier
                    -
                    +
                    205
                    @@ -94,16 +86,12 @@ exports[`renders correctly when listing organizations: single key value pairs de exports[`renders correctly when listing organizations: single key value pairs detail section 3`] = `
                    -
                    +
                    Team status
                    -
                    +
                    Active
                    @@ -111,16 +99,12 @@ exports[`renders correctly when listing organizations: single key value pairs de exports[`renders correctly when listing organizations: single key value pairs detail section 4`] = `
                    -
                    +
                    Team practitioners
                    -
                    +
                      diff --git a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx index 42d095916..d822e04ed 100644 --- a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx +++ b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx @@ -230,7 +230,7 @@ test('renders correctly when listing organizations', async () => { }); // see details in viewDetails - document.querySelectorAll('.singleKeyValue-pair').forEach((pair) => { + document.querySelectorAll('.singleKeyValue-pair__default').forEach((pair) => { expect(pair).toMatchSnapshot('single key value pairs detail section'); }); diff --git a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx index 569a1f8aa..3db40a944 100644 --- a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx +++ b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx @@ -12,6 +12,7 @@ const { Text } = Typography; export interface ResourceDetailsProps { title: React.ReactNode; headerLeftData: Record; + headerLeftDataClasses?: string; dateData?: Record; headerActions?: React.ReactNode; status?: { @@ -23,7 +24,16 @@ export interface ResourceDetailsProps { } export const ResourceDetails = (props: ResourceDetailsProps) => { - const { title, headerLeftData, dateData, headerActions, bodyData, footer, status } = props; + const { + title, + headerLeftData, + dateData, + headerActions, + bodyData, + footer, + status, + headerLeftDataClasses, + } = props; return (
                      @@ -40,7 +50,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                      - + {dateData && (
                      diff --git a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx new file mode 100644 index 000000000..55e59632e --- /dev/null +++ b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx @@ -0,0 +1,53 @@ +import { render, screen } from '@testing-library/react'; +import { ResourceDetails } from '..'; +import React from 'react'; +import { Button } from 'antd'; + +const props = { + title: 'Good Health Clinic', + headerLeftData: { ID: 123, version: 5 }, + headerLeftDataClasses: 'left-data', + dateData: { 'Date created': 'Today, 9.30' }, + headerActions: Edit details, + status: { + title: 'Active', + color: 'green', + }, + bodyData: { + 'Location name': 'Good Health', + Alias: 'Clinic', + 'Administrative Level': 2, + }, + footer: ( +
                      + +
                      + ), +}; + +test('ResourceDetails component renders correctly', () => { + render(); + + expect(screen.getByText(/Good Health Clinic/)).toBeInTheDocument(); + expect(screen.getByText(/Edit details/)).toBeInTheDocument(); + expect(screen.getByText(/view details/)).toBeInTheDocument(); + + const bodyElementValues = [...document.querySelectorAll('.singleKeyValue-pair__default')].map( + (keyValue) => keyValue.textContent + ); + expect(bodyElementValues).toEqual([ + 'Location nameGood Health', + 'AliasClinic', + 'Administrative Level2', + ]); + + const dateElementValues = [...document.querySelectorAll('.singleKeyValue-pair__light')].map( + (keyValue) => keyValue.textContent + ); + expect(dateElementValues).toEqual(['Date createdToday, 9.30']); + + const headerLeftElementValues = [...document.querySelectorAll('.left-data')].map( + (keyValue) => keyValue.textContent + ); + expect(headerLeftElementValues).toEqual(['ID: 123version: 5']); +}); diff --git a/packages/react-utils/src/components/KeyValuePairs/index.tsx b/packages/react-utils/src/components/KeyValuePairs/index.tsx index 98e0f02e5..94f4ad0a1 100644 --- a/packages/react-utils/src/components/KeyValuePairs/index.tsx +++ b/packages/react-utils/src/components/KeyValuePairs/index.tsx @@ -132,10 +132,10 @@ export const ListFlatKeyValues = (props: ListFlatKeyValuesProps) => { {Object.entries(data).map(([key, value]) => { const keyValuePairing = { [key]: value }; return ( - <> +

                      - +                       ); })}
                      diff --git a/packages/react-utils/src/components/KeyValuePairs/tests/index.test.tsx b/packages/react-utils/src/components/KeyValuePairs/tests/index.test.tsx index 57b854460..8aacfba96 100644 --- a/packages/react-utils/src/components/KeyValuePairs/tests/index.test.tsx +++ b/packages/react-utils/src/components/KeyValuePairs/tests/index.test.tsx @@ -1,5 +1,11 @@ import { render } from '@testing-library/react'; -import { KeyValueGrid, SingleKeyNestedValue } from '..'; +import { + KeyValueGrid, + SingleKeyNestedValue, + KeyValuesDescriptions, + SingleFlatKeyValue, + ListFlatKeyValues, +} from '..'; import React from 'react'; const props = { id: 'soap', name: 'Soap Mactavish' }; @@ -12,8 +18,44 @@ test('Key value grid', () => { }); test('single Key value grid', () => { - const { getByText, queryByText } = render(); + const { getByText, queryByText } = render(); expect(getByText(/soap/)).toBeInTheDocument(); expect(queryByText(/Soap Mactavish/i)).not.toBeInTheDocument(); + + const defaultTheme = document.querySelector('.singleKeyValue-pair__default'); + const lightTheme = document.querySelector('.singleKeyValue-pair__light'); + expect(defaultTheme).toBeNull(); + expect(lightTheme).not.toBeNull(); +}); + +test('KeyValuesDescriptions renders okay', () => { + const { getByText, queryByText } = render(); + + expect(getByText(/soap/)).toBeInTheDocument(); + expect(queryByText(/Soap Mactavish/i)).toBeInTheDocument(); + + const defaultTheme = document.querySelector('.singleKeyValue-pair__default'); + const lightTheme = document.querySelector('.singleKeyValue-pair__light'); + expect(defaultTheme).not.toBeNull(); + expect(lightTheme).toBeNull(); +}); + +test('SingleFlatKeyValue renders okay ', () => { + const { getByText, queryByText } = render(); + + expect(getByText(/soap/)).toBeInTheDocument(); + expect(queryByText(/Soap Mactavish/i)).not.toBeInTheDocument(); +}); + +test('ListFlatKeyValues renders okay', () => { + const { getByText, queryByText } = render( + + ); + + expect(getByText(/soap/)).toBeInTheDocument(); + expect(queryByText(/Soap Mactavish/i)).toBeInTheDocument(); + + const testClassElement = document.querySelector('.test-class'); + expect(testClassElement).not.toBeNull(); }); From 075bfd69cef5045658b4ec6eae37f16e4e9a1dbe Mon Sep 17 00:00:00 2001 From: Eric Musyoka Date: Wed, 8 May 2024 15:27:02 +0300 Subject: [PATCH 6/6] Update ResourceDetails component prop name --- .../src/components/ViewDetails/LocationDetails/index.tsx | 2 +- .../GenericDetailsView/ResourceDetails/index.tsx | 8 ++++---- .../ResourceDetails/tests/index.test.tsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx index 70b7015c7..853ca129d 100644 --- a/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx +++ b/packages/fhir-location-management/src/components/ViewDetails/LocationDetails/index.tsx @@ -66,7 +66,7 @@ export const LocationDetails = ({ location }: { location: ILocation }) => { {t('Edit details')}} bodyData={otherDetailsMap} /> diff --git a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx index 3db40a944..936782d26 100644 --- a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx +++ b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx @@ -13,7 +13,7 @@ export interface ResourceDetailsProps { title: React.ReactNode; headerLeftData: Record; headerLeftDataClasses?: string; - dateData?: Record; + headerRightData?: Record; headerActions?: React.ReactNode; status?: { title: string; @@ -27,7 +27,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => { const { title, headerLeftData, - dateData, + headerRightData, headerActions, bodyData, footer, @@ -51,9 +51,9 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                      - {dateData && ( + {headerRightData && (
                      - +
                      )}
                      diff --git a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx index 55e59632e..18232b37d 100644 --- a/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx +++ b/packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx @@ -7,7 +7,7 @@ const props = { title: 'Good Health Clinic', headerLeftData: { ID: 123, version: 5 }, headerLeftDataClasses: 'left-data', - dateData: { 'Date created': 'Today, 9.30' }, + headerRightData: { 'Date created': 'Today, 9.30' }, headerActions: Edit details, status: { title: 'Active', @@ -41,10 +41,10 @@ test('ResourceDetails component renders correctly', () => { 'Administrative Level2', ]); - const dateElementValues = [...document.querySelectorAll('.singleKeyValue-pair__light')].map( + const headerRightData = [...document.querySelectorAll('.singleKeyValue-pair__light')].map( (keyValue) => keyValue.textContent ); - expect(dateElementValues).toEqual(['Date createdToday, 9.30']); + expect(headerRightData).toEqual(['Date createdToday, 9.30']); const headerLeftElementValues = [...document.querySelectorAll('.left-data')].map( (keyValue) => keyValue.textContent