cloudConfig: add aws config fields

src/Components/CloudProviderConfig/AWSConfig.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { Form, FormGroup } from '@patternfly/react-core';
+
+import { isAwsBucketValid, isAwsCredsPathValid } from './validators';
+
+import {
+  changeAWSBucketName,
+  changeAWSCredsPath,
+  selectAWSBucketName,
+  selectAWSCredsPath,
+} from '../../store/cloudProviderConfigSlice';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { ValidatedInput } from '../CreateImageWizard/ValidatedInput';
+
+type FormGroupProps = {
+  value: string | undefined;
+  setValue: (value: string) => void;
+};
+
+const AWSBucket = ({ value, setValue }: FormGroupProps) => {
+  return (
+    <FormGroup label="AWS Bucket">
+      <ValidatedInput
+        ariaLabel="aws-bucket"
+        value={value || ''}
+        validator={isAwsBucketValid}
+        onChange={(_event, value) => setValue(value)}
+        helperText="Invalid AWS bucket name"
+      />
+    </FormGroup>
+  );
+};
+
+const AWSCredsPath = ({ value, setValue }: FormGroupProps) => {
+  return (
+    <FormGroup label="AWS Credentials Filepath">
+      <ValidatedInput
+        ariaLabel="aws-creds-path"
+        value={value || ''}
+        validator={isAwsCredsPathValid}
+        onChange={(_event, value) => setValue(value)}
+        helperText="Invalid filepath for AWS credentials"
+      />
+    </FormGroup>
+  );
+};
+
+export const AWSConfig = () => {
+  const dispatch = useAppDispatch();
+  const bucket = useAppSelector(selectAWSBucketName);
+  const credentials = useAppSelector(selectAWSCredsPath);
+
+  // TODO: maybe add a radio button to toggle AWS configuration
+  // on or off - this might simplify validation & the overall
+  // experience
+
+  return (
+    <Form>
+      <AWSBucket
+        value={bucket}
+        setValue={(v) => dispatch(changeAWSBucketName(v))}
+      />
+      <AWSCredsPath
+        value={credentials}
+        setValue={(v) => dispatch(changeAWSCredsPath(v))}
+      />
+    </Form>
+  );
+};

src/Components/CloudProviderConfig/CloudProviderConfig.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { PageSection, Wizard, WizardStep } from '@patternfly/react-core';
+import { useNavigate } from 'react-router-dom';
+
+import { AWSConfig } from './AWSConfig';
+
+import { resolveRelPath } from '../../Utilities/path';
+import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
+
+export const CloudProviderConfig = () => {
+  const navigate = useNavigate();
+  const handleClose = () => navigate(resolveRelPath(''));
+
+  // TODO: add custom wizard footer
+  return (
+    <>
+      <ImageBuilderHeader inWizard={true} />
+      <PageSection>
+        <Wizard onClose={handleClose}>
+          <WizardStep name="AWS Config" id="aws-config">
+            <AWSConfig />
+          </WizardStep>
+        </Wizard>
+      </PageSection>
+    </>
+  );
+};

src/Components/CloudProviderConfig/validators/index.tsx

@@ -0,0 +1,11 @@
+import path from 'path';
+
+export const isAwsBucketValid = (bucket: string): boolean => {
+  const regex = /^[a-z0-9](?:[a-z0-9]|[-.](?=[a-z0-9])){1,61}[a-z0-9]$/;
+  return regex.test(bucket);
+};
+
+export const isAwsCredsPathValid = (credsPath: string): boolean => {
+  const validPathPattern = /^(\/[^/\0]*)+\/?$/;
+  return path.isAbsolute(credsPath) && validPathPattern.test(credsPath);
+};

src/Components/sharedComponents/ImageBuilderHeader.tsx

@@ -123,6 +123,18 @@ export const ImageBuilderHeader = ({
                       Import
                     </Button>
                   )}
+                  {process.env.IS_ON_PREMISE && (
+                    <Button
+                      variant="secondary"
+                      data-testid="cloud-env-configure-button"
+                      ouiaId="cloud-env-configure-button"
+                      onClick={() =>
+                        navigate(resolveRelPath('cloud-provider-config'))
+                      }
+                    >
+                      Configure Cloud Providers
+                    </Button>
+                  )}
                 </Flex>
               )}
             </>

src/Router.tsx

@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from 'react';
 
 import { Route, Routes } from 'react-router-dom';
 
+import { CloudProviderConfig } from './Components/CloudProviderConfig/CloudProviderConfig';
 import ShareImageModal from './Components/ShareImageModal/ShareImageModal';
 import { useFlagWithEphemDefault } from './Utilities/useGetEnvironment';
 
@@ -46,6 +47,16 @@ export const Router = () => {
           </Suspense>
         }
       />
+      {process.env.IS_ON_PREMISE && (
+        <Route
+          path={'/cloud-provider-config'}
+          element={
+            <Suspense>
+              <CloudProviderConfig />
+            </Suspense>
+          }
+        />
+      )}
     </Routes>
   );
 };