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={ } 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 = () => { Default region - us-east-1 + + {region || 'us-east-1'} + ); 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 = { + value: string; + onChange: (value: T) => void; +}; + +const AWSRegion = ({ value, onChange }: FormGroupProps) => { + const [isOpen, setIsOpen] = useState(false); + + const onSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined, + ) => { + onChange(value as string); + setIsOpen(false); + }; + + const toggle = (toggleRef: React.Ref) => ( + setIsOpen(!isOpen)} + isExpanded={isOpen} + style={ + { + width: '100%', + } as React.CSSProperties + } + > + {value} + + ); + + return ( + + ); +}; + const Aws = () => { const dispatch = useAppDispatch(); const shareMethod = useAppSelector(selectAwsShareMethod); const shareWithAccount = useAppSelector(selectAwsAccountId); + const region = useAppSelector(selectAwsRegion); return (
@@ -62,40 +118,42 @@ const Aws = () => { Your image will be uploaded to AWS and shared with the account you provide below. - - The shared image will expire within 14 days. To permanently - access the image, copy the image, which will be shared to your account - by Red Hat, to your own AWS account. - - - {!process.env.IS_ON_PREMISE && ( - { - dispatch(changeAwsSourceId(undefined)); - dispatch(changeAwsAccountId('')); - dispatch(changeAwsShareMethod('sources')); - }} - autoFocus - /> - )} - { - dispatch(changeAwsSourceId(undefined)); - dispatch(changeAwsAccountId('')); - dispatch(changeAwsShareMethod('manual')); - }} - autoFocus={!!process.env.IS_ON_PREMISE} - /> - + {!process.env.IS_ON_PREMISE && ( + <> + + The shared image will expire within 14 days. To permanently + access the image, copy the image, which will be shared to your + account by Red Hat, to your own AWS account. + + + { + dispatch(changeAwsSourceId(undefined)); + dispatch(changeAwsAccountId('')); + dispatch(changeAwsShareMethod('sources')); + }} + autoFocus + /> + { + dispatch(changeAwsSourceId(undefined)); + dispatch(changeAwsAccountId('')); + dispatch(changeAwsShareMethod('manual')); + }} + autoFocus={!!process.env.IS_ON_PREMISE} + /> + + + )} {shareMethod === 'sources' && ( <> @@ -125,22 +183,34 @@ const Aws = () => { )} {shareMethod === 'manual' && ( <> - - dispatch(changeAwsAccountId(value))} - helperText="Should be 12 characters long." - /> - + {!process.env.IS_ON_PREMISE && ( + + + dispatch(changeAwsAccountId(value)) + } + helperText="Should be 12 characters long." + /> + + )} - + {!process.env.IS_ON_PREMISE && ( + + )} + {process.env.IS_ON_PREMISE && ( + dispatch(changeAwsRegion(v))} + /> + )} )}