Wizard: Update Review step

Fixes #774. This matches the Review step with the updated mocks as per SPUR.

The changes are following:
1. Target environment tab:
	- value of AWS `Account ID` aligned with GCP and Azure values
2. Registration tab:
	- `Subscription` changed to `Registration type`
	- `Organization ID` removed, will be added in a different place so it's clearer it's associated with an activation key
3. System configuration:
	- updated column name `Type` to `File system type` in partitions popover
	- updated the width of the column to accommodate the change
	- unified line spacing of `Image size` with the other rows
	- changes `Packages` to `Additional packages`

src/Components/CreateImageWizard/CreateImageWizard.scss

@@ -48,3 +48,7 @@
 .pf-c-select__menu-item.pf-m-load {
     --pf-c-select__menu-item--Color: var(--pf-global--Color--100);
 }
+
+.pf-u-min-width {
+    --pf-u-min-width--MinWidth: 11ch;
+}

src/Components/CreateImageWizard/formComponents/ReviewStep.js

@@ -9,7 +9,6 @@ import {
   List,
   ListItem,
   Popover,
-  Spinner,
   Tab,
   Tabs,
   TabTitleText,
@@ -44,15 +43,15 @@ const FSReviewTable = ({ ...props }) => {
       <Thead>
         <Tr>
           <Th>Mount point</Th>
-          <Th>Type</Th>
+          <Th>File system type</Th>
           <Th>Minimum size</Th>
         </Tr>
       </Thead>
       <Tbody data-testid="file-system-configuration-tbody-review">
         {props.fsc.map((r, ri) => (
           <Tr key={ri}>
-            <Td className="pf-m-width-60">{r.mountpoint}</Td>
-            <Td className="pf-m-width-10">xfs</Td>
+            <Td className="pf-m-width-30">{r.mountpoint}</Td>
+            <Td className="pf-m-width-30">xfs</Td>
             <Td className="pf-m-width-30">
               {r.size}{' '}
               {r.unit === UNIT_GIB
@@ -74,7 +73,6 @@ FSReviewTable.propTypes = {
 
 const ReviewStep = () => {
   const [activeTabKey, setActiveTabKey] = useState(0);
-  const [orgId, setOrgId] = useState();
   const [minSize, setMinSize] = useState();
   const { change, getState } = useFormApi();
 
@@ -87,7 +85,6 @@ const ReviewStep = () => {
       (async () => {
         const userData = await insights?.chrome?.auth?.getUser();
         const id = userData?.identity?.internal?.org_id;
-        setOrgId(id);
         change('subscription-organization-id', id);
       })();
     }
@@ -161,7 +158,10 @@ const ReviewStep = () => {
                 <TextContent>
                   <Text component={TextVariants.h3}>Amazon Web Services</Text>
                   <TextList component={TextListVariants.dl}>
-                    <TextListItem component={TextListItemVariants.dt}>
+                    <TextListItem
+                      component={TextListItemVariants.dt}
+                      className="pf-u-min-width"
+                    >
                       Account ID
                     </TextListItem>
                     <TextListItem component={TextListItemVariants.dd}>
@@ -273,7 +273,7 @@ const ReviewStep = () => {
               <TextContent>
                 <TextList component={TextListVariants.dl}>
                   <TextListItem component={TextListItemVariants.dt}>
-                    Subscription
+                    Registration type
                   </TextListItem>
                   <TextListItem component={TextListItemVariants.dd}>
                     Register the system later
@@ -287,7 +287,7 @@ const ReviewStep = () => {
               <TextContent>
                 <TextList component={TextListVariants.dl}>
                   <TextListItem component={TextListItemVariants.dt}>
-                    Subscription
+                    Registration type
                   </TextListItem>
                   <TextListItem component={TextListItemVariants.dd}>
                     {getState()?.values?.['register-system'] ===
@@ -317,7 +317,7 @@ const ReviewStep = () => {
                       <Button
                         variant="plain"
                         aria-label="About activation key"
-                        className="pf-u-pl-sm"
+                        className="pf-c-form__group-label-help"
                       >
                         <HelpIcon />
                       </Button>
@@ -326,21 +326,6 @@ const ReviewStep = () => {
                   <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>
             )}
@@ -384,6 +369,7 @@ const ReviewStep = () => {
                         variant="link"
                         aria-label="File system configuration info"
                         aria-describedby="file-system-configuration-info"
+                        className="pf-u-pt-0 pf-u-pb-0"
                       >
                         View partitions
                       </Button>
@@ -423,7 +409,7 @@ const ReviewStep = () => {
                 </>
               )}
             </TextList>
-            <Text component={TextVariants.h3}>Packages</Text>
+            <Text component={TextVariants.h3}>Additional packages</Text>
             <TextList component={TextListVariants.dl}>
               <TextListItem component={TextListItemVariants.dt}>
                 Chosen

src/test/Components/CreateImageWizard/CreateImageWizard.test.js

@@ -1326,7 +1326,7 @@ describe('Step Review', () => {
     screen.getByText('Register the system later');
     userEvent.click(buttonSystem);
     screen.getByRole('heading', {
-      name: 'Packages',
+      name: 'Additional packages',
     });
     screen.getByRole('heading', {
       name: 'File system configuration',
@@ -1346,7 +1346,7 @@ describe('Step Review', () => {
     });
     userEvent.click(buttonSystem);
     screen.getByRole('heading', {
-      name: 'Packages',
+      name: 'Additional packages',
     });
     screen.getByRole('heading', {
       name: 'File system configuration',
@@ -1543,10 +1543,6 @@ describe('Click through all steps', () => {
     );
     expect(within(revtbody).getAllByRole('row')).toHaveLength(3);
 
-    await waitFor(() => {
-      const id = screen.getByTestId('organization-id');
-      within(id).getByText(5);
-    });
     // mock the backend API
     let ids = [];
     const composeImage = jest