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

Wizard: add description field to Details steps

Browse source
This commit is contained in:
mgold1234 2023-07-23 21:29:16 +03:00 • committed by Lucas Garfield
parent 082dbf5de1
commit 7cb3f2d0b6
7 changed files with 110 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,6 +103,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -138,6 +139,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -167,6 +169,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -189,6 +192,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -208,6 +212,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -227,6 +232,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -246,6 +252,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -290,6 +297,7 @@ const requestToState = (composeRequest, distroInfo, isBeta, isProd) => {
const formState = {};
formState['image-name'] = composeRequest.image_name;
formState['image-description'] = composeRequest.image_description;
formState.release = composeRequest?.distribution;
// set defaults for target environment first
@ -472,7 +480,6 @@ const formStepHistory = (composeRequest, isBeta) => {
} else {
steps.push('File system configuration', 'packages');
}
steps.push('details');
return steps;

20
src/Components/CreateImageWizard/formComponents/ReviewStep.js
View file

@ -147,17 +147,15 @@ const ReviewStep = () => {
) && <RegisterNowList />}
</ExpandableSection>
)}
{getState()?.values?.['image-name'] && (
<ExpandableSection
toggleContent={'Image details'}
onToggle={onToggleImageDetail}
isExpanded={isExpandedImageDetail}
isIndented
data-testid="image-details-expandable"
>
<ImageDetailsList />
</ExpandableSection>
)}
<ExpandableSection
toggleContent={'Image details'}
onToggle={onToggleImageDetail}
isExpanded={isExpandedImageDetail}
isIndented
data-testid="image-details-expandable"
>
<ImageDetailsList />
</ExpandableSection>
</>
);
};

20
src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js
View file

@ -544,10 +544,13 @@ export const RegisterNowList = () => {
export const ImageDetailsList = () => {
const { getState } = useFormApi();
const imageName = getState()?.values?.['image-name'];
const imageDescription = getState()?.values?.['image-description'];
return (
<TextContent>
<TextList component={TextListVariants.dl}>
{getState()?.values?.['image-name'] && (
{imageName && (
<>
<TextListItem
component={TextListItemVariants.dt}
@ -556,7 +559,20 @@ export const ImageDetailsList = () => {
Image name
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{getState()?.values?.['image-name']}
{imageName}
</TextListItem>
</>
)}
{imageDescription && (
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
>
Description
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{imageDescription}
</TextListItem>
</>
)}

26
src/Components/CreateImageWizard/steps/imageName.js
View file

@ -1,12 +1,20 @@
import React from 'react';
import { useFormApi } from '@data-driven-forms/react-form-renderer';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
import { Flex, FlexItem, Text } from '@patternfly/react-core';
import StepTemplate from './stepTemplate';
import CustomButtons from '../formComponents/CustomButtons';
const CharacterCount = () => {
const { getState } = useFormApi();
const description = getState().values?.['image-description'];
return <h1>{description?.length || 0}/250</h1>;
};
export default {
StepTemplate,
id: 'wizard-details',
@ -43,5 +51,23 @@ export default {
},
],
},
{
component: componentTypes.TEXTAREA,
name: 'image-description',
type: 'text',
label: (
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<FlexItem>
<Text component={'b'}>Description</Text>
</FlexItem>
<FlexItem>
<CharacterCount />
</FlexItem>
</Flex>
),
placeholder: 'Add Description',
resizeOrientation: 'vertical',
validate: [{ type: validatorTypes.MAX_LENGTH, threshold: 250 }],
},
],
};