Skip to content

Commit

Permalink
V2Wizard: add components to the review step
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgold1234
mgold1234 committed Jan 28, 2024
1 parent 7c5ae94 commit 4c14cd1
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 213 deletions.
9 changes: 4 additions & 5 deletions src/Components/CreateImageWizardV2/CreateImageWizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import ImageOutputStep from './steps/ImageOutput';
import OscapStep from './steps/Oscap';
import RegistrationStep from './steps/Registration';
import RepositoriesStep from './steps/Repositories';
import ReviewStep from './steps/Review';
import Aws from './steps/TargetEnvironment/Aws';
import Gcp from './steps/TargetEnvironment/Gcp';
import {
Expand Down Expand Up @@ -208,11 +209,9 @@ const CreateImageWizard = () => {
>
<DetailsStep />
</WizardStep>
<WizardStep
name="Review"
id="step-review"
footer={<CustomWizardFooter disableNext={true} />}
></WizardStep>
<WizardStep name="Review" id="step-review">
<ReviewStep />
</WizardStep>
</Wizard>
</section>
</>
Expand Down
108 changes: 55 additions & 53 deletions src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import React, { useEffect, useState } from 'react';

import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import {
ExpandableSection,
Text,
TextContent,
TextVariants,
} from '@patternfly/react-core';
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';

import RepositoryUnavailable from './RepositoryUnavailable';
import {
ContentList,
FSCList,
Expand All @@ -24,52 +21,70 @@ import {
TargetEnvOciList,
TargetEnvOtherList,
} from './ReviewStepTextLists';
import UsrSubDirectoriesDisabled from './UsrSubDirectoriesDisabled';

import isRhel from '../../../Utilities/isRhel';
import isRhel from '../../../../../src/Utilities/isRhel';
import { useAppSelector } from '../../../../store/hooks';
import {
selectBlueprintDescription,
selectBlueprintName,
selectDistribution,
selectImageTypes,
selectProfile,
selectRegistrationType,
} from '../../../../store/wizardSlice';

const ReviewStep = () => {
const { auth } = useChrome();
const Review = () => {
const registrationType = useAppSelector((state) =>
selectRegistrationType(state)
);
// const configurationType = useAppSelector((state) =>
// selectConfigurationType(state)
// );
const distribution = useAppSelector((state) => selectDistribution(state));
const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false);
const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(false);
const [isExpandedFSC, setIsExpandedFSC] = useState(false);
const [isExpandedContent, setIsExpandedContent] = useState(false);
const [isExpandedRegistration, setIsExpandedRegistration] = useState(false);
const [isExpandedImageDetail, setIsExpandedImageDetail] = useState(false);
const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(false);
const { change, getState } = useFormApi();

const environments = useAppSelector((state) => selectImageTypes(state));
const blueprintName = useAppSelector((state) => selectBlueprintName(state));
const blueprintDescription = useAppSelector((state) =>
selectBlueprintDescription(state)
);
const oscapProfile = useAppSelector((state) => selectProfile(state));
useEffect(() => {
const registerSystem = getState()?.values?.['register-system'];
if (registerSystem?.startsWith('register-now')) {
if (registrationType?.startsWith('register-now')) {
(async () => {
const userData = await auth?.getUser();
const id = userData?.identity?.internal?.org_id;
change('subscription-organization-id', id);
// const userData = await auth?.getUser();
// const id = userData?.identity?.internal?.org_id;
// dispatch(changeOrganizationId(id));
})();
}
});

const onToggleImageOutput = (isExpandedImageOutput) =>
const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
setIsExpandedImageOutput(isExpandedImageOutput);
const onToggleTargetEnvs = (isExpandedTargetEnvs) =>
const onToggleTargetEnvs = (isExpandedTargetEnvs: boolean) =>
setIsExpandedTargetEnvs(isExpandedTargetEnvs);
const onToggleFSC = (isExpandedFSC) => setIsExpandedFSC(isExpandedFSC);
const onToggleContent = (isExpandedContent) =>
const onToggleFSC = (isExpandedFSC: boolean) =>
setIsExpandedFSC(isExpandedFSC);
const onToggleContent = (isExpandedContent: boolean) =>
setIsExpandedContent(isExpandedContent);
const onToggleRegistration = (isExpandedRegistration) =>
const onToggleRegistration = (isExpandedRegistration: boolean) =>
setIsExpandedRegistration(isExpandedRegistration);
const onToggleImageDetail = (isExpandedImageDetail) =>
const onToggleImageDetail = (isExpandedImageDetail: boolean) =>
setIsExpandedImageDetail(isExpandedImageDetail);
const onToggleOscapDetails = (isExpandedOscapDetail) =>
const onToggleOscapDetails = (isExpandedOscapDetail: boolean) =>
setIsExpandedOscapDetail(isExpandedOscapDetail);

return (
<>
<RepositoryUnavailable />
{getState()?.values?.['file-system-configuration']?.find((mp) =>
mp.mountpoint.includes('/usr')
) && <UsrSubDirectoriesDisabled />}
{/* } <RepositoryUnavailable />
{getState()?.values?.['file-system-configuration']?.find((mp) =>
mp.mountpoint.includes('/usr')
) && <UsrSubDirectoriesDisabled />}*/}
<ExpandableSection
toggleContent={'Image output'}
onToggle={(_event, isExpandedImageOutput) =>
Expand All @@ -90,47 +105,39 @@ const ReviewStep = () => {
isIndented
data-testid="target-environments-expandable"
>
{getState()?.values?.['target-environment']?.aws && (
<TargetEnvAWSList />
)}
{getState()?.values?.['target-environment']?.gcp && (
<TargetEnvGCPList />
)}
{getState()?.values?.['target-environment']?.azure && (
<TargetEnvAzureList />
)}
{getState()?.values?.['target-environment']?.oci && (
<TargetEnvOciList />
)}
{getState()?.values?.['target-environment']?.vsphere && (
{environments.includes('aws') && <TargetEnvAWSList />}
{environments.includes('gcp') && <TargetEnvGCPList />}
{environments.includes('azure') && <TargetEnvAzureList />}
{environments.includes('oci') && <TargetEnvOciList />}
{environments.includes('vsphere') && (
<TextContent>
<Text component={TextVariants.h3}>VMware vSphere (.vmdk)</Text>
<TargetEnvOtherList />
</TextContent>
)}
{getState()?.values?.['target-environment']?.['vsphere-ova'] && (
{environments.includes('vsphere-ova') && (
<TextContent>
<Text component={TextVariants.h3}>VMware vSphere (.ova)</Text>
<TargetEnvOtherList />
</TextContent>
)}
{getState()?.values?.['target-environment']?.['guest-image'] && (
{environments.includes('guest-image') && (
<TextContent>
<Text component={TextVariants.h3}>
Virtualization - Guest image (.qcow2)
</Text>
<TargetEnvOtherList />
</TextContent>
)}
{getState()?.values?.['target-environment']?.['image-installer'] && (
{environments.includes('image-installer') && (
<TextContent>
<Text component={TextVariants.h3}>
Bare metal - Installer (.iso)
</Text>
<TargetEnvOtherList />
</TextContent>
)}
{getState()?.values?.['target-environment']?.wsl && (
{environments.includes('wsl') && (
<TextContent>
<Text component={TextVariants.h3}>
WSL - Windows Subsystem for Linux (.tar.gz)
Expand Down Expand Up @@ -159,7 +166,7 @@ const ReviewStep = () => {
>
<ContentList />
</ExpandableSection>
{isRhel(getState()?.values?.release) && (
{isRhel(distribution) && (
<ExpandableSection
toggleContent={'Registration'}
onToggle={(_event, isExpandedRegistration) =>
Expand All @@ -169,16 +176,11 @@ const ReviewStep = () => {
isIndented
data-testid="registration-expandable"
>
{getState()?.values?.['register-system'] === 'register-later' && (
<RegisterLaterList />
)}
{getState()?.values?.['register-system']?.startsWith(
'register-now'
) && <RegisterNowList />}
{registrationType === 'register-later' && <RegisterLaterList />}
{registrationType.startsWith('register-now') && <RegisterNowList />}
</ExpandableSection>
)}
{(getState()?.values?.['image-name'] ||
getState()?.values?.['image-description']) && (
{(blueprintName || blueprintDescription) && (
<ExpandableSection
toggleContent={'Image details'}
onToggle={(_event, isExpandedImageDetail) =>
Expand All @@ -191,7 +193,7 @@ const ReviewStep = () => {
<ImageDetailsList />
</ExpandableSection>
)}
{getState()?.values?.['oscap-profile'] && (
{oscapProfile && (
<ExpandableSection
toggleContent={'OpenSCAP'}
onToggle={(_event, isExpandedOscapDetail) =>
Expand All @@ -208,4 +210,4 @@ const ReviewStep = () => {
);
};

export default ReviewStep;
export default Review;
62 changes: 14 additions & 48 deletions src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from 'react';

import { useFormApi } from '@data-driven-forms/react-form-renderer';
import { Alert, Panel, PanelMain, Spinner } from '@patternfly/react-core';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
import PropTypes from 'prop-types';

import { UNIT_GIB, UNIT_MIB } from '../../../constants';
import { useListRepositoriesQuery } from '../../../store/contentSourcesApi';
import { useListRepositoriesQuery } from '../../../../store/contentSourcesApi';
import { useAppSelector } from '../../../../store/hooks';
import { selectCustomRepositories } from '../../../../store/wizardSlice';

const RepoName = ({ repoUrl }) => {
type repoPropType = {
repoUrl: string[] | undefined;
};

const RepoName = ({ repoUrl }: repoPropType) => {
const { data, isSuccess, isFetching, isError } = useListRepositoriesQuery({
// @ts-ignore
url: repoUrl,
contentType: 'rpm',
origin: 'external',
Expand Down Expand Up @@ -46,8 +50,6 @@ const RepoName = ({ repoUrl }) => {
};

export const FSReviewTable = () => {
const { getState } = useFormApi();
const fsc = getState().values['file-system-configuration'];
return (
<Panel isScrollable>
<PanelMain maxHeight="30ch">
Expand All @@ -59,56 +61,24 @@ export const FSReviewTable = () => {
<Th>Minimum size</Th>
</Tr>
</Thead>
<Tbody data-testid="file-system-configuration-tbody-review">
{fsc.map((partition, partitionIndex) => (
<Tr key={partitionIndex}>
<Td className="pf-m-width-30">{partition.mountpoint}</Td>
<Td className="pf-m-width-30">xfs</Td>
<Td className="pf-m-width-30">
{partition.size}{' '}
{partition.unit === UNIT_GIB
? 'GiB'
: partition.unit === UNIT_MIB
? 'MiB'
: 'KiB'}
</Td>
</Tr>
))}
</Tbody>
</Table>
</PanelMain>
</Panel>
);
};

export const PackagesTable = () => {
const { getState } = useFormApi();
const packages = getState()?.values['selected-packages'];
return (
<Panel isScrollable>
<PanelMain maxHeight="30ch">
<Table aria-label="Packages table" variant="compact">
<Thead>
<Tr>
<Th>Name</Th>
</Tr>
</Thead>
<Tbody data-testid="packages-tbody-review">
{packages.map((pkg, pkgIndex) => (
<Tr key={pkgIndex}>
<Td className="pf-m-width-30">{pkg.name}</Td>
</Tr>
))}
</Tbody>
</Table>
</PanelMain>
<PanelMain maxHeight="30ch"></PanelMain>
</Panel>
);
};

export const RepositoriesTable = () => {
const { getState } = useFormApi();
const repositories = getState()?.values?.['payload-repositories'];
const repositoriesList = useAppSelector((state) =>
selectCustomRepositories(state)
);
return (
<Panel isScrollable>
<PanelMain maxHeight="30ch">
Expand All @@ -119,7 +89,7 @@ export const RepositoriesTable = () => {
</Tr>
</Thead>
<Tbody data-testid="repositories-tbody-review">
{repositories.map((repo, repoIndex) => (
{repositoriesList?.map((repo, repoIndex) => (
<Tr key={repoIndex}>
<Td className="pf-m-width-60">
<RepoName repoUrl={repo.baseurl} />
Expand All @@ -132,7 +102,3 @@ export const RepositoriesTable = () => {
</Panel>
);
};

RepoName.propTypes = {
repoUrl: PropTypes.string,
};
Loading

0 comments on commit 4c14cd1

Please sign in to comment.