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.
This commit is contained in:
Jacob Kozol
jkozol
parent
e51800e1ba
commit
913cd9a785
5 changed files with 63 additions and 26 deletions
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
"Contributor" 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,
|
||||
|
|
|
|||
|
|
@ -253,7 +253,8 @@ describe('Step Upload to Azure', () => {
|
|||
});
|
||||
|
||||
test('clicking Next loads Registration', () => {
|
||||
userEvent.type(screen.getByTestId('azure-tenant-id'), 'testTenant');
|
||||
// Randomly generated GUID
|
||||
userEvent.type(screen.getByTestId('azure-tenant-id'), 'b8f86d22-4371-46ce-95e7-65c415f3b1e2');
|
||||
userEvent.type(screen.getByTestId('azure-subscription-id'), 'testSubscriptionId');
|
||||
userEvent.type(screen.getByTestId('azure-resource-group'), 'testResourceGroup');
|
||||
|
||||
|
|
@ -518,7 +519,8 @@ describe('Click through all steps', () => {
|
|||
userEvent.type(screen.getByTestId('input-google-email'), 'test@test.com');
|
||||
screen.getByRole('button', { name: /Next/ }).click();
|
||||
|
||||
userEvent.type(screen.getByTestId('azure-tenant-id'), 'testTenant');
|
||||
// Randomly generated GUID
|
||||
userEvent.type(screen.getByTestId('azure-tenant-id'), 'b8f86d22-4371-46ce-95e7-65c415f3b1e2');
|
||||
userEvent.type(screen.getByTestId('azure-subscription-id'), 'testSubscriptionId');
|
||||
userEvent.type(screen.getByTestId('azure-resource-group'), 'testResourceGroup');
|
||||
screen.getByRole('button', { name: /Next/ }).click();
|
||||
|
|
@ -629,7 +631,7 @@ describe('Click through all steps', () => {
|
|||
upload_request: {
|
||||
type: 'azure',
|
||||
options: {
|
||||
tenant_id: 'testTenant',
|
||||
tenant_id: 'b8f86d22-4371-46ce-95e7-65c415f3b1e2',
|
||||
subscription_id: 'testSubscriptionId',
|
||||
resource_group: 'testResourceGroup',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@ const store = {
|
|||
upload_request: {
|
||||
type: 'azure',
|
||||
options: {
|
||||
tenant_id: 'test-tenant-id',
|
||||
tenant_id: 'b8f86d22-4371-46ce-95e7-65c415f3b1e2',
|
||||
subscription_id: 'test-subscription-id',
|
||||
resource_group: 'test-resource-group'
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue