Fix translations on the edit service point page. (#1471)

* Fix missing i18n namespace for correct translations

* Style tweak on async select component

* Fix lint issues

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<LocationRouteProps>();
   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;
 

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 <BaseNewEditLocationUnit {...baseNewEditViewProps} />;

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<boolean>(false);
   const [successUrl, setSuccessUrl] = useState<string>();
   const queryClient = useQueryClient();
-  const { t } = useMls();
+  const { t } = useMls(props.i18nNamespace);
   const validationRules = validationRulesFactory(t);
 
   const isHidden = (fieldName: keyof LocationFormFields) => hidden.includes(fieldName);

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;

packages/react-utils/src/components/AsyncSelect/BaseAsyncSelect/index.css

@@ -0,0 +1,3 @@
+.asyncSelect{
+    min-width: 240px;
+}

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)[];
 

packages/react-utils/src/components/AsyncSelect/PaginatedAsyncSelect/index.tsx

@@ -173,7 +173,7 @@ export function PaginatedAsyncSelect<ResourceT extends IResource>(
   const remainingRecords = totalPossibleRecords - recordsFetchedNum;
 
   const propsToSelect = {
-    style: { minWidth: '200px' },
+    className: 'asyncSelect',
     ...restProps,
     placeholder,
     onChange: changeHandler,

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,