(chore) O3-4745: Fix failing dependency auto-update CI workflow

jest.config.json

@@ -8,7 +8,7 @@
     "!**/e2e/**"
   ],
   "transform": {
-    "^.+\\.tsx?$": ["@swc/jest"]
+    "^.+\\.m?[jt]sx?$": ["@swc/jest"]
   },
   "transformIgnorePatterns": ["/node_modules/(?!@openmrs)"],
   "moduleNameMapper": {

package.json

@@ -50,7 +50,7 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@carbon/react": "^1.76.0",
+    "@carbon/react": "^1.83.0",
     "@openmrs/esm-framework": "next",
     "@playwright/test": "^1.50.1",
     "@swc-node/loader": "^1.3.7",
@@ -91,8 +91,8 @@
     "swr": "^2.2.4",
     "turbo": "^2.5.2",
     "typescript": "^4.9.5",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4"
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1"
   },
   "dependencies": {
     "dotenv": "^16.4.7",

src/add-group-modal/AddGroupModal.tsx

@@ -65,6 +65,7 @@ const NewGroupForm = (props) => {
       }}
     >
       <TextInput
+        id="newGroupName"
         labelText={t('newGroupName', 'New Group Name')}
         value={name}
         onChange={(e) => setName(e.target.value)}

src/forms-page/FormsPage.tsx

@@ -1,13 +1,12 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useConfig, useSession } from '@openmrs/esm-framework';
 import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
-import React from 'react';
-import { type Config } from '../config-schema';
+import { fdeWorkflowStorageName, fdeWorkflowStorageVersion } from '../context/FormWorkflowReducer';
+import { fdeGroupWorkflowStorageName, fdeGroupWorkflowStorageVersion } from '../context/GroupFormWorkflowReducer';
 import { useGetAllForms } from '../hooks';
 import FormsTable from './forms-table';
 import styles from './styles.scss';
-import { useTranslation } from 'react-i18next';
-import { fdeWorkflowStorageName, fdeWorkflowStorageVersion } from '../context/FormWorkflowReducer';
-import { fdeGroupWorkflowStorageName, fdeGroupWorkflowStorageVersion } from '../context/GroupFormWorkflowReducer';
 
 // helper function useful for debugging
 // given a list of forms, it will organize into permissions
