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

@@ -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'
+      ),
     },
   },
 

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'),

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",

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());

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,

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);

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';

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 = {

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 = () => {
           </Suspense>
         }
       >
-        {!isOnPremise && (
-          <>
-            <Route path="share/:composeId" element={<ShareImageModal />} />
-          </>
-        )}
+        <Route path="share/:composeId" element={<ShareImageModal />} />
       </Route>
 
       {importExportFlag && (

src/Utilities/pathOnPrem.ts

@@ -0,0 +1,5 @@
+function resolveRelPath(path = '') {
+  return `${path.length > 0 ? `/${path}` : ''}`;
+}
+
+export { resolveRelPath };

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') {

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
     );