02fbdf5e88
When we load the organization id but do not use or display it we can have an act warning because we unmount the component without handling the response.
211 lines
12 KiB
JavaScript
211 lines
12 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
DescriptionList, DescriptionListTerm, DescriptionListGroup, DescriptionListDescription,
|
|
List, ListItem,
|
|
Spinner,
|
|
Tabs, Tab, TabTitleText,
|
|
Text, TextContent, TextVariants, TextList, TextListVariants, TextListItem, TextListItemVariants
|
|
} from '@patternfly/react-core';
|
|
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
|
|
import { releaseValues } from '../steps/imageOutput';
|
|
import { googleAccType } from '../steps/googleCloud';
|
|
|
|
const ReviewStep = () => {
|
|
const [ activeTabKey, setActiveTabKey ] = useState(0);
|
|
const [ orgId, setOrgId ] = useState();
|
|
const { change, getState } = useFormApi();
|
|
|
|
useEffect(() => {
|
|
const registerSystem = getState()?.values?.['register-system'];
|
|
if (registerSystem === 'register-now' || registerSystem === 'register-now-insights') {
|
|
(async () => {
|
|
const userData = await insights?.chrome?.auth?.getUser();
|
|
const id = userData?.identity?.internal?.org_id;
|
|
setOrgId(id);
|
|
change('subscription-organization-id', id);
|
|
})();
|
|
}
|
|
});
|
|
|
|
const handleTabClick = (event, tabIndex) => {
|
|
setActiveTabKey(tabIndex);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Text>
|
|
Review the information and click "Create image"
|
|
to create the image using the following criteria.
|
|
</Text>
|
|
<DescriptionList>
|
|
<DescriptionListGroup>
|
|
<DescriptionListTerm>Release</DescriptionListTerm>
|
|
<DescriptionListDescription>
|
|
{releaseValues?.[getState()?.values?.release]}
|
|
</DescriptionListDescription>
|
|
</DescriptionListGroup>
|
|
</DescriptionList>
|
|
<Tabs isFilled activeKey={ activeTabKey } onSelect={ handleTabClick } className="pf-u-w-75">
|
|
<Tab eventKey={ 0 } title={ <TabTitleText>Target environment</TabTitleText> } data-testid='tab-target'>
|
|
<List isPlain iconSize="large">
|
|
{getState()?.values?.['target-environment']?.aws &&
|
|
<ListItem icon={ <img className='provider-icon' src='/apps/frontend-assets/partners-icons/aws.svg' /> }>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>
|
|
Amazon Web Services
|
|
</Text>
|
|
<TextList component={ TextListVariants.dl }>
|
|
<TextListItem component={ TextListItemVariants.dt }>Account ID</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['aws-account-id']}
|
|
</TextListItem>
|
|
</TextList>
|
|
</TextContent>
|
|
</ListItem>
|
|
}
|
|
{getState()?.values?.['target-environment']?.google &&
|
|
<ListItem
|
|
className='pf-c-list__item pf-u-mt-md'
|
|
icon={ <img className='provider-icon' src='/apps/frontend-assets/partners-icons/google-cloud-short.svg' /> }>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>Google Cloud Platform</Text>
|
|
<TextList component={ TextListVariants.dl }>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
{googleAccType?.[getState()?.values?.['google-account-type']]}
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['google-email'] || getState()?.values?.['google-domain']}
|
|
</TextListItem>
|
|
</TextList>
|
|
</TextContent>
|
|
</ListItem>
|
|
}
|
|
{getState()?.values?.['target-environment']?.azure &&
|
|
<ListItem
|
|
className='pf-c-list__item pf-u-mt-md'
|
|
icon={ <img className='provider-icon' src='/apps/frontend-assets/partners-icons/microsoft-azure-short.svg' /> }>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>Microsoft Azure</Text>
|
|
<TextList component={ TextListVariants.dl }>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Subscription ID
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['azure-subscription-id']}
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Tenant ID
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['azure-tenant-id']}
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Resource group
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['azure-resource-group']}
|
|
</TextListItem>
|
|
</TextList>
|
|
</TextContent>
|
|
</ListItem>
|
|
}
|
|
{getState()?.values?.['target-environment']?.vsphere &&
|
|
<ListItem>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>
|
|
VMWare
|
|
</Text>
|
|
</TextContent>
|
|
</ListItem>
|
|
}
|
|
{getState()?.values?.['target-environment']?.['guest-image'] &&
|
|
<ListItem>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>
|
|
Virtualization - Guest image
|
|
</Text>
|
|
</TextContent>
|
|
</ListItem>
|
|
}
|
|
{getState()?.values?.['target-environment']?.['image-installer'] &&
|
|
<ListItem>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>
|
|
Bare metal - Installer
|
|
</Text>
|
|
</TextContent>
|
|
</ListItem>
|
|
}
|
|
</List>
|
|
</Tab>
|
|
{getState()?.values?.release.includes('rhel') &&
|
|
<Tab eventKey={ 1 } title={ <TabTitleText>Registration</TabTitleText> } data-testid='tab-registration'>
|
|
{getState()?.values?.['register-system'] === 'register-later' &&
|
|
<TextContent>
|
|
<TextList component={ TextListVariants.dl }>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Subscription
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
Register the system later
|
|
</TextListItem>
|
|
</TextList>
|
|
</TextContent>
|
|
}
|
|
{(getState()?.values?.['register-system'] === 'register-now' ||
|
|
getState()?.values?.['register-system'] === 'register-now-insights') &&
|
|
<TextContent>
|
|
<TextList component={ TextListVariants.dl }>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Subscription
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['register-system'] === 'register-now-insights' &&
|
|
'Register with Subscriptions and Red Hat Insights'
|
|
}
|
|
{getState()?.values?.['register-system'] === 'register-now' &&
|
|
'Register with Subscriptions'
|
|
}
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Activation key
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
{getState()?.values?.['subscription-activation-key']}
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Organization ID
|
|
</TextListItem>
|
|
{orgId !== undefined ? (
|
|
<TextListItem component={ TextListItemVariants.dd } data-testid='organization-id'>
|
|
{orgId}
|
|
</TextListItem>
|
|
) : (
|
|
<TextListItem component={ TextListItemVariants.dd }>
|
|
<Spinner />
|
|
</TextListItem>
|
|
)}
|
|
</TextList>
|
|
</TextContent>
|
|
}
|
|
</Tab>
|
|
}
|
|
<Tab eventKey={ 2 } title={ <TabTitleText>System configuration</TabTitleText> } data-testid='tab-system'>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>Packages</Text>
|
|
<TextList component={ TextListVariants.dl }>
|
|
<TextListItem component={ TextListItemVariants.dt }>
|
|
Chosen
|
|
</TextListItem>
|
|
<TextListItem component={ TextListItemVariants.dd } data-testid='chosen-packages-count'>
|
|
{getState()?.values?.['selected-packages']?.length || 0}
|
|
</TextListItem>
|
|
</TextList>
|
|
</TextContent>
|
|
</Tab>
|
|
</Tabs>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ReviewStep;
|