particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix review comments

Browse source
This commit is contained in:
Karel Hala 2021-06-10 16:48:52 +02:00 • committed by Sanne Raymaekers
parent 3a1b3c0d43
commit 0c7a1500ec
6 changed files with 46 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/CreateImageWizard/WizardStepPackages.scss
View file

@ -1,3 +1,3 @@
.pf-c-dual-list-selector__menu {
--pf-c-dual-list-selector__menu--MinHeight: 20.5rem
--pf-c-dual-list-selector__menu--MinHeight: 17.5rem
}

1
src/Components/CreateImageWizard/formComponents/Packages.js
View file

@ -4,6 +4,7 @@ import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import { DualListSelector, Button, TextContent } from '@patternfly/react-core';
import api from '../../../api';
import PropTypes from 'prop-types';
import '../WizardStepPackages.scss';
const mapPackagesToComponent = (packages) => packages.map((pack, key) => (
<TextContent key={ `${pack.name}-${key}` }>

9
src/Components/CreateImageWizard/formComponents/RadioWithPopover.js
View file

@ -4,12 +4,9 @@ import PropTypes from 'prop-types';
const RadioWithPopover = ({ Popover, ...props }) => {
const ref = useRef();
return <>
<Radio { ...props } label={ <span ref={ ref } className="ins-c-image--builder__popover">{props.label}
<Popover appendTo={ ref.current } />
</span> } />
</>;
return <Radio { ...props } label={ <span ref={ ref } className="ins-c-image--builder__popover">{props.label}
<Popover appendTo={ ref?.current } />
</span> } />;
};
RadioWithPopover.propTypes = {

4
src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import { FormGroup, Tile } from '@patternfly/react-core';
import { FormGroup, Tile, Grid, GridItem } from '@patternfly/react-core';
import './TargetEnvironment.scss';
const TargetEnvironment = ({ label, isRequired, ...props }) => {
@ -41,7 +41,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
isStacked
isDisplayLarge />
<Tile
className="tile"
className="tile pf-u-mr-sm"
data-testid="upload-google"
title="Google Cloud Platform"
icon={ <img

75
src/Components/CreateImageWizard/steps/googleCloud.js
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useRef } from 'react';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
import { HelpIcon } from '@patternfly/react-icons';
@ -13,42 +13,43 @@ export const googleAccType = {
domain: 'Domain'
};
const PopoverInfo = ({ appendTo }) => <Popover
position="right"
appendTo={ appendTo }
// hasAutoWidth
maxWidth='35rem'
headerContent={ 'Valid account types' }
bodyContent={ <TextContent>
<Text>The following account types can have an image shared with them:</Text>
<TextList>
<TextListItem>
<strong>Google account:</strong> A Google account represents a developer, an administrator,
or any other person who interacts with Google Cloud. e.g., <em>`alice@gmail.com`</em>.
</TextListItem>
<TextListItem>
<strong>Service account:</strong> A service account is an account for an application instead
of an individual end user. e.g., <em>`myapp@appspot.gserviceaccount.com`</em>.
</TextListItem>
<TextListItem>
<strong>Google group:</strong> A Google group is a named collection of Google accounts and
and service accounts. e.g., <em>`admins@example.com`</em>.
</TextListItem>
<TextListItem>
<strong>Google workspace domain/Cloud identity domain:</strong> A Google workspace or cloud identity
domain represents a virtual group of all the Google accounts in an organization. These domains
represent your organization&apos;s internet domain name. e.g., <em>`mycompany.com`</em>.
</TextListItem>
</TextList>
</TextContent> }>
<Button
variant="plain"
aria-label="Account info"
aria-describedby="google-account-type"
className="pf-c-form__group-label-help">
<HelpIcon />
</Button>
</Popover>;
const PopoverInfo = ({ appendTo }) => {
return <Popover
appendTo={ appendTo }
hasAutoWidth
maxWidth='35rem'
headerContent={ 'Valid account types' }
bodyContent={ <TextContent>
<Text>The following account types can have an image shared with them:</Text>
<TextList>
<TextListItem>
<strong>Google account:</strong> A Google account represents a developer, an administrator,
or any other person who interacts with Google Cloud. e.g., <em>`alice@gmail.com`</em>.
</TextListItem>
<TextListItem>
<strong>Service account:</strong> A service account is an account for an application instead
of an individual end user. e.g., <em>`myapp@appspot.gserviceaccount.com`</em>.
</TextListItem>
<TextListItem>
<strong>Google group:</strong> A Google group is a named collection of Google accounts and
and service accounts. e.g., <em>`admins@example.com`</em>.
</TextListItem>
<TextListItem>
<strong>Google workspace domain/Cloud identity domain:</strong> A Google workspace or cloud identity
domain represents a virtual group of all the Google accounts in an organization. These domains
represent your organization&apos;s internet domain name. e.g., <em>`mycompany.com`</em>.
</TextListItem>
</TextList>
</TextContent> }>
<Button
variant="plain"
aria-label="Account info"
aria-describedby="google-account-type"
className="pf-c-form__group-label-help">
<HelpIcon />
</Button>
</Popover>;
};
PopoverInfo.propTypes = {
appendTo: PropTypes.any

1
src/Components/CreateImageWizard/steps/msAzure.js
View file

@ -51,6 +51,7 @@ export default {
'data-testid': 'azure-tenant-id',
type: 'text',
label: 'Tenant ID',
required: true,
isRequired: true,
validate: [
{