From 45a42ce549d3d3eb39fbd830e7856fbd1b1bd96a Mon Sep 17 00:00:00 2001 From: regexowl Date: Mon, 6 May 2024 14:59:54 +0200 Subject: [PATCH] src: Migrate remaining files to TypeScript This migrates remaining JavaScript files to TypeScript and updates imports. --- README.md | 2 +- config/dev.webpack.config.js | 2 +- config/devel.webpack.config.js | 2 +- config/prod.webpack.config.js | 2 +- src/{App.js => App.tsx} | 10 ++++------ src/{AppEntry.js => AppEntry.tsx} | 6 +++++- .../CreateImageWizard/steps/imageOutput.js | 2 +- src/{Router.js => Router.tsx} | 12 ++++++------ src/bootstrap.js | 9 --------- src/bootstrap.tsx | 12 ++++++++++++ src/{constants.js => constants.ts} | 0 src/{entry.js => entry.ts} | 0 .../CreateImageWizard/CreateImageWizard.test.js | 2 +- .../CreateImageWizardV2/CreateImageWizard.test.tsx | 2 +- src/test/Components/LandingPage/LandingPage.test.tsx | 2 +- tsconfig.json | 2 +- 16 files changed, 36 insertions(+), 31 deletions(-) rename src/{App.js => App.tsx} (74%) rename src/{AppEntry.js => AppEntry.tsx} (84%) rename src/{Router.js => Router.tsx} (86%) delete mode 100644 src/bootstrap.js create mode 100644 src/bootstrap.tsx rename src/{constants.js => constants.ts} (100%) rename src/{entry.js => entry.ts} (100%) diff --git a/README.md b/README.md index c4127d75..17f148da 100644 --- a/README.md +++ b/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' diff --git a/config/dev.webpack.config.js b/config/dev.webpack.config.js index 8addc2da..88fe3dfd 100644 --- a/config/dev.webpack.config.js +++ b/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'], diff --git a/config/devel.webpack.config.js b/config/devel.webpack.config.js index 25961f18..522be4c1 100644 --- a/config/devel.webpack.config.js +++ b/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'], diff --git a/config/prod.webpack.config.js b/config/prod.webpack.config.js index 4b7379fc..054970c5 100644 --- a/config/prod.webpack.config.js +++ b/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'], diff --git a/src/App.js b/src/App.tsx similarity index 74% rename from src/App.js rename to src/App.tsx index 4627f33d..c00f4f57 100644 --- a/src/App.js +++ b/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 store = useStore(); +const App = () => { const { hideGlobalFilter, updateDocumentTitle } = useChrome(); useEffect(() => { updateDocumentTitle('Images'); - hideGlobalFilter(); + hideGlobalFilter(true); }, [hideGlobalFilter, updateDocumentTitle]); return ( - - + + ); }; diff --git a/src/AppEntry.js b/src/AppEntry.tsx similarity index 84% rename from src/AppEntry.js rename to src/AppEntry.tsx index cd6b26b1..1df4319a 100644 --- a/src/AppEntry.js +++ b/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: { diff --git a/src/Components/CreateImageWizard/steps/imageOutput.js b/src/Components/CreateImageWizard/steps/imageOutput.js index e54158b9..31ac5ccb 100644 --- a/src/Components/CreateImageWizard/steps/imageOutput.js +++ b/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'; diff --git a/src/Router.js b/src/Router.tsx similarity index 86% rename from src/Router.js rename to src/Router.tsx index 2c1a9d57..e918278b 100644 --- a/src/Router.js +++ b/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(() => - import('./Components/CreateImageWizard/CreateImageWizard') +const CreateImageWizard = lazy( + () => import('./Components/CreateImageWizard/CreateImageWizard') ); -const ImportImageWizard = lazy(() => - import('./Components/CreateImageWizardV2/ImportImageWizard') +const ImportImageWizard = lazy( + () => import('./Components/CreateImageWizardV2/ImportImageWizard') ); -const CreateImageWizardV2 = lazy(() => - import('./Components/CreateImageWizardV2') +const CreateImageWizardV2 = lazy( + () => import('./Components/CreateImageWizardV2') ); export const Router = () => { diff --git a/src/bootstrap.js b/src/bootstrap.js deleted file mode 100644 index 01044a07..00000000 --- a/src/bootstrap.js +++ /dev/null @@ -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(); diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx new file mode 100644 index 00000000..9480bf8d --- /dev/null +++ b/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(); +} diff --git a/src/constants.js b/src/constants.ts similarity index 100% rename from src/constants.js rename to src/constants.ts diff --git a/src/entry.js b/src/entry.ts similarity index 100% rename from src/entry.js rename to src/entry.ts diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js index 0ffea85a..5667428d 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js +++ b/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, diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx index 499a18bb..557c5267 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx +++ b/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, diff --git a/src/test/Components/LandingPage/LandingPage.test.tsx b/src/test/Components/LandingPage/LandingPage.test.tsx index eb3f4ecf..f2b390d6 100644 --- a/src/test/Components/LandingPage/LandingPage.test.tsx +++ b/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'; diff --git a/tsconfig.json b/tsconfig.json index 2311b4b4..1e4bfb29 100644 --- a/tsconfig.json +++ b/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",