Fix lint and unit test errors - migrate to new JSX transform

packages/app/package.json

@@ -42,10 +42,12 @@
     "@emotion/styled": "^11.11.5",
     "@fontsource/inter": "^5.0.18",
     "@internal/backstage-plugin-plausible": "^0.1.0",
+    "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.15.19",
     "@mui/joy": "^5.0.0-beta.36",
     "@mui/material": "^5.15.19",
     "@mui/styles": "^5.18.0",
+    "@mui/system": "^5.15.19",
     "@mui/utils": "^5.15.14",
     "@mui/x-charts": "^8.0.0",
     "history": "^5.0.0",
@@ -65,6 +67,7 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.9",
+    "@types/react": "^18",
     "@types/react-dom": "*",
     "@types/webpack-env": "^1.18.5",
     "cross-env": "^7.0.0"

packages/app/src/App.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { render, waitFor } from '@testing-library/react';
 import App from './App';
 

packages/app/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { Route } from 'react-router-dom';
 import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
 import {

packages/app/src/components/Root/Root.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { styled } from '@mui/material/styles';
 import Home from '@mui/icons-material/Home';
 import LogoFull from './LogoFull';

packages/app/src/components/catalog/EntityPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import {
   EntityApiDefinitionCard,
   EntityConsumedApisCard,
@@ -250,7 +250,7 @@ const apiPage = (
         <Grid item md={6} marginBottom={-1}>
           <EntityCatalogGraphCard variant="gridItem" height={400} />
         </Grid>
-        <Grid md={8}>
+        <Grid item md={8}>
           <Grid item md={12}>
             <EntityProvidingComponentsCard variant="gridItem" />
           </Grid>

packages/app/src/components/home/HomePage.tsx

@@ -15,7 +15,8 @@ import Groups3Icon from '@mui/icons-material/Groups3';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import TrendingDownIcon from '@mui/icons-material/TrendingDown';
-import React from 'react';
+import { useState } from 'react';
+
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import CardContent from '@mui/material/CardContent';
@@ -73,7 +74,7 @@ const PageHeading: React.FC<{ icon: React.ReactNode; title: string }> = ({
 );
 
 export const HomePage = () => {
-  const [isSquad, setIsSquad] = React.useState(true);
+  const [isSquad, setIsSquad] = useState(true);
   const theme = useTheme();
 
   const months = [

packages/app/src/components/icons/Aws.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Azure.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Bitbucket.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Confluence.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Discord.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Grafana.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Jira.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Prometheus.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/icons/Slack.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IconProps {
   width: number;

packages/app/src/components/search/SearchPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { styled } from '@mui/material/styles';
 
 import { CatalogSearchResultListItem } from '@backstage/plugin-catalog';

packages/app/src/index.tsx

@@ -1,5 +1,5 @@
 import '@backstage/cli/asset-types';
-import React from 'react';
+
 import ReactDOM from 'react-dom/client';
 import App from './App';
 

plugins/plausible/dev/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { createDevApp } from '@backstage/dev-utils';
 import { plausiblePlugin } from '../src/plugin';
 

plugins/plausible/package.json

@@ -41,12 +41,16 @@
     "@backstage/core-app-api": "^1.17.0",
     "@backstage/dev-utils": "^1.1.10",
     "@backstage/test-utils": "^1.7.8",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
+    "@types/react": "^18",
     "@types/react-helmet": "^6",
     "msw": "^1.0.0",
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
   },
   "files": [
     "dist",

plugins/plausible/src/components/PlausibleAnalytics.tsx

@@ -1,5 +1,5 @@
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
-import React from 'react';
+
 import { Helmet } from 'react-helmet';
 
 export const PlausibleAnalytics = () => {

plugins/plausible/src/plugin.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { render, waitFor } from '@testing-library/react';
 import { ConfigApi, configApiRef } from '@backstage/core-plugin-api';
 import { TestApiProvider } from '@backstage/test-utils';

tsconfig.json

@@ -12,6 +12,7 @@
   "compilerOptions": {
     "outDir": "dist-types",
     "rootDir": ".",
+    "jsx": "react-jsx",
     "noUnusedLocals": false
   }
 }