James C iss2466 upgrade carbon react package

galasa-ui/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@carbon/charts-react": "^1.23.13",
     "@carbon/icons-react": "^11.45.0",
-    "@carbon/react": "^1.31.3",
+    "@carbon/react": "^1.92.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -34,6 +34,7 @@
     "pako": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-is": "18.3.1",
     "sharp": "^0.33.5",
     "typescript": "5.8.3"
   },

galasa-ui/setupTests.ts

@@ -9,3 +9,41 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 import 'isomorphic-fetch';
+
+// This is needed for Carbon Design System components that use scrollIntoView
+if (typeof Element !== 'undefined') {
+  Element.prototype.scrollIntoView = jest.fn();
+}
+
+// Polyfill for HTMLElement.prototype.scrollTo.
+if (typeof HTMLElement !== 'undefined' && !HTMLElement.prototype.scrollTo) {
+  HTMLElement.prototype.scrollTo = jest.fn();
+}
+
+// Polyfill for window.matchMedia which is not available in jsdom.
+// This is needed for Carbon Design System components that use media queries.
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+}
+
+// Polyfill for ResizeObserver which is not available in jsdom.
+// This is needed for Carbon Design System components that observe element sizes.
+if (typeof global.ResizeObserver === 'undefined') {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+}

galasa-ui/src/components/headers/LanguageSelector.tsx

@@ -7,22 +7,20 @@
 'use client';
 
 import React, { useState, useTransition } from 'react';
-import { OverflowMenu, OverflowMenuItem, Theme } from '@carbon/react';
+import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { setUserLocale } from '@/utils/locale';
 import { useLocale, useTranslations } from 'next-intl';
 import { Locale } from '@/i18n/config';
 import { useRouter } from 'next/navigation';
 import { Wikis, Checkmark } from '@carbon/icons-react';
 import styles from '@/styles/headers/Selector.module.css';
-import { useTheme } from '@/contexts/ThemeContext';
 
 const languages = [
   { id: 'en', text: 'English', value: 'en' },
   { id: 'de', text: 'Deutsch', value: 'de' },
 ];
 
 export default function LanguageSelector() {
-  const { theme } = useTheme();
   const locale = useLocale();
   const [selectedLanguage, setSelectedLanguage] = useState(
     languages.find((lang) => lang.value === locale) || languages[0]
@@ -47,50 +45,37 @@ export default function LanguageSelector() {
     });
   };
 
-  let current: 'g10' | 'g90';
-  if (theme === 'light') {
-    current = 'g10';
-  } else if (theme === 'dark') {
-    current = 'g90';
-  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    current = 'g90';
-  } else {
-    current = 'g10';
-  }
-
   return (
     <div data-floating-menu-container>
-      <Theme theme={current}>
-        <OverflowMenu
-          data-floating-menu-container
-          className={styles.overflowMenu}
-          focusTrap={true}
-          align="bottom"
-          flipped
-          renderIcon={() => <Wikis className={styles.renderIcon} />}
-          size="lg"
-          iconDescription={`${translations('tooltip')}: ${selectedLanguage.text}`}
-          aria-label="Filter menu"
-          tooltipAlignment="center"
-          tooltipPosition="bottom"
-        >
-          {languages.map((language) => (
-            <OverflowMenuItem
-              key={language.id}
-              className={styles.overflowMenuItem}
-              itemText={
-                <div className={styles.overflowMenuItemText}>
-                  <span className={styles.languageText}>{language.text}</span>
-                  {selectedLanguage.id === language.id && (
-                    <Checkmark size={16} className={styles.checkmark} />
-                  )}
-                </div>
-              }
-              onClick={() => handleLanguageChange({ selectedItem: language })}
-            />
-          ))}
-        </OverflowMenu>
-      </Theme>
+      <OverflowMenu
+        data-floating-menu-container
+        className={styles.overflowMenu}
+        focusTrap={true}
+        align="bottom"
+        flipped
+        renderIcon={() => <Wikis className={styles.renderIcon} />}
+        size="lg"
+        iconDescription={`${translations('tooltip')}: ${selectedLanguage.text}`}
+        aria-label="Filter menu"
+        tooltipAlignment="center"
+        tooltipPosition="bottom"
+      >
+        {languages.map((language) => (
+          <OverflowMenuItem
+            key={language.id}
+            className={styles.overflowMenuItem}
+            itemText={
+              <div className={styles.overflowMenuItemText}>
+                <span className={styles.languageText}>{language.text}</span>
+                {selectedLanguage.id === language.id && (
+                  <Checkmark size={16} className={styles.checkmark} />
+                )}
+              </div>
+            }
+            onClick={() => handleLanguageChange({ selectedItem: language })}
+          />
+        ))}
+      </OverflowMenu>
     </div>
   );
 }

galasa-ui/src/components/test-runs/search-criteria/SearchCriteriaContent.tsx

@@ -354,6 +354,9 @@ export default function SearchCriteriaContent({
                     <StructuredListCell>
                       {searchCriteria[field.id] || field.placeHolder}
                     </StructuredListCell>
+                    {/* This div fixes the strange behaviour that was causing the search
+                     criteria column "allowed values" to have an incorrect width */}
+                    <div />
                   </div>
                 </StructuredListRow>
               ))}

galasa-ui/src/components/test-runs/timeframe/DateTimePicker.tsx

@@ -79,7 +79,7 @@ export default function DateTimePicker({
     .replace(/d/g, 'dd');
 
   return (
-    <FormGroup className={styles.TimeFrameFilterItem}>
+    <FormGroup legendText="" className={styles.TimeFrameFilterItem}>
       <DatePicker
         locale={languageCodeForPicker}
         dateFormat={datePickerFormat}

galasa-ui/src/components/test-runs/timeframe/DurationFilter.tsx

@@ -25,7 +25,7 @@ export default function DurationFilter({
   const translations = useTranslations('DurationFilter');
 
   return (
-    <FormGroup className={styles.durationFilterContainer}>
+    <FormGroup legendText="" className={styles.durationFilterContainer}>
       <div
         className={styles.durationInputsContainer}
         key={values.toDate?.getTime() || 0}