From e2efebc7669a95032e0c06fa6c7736d56c655fb5 Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Thu, 19 Sep 2024 11:33:02 +0300 Subject: [PATCH 1/3] Fix missing i18n namespace for correct translations --- .../src/components/AddEditLocationUnit/base.tsx | 7 +++++-- .../src/components/AddEditLocationUnit/eusm.tsx | 3 ++- .../src/components/LocationForm/index.tsx | 7 +++++-- packages/fhir-location-management/src/helpers/types.ts | 3 +++ .../{fhir-service-points => fhir-service-point}/en.json | 0 .../{fhir-service-points => fhir-service-point}/fr.json | 0 6 files changed, 15 insertions(+), 5 deletions(-) rename packages/i18n/locales/eusm/{fhir-service-points => fhir-service-point}/en.json (100%) rename packages/i18n/locales/eusm/{fhir-service-points => fhir-service-point}/fr.json (100%) diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx index 01593cd1e..1444ffb99 100644 --- a/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx +++ b/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx @@ -9,6 +9,7 @@ import { BrokenPage, Resource404 } from '@opensrp/react-utils'; import { useGetLocation, useGetLocationHierarchy } from '../../helpers/utils'; import { useMls } from '../../mls'; import { parentIdQueryParam, BACK_SEARCH_PARAM } from '../../constants'; +import { LocationI18nNamespace } from '../../helpers/types'; export type LocationRouteProps = { id?: string }; @@ -23,7 +24,7 @@ export interface BaseNewEditLocationUnitProps fhirRootLocationId: string; cancelURLGenerator: () => string; updateLocationFormProps?: (formProps: LocationFormProps) => LocationFormProps; - i18nNamespace: 'fhir-service-point'; + i18nNamespace?: LocationI18nNamespace } /** @@ -41,12 +42,13 @@ export const BaseNewEditLocationUnit = (props: BaseNewEditLocationUnitProps) => cancelURLGenerator, disabledTreeNodesCallback, updateLocationFormProps, + i18nNamespace } = props; const history = useHistory(); const location = useLocation(); const params = useParams(); const sParams = new URLSearchParams(location.search); - const { t } = useMls(); + const { t } = useMls(i18nNamespace); const backToUrl = sParams.get(BACK_SEARCH_PARAM) ?? undefined; const cancelHandler = () => { @@ -94,6 +96,7 @@ export const BaseNewEditLocationUnit = (props: BaseNewEditLocationUnitProps) => fhirBaseURL, disabledTreeNodesCallback: disabledTreeNodesCallback, validationRulesFactory: defaultValidationRulesFactory, + i18nNamespace, }; const locationFormProps = updateLocationFormProps?.(initialFormProps) ?? initialFormProps; diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx index 92cb7055a..817275ff9 100644 --- a/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx +++ b/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { LocationFormProps } from '../LocationForm'; import { eusmServicePointValidationRules } from '../LocationForm/utils'; import { BaseNewEditLocationUnit, BaseNewEditLocationUnitProps } from './base'; -import { URL_SERVICE_POINT_LIST, isJurisdiction } from '../../constants'; +import { URL_SERVICE_POINT_LIST, isJurisdiction, servicePointNamespace } from '../../constants'; export type EusmAddEditLocationUnitProps = BaseNewEditLocationUnitProps; @@ -33,6 +33,7 @@ export const EusmAddEditLocationUnit = (props: EusmAddEditLocationUnitProps) => cancelURLGenerator: () => URL_SERVICE_POINT_LIST, hidden: [isJurisdiction], URL_SERVICE_POINT_LIST, + i18nNamespace: servicePointNamespace }; return ; diff --git a/packages/fhir-location-management/src/components/LocationForm/index.tsx b/packages/fhir-location-management/src/components/LocationForm/index.tsx index c2108eb6e..97120f0c7 100644 --- a/packages/fhir-location-management/src/components/LocationForm/index.tsx +++ b/packages/fhir-location-management/src/components/LocationForm/index.tsx @@ -17,11 +17,12 @@ import { locationHierarchyResourceType, locationResourceType, longitude, + namespace, serviceType, } from '../../constants'; import { CustomTreeSelect, CustomTreeSelectProps } from './CustomTreeSelect'; import { IfhirR4 } from '@smile-cdr/fhirts'; -import { TreeNode } from '../../helpers/types'; +import { LocationI18nNamespace, TreeNode } from '../../helpers/types'; import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation'; import { LocationUnitStatus } from '../../helpers/types'; import { useQueryClient } from 'react-query'; @@ -44,6 +45,7 @@ export interface LocationFormProps onCancel: () => void; afterSubmit?: (payload: IfhirR4.ILocation) => void; validationRulesFactory: ValidationFactory; + i18nNamespace?: LocationI18nNamespace } const defaultProps = { @@ -53,6 +55,7 @@ const defaultProps = { disabled: [], onCancel: () => undefined, validationRulesFactory: defaultValidationRulesFactory, + i18nNamespace: namespace }; /** responsive layout for the form labels and columns */ @@ -119,7 +122,7 @@ const LocationForm = (props: LocationFormProps) => { const [areWeDoneHere, setAreWeDoneHere] = useState(false); const [successUrl, setSuccessUrl] = useState(); const queryClient = useQueryClient(); - const { t } = useMls(); + const { t } = useMls(props.i18nNamespace); const validationRules = validationRulesFactory(t); const isHidden = (fieldName: keyof LocationFormFields) => hidden.includes(fieldName); diff --git a/packages/fhir-location-management/src/helpers/types.ts b/packages/fhir-location-management/src/helpers/types.ts index 3ccc94d83..6313cbadd 100644 --- a/packages/fhir-location-management/src/helpers/types.ts +++ b/packages/fhir-location-management/src/helpers/types.ts @@ -2,6 +2,7 @@ import TreeModel from 'tree-model'; import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation'; import { Resource } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/resource'; import { Uri } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/uri'; +import { namespace, servicePointNamespace } from '../constants'; export interface CommonHierarchyNode { nodeId: Uri; @@ -56,3 +57,5 @@ export enum LocationUnitStatus { INACTIVE = 'inactive', SUSPENDED = 'suspended', } + +export type LocationI18nNamespace = typeof namespace | typeof servicePointNamespace diff --git a/packages/i18n/locales/eusm/fhir-service-points/en.json b/packages/i18n/locales/eusm/fhir-service-point/en.json similarity index 100% rename from packages/i18n/locales/eusm/fhir-service-points/en.json rename to packages/i18n/locales/eusm/fhir-service-point/en.json diff --git a/packages/i18n/locales/eusm/fhir-service-points/fr.json b/packages/i18n/locales/eusm/fhir-service-point/fr.json similarity index 100% rename from packages/i18n/locales/eusm/fhir-service-points/fr.json rename to packages/i18n/locales/eusm/fhir-service-point/fr.json From 3ae8f79288667157faafd732e526434b71bcd11c Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Thu, 19 Sep 2024 11:33:20 +0300 Subject: [PATCH 2/3] Style tweak on async select component --- .../src/components/AsyncSelect/BaseAsyncSelect/index.css | 3 +++ .../src/components/AsyncSelect/BaseAsyncSelect/index.tsx | 1 + .../src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx | 2 +- .../src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css new file mode 100644 index 000000000..edf6983a4 --- /dev/null +++ b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css @@ -0,0 +1,3 @@ +.asyncSelect{ + min-width: 240px; +} \ No newline at end of file diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx index d2cd4d0ad..8ddb564fb 100644 --- a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx +++ b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx @@ -5,6 +5,7 @@ import { SelectProps, DefaultOptionType } from 'antd/lib/select'; import { useTranslation } from '../../../mls'; import { UseQueryOptions, useQuery } from 'react-query'; import { TFunction } from '@opensrp/i18n'; +import "./index.css" export type RawValueType = string | number | (string | number)[]; diff --git a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx index 44cb99346..5c52773a7 100644 --- a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx +++ b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx @@ -173,7 +173,7 @@ export function PaginatedAsyncSelect( const remainingRecords = totalPossibleRecords - recordsFetchedNum; const propsToSelect = { - style: { minWidth: '200px' }, + className: "asyncSelect", ...restProps, placeholder, onChange: changeHandler, diff --git a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx index 74dc66055..85b88a329 100644 --- a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx +++ b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx @@ -54,6 +54,7 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) { const selectDropDownRender = dropDownFactory(t, data, error as Error); const selectProps = { + className: "asyncSelect", dropdownRender: selectDropDownRender, options: data, loading: isLoading, From 1fd05a57c2a40911a436833b7c68e98bf9fe3be8 Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Thu, 19 Sep 2024 11:53:20 +0300 Subject: [PATCH 3/3] Fix lint issues --- .../src/components/AddEditLocationUnit/base.tsx | 4 ++-- .../src/components/AddEditLocationUnit/eusm.tsx | 2 +- .../src/components/LocationForm/index.tsx | 4 ++-- packages/fhir-location-management/src/helpers/types.ts | 2 +- .../src/components/AsyncSelect/BaseAsyncSelect/index.tsx | 2 +- .../src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx | 2 +- .../src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx index 1444ffb99..d6237f565 100644 --- a/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx +++ b/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx @@ -24,7 +24,7 @@ export interface BaseNewEditLocationUnitProps fhirRootLocationId: string; cancelURLGenerator: () => string; updateLocationFormProps?: (formProps: LocationFormProps) => LocationFormProps; - i18nNamespace?: LocationI18nNamespace + i18nNamespace?: LocationI18nNamespace; } /** @@ -42,7 +42,7 @@ export const BaseNewEditLocationUnit = (props: BaseNewEditLocationUnitProps) => cancelURLGenerator, disabledTreeNodesCallback, updateLocationFormProps, - i18nNamespace + i18nNamespace, } = props; const history = useHistory(); const location = useLocation(); diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx index 817275ff9..b4b3b4258 100644 --- a/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx +++ b/packages/fhir-location-management/src/components/AddEditLocationUnit/eusm.tsx @@ -33,7 +33,7 @@ export const EusmAddEditLocationUnit = (props: EusmAddEditLocationUnitProps) => cancelURLGenerator: () => URL_SERVICE_POINT_LIST, hidden: [isJurisdiction], URL_SERVICE_POINT_LIST, - i18nNamespace: servicePointNamespace + i18nNamespace: servicePointNamespace, }; return ; diff --git a/packages/fhir-location-management/src/components/LocationForm/index.tsx b/packages/fhir-location-management/src/components/LocationForm/index.tsx index 97120f0c7..775084ecf 100644 --- a/packages/fhir-location-management/src/components/LocationForm/index.tsx +++ b/packages/fhir-location-management/src/components/LocationForm/index.tsx @@ -45,7 +45,7 @@ export interface LocationFormProps onCancel: () => void; afterSubmit?: (payload: IfhirR4.ILocation) => void; validationRulesFactory: ValidationFactory; - i18nNamespace?: LocationI18nNamespace + i18nNamespace?: LocationI18nNamespace; } const defaultProps = { @@ -55,7 +55,7 @@ const defaultProps = { disabled: [], onCancel: () => undefined, validationRulesFactory: defaultValidationRulesFactory, - i18nNamespace: namespace + i18nNamespace: namespace, }; /** responsive layout for the form labels and columns */ diff --git a/packages/fhir-location-management/src/helpers/types.ts b/packages/fhir-location-management/src/helpers/types.ts index 6313cbadd..2d2951218 100644 --- a/packages/fhir-location-management/src/helpers/types.ts +++ b/packages/fhir-location-management/src/helpers/types.ts @@ -58,4 +58,4 @@ export enum LocationUnitStatus { SUSPENDED = 'suspended', } -export type LocationI18nNamespace = typeof namespace | typeof servicePointNamespace +export type LocationI18nNamespace = typeof namespace | typeof servicePointNamespace; diff --git a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx index 8ddb564fb..ce3571724 100644 --- a/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx +++ b/packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.tsx @@ -5,7 +5,7 @@ import { SelectProps, DefaultOptionType } from 'antd/lib/select'; import { useTranslation } from '../../../mls'; import { UseQueryOptions, useQuery } from 'react-query'; import { TFunction } from '@opensrp/i18n'; -import "./index.css" +import './index.css'; export type RawValueType = string | number | (string | number)[]; diff --git a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx index 5c52773a7..25ad2497e 100644 --- a/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx +++ b/packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx @@ -173,7 +173,7 @@ export function PaginatedAsyncSelect( const remainingRecords = totalPossibleRecords - recordsFetchedNum; const propsToSelect = { - className: "asyncSelect", + className: 'asyncSelect', ...restProps, placeholder, onChange: changeHandler, diff --git a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx index 85b88a329..85e84de81 100644 --- a/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx +++ b/packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/index.tsx @@ -54,7 +54,7 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) { const selectDropDownRender = dropDownFactory(t, data, error as Error); const selectProps = { - className: "asyncSelect", + className: 'asyncSelect', dropdownRender: selectDropDownRender, options: data, loading: isLoading,