fix(frontend): improve error message for missing '#storybook-root' el…

…ement & update ts

- Updated TypeScript version from `^4.4.x` to `^5.7.3` in `package.json` and `package-lock.json`.
- Removed unused import of `React` in `Common.tsx` and `SectionHeader.tsx`.
- Fixed type coercion issue in `InstanceCountLabel` component by converting `countText` to a number.
- Ensured `aria-label` in `SectionHeader` uses `toString()` for translation.
- facebook/create-react-app#13080
- certain deps demand higher ts version while react-scripts still depend
  on older ts versions
- react-scripts still works fine with newer ts therefore overwrite ts
  version

frontend/.storybook/main.ts

@@ -15,7 +15,7 @@ const config: StorybookConfig = {
   docs: {},
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
+    reactDocgen: 'react-docgen-typescript',
   }
 };
 

frontend/.storybook/test-runner.ts

@@ -21,7 +21,7 @@ const config: TestRunnerConfig = {
       const innerHTML = await elementHandler.innerHTML();
       expect(innerHTML).toMatchSnapshot();
     } else {
-      throw new Error("elementHandler is null!");
+      throw new Error("The '#storybook-root' element was not found. elementHandler is null!");
     }
   },
 };

frontend/package.json

@@ -52,7 +52,8 @@
     "yup": "^0.32.9"
   },
   "overrides": {
-    "react-refresh": "^0.14.2"
+    "react-refresh": "^0.14.2",
+    "typescript": "5.7.2"
   },
   "devDependencies": {
     "@axe-core/react": "^4.2.2",
@@ -94,7 +95,7 @@
     "pg": "^8.13.1",
     "prettier": "^2.3.2",
     "storybook": "^8.5.8",
-    "typescript": "^4.4.x"
+    "typescript": "5.7.2"
   },
   "scripts": {
     "build-icons": "node tools/build-icons.js ./src/img ./src/icons && npm run format",

frontend/src/components/Instances/Common.tsx

@@ -42,7 +42,7 @@ export function InstanceCountLabel(props: {
         <Typography className={classes.instancesCount}>{countText}</Typography>
       </Grid>
       <Grid item>
-        {!instanceListView && countText > 0 ? (
+        {!instanceListView && Number(countText) > 0 ? (
           <Box>
             {!props.loading && (
               <Link to={{ ...href }} component={RouterLink} underline="hover">

frontend/src/components/common/SectionHeader/SectionHeader.tsx

@@ -5,7 +5,6 @@ import Grid from '@mui/material/Grid';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import PageTitle from '../PageTitle/PageTitle';
@@ -49,7 +48,7 @@ export default function SectionHeader(props: SectionHeaderProps) {
       >
         <Grid item>
           <Breadcrumbs
-            aria-label={t('common|breadcrumbs')}
+            aria-label={t('common|breadcrumbs').toString()}
             separator={<NavigateNextIcon fontSize="small" />}
           >
             {breadcrumbs &&