Fix lint issues

packages/fhir-location-management/src/components/ViewDetails/DetailsTabs/Inventory.tsx

@@ -322,10 +322,10 @@ export const InventoryView = ({ fhirBaseUrl, locationId }: InventoryViewProps) =
     <Row data-testid="inventory-tab" className="list-view">
       <Col style={{ width: '100%' }}>
         <div className="main-content__header">
-          <Space size={"large"}>
+          <Space size={'large'}>
             <SearchForm data-testid="search-form" {...searchFormProps} />
             <Space>
-              <Typography.Text>{t("Accountability status:")}</Typography.Text>
+              <Typography.Text>{t('Accountability status:')}</Typography.Text>
               <Radio.Group
                 value={filterRegistry[accEndDateFilterKey].value}
                 buttonStyle="solid"

packages/fhir-location-management/src/components/ViewDetails/DetailsTabs/tests/detailsTabs.test.tsx

@@ -249,27 +249,28 @@ test('works correctly - physical location', async () => {
 
   // check records shown in table.
   let tableData = [...inventoryTab.querySelectorAll('table tbody tr')].map((tr) => tr.textContent);
-  expect(tableData).toEqual(["Bed nets2/1/20242/1/2024HealthEdit", 'HealthEdit']);
+  expect(tableData).toEqual(['Bed nets2/1/20242/1/2024HealthEdit', 'HealthEdit']);
 
   // switch to inactive tab
   const inactiveRadio = screen.getByRole('radio', { name: /Inactive/i });
   fireEvent.click(inactiveRadio);
 
   // recheck data
   tableData = [...inventoryTab.querySelectorAll('table tbody tr')].map((tr) => tr.textContent);
-  expect(tableData).toEqual(["No data"]);
+  expect(tableData).toEqual(['No data']);
   checkedRadio = document.querySelector('.ant-radio-button-wrapper-checked');
   expect(checkedRadio?.textContent).toEqual('Inactive');
 
   // switch back to active to inactive tab
   const activeRadio = screen.getByRole('radio', { name: /^active/i });
   fireEvent.click(activeRadio);
 
-  const links = [...inventoryTab.querySelectorAll('a')].map(link => link.href);
-  expect(links).toEqual(
-    ["http://localhost/location/inventory/d9d7aa7b-7488-48e7-bae8-d8ac5bd09334/1277894c-91b5-49f6-a0ac-cdf3f72cc3d5", "http://localhost/location/inventory/d9d7aa7b-7488-48e7-bae8-d8ac5bd09334/e44e26d0-1f7a-41d6-aa57-99c5712ddd66", ""]
-
-  );
+  const links = [...inventoryTab.querySelectorAll('a')].map((link) => link.href);
+  expect(links).toEqual([
+    'http://localhost/location/inventory/d9d7aa7b-7488-48e7-bae8-d8ac5bd09334/1277894c-91b5-49f6-a0ac-cdf3f72cc3d5',
+    'http://localhost/location/inventory/d9d7aa7b-7488-48e7-bae8-d8ac5bd09334/e44e26d0-1f7a-41d6-aa57-99c5712ddd66',
+    '',
+  ]);
 
   // validate search works.
   const childLocationSearch = inventoryTab.querySelector('[data-testid="search-form"]')!;

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

@@ -30,7 +30,7 @@ function BaseAsyncSelect<QueryResponse = unknown, QueryProcessedData = unknown>(
   const { data, isLoading, error } = useQuery(useQueryParams);
 
   const options = useMemo(() => (data ? optionsGetter(data) : undefined), [data, optionsGetter]);
-  const selectDropDownRender = dropDownFactory(t, data, error)
+  const selectDropDownRender = dropDownFactory(t, data, error);
   const singleSelectProps = {
     dropdownRender: selectDropDownRender,
     options,
@@ -42,16 +42,22 @@ function BaseAsyncSelect<QueryResponse = unknown, QueryProcessedData = unknown>(
   return <Select {...singleSelectProps} />;
 }
 
+/**
+ * Factory to help generate the render for dropdown with respect to how query to fetch
+ * options resolved.
+ * @param t - translator function
+ * @param data - loaded data
+ * @param error - query error
+ */
 export function dropDownFactory(t: TFunction, data?: unknown, error?: Error | null) {
   return function selectErrorDropDownRender(menu: React.ReactNode) {
-
     return (
       <>
         {!error && data && menu}
         {error && <Alert message={t('Unable to load dropdown options.')} type="error" showIcon />}
       </>
-    )
-  }
+    );
+  };
 }
 
 export { BaseAsyncSelect };

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

@@ -2,11 +2,13 @@ import React, { useMemo } from 'react';
 import Select, { DefaultOptionType, SelectProps } from 'antd/lib/select';
 import { ValueSetContains } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/valueSetContains';
 import { IValueSet } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IValueSet';
-import { AsyncSelectProps, BaseAsyncSelect, dropDownFactory, RawValueType } from '../BaseAsyncSelect';
+import {
+  dropDownFactory,
+  RawValueType,
+} from '../BaseAsyncSelect';
 import { FHIRServiceClass } from '../../../helpers/dataLoaders';
 import { Coding } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/coding';
 import { useQuery } from 'react-query';
-import { Alert } from 'antd';
 import { useTranslation } from '../../../mls';
 
 export interface ValueSetAsyncSelectProps extends SelectProps<RawValueType, DefaultOptionType> {
@@ -25,7 +27,7 @@ export const valueSetResourceType = 'ValueSet';
 export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
   const { valueSetURL, fhirBaseUrl, value, defaultValue, ...rawSelectProps } = props;
 
-  const {t} = useTranslation()
+  const { t } = useTranslation();
   const queryParams = {
     queryKey: [valueSetResourceType, valueSetURL],
     queryFn: async () =>
@@ -40,20 +42,19 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
   const optionsByCodeAndSystem = useMemo(() => {
     return (data ?? []).reduce((acc, opt) => {
       try {
-        const optionObj = JSON.parse((opt.value ?? "{}") as string)
-        const key = `${optionObj.code}-${optionObj.system}`
-        acc[key] = opt
-        return acc
+        const optionObj = JSON.parse((opt.value ?? '{}') as string);
+        const key = `${optionObj.code}-${optionObj.system}`;
+        acc[key] = opt;
+        return acc;
       } catch (_) {
-        return acc
+        return acc;
       }
-    }, {} as Record<string, DefaultOptionType>)
-  }, [data])
-  const sanitizedValue = useSanitizedValueSelectValue(optionsByCodeAndSystem, value)
-  const sanitizedDefValue = useSanitizedValueSelectValue(optionsByCodeAndSystem, defaultValue)
+    }, {} as Record<string, DefaultOptionType>);
+  }, [data]);
+  const sanitizedValue = useSanitizedValueSelectValue(optionsByCodeAndSystem, value);
+  const sanitizedDefValue = useSanitizedValueSelectValue(optionsByCodeAndSystem, defaultValue);
 
