on-prem: target env icons

Including an image in the on prem version inside cockpit is not
trivial. We need a bit of a workaround to get the various target icons
showing on the on-prem version in cockpit.

cockpit/webpack.config.ts

@@ -77,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
+      },
     ],
   },
 };

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

@@ -13,6 +13,10 @@ import {
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
+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 } from '../../../../store/imageBuilderApi';
@@ -102,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"
                 />
               }
@@ -125,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"
                 />
@@ -149,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"
                 />
@@ -172,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/assets/index.d.ts

@@ -0,0 +1,6 @@
+// this is a bit hacky, but we need it
+// to be able to import the images
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}