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

Add Radio with popover

Browse source 
New commponent Radio with popover is required to show properly popover in DDF wizard
This commit is contained in:
Karel Hala 2021-06-01 14:21:38 +02:00 • committed by Sanne Raymaekers
parent 2d777bd30d
commit 0644cbd584
5 changed files with 70 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,8 +40,8 @@ const CreateImage = () => {
isInline
href="
https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/uploading_a_customized_rhel_system_image_to_cloud_environments/index
">
Documentation
">
Documentation
</Button></div>,
// order in this array does not reflect order in wizard nav, this order is managed inside
// of each step by `nextStep` property!

6
src/Components/CreateImageWizard/CreateImageWizard.scss
View file

@ -1,3 +1,9 @@
.pf-c-wizard__nav-list {
padding-right: 0px;
}
.ins-c-image--builder__popover .pf-c-popover {
font-weight: initial;
visibility: initial;
pointer-events: initial;
}

4
src/Components/CreateImageWizard/ImageCreator.js
View file

@ -3,10 +3,11 @@ import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
import Pf4FormTemplate from '@data-driven-forms/pf4-component-mapper/form-template';
import { componentMapper } from '@data-driven-forms/pf4-component-mapper';
import { Spinner } from '@patternfly/react-core';
import PropTypes from 'prop-types';
import Review from './formComponents/ReviewStep';
import TargetEnvironment from './formComponents/TargetEnvironment';
import Packages from './formComponents/Packages';
import PropTypes from 'prop-types';
import RadioWithPopover from './formComponents/RadioWithPopover';
const CreateImageWizard = ({ schema, onSubmit, onClose, customComponentMapper, defaultArch }) => {
return schema ? <FormRenderer
@ -23,6 +24,7 @@ const CreateImageWizard = ({ schema, onSubmit, onClose, customComponentMapper, d
component: Packages,
defaultArch
},
'radio-popover': RadioWithPopover,
...customComponentMapper
} }
onCancel={ onClose } /> : <Spinner />;

19
src/Components/CreateImageWizard/formComponents/RadioWithPopover.js Normal file
View file

@ -0,0 +1,19 @@
import React, { useRef } from 'react';
import Radio from '@data-driven-forms/pf4-component-mapper/radio';
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> } />
</>;
};
RadioWithPopover.propTypes = {
Popover: PropTypes.elementType.isRequired,
};
export default RadioWithPopover;

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

@ -11,6 +11,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>;
export default {
title: 'Google Cloud Platform',
customTitle: <Title headingLevel="h1" size="xl">Target Environment - Google Cloud Platform</Title>,
@ -27,42 +64,9 @@ export default {
</Text>
},
{
component: componentTypes.RADIO,
label: <>Type <Popover
position="right"
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></>,
component: 'radio-popover',
label: 'Type',
Popover: PopoverInfo,
name: 'google-account-type',
initialValue: 'googleAccount',
options: Object.entries(googleAccType).map(([ value, label ]) => ({