-
-  const selectDropDownRender = dropDownFactory(t, data, error as Error)
+  const selectDropDownRender = dropDownFactory(t, data, error as Error);
 
   const selectProps = {
     dropdownRender: selectDropDownRender,
@@ -63,7 +64,7 @@ export function ValueSetAsyncSelect(props: ValueSetAsyncSelectProps) {
     ...rawSelectProps,
     filterOption: selectFilterFunction,
     value: sanitizedValue,
-    defaultValue: sanitizedDefValue
+    defaultValue: sanitizedDefValue,
   };
 
   return <Select {...selectProps} />;
@@ -121,22 +122,27 @@ export function getValueSetSelectOptions(data: IValueSet) {
   return options;
 }
 
-/** valueset options are a json stringified representation of the codeable concept,
- * the option.value thus can include the `display` property which we should not use when 
+/**
+ * valueset options are a json stringified representation of the codeable concept,
+ * the option.value thus can include the `display` property which we should not use when
  * testing for equality between a codeableConcept value and the options.
+ *
  * @param optionsByCodeAndSystem - lookup of options by the important parts, code and system
  * @param value - a provided or selected value.
  */
-export const useSanitizedValueSelectValue = (optionsByCodeAndSystem: Record<string, DefaultOptionType>, value?: RawValueType | null) => {
+export const useSanitizedValueSelectValue = (
+  optionsByCodeAndSystem: Record<string, DefaultOptionType>,
+  value?: RawValueType | null
+) => {
   return useMemo(() => {
     try {
       if (value) {
-        const valueOb = JSON.parse((value ?? "") as string)
-        const key = `${valueOb.code}-${valueOb.system}`
-        return optionsByCodeAndSystem?.[key]?.value ?? value
+        const valueOb = JSON.parse((value) as string);
+        const key = `${valueOb.code}-${valueOb.system}`;
+        return optionsByCodeAndSystem[key].value ?? value;
       }
     } catch (_) {
-      return value
+      return value;
     }
-  }, [optionsByCodeAndSystem, value])
-}
+  }, [optionsByCodeAndSystem, value]);
+};

packages/react-utils/src/components/AsyncSelect/ValueSetAsyncSelect/tests/index.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { store } from '@opensrp/store';
 import { authenticateUser } from '@onaio/session-reducer';
 import nock from 'nock';
-import { cleanup, fireEvent, render, waitFor, screen, prettyDOM } from '@testing-library/react';
+import { cleanup, fireEvent, render, waitFor, screen } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ValueSetAsyncSelect, valueSetResourceType } from '..';
 import { eusmServicePoint } from './fixtures';
@@ -204,14 +204,7 @@ test('display is of no consequence when matching value to option', async () => {
   });
 
   let activeValue = document.querySelector('.ant-select-selection-item');
-  expect(activeValue).toMatchInlineSnapshot(`
-    <span
-      class="ant-select-selection-item"
-      title="NatCom Switzerland"
-    >
-      NatCom Switzerland
-    </span>
-  `);
+  expect(activeValue?.textContent).toEqual("NatCom Switzerland");
 
   // When display is left out
   placeboValue = JSON.stringify({
@@ -229,14 +222,7 @@ test('display is of no consequence when matching value to option', async () => {
   });
 
   activeValue = document.querySelector('.ant-select-selection-item');
-  expect(activeValue).toMatchInlineSnapshot(`
-    <span
-      class="ant-select-selection-item"
-      title="NatCom Switzerland"
-    >
-      NatCom Switzerland
-    </span>
-  `);
+  expect(activeValue?.textContent).toEqual("NatCom Switzerland");
 
   expect(nock.isDone()).toBeTruthy();
 });