src: Migrate remaining files to TypeScript

This migrates remaining JavaScript files to TypeScript and updates imports.

README.md

@@ -116,7 +116,7 @@ export const emptyFoobarApi = createApi({
 });
 ```
 
-3. Declare the new constat `FOOBAR_API` to the API url in `src/constants.js`
+3. Declare the new constat `FOOBAR_API` to the API url in `src/constants.ts`
 
 ```
 export const FOOBAR_API = 'api/foobar/v1'

config/dev.webpack.config.js

@@ -53,7 +53,7 @@ plugins.push(
       root: resolve(__dirname, '../'),
       useFileHash: false,
       exposes: {
-        './RootApp': resolve(__dirname, '../src/AppEntry.js'),
+        './RootApp': resolve(__dirname, '../src/AppEntry.tsx'),
       },
       shared: [{ 'react-router-dom': { singleton: true } }],
       exclude: ['react-router-dom'],

config/devel.webpack.config.js

@@ -25,7 +25,7 @@ plugins.push(
       root: resolve(__dirname, '../'),
       useFileHash: false,
       exposes: {
-        './RootApp': resolve(__dirname, '../src/AppEntry.js'),
+        './RootApp': resolve(__dirname, '../src/AppEntry.tsx'),
       },
       shared: [{ 'react-router-dom': { singleton: true } }],
       exclude: ['react-router-dom'],

config/prod.webpack.config.js

@@ -11,7 +11,7 @@ plugins.push(
     {
       root: resolve(__dirname, '../'),
       exposes: {
-        './RootApp': resolve(__dirname, '../src/AppEntry.js'),
+        './RootApp': resolve(__dirname, '../src/AppEntry.tsx'),
       },
       shared: [{ 'react-router-dom': { singleton: true } }],
       exclude: ['react-router-dom'],

src/App.tsx

@@ -2,24 +2,22 @@ import React, { useEffect } from 'react';
 
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
-import { useStore } from 'react-redux';
 import '@patternfly/patternfly/patternfly-addons.css';
 
 import { Router } from './Router';
 
-const App = (props) => {
+const App = () => {
-  const store = useStore();
   const { hideGlobalFilter, updateDocumentTitle } = useChrome();
 
   useEffect(() => {
     updateDocumentTitle('Images');
-    hideGlobalFilter();
+    hideGlobalFilter(true);
   }, [hideGlobalFilter, updateDocumentTitle]);
 
   return (
     <React.Fragment>
-      <NotificationsPortal store={store} />
+      <NotificationsPortal />
-      <Router childProps={props} />
+      <Router />
     </React.Fragment>
   );
 };

src/AppEntry.tsx

@@ -5,8 +5,12 @@ import { Provider } from 'react-redux';
 import App from './App';
 import { store } from './store';
 
-if (process.env.NODE_ENV === 'development' && process.env.MSW === true) {
+if (
+  process.env.NODE_ENV === 'development' &&
+  process.env.MSW?.toString().toLowerCase() === 'true'
+) {
   // process.env.MSW is set in the webpack config using DefinePlugin
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const { worker } = require('./test/mocks/browser');
   worker.start({
     serviceWorker: {

src/Components/CreateImageWizard/steps/imageOutput.js

@@ -7,7 +7,7 @@ import { Text } from '@patternfly/react-core';
 import nextStepMapper from './imageOutputStepMapper';
 import StepTemplate from './stepTemplate';
 
-import { RHEL_9, X86_64 } from '../../../constants.js';
+import { RHEL_9, X86_64 } from '../../../constants';
 import DocumentationButton from '../../sharedComponents/DocumentationButton';
 import CustomButtons from '../formComponents/CustomButtons';
 

src/Router.tsx

@@ -9,14 +9,14 @@ import { manageEdgeImagesUrlName } from './Utilities/edge';
 import { useExperimentalFlag } from './Utilities/useExperimentalFlag';
 
 const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage'));
-const CreateImageWizard = lazy(() =>
+const CreateImageWizard = lazy(
-  import('./Components/CreateImageWizard/CreateImageWizard')
+  () => import('./Components/CreateImageWizard/CreateImageWizard')
 );
-const ImportImageWizard = lazy(() =>
+const ImportImageWizard = lazy(
-  import('./Components/CreateImageWizardV2/ImportImageWizard')
+  () => import('./Components/CreateImageWizardV2/ImportImageWizard')
 );
-const CreateImageWizardV2 = lazy(() =>
+const CreateImageWizardV2 = lazy(
-  import('./Components/CreateImageWizardV2')
+  () => import('./Components/CreateImageWizardV2')
 );
 
 export const Router = () => {

src/bootstrap.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-import { createRoot } from 'react-dom/client';
-
-import ImageBuilder from './AppEntry';
-
-const root = createRoot(document.getElementById('root'));
-
-root.render(<ImageBuilder />);

src/bootstrap.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { createRoot } from 'react-dom/client';
+
+import ImageBuilder from './AppEntry';
+
+const root = document.getElementById('root');
+
+if (root) {
+  const reactRoot = createRoot(root);
+  reactRoot.render(<ImageBuilder />);
+}

src/test/Components/CreateImageWizard/CreateImageWizard.test.js

@@ -18,7 +18,7 @@ import {
   PROVISIONING_API,
   RHEL_8,
   RHSM_API,
-} from '../../../constants.js';
+} from '../../../constants';
 import { server } from '../../mocks/server';
 import {
   clickBack,

src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx

@@ -16,7 +16,7 @@ import { enterBlueprintName } from './wizardTestUtils';
 
 import CreateImageWizard from '../../../Components/CreateImageWizardV2/CreateImageWizard';
 import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal';
-import { PROVISIONING_API, RHSM_API } from '../../../constants.js';
+import { PROVISIONING_API, RHSM_API } from '../../../constants';
 import { server } from '../../mocks/server';
 import {
   clickBack,

src/test/Components/LandingPage/LandingPage.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { rest } from 'msw';
 
-import { IMAGE_BUILDER_API } from '../../../constants.js';
+import { IMAGE_BUILDER_API } from '../../../constants';
 import { mockComposesEmpty } from '../../fixtures/composes';
 import { server } from '../../mocks/server';
 import { renderWithReduxRouter } from '../../testUtils';

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "noImplicitAny": true,
-    "module": "es6",
+    "module": "esnext",
     "target": "es5",
     "downlevelIteration": true, // Needed to allow iteration over some objects like Map() while target is es5
     "jsx": "react-jsx",