@@ -93,11 +92,11 @@ const FormsPage = () => {
       <h3 className={styles.pageTitle}>{t('fastDataEntry', 'Fast Data Entry')}</h3>
       <Tabs>
         <TabList>
-          <Tab label={t('allForms', 'All Forms')}>
+          <Tab aria-label={t('allForms', 'All Forms')}>
             {`${t('allForms', 'All Forms')} (${cleanRows ? cleanRows?.length : '??'})`}
           </Tab>
           {categoryRows?.map((category, index) => (
-            <Tab label={category.name} key={index}>
+            <Tab aria-label={category.name} key={index}>
               {`${category.name} (${category.rows.length})`}
             </Tab>
           ))}

src/forms-page/forms-table/FormsTable.tsx

@@ -1,6 +1,9 @@
-import { ErrorState } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import {
   DataTable,
+  type DataTableHeader,
   DataTableSkeleton,
   Table,
   TableBody,
@@ -13,30 +16,37 @@ import {
   TableToolbarContent,
   TableToolbarSearch,
 } from '@carbon/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { ErrorState } from '@openmrs/esm-framework';
 import EmptyState from '../../empty-state/EmptyState';
 import styles from './styles.scss';
 
+interface TableHeader {
+  key: string;
+  header: string;
+  isSortable?: boolean;
+}
+
 const FormsTable = ({ rows, error, isLoading, activeForms, activeGroupForms }) => {
   const { t } = useTranslation();
 
-  const tableHeaders = [
-    {
-      key: 'display',
-      header: t('formName', 'Form Name'),
-      isSortable: true,
-    },
-    {
-      key: 'actions',
-      header: t('actions', 'Actions'),
-    },
-    {
-      key: 'actions2',
-      header: '',
-    },
-  ];
+  const tableHeaders = useMemo(
+    () => [
+      {
+        key: 'display',
+        header: t('formName', 'Form Name'),
+        isSortable: true,
+      },
+      {
+        key: 'actions',
+        header: t('actions', 'Actions'),
+      },
+      {
+        key: 'actions2',
+        header: '',
+      },
+    ],
+    [t],
+  );
 
   const augmentedRows = rows?.map((row) => ({
     ...row,
@@ -84,7 +94,7 @@ const FormsTable = ({ rows, error, isLoading, activeForms, activeGroupForms }) =
             <Table {...getTableProps()}>
               <TableHead>
                 <TableRow>
-                  {headers.map((header) => (
+                  {headers.map((header: DataTableHeader & TableHeader) => (
                     <TableHeader
                       {...getHeaderProps({
                         header,

src/group-form-entry-workflow/SessionDetailsForm.tsx

@@ -53,29 +53,29 @@ const SessionDetailsForm = () => {
                     type="text"
                     labelText={t('sessionName', 'Session Name')}
                     {...register('sessionName', { required: true })}
-                    invalid={errors.sessionName}
+                    invalid={Boolean(errors.sessionName)}
                     invalidText={t('requiredField', 'This field is required')}
                   />
                   <TextInput
                     id="text"
                     type="text"
                     labelText={t('practitionerName', 'Practitioner Name')}
                     {...register('practitionerName', { required: true })}
-                    invalid={errors.practitionerName}
+                    invalid={Boolean(errors.practitionerName)}
                     invalidText={t('requiredField', 'This field is required')}
                   />
                   <Controller
                     name="sessionDate"
                     control={control}
                     rules={{ required: true }}
                     render={({ field }) => (
-                      <DatePicker datePickerType="single" size="md" maxDate={new Date()} {...field}>
+                      <DatePicker datePickerType="single" maxDate={new Date()} {...field}>
                         <DatePickerInput
                           id="session-date"
                           labelText={t('sessionDate', 'Session Date')}
                           placeholder="mm/dd/yyyy"
                           size="md"
-                          invalid={errors.sessionDate}
+                          invalid={Boolean(errors.sessionDate)}
                           invalidText={t('requiredField', 'This field is required')}
                         />
                       </DatePicker>
@@ -86,7 +86,7 @@ const SessionDetailsForm = () => {
                     type="text"
                     labelText={t('sessionNotes', 'Session Notes')}
                     {...register('sessionNotes', { required: true })}
-                    invalid={errors.sessionNotes}
+                    invalid={Boolean(errors.sessionNotes)}
                     invalidText={t('requiredField', 'This field is required')}
                   />
                 </div>

src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx

@@ -40,7 +40,7 @@ const PatientRow = ({ patient }) => {
           <SkeletonText />
         </TableCell>
         <TableCell>
-          <Checkbox diabled />
+          <Checkbox id={`${identifier}-attendance-checkbox`} labelText={patient.id} disabled />
         </TableCell>
       </TableRow>
     );

src/group-form-entry-workflow/group-search/CompactGroupResults.tsx

@@ -105,12 +105,7 @@ export const SearchResultSkeleton = () => {
   return (
     <div className={styles.patientSearchResult}>
       <div className={styles.patientAvatar} role="img">
-        <SkeletonIcon
-          style={{
-            height: '3rem',
-            width: '3rem',
-          }}
-        />
+        <SkeletonIcon className={styles.skeletonIcon} />
       </div>
       <div>
         <h2 className={styles.patientName}>

src/group-form-entry-workflow/group-search/CompactGroupSearch.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { debounce } from 'lodash-es';
+import { Button, Search } from '@carbon/react';
+import GroupSearch from './GroupSearch';
 import { type GroupType } from '../../context/GroupFormWorkflowContext';
 import styles from './compact-group-search.scss';
-import GroupSearch from './GroupSearch';
-import { Button, Search } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import debounce from 'lodash-es/debounce';
 
 interface CompactGroupSearchProps {
   selectGroupAction?: (group: GroupType) => void;
@@ -38,7 +38,6 @@ const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({ selectGroupActi
     <div className={styles.patientSearchBar}>
       <div className={styles.searchArea}>
         <Search
-          autoFocus
           className={styles.patientSearchInput}
           closeButtonLabelText={t('clearSearch', 'Clear')}
           labelText=""

src/group-form-entry-workflow/group-search/compact-group-result.scss

@@ -61,3 +61,8 @@
 .middot {
   margin: 0 layout.$spacing-03;
 }
+
+.skeletonIcon {
+  height: '3rem';
+  width: '3rem';
+}