(chore) Migrate TypeScript ESLint to v8 (#585)

This PR upgrades TypeScript ESLint dependencies from v6 to v8 and fixes the
resulting linting errors. It also upgrades core OpenMRS dependencies, improves
test mocking patterns and fixes Carbon component usage to align with the v1.92.0 API.

- Upgrade @typescript-eslint/eslint-plugin and parser from v6 to v8
- Update ESLint to v8.57.0
- Remove tsconfigRootDir from ESLint config (no longer needed)
- Add @typescript-eslint/no-wrapper-object-types rule
- Fix linting errors: remove deprecated DataTableSkeleton size prop
- Fix NumberInput onChange handlers to match new type signatures
- Update test mocking patterns to follow O3 conventions
- Suppress single-spa warnings in test setup

Author: denniskigen

.eslintrc

@@ -19,16 +19,15 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": true,
-    "tsconfigRootDir": "__dirname"
+    "project": true
   },
   "plugins": ["@typescript-eslint", "import", "jest-dom", "react-hooks", "testing-library"],
   "root": true,
   "rules": {
-    // The following rules need `noImplicitAny` to be set to `true` in our tsconfig. They are too restrictive for now, but should be reconsidered in future
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-wrapper-object-types": "off",
     "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/no-unsafe-argument": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
@@ -39,7 +38,6 @@
     "@typescript-eslint/unbound-method": "off",
     "@typescript-eslint/consistent-type-definitions": "off",
     "@typescript-eslint/consistent-type-exports": "error",
-    // Use `import type` instead of `import` for type imports
     "@typescript-eslint/consistent-type-imports": [
       "error",
       {
@@ -52,7 +50,6 @@
       "error",
       {
         "paths": [
-          // These two rules ensure that we're importing lodash and lodash-es correctly. Not doing so can bloat our bundle size significantly.
           {
             "name": "lodash",
             "message": "Import specific methods from `lodash`. e.g. `import map from 'lodash/map'`"
@@ -62,7 +59,6 @@
             "importNames": ["default"],
             "message": "Import specific methods from `lodash-es`. e.g. `import { map } from 'lodash-es'`"
           },
-          // These two rules ensure that we're importing Carbon components and icons from the correct packages (after v10). May be removed in the future.
           {
             "name": "carbon-components-react",
             "message": "Import from `@carbon/react` directly. e.g. `import { Toggle } from '@carbon/react'`"

package.json

@@ -75,16 +75,16 @@
     "@types/react": "^18.3.21",
     "@types/react-dom": "^18.3.0",
     "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "babel-preset-minify": "^0.5.2",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.9.1",
     "d3-selection": "^3.0.0",
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-playwright": "^2.2.2",

src/bill-history/bill-history.component.tsx

@@ -73,7 +73,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
   if (isLoading) {
     return (
       <div className={styles.loaderContainer}>
-        <DataTableSkeleton showHeader={false} showToolbar={false} zebra size="md" />
+        <DataTableSkeleton showHeader={false} showToolbar={false} zebra />
       </div>
     );
   }

src/bill-history/bill-history.test.tsx

@@ -7,7 +7,7 @@ import { useBills } from '../billing.resource';
 import BillHistory from './bill-history.component';
 
 const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
-const mockUseBills = jest.mocked(useBills);
+const mockUseBills = jest.mocked<typeof useBills>(useBills);
 
 jest.mock('../billing.resource', () => ({
   useBills: jest.fn(() => ({

src/billable-services-admin-card-link.component.tsx

@@ -9,7 +9,7 @@ const BillableServicesCardLink: React.FC = () => {
 
   return (
     <Layer>
-      <ClickableTile href={`${window.spaBase}/billable-services`} target="_blank" rel="noopener noreferrer">
+      <ClickableTile href={`${window.spaBase}/billable-services`}>
         <div>
           <div className="heading">{header}</div>
           <div className="content">{t('billableServices', 'Billable services')}</div>

src/billable-services/bill-waiver/bill-waiver-form.component.tsx

@@ -65,7 +65,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
     <Form className={styles.billWaiverForm} aria-label={t('waiverForm', 'Waiver form')}>
       <hr />
       <Stack gap={7}>
-        <FormGroup>
+        <FormGroup legendText="">
           <section className={styles.billWaiverDescription}>
             <label className={styles.label}>{t('billItems', 'Bill Items')}</label>
             <p className={styles.value}>
@@ -81,6 +81,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
 
           <Layer className={styles.formControlLayer}>
             <NumberInput
+              id="waiver-amount"
               allowEmpty
               aria-label={t('amountToWaiveAriaLabel', 'Enter amount to waive')}
               disableWheel
@@ -90,7 +91,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
               label={t('amountToWaiveLabel', 'Amount to waive')}
               max={totalAmount}
               min={0}
-              onChange={(event) => setWaiverAmount(event.target.value)}
+              onChange={(_, { value }) => setWaiverAmount(value as number)}
               value={waiverAmount}
             />
           </Layer>

src/billable-services/billable-service-form/billable-service-form.test.tsx

@@ -217,9 +217,10 @@ describe('BillableServiceFormWorkspace', () => {
       expect(saveButton).toBeDisabled();
       expect(cancelButton).toBeDisabled();
 
-      // Resolve the promise to complete submission
       resolveCreate!({} as FetchResponse<any>);
-      await new Promise((resolve) => setTimeout(resolve, 100));
+      await waitFor(() => {
+        expect(saveButton).toBeDisabled();
+      });
     });
 
     test('should show loading indicator in save button during submission', async () => {
@@ -242,7 +243,9 @@ describe('BillableServiceFormWorkspace', () => {
 
       // Resolve the promise
       resolveCreate!({} as FetchResponse<any>);
-      await new Promise((resolve) => setTimeout(resolve, 100));
+      await waitFor(() => {
+        expect(screen.queryByText(/saving/i)).not.toBeInTheDocument();
+      });
     });
 
     test('should call onWorkspaceClose callback after successful edit', async () => {

src/billable-services/billable-service-form/billable-service-form.workspace.tsx

@@ -512,7 +512,7 @@ const BillableServiceFormWorkspace: React.FC<Workspace2DefinitionProps<BillableS
           </section>
         </Stack>
         <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={closeWorkspace}>
+          <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={() => closeWorkspace()}>
             {getCoreTranslation('cancel')}
           </Button>
           <Button className={styles.button} kind="primary" disabled={isSubmitting} type="submit">

src/bills-table/bills-table.component.tsx

@@ -166,7 +166,6 @@ const BillsTable: React.FC = () => {
             showToolbar={false}
             zebra
             columnCount={headerData?.length}
-            size={responsiveSize}
           />
         </div>
       ) : error ? (
@@ -269,7 +268,7 @@ interface FilterableTableHeaderProps {
   layout: LayoutType;
   handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isValidating: boolean;
-  responsiveSize: 'sm' | 'md' | 'lg' | 'xl';
+  responsiveSize: 'sm' | 'md' | 'lg';
   searchString: string;
   t: (key: string, fallback: string) => string;
 }

src/declarations.d.ts

@@ -1,4 +1,2 @@
 declare module '*.css';
 declare module '*.scss';
-declare module '@carbon/react';
-declare type SideNavProps = object;