From e61cb99f1bc96ce3e3af1f0f9abc756c5a287f64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20V=C3=ADtov=C3=A1?= <avitova@redhat.com>
Date: Mon, 11 Aug 2025 16:06:21 +0200
Subject: [PATCH 1/7] Launch: implement guidance for Azure (HMS-9003)

This commit adds launch modal for guiding users through launching an
Azure instance from their image. As the launch service will be decommissioned,
the flag shall be turned on, the code will later be cleaned up and the
Provisioning wizard removed.
---
 src/Components/ImagesTable/ImagesTable.tsx |   9 +-
 src/Components/Launch/AzureLaunchModal.tsx | 116 +++++++++++++++++++++
 src/Components/Launch/OciLaunchModal.tsx   |   2 +-
 3 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/Launch/AzureLaunchModal.tsx

diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx
index 09e4b8d7..8c9118a1 100644
--- a/src/Components/ImagesTable/ImagesTable.tsx
+++ b/src/Components/ImagesTable/ImagesTable.tsx
@@ -88,6 +88,7 @@ import {
   timestampToDisplayString,
   timestampToDisplayStringDetailed,
 } from '../../Utilities/time';
+import { AzureLaunchModal } from '../Launch/AzureLaunchModal';
 import { OciLaunchModal } from '../Launch/OciLaunchModal';
 
 const ImagesTable = () => {
@@ -384,8 +385,14 @@ type AzureRowPropTypes = {
 };
 
 const AzureRow = ({ compose, rowIndex }: AzureRowPropTypes) => {
+  const launchEofFlag = useFlag('image-builder.launcheof');
+
   const details = <AzureDetails compose={compose} />;
-  const instance = <CloudInstance compose={compose} />;
+  const instance = launchEofFlag ? (
+    <AzureLaunchModal compose={compose} />
+  ) : (
+    <CloudInstance compose={compose} />
+  );
   const status = <CloudStatus compose={compose} />;
 
   return (
diff --git a/src/Components/Launch/AzureLaunchModal.tsx b/src/Components/Launch/AzureLaunchModal.tsx
new file mode 100644
index 00000000..8cfba072
--- /dev/null
+++ b/src/Components/Launch/AzureLaunchModal.tsx
@@ -0,0 +1,116 @@
+import React, { Fragment, useState } from 'react';
+
+import {
+  Button,
+  List,
+  ListComponent,
+  ListItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+  OrderType,
+  Skeleton,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+import {
+  ComposesResponseItem,
+  useGetComposeStatusQuery,
+} from '../../store/imageBuilderApi';
+import { isAzureUploadStatus } from '../../store/typeGuards';
+
+type LaunchProps = {
+  compose: ComposesResponseItem;
+};
+
+export const AzureLaunchModal = ({ compose }: LaunchProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { data, isSuccess, isFetching } = useGetComposeStatusQuery({
+    composeId: compose.id,
+  });
+
+  if (!isSuccess) {
+    return <Skeleton />;
+  }
+
+  const options = data?.image_status.upload_status?.options;
+
+  if (options && !isAzureUploadStatus(options)) {
+    throw TypeError(
+      `Error: options must be of type AzureUploadStatus, not ${typeof options}.`,
+    );
+  }
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <Fragment>
+      <Button
+        variant='link'
+        isInline
+        isDisabled={data?.image_status.status !== 'success'}
+        onClick={handleModalToggle}
+      >
+        Launch
+      </Button>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        variant={ModalVariant.large}
+        aria-label='Open launch guide wizard'
+      >
+        <ModalHeader
+          title={'Launch with Microsoft Azure'}
+          labelId='modal-title'
+          description={compose.image_name}
+        />
+        <ModalBody id='modal-box-body-basic'>
+          <List component={ListComponent.ol} type={OrderType.number}>
+            <ListItem>
+              Locate{' '}
+              {!isFetching && (
+                <span className='pf-v6-u-font-weight-bold'>
+                  {options?.image_name}{' '}
+                </span>
+              )}
+              {isFetching && <Skeleton />}
+              in the{' '}
+              <Button
+                component='a'
+                target='_blank'
+                variant='link'
+                icon={<ExternalLinkAltIcon />}
+                iconPosition='right'
+                href={`https://portal.azure.com/#view/Microsoft_Azure_ComputeHub/ComputeHubMenuBlade/~/imagesBrowse`}
+                className='pf-v6-u-pl-0'
+              >
+                Azure console
+              </Button>
+              .
+            </ListItem>
+            <ListItem>
+              Create a Virtual Machine (VM) by using the image.
+              <br />
+              Note: Review the{' '}
+              <span className='pf-v6-u-font-weight-bold'>
+                Availability Zone
+              </span>{' '}
+              and the <span className='pf-v6-u-font-weight-bold'>Size</span> to
+              meet your requirements. Adjust these settings as needed.
+            </ListItem>
+          </List>
+        </ModalBody>
+        <ModalFooter>
+          <Button key='close' variant='primary' onClick={handleModalToggle}>
+            Close
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Fragment>
+  );
+};
diff --git a/src/Components/Launch/OciLaunchModal.tsx b/src/Components/Launch/OciLaunchModal.tsx
index 8d9f93d6..fa129be3 100644
--- a/src/Components/Launch/OciLaunchModal.tsx
+++ b/src/Components/Launch/OciLaunchModal.tsx
@@ -72,7 +72,7 @@ export const OciLaunchModal = ({ isExpired, compose }: LaunchProps) => {
       <Button
         variant='link'
         isInline
-        isDisabled={data?.image_status.status === 'success' ? false : true}
+        isDisabled={data?.image_status.status !== 'success'}
         onClick={handleModalToggle}
       >
         Image link

From 3a83a14720dc0efd2cb16f7ceaf9a2c9fec43c02 Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gianlucazuccarelli@gmail.com>
Date: Wed, 20 Aug 2025 13:00:34 +0100
Subject: [PATCH 2/7] BlueprintCard: fix name truncation

This might be an issue with the pf6 truncate component. Since we're not
really using the popover, we can just use vanilla js to truncate the
string rather than use the Truncate component. We can match the
behaviour of the component by also splitting on 24 characters.

https://github.com/patternfly/patternfly-react/issues/11964
---
 playwright/test.spec.ts                     |  7 ++++++-
 src/Components/Blueprints/BlueprintCard.tsx | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/playwright/test.spec.ts b/playwright/test.spec.ts
index 6538c09e..593247ae 100644
--- a/playwright/test.spec.ts
+++ b/playwright/test.spec.ts
@@ -92,7 +92,12 @@ test.describe.serial('test', () => {
     await frame.getByRole('button', { name: 'Create blueprint' }).click();
 
     await expect(
-      frame.locator('.pf-v6-c-card__title-text').getByText(blueprintName),
+      frame.locator('.pf-v6-c-card__title-text').getByText(
+        // if the name is too long, the blueprint card will have a truncated name.
+        blueprintName.length > 24
+          ? blueprintName.slice(0, 24) + '...'
+          : blueprintName,
+      ),
     ).toBeVisible();
   });
 
diff --git a/src/Components/Blueprints/BlueprintCard.tsx b/src/Components/Blueprints/BlueprintCard.tsx
index 7bb47aad..8858398c 100644
--- a/src/Components/Blueprints/BlueprintCard.tsx
+++ b/src/Components/Blueprints/BlueprintCard.tsx
@@ -8,7 +8,6 @@ import {
   CardHeader,
   CardTitle,
   Spinner,
-  Truncate,
 } from '@patternfly/react-core';
 
 import { useDeleteBPWithNotification as useDeleteBlueprintMutation } from '../../Hooks';
@@ -51,11 +50,21 @@ const BlueprintCard = ({ blueprint }: blueprintProps) => {
             onChange: () => dispatch(setBlueprintId(blueprint.id)),
           }}
         >
-          <CardTitle>
+          <CardTitle aria-label={blueprint.name}>
             {isLoading && blueprint.id === selectedBlueprintId && (
               <Spinner size='md' />
             )}
-            <Truncate content={blueprint.name} position='end' />
+            {
+              // NOTE: This might be an issue with the pf6 truncate component.
+              // Since we're not really using the popover, we can just
+              // use vanilla js to truncate the string rather than use the
+              // Truncate component. We can match the behaviour of the component
+              // by also splitting on 24 characters.
+              // https://github.com/patternfly/patternfly-react/issues/11964
+              blueprint.name && blueprint.name.length > 24
+                ? blueprint.name.slice(0, 24) + '...'
+                : blueprint.name
+            }
           </CardTitle>
         </CardHeader>
         <CardBody>{blueprint.description}</CardBody>

From 859b7cace8444dff1f20794365c76d5d63091a74 Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gianlucazuccarelli@gmail.com>
Date: Thu, 21 Aug 2025 12:48:00 +0100
Subject: [PATCH 3/7] Wizard: on-prem aws region in edit

The AWS region was getting reset when going into edit mode for a blueprint.
This was because the request wasn't being properly mapped back to the correct
state.
---
 src/Components/CreateImageWizard/utilities/requestMapper.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Components/CreateImageWizard/utilities/requestMapper.ts b/src/Components/CreateImageWizard/utilities/requestMapper.ts
index bdb4e589..ae2ee53a 100644
--- a/src/Components/CreateImageWizard/utilities/requestMapper.ts
+++ b/src/Components/CreateImageWizard/utilities/requestMapper.ts
@@ -211,8 +211,9 @@ function commonRequestToState(
     snapshot_date = '';
   }
 
+  // we need to check for the region for on-prem
   const awsUploadOptions = aws?.upload_request
-    .options as AwsUploadRequestOptions;
+    .options as AwsUploadRequestOptions & { region?: string | undefined };
   const gcpUploadOptions = gcp?.upload_request
     .options as GcpUploadRequestOptions;
   const azureUploadOptions = azure?.upload_request
@@ -315,6 +316,7 @@ function commonRequestToState(
         : 'manual') as AwsShareMethod,
       source: { id: awsUploadOptions?.share_with_sources?.[0] },
       sourceId: awsUploadOptions?.share_with_sources?.[0],
+      region: awsUploadOptions?.region,
     },
     snapshotting: {
       useLatest: !snapshot_date && !request.image_requests[0]?.content_template,

From d7f844b8b6afc220fb4b69d3df1b072d089eafd5 Mon Sep 17 00:00:00 2001
From: schutzbot <schutzbot@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:34:33 +0000
Subject: [PATCH 4/7] Post release version bump

[skip ci]
---
 cockpit/cockpit-image-builder.spec | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cockpit/cockpit-image-builder.spec b/cockpit/cockpit-image-builder.spec
index 85988df4..2c739e91 100644
--- a/cockpit/cockpit-image-builder.spec
+++ b/cockpit/cockpit-image-builder.spec
@@ -1,5 +1,5 @@
 Name:           cockpit-image-builder
-Version:        75
+Version:        76
 Release:        1%{?dist}
 Summary:        Image builder plugin for Cockpit
 

From 9a17373234b8caae4d401a25ae1bea91af5e0ddb Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gianlucazuccarelli@gmail.com>
Date: Tue, 19 Aug 2025 17:29:27 +0100
Subject: [PATCH 5/7] Hooks: extract auth.getUser to its own hook

This code was being called in multiple places and was causing issues
with the on-prem frontend. Extract the logic to a single hook and only
get the `userData` for the hosted frontend.
---
 .../Blueprints/BlueprintsSideBar.tsx          | 16 ++------
 .../Blueprints/BuildImagesButton.tsx          | 21 +++-------
 .../Blueprints/DeleteBlueprintModal.tsx       | 20 +++-------
 .../steps/Registration/index.tsx              | 16 ++------
 .../steps/Review/Footer/CreateDropdown.tsx    | 29 ++------------
 .../steps/Review/Footer/EditDropdown.tsx      | 30 ++-------------
 .../steps/Review/Footer/Footer.tsx            |  8 ++--
 src/Components/ImagesTable/ImageDetails.tsx   | 16 ++------
 src/Components/ImagesTable/ImagesTable.tsx    | 38 ++-----------------
 src/Components/ImagesTable/Instance.tsx       | 16 ++------
 src/Components/ImagesTable/Status.tsx         | 16 ++------
 src/Hooks/index.tsx                           |  1 +
 src/Hooks/useGetUser.tsx                      | 24 ++++++++++++
 13 files changed, 68 insertions(+), 183 deletions(-)
 create mode 100644 src/Hooks/useGetUser.tsx

diff --git a/src/Components/Blueprints/BlueprintsSideBar.tsx b/src/Components/Blueprints/BlueprintsSideBar.tsx
index 6c1dd852..9422f8e3 100644
--- a/src/Components/Blueprints/BlueprintsSideBar.tsx
+++ b/src/Components/Blueprints/BlueprintsSideBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 
 import {
   Bullseye,
@@ -17,7 +17,6 @@ import {
 import { PlusCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 import debounce from 'lodash/debounce';
 import { Link } from 'react-router-dom';
 
@@ -29,6 +28,7 @@ import {
   PAGINATION_LIMIT,
   PAGINATION_OFFSET,
 } from '../../constants';
+import { useGetUser } from '../../Hooks';
 import { useGetBlueprintsQuery } from '../../store/backendApi';
 import {
   selectBlueprintSearchInput,
@@ -60,8 +60,8 @@ type emptyBlueprintStateProps = {
 };
 
 const BlueprintsSidebar = () => {
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
+  const { userData } = useGetUser(auth);
 
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
@@ -73,16 +73,6 @@ const BlueprintsSidebar = () => {
     offset: blueprintsOffset,
   };
 
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (blueprintSearchInput) {
     searchParams.search = blueprintSearchInput;
   }
diff --git a/src/Components/Blueprints/BuildImagesButton.tsx b/src/Components/Blueprints/BuildImagesButton.tsx
index 6304d98a..431b765b 100644
--- a/src/Components/Blueprints/BuildImagesButton.tsx
+++ b/src/Components/Blueprints/BuildImagesButton.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   Button,
@@ -16,11 +16,13 @@ import {
 } from '@patternfly/react-core';
 import { MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggle';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 import { skipToken } from '@reduxjs/toolkit/query';
 
 import { AMPLITUDE_MODULE_NAME, targetOptions } from '../../constants';
-import { useComposeBPWithNotification as useComposeBlueprintMutation } from '../../Hooks';
+import {
+  useComposeBPWithNotification as useComposeBlueprintMutation,
+  useGetUser,
+} from '../../Hooks';
 import { useGetBlueprintQuery } from '../../store/backendApi';
 import { selectSelectedBlueprintId } from '../../store/BlueprintSlice';
 import { useAppSelector } from '../../store/hooks';
@@ -37,18 +39,7 @@ export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
   const { trigger: buildBlueprint, isLoading: imageBuildLoading } =
     useComposeBlueprintMutation();
   const { analytics, auth } = useChrome();
-
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const onBuildHandler = async () => {
     if (selectedBlueprintId) {
diff --git a/src/Components/Blueprints/DeleteBlueprintModal.tsx b/src/Components/Blueprints/DeleteBlueprintModal.tsx
index afd209d5..230deeed 100644
--- a/src/Components/Blueprints/DeleteBlueprintModal.tsx
+++ b/src/Components/Blueprints/DeleteBlueprintModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import {
   Button,
@@ -9,14 +9,16 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 
 import {
   AMPLITUDE_MODULE_NAME,
   PAGINATION_LIMIT,
   PAGINATION_OFFSET,
 } from '../../constants';
-import { useDeleteBPWithNotification as useDeleteBlueprintMutation } from '../../Hooks';
+import {
+  useDeleteBPWithNotification as useDeleteBlueprintMutation,
+  useGetUser,
+} from '../../Hooks';
 import { backendApi, useGetBlueprintsQuery } from '../../store/backendApi';
 import {
   selectBlueprintSearchInput,
@@ -42,17 +44,7 @@ export const DeleteBlueprintModal: React.FunctionComponent<
   const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
   const dispatch = useAppDispatch();
   const { analytics, auth } = useChrome();
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const searchParams: GetBlueprintsApiArg = {
     limit: blueprintsLimit,
diff --git a/src/Components/CreateImageWizard/steps/Registration/index.tsx b/src/Components/CreateImageWizard/steps/Registration/index.tsx
index bd96d505..081fd54e 100644
--- a/src/Components/CreateImageWizard/steps/Registration/index.tsx
+++ b/src/Components/CreateImageWizard/steps/Registration/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import {
   ClipboardCopy,
@@ -16,6 +16,7 @@ import ActivationKeysList from './components/ActivationKeysList';
 import Registration from './components/Registration';
 import SatelliteRegistration from './components/SatelliteRegistration';
 
+import { useGetUser } from '../../../../Hooks';
 import { useAppSelector } from '../../../../store/hooks';
 import {
   selectActivationKey,
@@ -24,18 +25,7 @@ import {
 
 const RegistrationStep = () => {
   const { auth } = useChrome();
-  const [orgId, setOrgId] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    (async () => {
-      const userData = await auth.getUser();
-      const id = userData?.identity?.internal?.org_id;
-      setOrgId(id);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { orgId } = useGetUser(auth);
 
   const activationKey = useAppSelector(selectActivationKey);
   const registrationType = useAppSelector(selectRegistrationType);
diff --git a/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx b/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx
index f05d4668..ba26cfda 100644
--- a/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   Button,
@@ -14,12 +14,12 @@ import {
   Spinner,
 } from '@patternfly/react-core';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 
 import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
 import {
   useComposeBPWithNotification as useComposeBlueprintMutation,
   useCreateBPWithNotification as useCreateBlueprintMutation,
+  useGetUser,
 } from '../../../../../Hooks';
 import { setBlueprintId } from '../../../../../store/BlueprintSlice';
 import { CockpitCreateBlueprintRequest } from '../../../../../store/cockpit/types';
@@ -44,19 +44,8 @@ export const CreateSaveAndBuildBtn = ({
   setIsOpen,
   isDisabled,
 }: CreateDropdownProps) => {
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
-
   const { analytics, auth, isBeta } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const packages = useAppSelector(selectPackages);
 
@@ -113,17 +102,7 @@ export const CreateSaveButton = ({
   isDisabled,
 }: CreateDropdownProps) => {
   const { analytics, auth, isBeta } = useChrome();
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const packages = useAppSelector(selectPackages);
 
diff --git a/src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx b/src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx
index cc025a9f..6cc19cc3 100644
--- a/src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import {
   DropdownItem,
@@ -9,11 +9,11 @@ import {
   Spinner,
 } from '@patternfly/react-core';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 
 import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
 import {
   useComposeBPWithNotification as useComposeBlueprintMutation,
+  useGetUser,
   useUpdateBPWithNotification as useUpdateBlueprintMutation,
 } from '../../../../../Hooks';
 import { CockpitCreateBlueprintRequest } from '../../../../../store/cockpit/types';
@@ -37,19 +37,8 @@ export const EditSaveAndBuildBtn = ({
   blueprintId,
   isDisabled,
 }: EditDropdownProps) => {
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
-
   const { analytics, auth, isBeta } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const { trigger: buildBlueprint } = useComposeBlueprintMutation();
   const packages = useAppSelector(selectPackages);
@@ -105,19 +94,8 @@ export const EditSaveButton = ({
   blueprintId,
   isDisabled,
 }: EditDropdownProps) => {
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
-
   const { analytics, auth, isBeta } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const packages = useAppSelector(selectPackages);
 
diff --git a/src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx b/src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx
index c12d590f..f6a35745 100644
--- a/src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx
@@ -18,6 +18,7 @@ import { EditSaveAndBuildBtn, EditSaveButton } from './EditDropdown';
 
 import {
   useCreateBPWithNotification as useCreateBlueprintMutation,
+  useGetUser,
   useUpdateBPWithNotification as useUpdateBlueprintMutation,
 } from '../../../../../Hooks';
 import { resolveRelPath } from '../../../../../Utilities/path';
@@ -33,6 +34,7 @@ const ReviewWizardFooter = () => {
   const { isSuccess: isUpdateSuccess, reset: resetUpdate } =
     useUpdateBlueprintMutation({ fixedCacheKey: 'updateBlueprintKey' });
   const { auth } = useChrome();
+  const { orgId } = useGetUser(auth);
   const { composeId } = useParams();
   const [isOpen, setIsOpen] = useState(false);
   const store = useStore();
@@ -52,14 +54,12 @@ const ReviewWizardFooter = () => {
 
   const getBlueprintPayload = async () => {
     if (!process.env.IS_ON_PREMISE) {
-      const userData = await auth.getUser();
-      const orgId = userData?.identity?.internal?.org_id;
       const requestBody = orgId && mapRequestFromState(store, orgId);
       return requestBody;
     }
 
-    // NOTE: This should be fine on-prem, we should
-    // be able to ignore the `org-id`
+    // NOTE: This is fine for on prem because we save the org id
+    // to state through a form field in the registration step
     return mapRequestFromState(store, '');
   };
 
diff --git a/src/Components/ImagesTable/ImageDetails.tsx b/src/Components/ImagesTable/ImageDetails.tsx
index 809b0394..21b8a0db 100644
--- a/src/Components/ImagesTable/ImageDetails.tsx
+++ b/src/Components/ImagesTable/ImageDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import {
   Alert,
@@ -13,11 +13,11 @@ import {
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 
 import ClonesTable from './ClonesTable';
 
 import { AMPLITUDE_MODULE_NAME } from '../../constants';
+import { useGetUser } from '../../Hooks';
 import { useGetComposeStatusQuery } from '../../store/backendApi';
 import { extractProvisioningList } from '../../store/helpers';
 import {
@@ -134,19 +134,9 @@ type AwsDetailsPropTypes = {
 
 export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
   const options = compose.request.image_requests[0].upload_request.options;
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   if (!isAwsUploadRequestOptions(options)) {
     throw TypeError(
diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx
index 8c9118a1..69af395c 100644
--- a/src/Components/ImagesTable/ImagesTable.tsx
+++ b/src/Components/ImagesTable/ImagesTable.tsx
@@ -25,7 +25,6 @@ import {
   Tr,
 } from '@patternfly/react-table';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 import { useFlag } from '@unleash/proxy-client-react';
 import { useDispatch } from 'react-redux';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
@@ -59,6 +58,7 @@ import {
   SEARCH_INPUT,
   STATUS_POLLING_INTERVAL,
 } from '../../constants';
+import { useGetUser } from '../../Hooks';
 import {
   useGetBlueprintComposesQuery,
   useGetBlueprintsQuery,
@@ -94,7 +94,6 @@ import { OciLaunchModal } from '../Launch/OciLaunchModal';
 const ImagesTable = () => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
   const blueprintSearchInput =
@@ -107,16 +106,7 @@ const ImagesTable = () => {
   const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
 
   const { analytics, auth } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const searchParamsGetBlueprints: GetBlueprintsApiArg = {
     limit: blueprintsLimit,
@@ -481,18 +471,8 @@ type AwsRowPropTypes = {
 
 const AwsRow = ({ compose, composeStatus, rowIndex }: AwsRowPropTypes) => {
   const navigate = useNavigate();
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const target = <AwsTarget compose={compose} />;
   const status = <CloudStatus compose={compose} />;
@@ -567,18 +547,8 @@ const Row = ({
   details,
   instance,
 }: RowPropTypes) => {
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const [isExpanded, setIsExpanded] = useState(false);
   const handleToggle = () => setIsExpanded(!isExpanded);
diff --git a/src/Components/ImagesTable/Instance.tsx b/src/Components/ImagesTable/Instance.tsx
index 4af6f5e9..254f0b05 100644
--- a/src/Components/ImagesTable/Instance.tsx
+++ b/src/Components/ImagesTable/Instance.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, useState } from 'react';
 
 import path from 'path';
 
@@ -20,7 +20,6 @@ import {
 } from '@patternfly/react-core/dist/esm/components/List/List';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 import { useLoadModule, useScalprum } from '@scalprum/react-core';
 import cockpit from 'cockpit';
 import { useNavigate } from 'react-router-dom';
@@ -31,6 +30,7 @@ import {
   MODAL_ANCHOR,
   SEARCH_INPUT,
 } from '../../constants';
+import { useGetUser } from '../../Hooks';
 import {
   useGetBlueprintsQuery,
   useGetComposeStatusQuery,
@@ -101,19 +101,9 @@ const ProvisioningLink = ({
   composeStatus,
 }: ProvisioningLinkPropTypes) => {
   const launchEofFlag = useFlag('image-builder.launcheof');
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
 
   const { analytics, auth } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [exposedScalprumModule, error] = useLoadModule(
diff --git a/src/Components/ImagesTable/Status.tsx b/src/Components/ImagesTable/Status.tsx
index b3c4ca8a..fbe08ceb 100644
--- a/src/Components/ImagesTable/Status.tsx
+++ b/src/Components/ImagesTable/Status.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import './ImageBuildStatus.scss';
 import {
@@ -24,13 +24,13 @@ import {
   PendingIcon,
 } from '@patternfly/react-icons';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
-import { ChromeUser } from '@redhat-cloud-services/types';
 
 import {
   AMPLITUDE_MODULE_NAME,
   AWS_S3_EXPIRATION_TIME_IN_HOURS,
   OCI_STORAGE_EXPIRATION_TIME_IN_DAYS,
 } from '../../constants';
+import { useGetUser } from '../../Hooks';
 import { useGetComposeStatusQuery } from '../../store/backendApi';
 import { CockpitComposesResponseItem } from '../../store/cockpit/types';
 import {
@@ -122,18 +122,8 @@ export const CloudStatus = ({ compose }: CloudStatusPropTypes) => {
   const { data, isSuccess } = useGetComposeStatusQuery({
     composeId: compose.id,
   });
-  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
   const { analytics, auth } = useChrome();
-
-  useEffect(() => {
-    (async () => {
-      const data = await auth.getUser();
-      setUserData(data);
-    })();
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { userData } = useGetUser(auth);
 
   if (!isSuccess) {
     return <Skeleton />;
diff --git a/src/Hooks/index.tsx b/src/Hooks/index.tsx
index df6abc94..cb2f6aef 100644
--- a/src/Hooks/index.tsx
+++ b/src/Hooks/index.tsx
@@ -4,3 +4,4 @@ export { useDeleteBPWithNotification } from './MutationNotifications/useDeleteBP
 export { useFixupBPWithNotification } from './MutationNotifications/useFixupBPWithNotification';
 export { useComposeBPWithNotification } from './MutationNotifications/useComposeBPWithNotification';
 export { useCloneComposeWithNotification } from './MutationNotifications/useCloneComposeWithNotification';
+export { useGetUser } from './useGetUser';
diff --git a/src/Hooks/useGetUser.tsx b/src/Hooks/useGetUser.tsx
new file mode 100644
index 00000000..445bdf22
--- /dev/null
+++ b/src/Hooks/useGetUser.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+import { ChromeUser } from '@redhat-cloud-services/types';
+
+export const useGetUser = (auth: { getUser(): Promise<void | ChromeUser> }) => {
+  const [userData, setUserData] = useState<ChromeUser | void>(undefined);
+  const [orgId, setOrgId] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    (async () => {
+      if (!process.env.IS_ON_PREMISE) {
+        const data = await auth.getUser();
+        const id = data?.identity.internal?.org_id;
+        setUserData(data);
+        setOrgId(id);
+      }
+    })();
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { userData, orgId };
+};

From 7391652e1741cd003f6b0b056e3270f85f0b2040 Mon Sep 17 00:00:00 2001
From: Michal Gold <mgold@redhat.com>
Date: Tue, 19 Aug 2025 15:56:37 +0300
Subject: [PATCH 6/7] Wizard: Replace deprecated innerRef with ref in
 RegionsSelect MenuToggle

Replace `innerRef` prop with standard React `ref` prop in MenuToggle component
---
 src/Components/ShareImageModal/RegionsSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/ShareImageModal/RegionsSelect.tsx b/src/Components/ShareImageModal/RegionsSelect.tsx
index 13ca0dcc..abd20390 100644
--- a/src/Components/ShareImageModal/RegionsSelect.tsx
+++ b/src/Components/ShareImageModal/RegionsSelect.tsx
@@ -156,7 +156,7 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
     <MenuToggle
       variant='typeahead'
       onClick={handleToggle}
-      innerRef={toggleRef}
+      ref={toggleRef}
       isExpanded={isOpen}
     >
       <TextInputGroup isPlain>

From 080513ad6d4b9564732ce80fc007d493b4591774 Mon Sep 17 00:00:00 2001
From: robojerk <rob@raines.xyz>
Date: Tue, 26 Aug 2025 11:15:33 -0700
Subject: [PATCH 7/7] did stuff

---
 .forgejo/workflows/ci.yml          | 257 +++++++++++++++++++++++++++++
 .forgejo/workflows/ci.yml.disabled | 257 +++++++++++++++++++++++++++++
 2 files changed, 514 insertions(+)
 create mode 100644 .forgejo/workflows/ci.yml
 create mode 100644 .forgejo/workflows/ci.yml.disabled

diff --git a/.forgejo/workflows/ci.yml b/.forgejo/workflows/ci.yml
new file mode 100644
index 00000000..b6742f80
--- /dev/null
+++ b/.forgejo/workflows/ci.yml
@@ -0,0 +1,257 @@
+---
+name: Debian Image Builder Frontend CI/CD
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: "18"
+  DEBIAN_FRONTEND: noninteractive
+
+jobs:
+  build-and-test:
+    name: Build and Test Frontend
+    runs-on: ubuntu-latest
+    container:
+      image: node:18-bullseye
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        run: |
+          node --version
+          npm --version
+
+      - name: Install build dependencies
+        run: |
+          apt-get update
+          apt-get install -y \
+            build-essential \
+            git \
+            ca-certificates \
+            python3
+
+      - name: Install Node.js dependencies
+        run: |
+          npm ci
+          npm run build || echo "Build script not found"
+
+      - name: Run tests
+        run: |
+          if [ -f package.json ] && npm run test; then
+            npm test
+          else
+            echo "No test script found, skipping tests"
+          fi
+
+      - name: Run linting
+        run: |
+          if [ -f package.json ] && npm run lint; then
+            npm run lint
+          else
+            echo "No lint script found, skipping linting"
+          fi
+
+      - name: Build production bundle
+        run: |
+          if [ -f package.json ] && npm run build; then
+            npm run build
+          else
+            echo "No build script found"
+          fi
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-build
+          path: |
+            dist/
+            build/
+          retention-days: 30
+
+  package:
+    name: Package Frontend
+    runs-on: ubuntu-latest
+    container:
+      image: node:18-bullseye
+    needs: build-and-test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        run: |
+          node --version
+          npm --version
+
+      - name: Install build dependencies
+        run: |
+          apt-get update
+          apt-get install -y \
+            build-essential \
+            devscripts \
+            debhelper \
+            git \
+            ca-certificates \
+            python3
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Build production bundle
+        run: |
+          if [ -f package.json ] && npm run build; then
+            npm run build
+          else
+            echo "No build script found"
+          fi
+
+      - name: Create debian directory
+        run: |
+          mkdir -p debian
+          cat > debian/control << EOF
+Source: debian-image-builder-frontend
+Section: web
+Priority: optional
+Maintainer: Debian Forge Team <team@debian-forge.org>
+Build-Depends: debhelper (>= 13), nodejs, npm, git, ca-certificates
+Standards-Version: 4.6.2
+
+Package: debian-image-builder-frontend
+Architecture: all
+Depends: \${misc:Depends}, nodejs, nginx
+Description: Debian Image Builder Frontend
+ Web-based frontend for Debian Image Builder with Cockpit integration.
+ Provides a user interface for managing image builds, blueprints,
+ and system configurations through a modern React application.
+EOF
+
+          cat > debian/rules << EOF
+#!/usr/bin/make -f
+%:
+	dh \$@
+
+override_dh_auto_install:
+	dh_auto_install
+	mkdir -p debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend
+	mkdir -p debian/debian-image-builder-frontend/etc/nginx/sites-available
+	mkdir -p debian/debian-image-builder-frontend/etc/cockpit
+	
+	# Copy built frontend files
+	if [ -d dist ]; then
+	  cp -r dist/* debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	elif [ -d build ]; then
+	  cp -r build/* debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	fi
+	
+	# Copy source files for development
+	cp -r src debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	cp package.json debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	
+	# Create nginx configuration
+	cat > debian/debian-image-builder-frontend/etc/nginx/sites-available/debian-image-builder-frontend << 'NGINX_EOF'
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/debian-image-builder-frontend;
+    index index.html;
+    
+    location / {
+        try_files \$uri \$uri/ /index.html;
+    }
+    
+    location /api/ {
+        proxy_pass http://localhost:8080/;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+    }
+}
+NGINX_EOF
+	
+	# Create cockpit manifest
+	cat > debian/debian-image-builder-frontend/etc/cockpit/debian-image-builder.manifest << 'COCKPIT_EOF'
+{
+  "version": 1,
+  "manifest": {
+    "name": "debian-image-builder",
+    "version": "1.0.0",
+    "title": "Debian Image Builder",
+    "description": "Build and manage Debian atomic images",
+    "url": "/usr/share/debian-image-builder-frontend",
+    "icon": "debian-logo",
+    "requires": {
+      "cockpit": ">= 200"
+    }
+  }
+}
+COCKPIT_EOF
+EOF
+
+          cat > debian/changelog << EOF
+debian-image-builder-frontend (1.0.0-1) unstable; urgency=medium
+
+  * Initial release
+  * Debian Image Builder Frontend with Cockpit integration
+  * React-based web interface for image management
+
+ -- Debian Forge Team <team@debian-forge.org>  $(date -R)
+EOF
+
+          cat > debian/compat << EOF
+13
+EOF
+
+          chmod +x debian/rules
+
+      - name: Build Debian package
+        run: |
+          dpkg-buildpackage -us -uc -b
+          ls -la ../*.deb
+
+      - name: Upload Debian package
+        uses: actions/upload-artifact@v4
+        with:
+          name: debian-image-builder-frontend-deb
+          path: ../*.deb
+          retention-days: 30
+
+  cockpit-integration:
+    name: Test Cockpit Integration
+    runs-on: ubuntu-latest
+    container:
+      image: node:18-bullseye
+    needs: build-and-test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        run: |
+          node --version
+          npm --version
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Test cockpit integration
+        run: |
+          echo "Testing Cockpit integration..."
+          if [ -d cockpit ]; then
+            echo "Cockpit directory found:"
+            ls -la cockpit/
+          else
+            echo "No cockpit directory found"
+          fi
+          
+          if [ -f package.json ]; then
+            echo "Package.json scripts:"
+            npm run
+          fi
diff --git a/.forgejo/workflows/ci.yml.disabled b/.forgejo/workflows/ci.yml.disabled
new file mode 100644
index 00000000..b6742f80
--- /dev/null
+++ b/.forgejo/workflows/ci.yml.disabled
@@ -0,0 +1,257 @@
+---
+name: Debian Image Builder Frontend CI/CD
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: "18"
+  DEBIAN_FRONTEND: noninteractive
+
+jobs:
+  build-and-test:
+    name: Build and Test Frontend
+    runs-on: ubuntu-latest
+    container:
+      image: node:18-bullseye
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        run: |
+          node --version
+          npm --version
+
+      - name: Install build dependencies
+        run: |
+          apt-get update
+          apt-get install -y \
+            build-essential \
+            git \
+            ca-certificates \
+            python3
+
+      - name: Install Node.js dependencies
+        run: |
+          npm ci
+          npm run build || echo "Build script not found"
+
+      - name: Run tests
+        run: |
+          if [ -f package.json ] && npm run test; then
+            npm test
+          else
+            echo "No test script found, skipping tests"
+          fi
+
+      - name: Run linting
+        run: |
+          if [ -f package.json ] && npm run lint; then
+            npm run lint
+          else
+            echo "No lint script found, skipping linting"
+          fi
+
+      - name: Build production bundle
+        run: |
+          if [ -f package.json ] && npm run build; then
+            npm run build
+          else
+            echo "No build script found"
+          fi
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-build
+          path: |
+            dist/
+            build/
+          retention-days: 30
+
+  package:
+    name: Package Frontend
+    runs-on: ubuntu-latest
+    container:
+      image: node:18-bullseye
+    needs: build-and-test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        run: |
+          node --version
+          npm --version
+
+      - name: Install build dependencies
+        run: |
+          apt-get update
+          apt-get install -y \
+            build-essential \
+            devscripts \
+            debhelper \
+            git \
+            ca-certificates \
+            python3
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Build production bundle
+        run: |
+          if [ -f package.json ] && npm run build; then
+            npm run build
+          else
+            echo "No build script found"
+          fi
+
+      - name: Create debian directory
+        run: |
+          mkdir -p debian
+          cat > debian/control << EOF
+Source: debian-image-builder-frontend
+Section: web
+Priority: optional
+Maintainer: Debian Forge Team <team@debian-forge.org>
+Build-Depends: debhelper (>= 13), nodejs, npm, git, ca-certificates
+Standards-Version: 4.6.2
+
+Package: debian-image-builder-frontend
+Architecture: all
+Depends: \${misc:Depends}, nodejs, nginx
+Description: Debian Image Builder Frontend
+ Web-based frontend for Debian Image Builder with Cockpit integration.
+ Provides a user interface for managing image builds, blueprints,
+ and system configurations through a modern React application.
+EOF
+
+          cat > debian/rules << EOF
+#!/usr/bin/make -f
+%:
+	dh \$@
+
+override_dh_auto_install:
+	dh_auto_install
+	mkdir -p debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend
+	mkdir -p debian/debian-image-builder-frontend/etc/nginx/sites-available
+	mkdir -p debian/debian-image-builder-frontend/etc/cockpit
+	
+	# Copy built frontend files
+	if [ -d dist ]; then
+	  cp -r dist/* debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	elif [ -d build ]; then
+	  cp -r build/* debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	fi
+	
+	# Copy source files for development
+	cp -r src debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	cp package.json debian/debian-image-builder-frontend/usr/share/debian-image-builder-frontend/
+	
+	# Create nginx configuration
+	cat > debian/debian-image-builder-frontend/etc/nginx/sites-available/debian-image-builder-frontend << 'NGINX_EOF'
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/debian-image-builder-frontend;
+    index index.html;
+    
+    location / {
+        try_files \$uri \$uri/ /index.html;
+    }
+    
+    location /api/ {
+        proxy_pass http://localhost:8080/;
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+    }
+}
+NGINX_EOF
+	
+	# Create cockpit manifest
+	cat > debian/debian-image-builder-frontend/etc/cockpit/debian-image-builder.manifest << 'COCKPIT_EOF'
+{
+  "version": 1,
+  "manifest": {
+    "name": "debian-image-builder",
+    "version": "1.0.0",
+    "title": "Debian Image Builder",
+    "description": "Build and manage Debian atomic images",
+    "url": "/usr/share/debian-image-builder-frontend",
+    "icon": "debian-logo",
+    "requires": {
+      "cockpit": ">= 200"
+    }
+  }
+}
+COCKPIT_EOF
+EOF
+
+          cat > debian/changelog << EOF
+debian-image-builder-frontend (1.0.0-1) unstable; urgency=medium
+
+  * Initial release
+  * Debian Image Builder Frontend with Cockpit integration
+  * React-based web interface for image management
+
+ -- Debian Forge Team <team@debian-forge.org>  $(date -R)
+EOF
+
+          cat > debian/compat << EOF
+13
+EOF
+
+          chmod +x debian/rules
+
+      - name: Build Debian package
+        run: |
+          dpkg-buildpackage -us -uc -b
+          ls -la ../*.deb
+
+      - name: Upload Debian package
+        uses: actions/upload-artifact@v4
+        with:
+          name: debian-image-builder-frontend-deb
+          path: ../*.deb
+          retention-days: 30
+
+  cockpit-integration:
+    name: Test Cockpit Integration
+    runs-on: ubuntu-latest
+    container:
+      image: node:18-bullseye
+    needs: build-and-test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        run: |
+          node --version
+          npm --version
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Test cockpit integration
+        run: |
+          echo "Testing Cockpit integration..."
+          if [ -d cockpit ]; then
+            echo "Cockpit directory found:"
+            ls -la cockpit/
+          else
+            echo "No cockpit directory found"
+          fi
+          
+          if [ -f package.json ]; then
+            echo "Package.json scripts:"
+            npm run
+          fi