From c2e1e23fa4f6bab842b2e8e15a94ffbb8d65e84b Mon Sep 17 00:00:00 2001 From: Michal Gold Date: Sun, 29 Sep 2024 14:32:31 +0300 Subject: [PATCH] change cockpit script add alias to webpack config 1) api alias defines the path to onPrem cockpitAp file 2) pathRes alias define path for onPrem env 3) getFeatureFlag alias define the path to file with flags --- cockpit/webpack.config.ts | 8 ++++++-- fec.config.js | 13 +++++++++++++ package.json | 3 ++- .../CreateImageWizard/CreateImageWizard.tsx | 12 +++++++----- .../steps/ImageOutput/TargetEnvironment.tsx | 5 +++-- src/Components/ImagesTable/ImagesTable.tsx | 16 +++------------- src/Components/LandingPage/LandingPage.tsx | 4 +++- .../sharedComponents/ImageBuilderHeader.tsx | 5 +++-- src/Router.tsx | 9 ++------- src/Utilities/pathOnPrem.ts | 5 +++++ src/Utilities/useGetEnvironment.ts | 7 ++++++- src/store/index.ts | 4 ++++ 12 files changed, 57 insertions(+), 34 deletions(-) create mode 100644 src/Utilities/pathOnPrem.ts diff --git a/cockpit/webpack.config.ts b/cockpit/webpack.config.ts index d152b8e61..ea3fa7007 100644 --- a/cockpit/webpack.config.ts +++ b/cockpit/webpack.config.ts @@ -32,8 +32,12 @@ module.exports = { extensions: ['.js', '.jsx', '.ts', '.tsx'], alias: { // Use different modules based on the environment - // For example, `api` will resolve to `cloudApi` or `imageBuilderApi` accordingly - api: path.resolve(__dirname, '../../src/store/cockpitApi.ts'), + api: path.resolve(__dirname, '../src/store/cockpitApi.ts'), + pathRes: path.resolve(__dirname, '../src/Utilities/pathOnPrem.ts'), + getFeatureFlag: path.resolve( + __dirname, + '../src/Utilities/useGetEnvironment.ts' + ), }, }, diff --git a/fec.config.js b/fec.config.js index 4a28e9b16..e18d6852e 100644 --- a/fec.config.js +++ b/fec.config.js @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const path = require('path'); +const { resolve } = require('path'); const CopyPlugin = require('copy-webpack-plugin'); const webpack = require('webpack'); @@ -99,6 +100,18 @@ module.exports = { }), }, plugins: plugins, + resolve: { + modules: ['node_modules'], + extensions: ['.js', '.jsx', '.ts', '.tsx'], + alias: { + api: resolve(__dirname, './src/store/imageBuilderApi.ts'), + pathRes: resolve(__dirname, './src/Utilities/path.ts'), + getFeatureFlag: resolve( + __dirname, + './src/Utilities/useGetEnvironment.ts' + ), + }, + }, moduleFederation: { exposes: { './RootApp': path.resolve(__dirname, './src/AppEntry.tsx'), diff --git a/package.json b/package.json index f5cf80c45..ca9ec91c7 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,8 @@ "test:watch": "TZ=UTC vitest", "test:coverage": "TZ=UTC vitest run --coverage", "build": "fec build", - "devel-install": "webpack --config cockpit/webpack.config.ts && mkdir -p ~/.local/share/cockpit\n\tln -s `pwd`/cockpit/public ~/.local/share/cockpit/image-builder-frontend", + "cockpit:build": "webpack --config cockpit/webpack.config.ts", + "cockpit:install": "mkdir -p ~/.local/share/cockpit\n\tln -s `pwd`/cockpit/public ~/.local/share/cockpit/image-builder-frontend", "api": "npm-run-all api:pull api:generate", "api:generate": "bash api/codegen.sh", "api:pull": "bash api/pull.sh", diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx index 06dc8f784..058afc551 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.tsx +++ b/src/Components/CreateImageWizard/CreateImageWizard.tsx @@ -10,7 +10,6 @@ import { PageSection, } from '@patternfly/react-core'; import { WizardStepType } from '@patternfly/react-core/dist/esm/components/Wizard'; -import { useFlag } from '@unleash/proxy-client-react'; import { useNavigate, useSearchParams } from 'react-router-dom'; import DetailsStep from './steps/Details'; @@ -63,8 +62,9 @@ import { selectImageTypes, addImageType, } from '../../store/wizardSlice'; -import { resolveRelPath } from '../../Utilities/path'; +import { resolveRelPath } from 'pathRes'; import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader'; +import { useGetFeatureFlag } from 'getFeatureFlag'; type CustomWizardFooterPropType = { disableBack?: boolean; @@ -125,6 +125,7 @@ type CreateImageWizardProps = { }; const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => { + debugger const navigate = useNavigate(); const dispatch = useAppDispatch(); const [searchParams] = useSearchParams(); @@ -133,8 +134,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => { // =========================TO REMOVE======================= const { data, isSuccess, isFetching, isError } = useListFeaturesQuery(undefined); - - const snapshotsFlag = useFlag('image-builder.snapshots.enabled'); + const snapshotsFlag = useGetFeatureFlag('image-builder.snapshots.enabled'); const snapshottingEnabled = useMemo(() => { if (!snapshotsFlag) return false; @@ -150,7 +150,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => { // =========================TO REMOVE======================= - const isFirstBootEnabled = useFlag('image-builder.firstboot.enabled'); + const isFirstBootEnabled = useGetFeatureFlag( + 'image-builder.firstboot.enabled' + ); // IMPORTANT: Ensure the wizard starts with a fresh initial state useEffect(() => { dispatch(initializeWizard()); diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx index b60661857..a4a8ef266 100644 --- a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx +++ b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx @@ -12,7 +12,7 @@ import { Tile, } from '@patternfly/react-core'; import { HelpIcon } from '@patternfly/react-icons'; -import { useFlag } from '@unleash/proxy-client-react'; +import { useGetFeatureFlag } from 'getFeatureFlag'; import { useAppSelector, useAppDispatch } from '../../../../store/hooks'; import { @@ -32,11 +32,12 @@ import { } from '../../../../store/wizardSlice'; const TargetEnvironment = () => { + debugger const arch = useAppSelector(selectArchitecture); const environments = useAppSelector(selectImageTypes); const distribution = useAppSelector(selectDistribution); - const wslFlag = useFlag('image-builder.wsl.enabled'); + const wslFlag = useGetFeatureFlag('image-builder.wsl.enabled'); const { data } = useGetArchitecturesQuery({ distribution: distribution, diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index 5076f33bb..884d622a4 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/src/Components/ImagesTable/ImagesTable.tsx @@ -23,6 +23,7 @@ import { Thead, Tr, } from '@patternfly/react-table'; +import { useGetBlueprintsQuery } from 'api'; import { useDispatch } from 'react-redux'; import { NavigateFunction, useNavigate } from 'react-router-dom'; @@ -56,9 +57,7 @@ import { selectSelectedBlueprintId, setBlueprintId, } from '../../store/BlueprintSlice'; -import { useGetBlueprintsQuery as useGetBlueprintsQueryCockpit } from '../../store/cockpitApi'; import { useAppSelector } from '../../store/hooks'; -import { useGetBlueprintsQuery as useGetBlueprintsQueryImageBuilder } from '../../store/imageBuilderApi'; import { BlueprintItem, ComposesResponseItem, @@ -67,23 +66,14 @@ import { useGetComposesQuery, useGetComposeStatusQuery, } from '../../store/imageBuilderApi'; -import { resolveRelPath } from '../../Utilities/path'; + +import { resolveRelPath } from 'pathRes'; import { computeHoursToExpiration, timestampToDisplayString, timestampToDisplayStringDetailed, } from '../../Utilities/time'; -let useGetBlueprintsQuery; - -if (isOnPremise) { - useGetBlueprintsQuery = (await import('../../store/cockpitApi')) - .useGetBlueprintsQuery; -} else { - useGetBlueprintsQuery = (await import('../../store/imageBuilderApi')) - .useGetBlueprintsQuery; -} - const ImagesTable = () => { const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(10); diff --git a/src/Components/LandingPage/LandingPage.tsx b/src/Components/LandingPage/LandingPage.tsx index a49d54d27..c1f0fa45e 100644 --- a/src/Components/LandingPage/LandingPage.tsx +++ b/src/Components/LandingPage/LandingPage.tsx @@ -27,7 +27,9 @@ import { NewAlert } from './NewAlert'; import { MANAGING_WITH_DNF_URL, OSTREE_URL } from '../../constants'; import { manageEdgeImagesUrlName } from '../../Utilities/edge'; import { resolveRelPath } from '../../Utilities/path'; -import { useGetFeatureFlag } from '../../Utilities/useGetEnvironment'; + +import { useGetFeatureFlag } from 'getFeatureFlag'; + import BlueprintsSidebar from '../Blueprints/BlueprintsSideBar'; import EdgeImagesTable from '../edge/ImagesTable'; import ImagesTable from '../ImagesTable/ImagesTable'; diff --git a/src/Components/sharedComponents/ImageBuilderHeader.tsx b/src/Components/sharedComponents/ImageBuilderHeader.tsx index 119f49fcb..e52d3f95a 100644 --- a/src/Components/sharedComponents/ImageBuilderHeader.tsx +++ b/src/Components/sharedComponents/ImageBuilderHeader.tsx @@ -15,6 +15,7 @@ import { PageHeader, PageHeaderTitle, } from '@redhat-cloud-services/frontend-components'; +import { resolveRelPath } from 'pathRes'; import { useNavigate } from 'react-router-dom'; import BetaLabel from './BetaLabel'; @@ -24,9 +25,9 @@ import { CREATING_IMAGES_WITH_IB_SERVICE_URL, OSBUILD_SERVICE_ARCHITECTURE_URL, } from '../../constants'; -import { resolveRelPath } from '../../Utilities/path'; import './ImageBuilderHeader.scss'; -import { useGetFeatureFlag } from '../../Utilities/useGetEnvironment'; +import { useGetFeatureFlag } from 'getFeatureFlag'; + import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal'; type ImageBuilderHeaderPropTypes = { diff --git a/src/Router.tsx b/src/Router.tsx index f65b4a4fb..0a1bf89d3 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,12 +1,11 @@ import React, { lazy, Suspense } from 'react'; +import { useGetFeatureFlag } from 'getFeatureFlag'; import { Route, Routes } from 'react-router-dom'; import EdgeImageDetail from './Components/edge/ImageDetails'; import ShareImageModal from './Components/ShareImageModal/ShareImageModal'; -import { isOnPremise } from './constants'; import { manageEdgeImagesUrlName } from './Utilities/edge'; -import { useGetFeatureFlag } from './Utilities/useGetEnvironment'; const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage')); const ImportImageWizard = lazy( @@ -27,11 +26,7 @@ export const Router = () => { } > - {!isOnPremise && ( - <> - } /> - - )} + } /> {importExportFlag && ( diff --git a/src/Utilities/pathOnPrem.ts b/src/Utilities/pathOnPrem.ts new file mode 100644 index 000000000..97e60c740 --- /dev/null +++ b/src/Utilities/pathOnPrem.ts @@ -0,0 +1,5 @@ +function resolveRelPath(path = '') { + return `${path.length > 0 ? `/${path}` : ''}`; +} + +export { resolveRelPath }; diff --git a/src/Utilities/useGetEnvironment.ts b/src/Utilities/useGetEnvironment.ts index 3a950f2b4..526c8ca5c 100644 --- a/src/Utilities/useGetEnvironment.ts +++ b/src/Utilities/useGetEnvironment.ts @@ -34,7 +34,12 @@ export const useGetFeatureFlag = (flagName: string) => { if (isOnPremise) { return false; } - if (flagName === 'edgeParity.image-list') { + if ( + flagName === 'edgeParity.image-list' || + flagName === 'image-builder.snapshots.enabled' || + flagName === 'image-builder.firstboot.enabled' || + flagName === 'image-builder.wsl.enabled' + ) { // eslint-disable-next-line react-hooks/rules-of-hooks return useFlag(flagName); } else if (flagName === 'image-builder.import.enabled') { diff --git a/src/store/index.ts b/src/store/index.ts index 9140d7c21..2dfe00ab2 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -34,7 +34,9 @@ export const serviceReducer = combineReducers({ }); export const onPremReducer = combineReducers({ + [contentSourcesApi.reducerPath]: contentSourcesApi.reducer, [imageBuilderApi.reducerPath]: imageBuilderApi.reducer, + [rhsmApi.reducerPath]: rhsmApi.reducer, [blueprintsReducer.reducerPath]: blueprintsReducer.reducer, notifications: notificationsReducer, wizard: wizardSlice, @@ -116,7 +118,9 @@ export const onPremMiddleware = (getDefaultMiddleware: Function) => .prepend(listenerMiddleware.middleware) .concat( promiseMiddleware, + contentSourcesApi.middleware, imageBuilderApi.middleware, + rhsmApi.middleware, blueprintsReducer.middleware );