CreateImageWizard: update azure text and field order

The info text is updated and the authorize button is moved below tenant
ID. The tenant ID is now validated as a valid GUID and if is not valid
the authorize button is disabled. This tenant id is now used to validate
image builder on azure because the authorize url containing the tenant
id will authorize for any microsoft account type. Tests are also
updated.

src/Components/CreateImageWizard/ImageCreator.js

@@ -8,6 +8,7 @@ import Review from './formComponents/ReviewStep';
 import TargetEnvironment from './formComponents/TargetEnvironment';
 import Packages from './formComponents/Packages';
 import RadioWithPopover from './formComponents/RadioWithPopover';
+import AzureAuthButton from './formComponents/AzureAuthButton';
 import Select from '@data-driven-forms/pf4-component-mapper/select';
 
 const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaultArch, className, ...props }) => {
@@ -27,6 +28,7 @@ const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaul
                 defaultArch
             },
             'radio-popover': RadioWithPopover,
+            'azure-auth-button': AzureAuthButton,
             ...customComponentMapper
         } }
         onCancel={ onClose }

src/Components/CreateImageWizard/formComponents/AzureAuthButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, FormGroup } from '@patternfly/react-core';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+
+const AzureAuthButton = () => {
+    const { getState } = useFormApi();
+
+    const tenantId = getState()?.values?.['azure-tenant-id'];
+    const guidRegex = new RegExp('^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$', 'i');
+
+    return (
+        <FormGroup>
+            <Button
+                component="a"
+                target="_blank"
+                variant="secondary"
+                isDisabled={ !guidRegex.test(tenantId) }
+                href={ 'https://login.microsoftonline.com/' + tenantId +
+                '/oauth2/v2.0/authorize?client_id=b94bb246-b02c-4985-9c22-d44e66f657f4&scope=openid&' +
+                'response_type=code&response_mode=form_post&redirect_uri=https%3A%2F%2Flogin.microsoftonline.com%2Fcommon%2Foauth2%2Fnativeclient' }>
+                Authorize Image Builder
+            </Button>
+        </FormGroup>);
+};
+
+export default AzureAuthButton;

src/Components/CreateImageWizard/steps/msAzure.js

@@ -17,12 +17,12 @@ export default {
             name: 'azure-text-component',
             label: <>
                 <Text>
-            Image Builder will send an image to an authorized Azure account.
+            Image Builder will upload an image to an authorized Azure account.
                 </Text>
-                <Title headingLevel="h3">OAuth permissions</Title>
+                <Title headingLevel="h3">Authorizing an Azure account</Title>
                 <Text>
             To authorize Image Builder to push images to Microsoft Azure, the account owner
-            must configure Image Builder as an authorized application and give it the role of
+            must configure Image Builder as an authorized application for a specific tenant ID and give it the role of
             &quot;Contributor&quot; to at least one resource group.<br />
                 </Text>
                 <small>
@@ -37,30 +37,12 @@ export default {
                       Learn more about OAuth 2.0
                     </Button>
                 </small>
-                <a href="https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=b94bb246-b02c-4985-9c22-d44e66f657f4
-&scope=openid&response_type=code&response_mode=form_post
-&redirect_uri=https%3A%2F%2Flogin.microsoftonline.com%2Fcommon%2Foauth2%2Fnativeclient" target="_blank" rel="noopener noreferrer">
-            Authorize Image Builder on Azure <ExternalLinkAltIcon />
-                </a>
-                <Title headingLevel="h3">Destination</Title>
+                <Title headingLevel="h2">Image Destination</Title>
                 <Text>
                     Your image will be uploaded to the resource group in the subscription you specify.
                 </Text>
             </>
         },
-        {
-            component: componentTypes.TEXT_FIELD,
-            name: 'azure-subscription-id',
-            'data-testid': 'azure-subscription-id',
-            type: 'text',
-            label: 'Subscription ID',
-            isRequired: true,
-            validate: [
-                {
-                    type: validatorTypes.REQUIRED,
-                },
-            ],
-        },
         {
             component: componentTypes.TEXT_FIELD,
             name: 'azure-tenant-id',
@@ -69,6 +51,31 @@ export default {
             label: 'Tenant ID',
             required: true,
             isRequired: true,
+            validate: [
+                {
+                    type: validatorTypes.REQUIRED,
+                },
+                {
+                    type: validatorTypes.PATTERN,
+                    pattern: /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
+                    message: 'Please enter a valid tenant GUID',
+                }
+            ],
+        },
+        {
+            component: 'azure-auth-button',
+            name: 'azure-auth-button',
+            'data-testid': 'azure-auth-button',
+            required: true,
+            isRequired: true,
+        },
+        {
+            component: componentTypes.TEXT_FIELD,
+            name: 'azure-subscription-id',
+            'data-testid': 'azure-subscription-id',
+            type: 'text',
+            label: 'Subscription ID',
+            isRequired: true,
             validate: [
                 {
                     type: validatorTypes.REQUIRED,