Fix lint issues

packages/fhir-client/src/components/ PatientDetailsOverview/index.tsx

@@ -48,7 +48,7 @@ const PatientDetailsOverview = (props: PatientListViewProps) => {
         errorMessage={t('The patient you are looking for does not exist.')}
         homeUrl={LIST_PATIENTS_URL}
       />
-    );  // Return Resource404 component with relevant props
+    ); // Return Resource404 component with relevant props
   }
 
   const { id, gender, birthDate, address, telecom, identifier, deceasedBoolean, active } = data;

packages/fhir-client/src/components/ PatientDetailsOverview/tests/index.test.tsx

@@ -33,7 +33,11 @@ describe('PatientDetailsOverview', () => {
           <PatientDetailsOverview fhirBaseURL="https://example.com/fhir" />
         </MemoryRouter>
       </QueryClientProvider>,
-      { wrapper: ({ children }) => <div data-query-params={searchParams.toString()}>{children}</div> }
+      {
+        wrapper: ({ children }) => (
+          <div data-query-params={searchParams.toString()}>{children}</div>
+        ),
+      }
     );
   };
 
@@ -43,9 +47,7 @@ describe('PatientDetailsOverview', () => {
   });
 
   it('renders error state when an error occurs', async () => {
-    nock('https://example.com')
-      .get('/fhir/Patient/123')
-      .replyWithError('Error fetching data');
+    nock('https://example.com').get('/fhir/Patient/123').replyWithError('Error fetching data');
 
     renderComponent('123');
 
@@ -64,9 +66,7 @@ describe('PatientDetailsOverview', () => {
       active: true,
     };
 
-    nock('https://example.com')
-      .get('/fhir/Patient/1')
-      .reply(200, mockPatientData);
+    nock('https://example.com').get('/fhir/Patient/1').reply(200, mockPatientData);
 
     renderComponent('1');
 
@@ -81,15 +81,15 @@ describe('PatientDetailsOverview', () => {
   });
 
   it('renders Resource404 when patient is not found', async () => {
-    nock('https://example.com')
-      .get('/fhir/Patient/999')
-      .reply(404);
+    nock('https://example.com').get('/fhir/Patient/999').reply(404);
 
     renderComponent('999');
 
     await waitFor(() => {
       expect(screen.getByText(/patient not found/i)).toBeInTheDocument();
-      expect(screen.getByText(/the patient you are looking for does not exist/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/the patient you are looking for does not exist/i)
+      ).toBeInTheDocument();
     });
   });
 
@@ -105,9 +105,7 @@ describe('PatientDetailsOverview', () => {
       active: true,
     };
 
-    nock('https://example.com')
-      .get('/fhir/Patient/1')
-      .reply(200, mockPatientData);
+    nock('https://example.com').get('/fhir/Patient/1').reply(200, mockPatientData);
 
     renderComponent('1');
 

packages/fhir-client/src/components/PatientsList/index.tsx

@@ -15,7 +15,7 @@ import {
 } from '../PatientDetails/ResourceSchema/Patient';
 import { FilterValue, SorterResult, TablePaginationConfig } from 'antd/lib/table/interface';
 import { get } from 'lodash';
-import {  PatientDetailsOverview } from '../ PatientDetailsOverview';
+import { PatientDetailsOverview } from '../ PatientDetailsOverview';
 
 interface PatientListProps {
   fhirBaseURL: string;

packages/react-utils/src/components/GenericDetailsView/ResourceDetails/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Divider, Tag, Typography } from 'antd';
+import { DescriptionsProps, Divider, Tag, Typography } from 'antd';
 import {
   KeyValuesDescriptions,
   ListFlatKeyValues,
@@ -22,7 +22,7 @@ export interface ResourceDetailsProps {
   bodyData: Record<string, React.ReactNode> | (() => React.ReactNode);
   footer?: React.ReactNode;
   theme?: 'default' | 'light';
-  column?: number;  // Add column prop here
+  column?: DescriptionsProps['column']; // Add column prop here
 }
 
 export const ResourceDetails = (props: ResourceDetailsProps) => {
@@ -36,7 +36,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
     status,
     headerLeftDataClasses,
     theme = 'default',
-    column = 2,  // Default column value
+    column = 2, // Default column value
   } = props;
 
   return (

packages/react-utils/src/components/GenericDetailsView/ResourceDetails/tests/index.test.tsx

@@ -20,13 +20,15 @@ const props = {
   },
   footer: (
     <div>
-      <Button type="link" onClick={() => console.log('View details clicked')}>
+      <Button type="link" onClick={() => mockFunction()}>
         view details
       </Button>
     </div>
   ),
 };
 
+const mockFunction = jest.fn();
+
 test('ResourceDetails component renders correctly', () => {
   render(<ResourceDetails {...props} />);
 
@@ -59,7 +61,7 @@ test('ResourceDetails component renders correctly', () => {
 
   // Test Footer Button Click
   fireEvent.click(screen.getByText('view details'));
-  expect(console.log).toHaveBeenCalledWith('View details clicked');
+  expect(mockFunction).toHaveBeenCalled();
 });
 
 // New test case for bodyData as a render prop

packages/react-utils/src/components/KeyValuePairs/index.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import './index.css';
-import { Descriptions, Typography } from 'antd';
+import { Descriptions, DescriptionsProps, Typography } from 'antd';
 
 const { Text } = Typography;
 
 export type SingleKeyValueClassOptions = 'light' | 'default';
 export type SingleKeyValueClass = Record<SingleKeyValueClassOptions, string>;
 export type KeyValuePairs = Record<string, React.ReactNode>;
-
 export interface SingleKeyNestedValueProps {
   theme?: SingleKeyValueClassOptions;
   data: KeyValuePairs;
-  column?: number;  // Add column prop here
+  column?: DescriptionsProps['column']; // Add column prop here
 }
 
 export interface ListFlatKeyValuesProps {
@@ -39,9 +38,15 @@ export const KeyValueGrid = (props: KeyValuePairs) => {
   );
 };
 
+/**
+ * Use for single key value pair
+ *
+ * @param props - component data and theme
+ */
 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];
@@ -55,6 +60,11 @@ export const SingleKeyNestedValue = (props: SingleKeyNestedValueProps) => {
   );
 };
 
+/**
+ * Dryed out util for displaying keyValue ui for an obj
+ *
+ * @param obj - obj with info to be displayed
+ */
 export const renderObjectAsKeyvalue = (obj: Record<string, unknown>) => {
   return (
     <>
@@ -72,10 +82,15 @@ export const renderObjectAsKeyvalue = (obj: Record<string, unknown>) => {
   );
 };
 
+/**
+ * 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, column = 3 } = props;  // Default column to 3 if not provided
+  const { data, theme } = props;
   return (
-    <Descriptions size="small" column={column}>  // Use column prop here
+    <Descriptions size="small" column={{ xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}>
       {Object.entries(data).map(([key, value]) => {
         const keyValuePairing = { [key]: value };
         return (
@@ -88,8 +103,14 @@ 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;
 
@@ -100,6 +121,12 @@ export const SingleFlatKeyValue = (obj: KeyValuePairs) => {
   );
 };
 
+/**
+ * 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 (
@@ -109,7 +136,7 @@ export const ListFlatKeyValues = (props: ListFlatKeyValuesProps) => {
         return (
           <React.Fragment key={key}>
             <SingleFlatKeyValue {...keyValuePairing} />
-            <br />
+            <br></br>
           </React.Fragment>
         );
       })}