From 4339420cb83c80a2e4e47c8d174a59d3073c8449 Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gianlucazuccarelli@gmail.com>
Date: Tue, 1 Jul 2025 16:19:09 +0100
Subject: [PATCH] Wizard: add region selector for on-prem AWS

We need to be able to select the region for AWS targets in the frontend
image builder. This commit adds the field to the wizard, but doesn't
wire this up to the api call just yet.
---
 .../CreateImageWizard/CreateImageWizard.tsx   |  10 +-
 .../steps/Review/ReviewStepTextLists.tsx      |   6 +-
 .../steps/TargetEnvironment/Aws/index.tsx     | 170 ++++++++++++------
 3 files changed, 132 insertions(+), 54 deletions(-)

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx
index bcaa79e6..2999d1a5 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.tsx
+++ b/src/Components/CreateImageWizard/CreateImageWizard.tsx
@@ -404,9 +404,13 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 footer={
                   <CustomWizardFooter
                     disableNext={
-                      awsShareMethod === 'manual'
-                        ? !isAwsAccountIdValid(awsAccountId)
-                        : awsSourceId === undefined
+                      // we don't need the account id for
+                      // on-prem aws.
+                      process.env.IS_ON_PREMISE
+                        ? false
+                        : awsShareMethod === 'manual'
+                          ? !isAwsAccountIdValid(awsAccountId)
+                          : awsSourceId === undefined
                     }
                   />
                 }
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
index 6a539ac3..03fc4b01 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
@@ -44,6 +44,7 @@ import {
   selectActivationKey,
   selectArchitecture,
   selectAwsAccountId,
+  selectAwsRegion,
   selectAwsShareMethod,
   selectAwsSourceId,
   selectAzureResourceGroup,
@@ -225,6 +226,7 @@ export const TargetEnvAWSList = () => {
   const awsAccountId = useAppSelector(selectAwsAccountId);
   const awsShareMethod = useAppSelector(selectAwsShareMethod);
   const sourceId = useAppSelector(selectAwsSourceId);
+  const region = useAppSelector(selectAwsRegion);
   const { source } = useGetSourceListQuery(
     {
       provider: 'aws',
@@ -261,7 +263,9 @@ export const TargetEnvAWSList = () => {
         <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
           Default region
         </Content>
-        <Content component={ContentVariants.dd}>us-east-1</Content>
+        <Content component={ContentVariants.dd}>
+          {region || 'us-east-1'}
+        </Content>
       </Content>
     </Content>
   );
diff --git a/src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx b/src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx
index 8de40831..bcbaffc9 100644
--- a/src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx
+++ b/src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   Button,
@@ -9,7 +9,11 @@ import {
   GalleryItem,
   HelperText,
   HelperTextItem,
+  MenuToggle,
+  MenuToggleElement,
   Radio,
+  Select,
+  SelectOption,
   TextInput,
   Title,
 } from '@patternfly/react-core';
@@ -18,12 +22,15 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { AwsAccountId } from './AwsAccountId';
 import { AwsSourcesSelect } from './AwsSourcesSelect';
 
+import { AWS_REGIONS } from '../../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
 import {
   changeAwsAccountId,
+  changeAwsRegion,
   changeAwsShareMethod,
   changeAwsSourceId,
   selectAwsAccountId,
+  selectAwsRegion,
   selectAwsShareMethod,
 } from '../../../../../store/wizardSlice';
 import { ValidatedInput } from '../../../ValidatedInput';
@@ -47,11 +54,60 @@ const SourcesButton = () => {
   );
 };
 
+type FormGroupProps<T> = {
+  value: string;
+  onChange: (value: T) => void;
+};
+
+const AWSRegion = ({ value, onChange }: FormGroupProps<string>) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    onChange(value as string);
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '100%',
+        } as React.CSSProperties
+      }
+    >
+      {value}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      isOpen={isOpen}
+      selected={value}
+      onSelect={onSelect}
+      onOpenChange={() => setIsOpen(!isOpen)}
+      toggle={toggle}
+    >
+      {AWS_REGIONS.map(({ description, value: region }) => (
+        <SelectOption key={description} value={region}>
+          {region}
+        </SelectOption>
+      ))}
+    </Select>
+  );
+};
+
 const Aws = () => {
   const dispatch = useAppDispatch();
 
   const shareMethod = useAppSelector(selectAwsShareMethod);
   const shareWithAccount = useAppSelector(selectAwsAccountId);
+  const region = useAppSelector(selectAwsRegion);
 
   return (
     <Form>
@@ -62,40 +118,42 @@ const Aws = () => {
         Your image will be uploaded to AWS and shared with the account you
         provide below.
       </Content>
-      <Content>
-        <b>The shared image will expire within 14 days.</b> To permanently
-        access the image, copy the image, which will be shared to your account
-        by Red Hat, to your own AWS account.
-      </Content>
-      <FormGroup label="Share method:">
-        {!process.env.IS_ON_PREMISE && (
-          <Radio
-            id="radio-with-description"
-            label="Use an account configured from Sources."
-            name="radio-7"
-            description="Use a configured source to launch environments directly from the console."
-            isChecked={shareMethod === 'sources'}
-            onChange={() => {
-              dispatch(changeAwsSourceId(undefined));
-              dispatch(changeAwsAccountId(''));
-              dispatch(changeAwsShareMethod('sources'));
-            }}
-            autoFocus
-          />
-        )}
-        <Radio
-          id="radio"
-          label="Manually enter an account ID."
-          name="radio-8"
-          isChecked={shareMethod === 'manual'}
-          onChange={() => {
-            dispatch(changeAwsSourceId(undefined));
-            dispatch(changeAwsAccountId(''));
-            dispatch(changeAwsShareMethod('manual'));
-          }}
-          autoFocus={!!process.env.IS_ON_PREMISE}
-        />
-      </FormGroup>
+      {!process.env.IS_ON_PREMISE && (
+        <>
+          <Content>
+            <b>The shared image will expire within 14 days.</b> To permanently
+            access the image, copy the image, which will be shared to your
+            account by Red Hat, to your own AWS account.
+          </Content>
+          <FormGroup label="Share method:">
+            <Radio
+              id="radio-with-description"
+              label="Use an account configured from Sources."
+              name="radio-7"
+              description="Use a configured source to launch environments directly from the console."
+              isChecked={shareMethod === 'sources'}
+              onChange={() => {
+                dispatch(changeAwsSourceId(undefined));
+                dispatch(changeAwsAccountId(''));
+                dispatch(changeAwsShareMethod('sources'));
+              }}
+              autoFocus
+            />
+            <Radio
+              id="radio"
+              label="Manually enter an account ID."
+              name="radio-8"
+              isChecked={shareMethod === 'manual'}
+              onChange={() => {
+                dispatch(changeAwsSourceId(undefined));
+                dispatch(changeAwsAccountId(''));
+                dispatch(changeAwsShareMethod('manual'));
+              }}
+              autoFocus={!!process.env.IS_ON_PREMISE}
+            />
+          </FormGroup>
+        </>
+      )}
       {shareMethod === 'sources' && (
         <>
           <AwsSourcesSelect />
@@ -125,22 +183,34 @@ const Aws = () => {
       )}
       {shareMethod === 'manual' && (
         <>
-          <FormGroup label="AWS account ID" isRequired>
-            <ValidatedInput
-              ariaLabel="aws account id"
-              value={shareWithAccount || ''}
-              validator={isAwsAccountIdValid}
-              onChange={(_event, value) => dispatch(changeAwsAccountId(value))}
-              helperText="Should be 12 characters long."
-            />
-          </FormGroup>
+          {!process.env.IS_ON_PREMISE && (
+            <FormGroup label="AWS account ID" isRequired>
+              <ValidatedInput
+                ariaLabel="aws account id"
+                value={shareWithAccount || ''}
+                validator={isAwsAccountIdValid}
+                onChange={(_event, value) =>
+                  dispatch(changeAwsAccountId(value))
+                }
+                helperText="Should be 12 characters long."
+              />
+            </FormGroup>
+          )}
           <FormGroup label="Default region" isRequired>
-            <TextInput
-              value={'us-east-1'}
-              type="text"
-              aria-label="default region"
-              readOnlyVariant="default"
-            />
+            {!process.env.IS_ON_PREMISE && (
+              <TextInput
+                value={'us-east-1'}
+                type="text"
+                aria-label="default region"
+                readOnlyVariant="default"
+              />
+            )}
+            {process.env.IS_ON_PREMISE && (
+              <AWSRegion
+                value={region || ''}
+                onChange={(v) => dispatch(changeAwsRegion(v))}
+              />
+            )}
           </FormGroup>
         </>
       )}