on-prem: cockpit create image wizard (HMS-5301)

cockpit/webpack.config.ts

@@ -27,6 +27,9 @@ module.exports = {
   mode,
   devtool,
   plugins,
+  devServer: {
+    historyApiFallback: true, // Ensures all routes are served with `index.html`
+  },
   resolve: {
     fallback: {
       path: require.resolve('path-browserify'),
@@ -74,6 +77,10 @@ module.exports = {
         test: /\.scss$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
       },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        type: 'asset/resource', // Handles image files
+      },
     ],
   },
 };

fec.config.js

@@ -112,6 +112,7 @@ module.exports = {
       // to false
       cockpit: false,
       'cockpit/fsinfo': false,
+      'os-release': false,
     },
   },
   routes: {

src/AppCockpit.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 
 import { Router } from './Router';
 import { onPremStore as store } from './store';
@@ -15,9 +15,9 @@ const Application = () => {
   return (
     <React.Fragment>
       <NotificationsPortal />
-      <BrowserRouter>
+      <HashRouter>
         <Router />
-      </BrowserRouter>
+      </HashRouter>
     </React.Fragment>
   );
 };

src/Components/Blueprints/BlueprintDiffModal.tsx

@@ -5,9 +5,9 @@ import { Button, Modal, ModalVariant } from '@patternfly/react-core';
 
 import { BuildImagesButton } from './BuildImagesButton';
 
+import { useGetBlueprintQuery } from '../../store/backendApi';
 import { selectSelectedBlueprintId } from '../../store/BlueprintSlice';
 import { useAppSelector } from '../../store/hooks';
-import { useGetBlueprintQuery } from '../../store/imageBuilderApi';
 
 type blueprintDiffProps = {
   // baseVersion is the version of the blueprint to compare the latest version against

src/Components/Blueprints/BuildImagesButton.tsx

@@ -19,12 +19,12 @@
 import { skipToken } from '@reduxjs/toolkit/query';
 
 import { targetOptions } from '../../constants';
+import { useGetBlueprintQuery } from '../../store/backendApi';
 import { selectSelectedBlueprintId } from '../../store/BlueprintSlice';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import {
   ImageTypes,
   useComposeBlueprintMutation,
-  useGetBlueprintQuery,
 } from '../../store/imageBuilderApi';
 
 type BuildImagesButtonPropTypes = {
@@ -46,7 +46,7 @@
           id: selectedBlueprintId,
           body: {
             image_types: blueprintImageType?.filter(
               (target) => !deselectedTargets?.includes(target)
             ),
           },
         });
@@ -78,7 +78,7 @@
   ) => {
     const imageType = blueprintImageType?.[itemId];
 
     if (imageType && deselectedTargets?.includes(imageType)) {
       setDeselectedTargets(
         deselectedTargets.filter((target) => target !== imageType)
       );
@@ -143,7 +143,7 @@
                 hasCheckbox
                 itemId={index}
                 isSelected={
                   !deselectedTargets || !deselectedTargets.includes(imageType)
                 }
               >
                 {targetOptions[imageType]}

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -391,7 +391,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 name={complianceEnabled ? 'Compliance' : 'OpenSCAP'}
                 id="step-oscap"
                 key="step-oscap"
-                isHidden={distribution === RHEL_10_BETA}
+                isHidden={
+                  distribution === RHEL_10_BETA || !!process.env.IS_ON_PREMISE
+                }
                 footer={
                   <CustomWizardFooter disableNext={false} optional={true} />
                 }
@@ -442,7 +444,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 name="Custom repositories"
                 id="wizard-custom-repositories"
                 key="wizard-custom-repositories"
-                isHidden={distribution === RHEL_10_BETA}
+                isHidden={
+                  distribution === RHEL_10_BETA || !!process.env.IS_ON_PREMISE
+                }
                 isDisabled={snapshotValidation.disabledNext}
                 footer={
                   <CustomWizardFooter disableNext={false} optional={true} />

src/Components/CreateImageWizard/EditImageWizard.tsx

@@ -5,8 +5,8 @@ import { useNavigate } from 'react-router-dom';
 import CreateImageWizard from './CreateImageWizard';
 import { mapRequestToState } from './utilities/requestMapper';
 
+import { useGetBlueprintQuery } from '../../store/backendApi';
 import { useAppDispatch } from '../../store/hooks';
-import { useGetBlueprintQuery } from '../../store/imageBuilderApi';
 import { loadWizardState } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 

src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx

@@ -17,6 +17,7 @@ import {
   RHEL_9_FULL_SUPPORT,
   RHEL_9_MAINTENANCE_SUPPORT,
   RHEL_10_BETA,
+  ON_PREM_RELEASES,
 } from '../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { Distributions } from '../../../../store/imageBuilderApi';
@@ -27,6 +28,7 @@ import {
 import isRhel from '../../../../Utilities/isRhel';
 import { toMonthAndYear } from '../../../../Utilities/time';
 import { useFlag } from '../../../../Utilities/useGetEnvironment';
+import { useGetHostDistro } from '../../../../Utilities/useGetHostDistro';
 
 const ReleaseSelect = () => {
   // What the UI refers to as the "release" is referred to as the "distribution" in the API.
@@ -36,10 +38,13 @@ const ReleaseSelect = () => {
   const dispatch = useAppDispatch();
   const [isOpen, setIsOpen] = useState(false);
   const [showDevelopmentOptions, setShowDevelopmentOptions] = useState(false);
+  const hostDistro = useGetHostDistro(distribution);
 
   const isRHEL9BetaEnabled = useFlag('image-builder.rhel9.beta.enabled');
   const isRHEL10BetaEnabled = useFlag('image-builder.rhel10.beta.enabled');
 
+  const releases = process.env.IS_ON_PREMISE ? ON_PREM_RELEASES : RELEASES;
+
   const handleSelect = (_event: React.MouseEvent, selection: Distributions) => {
     dispatch(changeDistribution(selection));
     setIsOpen(false);
@@ -75,7 +80,11 @@ const ReleaseSelect = () => {
   const setSelectOptions = () => {
     const options: ReactElement[] = [];
     const filteredRhel = new Map(
-      [...RELEASES].filter(([key]) => {
+      [...releases].filter(([key]) => {
+        if (process.env.IS_ON_PREMISE) {
+          return key === hostDistro;
+        }
+
         if (key === RHEL_9_BETA) {
           return isRHEL9BetaEnabled;
         }
@@ -99,7 +108,7 @@ const ReleaseSelect = () => {
           value={key}
           description={setDescription(key as Distributions)}
         >
-          {RELEASES.get(key)}
+          {releases.get(key)}
         </SelectOption>
       );
     });
@@ -114,14 +123,17 @@ const ReleaseSelect = () => {
         variant={SelectVariant.single}
         onToggle={() => setIsOpen(!isOpen)}
         onSelect={handleSelect}
-        selections={RELEASES.get(distribution)}
+        selections={releases.get(hostDistro)}
         isOpen={isOpen}
-        {...(!showDevelopmentOptions && {
-          loadingVariant: {
-            text: 'Show options for further development of RHEL',
-            onClick: handleExpand,
-          },
-        })}
+        {...(!showDevelopmentOptions &&
+          // Hide this for on-prem since the host
+          // could be centos or fedora
+          !process.env.IS_ON_PREMISE && {
+            loadingVariant: {
+              text: 'Show options for further development of RHEL',
+              onClick: handleExpand,
+            },
+          })}
       >
         {setSelectOptions()}
       </Select>

src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx

@@ -12,13 +12,14 @@ import {
   Tile,
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
-import { useFlag } from '@unleash/proxy-client-react';
 
+import awsIcon from '../../../../assets/aws.svg';
+import gcpIcon from '../../../../assets/google-cloud-short.svg';
+import azureIcon from '../../../../assets/microsoft-azure-short.svg';
+import oracleIcon from '../../../../assets/oracle-short.svg';
+import { useGetArchitecturesQuery } from '../../../../store/backendApi';
 import { useAppSelector, useAppDispatch } from '../../../../store/hooks';
-import {
-  ImageTypes,
-  useGetArchitecturesQuery,
-} from '../../../../store/imageBuilderApi';
+import { ImageTypes } from '../../../../store/imageBuilderApi';
 import { provisioningApi } from '../../../../store/provisioningApi';
 import { rhsmApi } from '../../../../store/rhsmApi';
 import {
@@ -31,6 +32,7 @@ import {
   selectDistribution,
   selectImageTypes,
 } from '../../../../store/wizardSlice';
+import { useFlag } from '../../../../Utilities/useGetEnvironment';
 
 const TargetEnvironment = () => {
   const arch = useAppSelector(selectArchitecture);
@@ -104,7 +106,11 @@ const TargetEnvironment = () => {
               icon={
                 <img
                   className="provider-icon"
-                  src={'/apps/frontend-assets/partners-icons/aws.svg'}
+                  src={
+                    process.env.IS_ON_PREMISE
+                      ? awsIcon
+                      : '/apps/frontend-assets/partners-icons/aws.svg'
+                  }
                   alt="Amazon Web Services logo"
                 />
               }
@@ -127,7 +133,9 @@ const TargetEnvironment = () => {
                 <img
                   className="provider-icon"
                   src={
-                    '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
+                    process.env.IS_ON_PREMISE
+                      ? gcpIcon
+                      : '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
                   }
                   alt="Google Cloud Platform logo"
                 />
@@ -151,7 +159,9 @@ const TargetEnvironment = () => {
                 <img
                   className="provider-icon"
                   src={
-                    '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
+                    process.env.IS_ON_PREMISE
+                      ? azureIcon
+                      : '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
                   }
                   alt="Microsoft Azure logo"
                 />
@@ -174,7 +184,11 @@ const TargetEnvironment = () => {
               icon={
                 <img
                   className="provider-icon"
-                  src={'/apps/frontend-assets/partners-icons/oracle-short.svg'}
+                  src={
+                    process.env.IS_ON_PREMISE
+                      ? oracleIcon
+                      : '/apps/frontend-assets/partners-icons/oracle-short.svg'
+                  }
                   alt="Oracle Cloud Infrastructure logo"
                 />
               }

src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx

@@ -24,6 +24,7 @@ import {
   RHEL_10_BETA,
   RHEL_10,
 } from '../../../../constants';
+import { useGetOscapProfilesQuery } from '../../../../store/backendApi';
 import { usePoliciesQuery, PolicyRead } from '../../../../store/complianceApi';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import {
@@ -32,7 +33,6 @@ import {
   Filesystem,
   OpenScapProfile,
   useGetOscapCustomizationsQuery,
-  useGetOscapProfilesQuery,
   useLazyGetOscapCustomizationsQuery,
   Services,
 } from '../../../../store/imageBuilderApi';

src/Components/CreateImageWizard/steps/Oscap/index.tsx

@@ -9,7 +9,6 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { useFlag } from '@unleash/proxy-client-react';
 
 import { Oscap, removeBetaFromRelease } from './Oscap';
 
@@ -18,7 +17,7 @@ import {
   COMPLIANCE_PROD_URL,
   COMPLIANCE_STAGE_URL,
 } from '../../../../constants';
-import { imageBuilderApi } from '../../../../store/enhancedImageBuilderApi';
+import { useBackendPrefetch } from '../../../../store/backendApi';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { useGetOscapCustomizationsQuery } from '../../../../store/imageBuilderApi';
 import {
@@ -35,17 +34,17 @@ import {
   selectDistribution,
   selectComplianceType,
 } from '../../../../store/wizardSlice';
-import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment';
+import {
+  useFlag,
+  useGetEnvironment,
+} from '../../../../Utilities/useGetEnvironment';
 
 const OscapStep = () => {
   const dispatch = useAppDispatch();
   const complianceEnabled = useFlag('image-builder.compliance.enabled');
   const complianceType = useAppSelector(selectComplianceType);
   const profileID = useAppSelector(selectComplianceProfileID);
-  const prefetchOscapProfile = imageBuilderApi.usePrefetch(
-    'getOscapProfiles',
-    {}
-  );
+  const prefetchOscapProfile = useBackendPrefetch('getOscapProfiles', {});
   const { isProd } = useGetEnvironment();
   const release = removeBetaFromRelease(useAppSelector(selectDistribution));
   const { data: currentProfileData } = useGetOscapCustomizationsQuery(

src/Components/CreateImageWizard/steps/Packages/Packages.tsx

@@ -49,6 +49,7 @@ import {
   EPEL_9_REPO_DEFINITION,
   RH_ICON_SIZE,
 } from '../../../../constants';
+import { useGetArchitecturesQuery } from '../../../../store/backendApi';
 import {
   ApiRepositoryResponseRead,
   useCreateRepositoryMutation,
@@ -57,10 +58,7 @@ import {
   useSearchPackageGroupMutation,
 } from '../../../../store/contentSourcesApi';
 import { useAppSelector } from '../../../../store/hooks';
-import {
-  Package,
-  useGetArchitecturesQuery,
-} from '../../../../store/imageBuilderApi';
+import { Package } from '../../../../store/imageBuilderApi';
 import {
   selectArchitecture,
   selectPackages,

src/Components/CreateImageWizard/steps/Packages/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
 import { Alert, Text, Form, Title } from '@patternfly/react-core';
-import { useFlag } from '@unleash/proxy-client-react';
 
 import PackageRecommendations from './PackageRecommendations';
 import Packages from './Packages';
 
 import { RHEL_8, RHEL_9 } from '../../../../constants';
 import { useAppSelector } from '../../../../store/hooks';
 import { selectDistribution } from '../../../../store/wizardSlice';
+import { useFlag } from '../../../../Utilities/useGetEnvironment';
 
 const PackagesStep = () => {
   const packageRecommendationsFlag = useFlag('image-builder.pkgrecs.enabled');

src/Components/CreateImageWizard/steps/Registration/index.tsx

@@ -26,15 +26,17 @@ const RegistrationStep = () => {
         system during initial boot.
       </Text>
       <Registration />
-      <ActivationKeysList />
-      {activationKey && registrationType !== 'register-later' && (
-        <FormGroup
-          label={'Selected activation key'}
-          data-testid="selected-activation-key"
-        >
-          <ActivationKeyInformation />
-        </FormGroup>
-      )}
+      {!process.env.IS_ON_PREMISE && <ActivationKeysList />}
+      {!process.env.IS_ON_PREMISE &&
+        activationKey &&
+        registrationType !== 'register-later' && (
+          <FormGroup
+            label={'Selected activation key'}
+            data-testid="selected-activation-key"
+          >
+            <ActivationKeyInformation />
+          </FormGroup>
+        )}
     </Form>
   );
 };