Wizard: Update the File system step

Fixes #911. Fixes #912.

This updates the File system step. The changes are:
- changed the toggle group for selecting the mode of partitioning to radio select and updated information for each radio button as mentioned in #911
- added information to the "automatic" option of the file system configuration as mentioned in #912
- updated information for the "manual" option of the configuration as mentioned in mocks

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -67,7 +67,7 @@ const onSave = (values) => {
     };
   }
 
-  if (values['file-system-config-toggle'] === 'manual') {
+  if (values['file-system-config-radio'] === 'manual') {
     customizations.filesystem = [];
     for (let fsc of values['file-system-configuration']) {
       customizations.filesystem.push({
@@ -377,7 +377,7 @@ const requestToState = (composeRequest) => {
     // filesystem
     const fs = composeRequest?.customizations?.filesystem;
     if (fs) {
-      formState['file-system-config-toggle'] = 'manual';
+      formState['file-system-config-radio'] = 'manual';
       let fileSystemConfiguration = [];
       for (let fsc of fs) {
         const [size, unit] = parseSizeUnit(fsc.min_size);

src/Components/CreateImageWizard/ImageCreator.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import ActivationKeys from './formComponents/ActivationKeys';
 import AzureAuthButton from './formComponents/AzureAuthButton';
 import CentOSAcknowledgement from './formComponents/CentOSAcknowledgement';
-import FileSystemConfigToggle from './formComponents/FileSystemConfigToggle';
 import FileSystemConfiguration from './formComponents/FileSystemConfiguration';
 import ImageOutputReleaseSelect from './formComponents/ImageOutputReleaseSelect';
 import {
@@ -60,7 +59,6 @@ const ImageCreator = ({
         'azure-auth-button': AzureAuthButton,
         'activation-keys': ActivationKeys,
         'activation-key-information': RegistrationKeyInformation,
-        'file-system-config-toggle': FileSystemConfigToggle,
         'file-system-configuration': FileSystemConfiguration,
         'image-output-release-select': ImageOutputReleaseSelect,
         'centos-acknowledgement': CentOSAcknowledgement,

src/Components/CreateImageWizard/formComponents/FileSystemConfigToggle.js

@@ -1,46 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
-import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-
-const FileSystemConfigToggle = ({ ...props }) => {
-  const { change, getState } = useFormApi();
-  const { input } = useFieldApi(props);
-  const [selected, setSelected] = useState(
-    getState()?.values?.['file-system-config-toggle'] || 'auto'
-  );
-
-  useEffect(() => {
-    change(input.name, selected);
-  }, [selected]);
-
-  const onClick = (_, evt) => {
-    setSelected(evt.currentTarget.id);
-  };
-
-  return (
-    <>
-      <ToggleGroup
-        data-testid="fsc-paritioning-toggle"
-        aria-label="Automatic partitioning toggle"
-      >
-        <ToggleGroupItem
-          onChange={onClick}
-          text="Use automatic partitioning"
-          buttonId="auto"
-          isSelected={selected === 'auto'}
-        />
-        <ToggleGroupItem
-          onChange={onClick}
-          text="Manually configure partitions"
-          buttonId="manual"
-          isSelected={selected === 'manual'}
-          data-testid="file-system-config-toggle-manual"
-        />
-      </ToggleGroup>
-    </>
-  );
-};
-
-export default FileSystemConfigToggle;

src/Components/CreateImageWizard/formComponents/FileSystemConfiguration.js

@@ -16,6 +16,7 @@ import {
   MinusCircleIcon,
   PlusCircleIcon,
 } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import {
   TableComposable,
@@ -272,9 +273,25 @@ const FileSystemConfiguration = ({ ...props }) => {
             )}
           <TextContent>
             <Text>
-              Partitions have been generated and given default values based on
-              best practices from Red Hat, and your selections in previous steps
-              of the wizard.
+              Create partitions for your image by defining mount points and
+              minimum sizes. Image builder creates partitions with a logical
+              volume (LVM) device type.
+            </Text>
+            <Text>
+              The order of partitions may change when the image is installed in
+              order to conform to best practices and ensure functionality.
+              <br></br>
+              <Button
+                component="a"
+                target="_blank"
+                variant="link"
+                icon={<ExternalLinkAltIcon />}
+                iconPosition="right"
+                href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/installation_guide/sect-partitioning-naming-schemes-and-mount-points"
+                className="pf-u-pl-0"
+              >
+                Partition naming schemes and mount points
+              </Button>
             </Text>
           </TextContent>
           <TableComposable

src/Components/CreateImageWizard/formComponents/ReviewStep.js

@@ -95,7 +95,7 @@ const ReviewStep = () => {
     }
 
     if (
-      getState()?.values?.['file-system-config-toggle'] === 'manual' &&
+      getState()?.values?.['file-system-config-radio'] === 'manual' &&
       getState()?.values?.['file-system-configuration']
     ) {
       let size = 0;
@@ -368,10 +368,10 @@ const ReviewStep = () => {
                 component={TextListItemVariants.dd}
                 data-testid="partitioning-auto-manual"
               >
-                {getState()?.values?.['file-system-config-toggle'] === 'manual'
+                {getState()?.values?.['file-system-config-radio'] === 'manual'
                   ? 'Manual'
                   : 'Automatic'}
-                {getState()?.values?.['file-system-config-toggle'] ===
+                {getState()?.values?.['file-system-config-radio'] ===
                   'manual' && (
                   <>
                     {' '}
@@ -399,7 +399,7 @@ const ReviewStep = () => {
                   </>
                 )}
               </TextListItem>
-              {getState()?.values?.['file-system-config-toggle'] ===
+              {getState()?.values?.['file-system-config-radio'] ===
                 'manual' && (
                 <>
                   <TextListItem component={TextListItemVariants.dt}>

src/Components/CreateImageWizard/steps/fileSystemConfiguration.js

@@ -2,7 +2,14 @@ import React from 'react';
 
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
-import { Text } from '@patternfly/react-core';
+import {
+  Button,
+  Label,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 import StepTemplate from './stepTemplate';
 
@@ -21,21 +28,41 @@ export default {
       name: 'file-system-configuration-text-component',
       label: (
         <>
-          <Text>
-            Red Hat recommends using automatic partitioning for most
-            installations.
-          </Text>
-          <Text>
-            Alternatively, you may manually configure the file system of your
-            image by adding, removing, and editing partitions.
-          </Text>
+          <Text>Define the partitioning of the image</Text>
         </>
       ),
     },
     {
-      component: 'file-system-config-toggle',
-      name: 'file-system-config-toggle',
-      label: 'File system configurations toggle',
+      component: componentTypes.RADIO,
+      name: 'file-system-config-radio',
+      initialValue: 'automatic',
+      options: [
+        {
+          label: (
+            <>
+              <Text>
+                <Label isCompact color="blue">
+                  Recommended
+                </Label>{' '}
+                Use automatic partitioning
+              </Text>
+            </>
+          ),
+          description:
+            'Automatically partition your image to what is best, depending on the target environment(s)',
+          value: 'automatic',
+          'data-testid': 'file-system-config-radio-automatic',
+          autoFocus: true,
+        },
+        {
+          label: 'Manually configure partitions',
+          description:
+            'Manually configure the file system of your image by adding, removing, and editing partitions',
+          value: 'manual',
+          'data-testid': 'file-system-config-radio-manual',
+          className: 'pf-u-mt-sm',
+        },
+      ],
     },
     {
       component: 'file-system-configuration',
@@ -46,9 +73,46 @@ export default {
         { type: validatorTypes.REQUIRED },
       ],
       condition: {
-        when: 'file-system-config-toggle',
+        when: 'file-system-config-radio',
         is: 'manual',
       },
     },
+    {
+      component: componentTypes.PLAIN_TEXT,
+      name: 'automatic-partitioning-info',
+      label: (
+        <TextContent>
+          <Text component={TextVariants.h3}>Automatic partitioning</Text>
+          <Text>
+            Red Hat will automatically partition your image to what is best,
+            depending on the target environment(s).
+          </Text>
+          <Text>
+            The target environment sometimes dictates the partitioning scheme or
+            parts of it, and sometimes the target environment is unknown (e.g.,
+            for the .qcow2 generic cloud image).
+          </Text>
+          <Text>
+            Using automatic partitioning will apply the most current supported
+            configuration.
+            <br></br>
+            <Button
+              component="a"
+              target="_blank"
+              variant="link"
+              icon={<ExternalLinkAltIcon />}
+              iconPosition="right"
+              href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/performing_a_standard_rhel_8_installation/partitioning-reference_installing-rhel#recommended-partitioning-scheme_partitioning-reference"
+              className="pf-u-pl-0"
+            >
+              Learn more
+            </Button>
+          </Text>
+        </TextContent>
+      ),
+      condition: {
+        or: [{ when: 'file-system-config-radio', is: 'automatic' }],
+      },
+    },
   ],
 };

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

@@ -1118,10 +1118,7 @@ describe('Click through all steps', () => {
     getNextButton().click();
 
     // fsc
-    const toggle = await screen.findByTestId(
-      'file-system-config-toggle-manual'
-    );
-    within(toggle).getByRole('button').click();
+    (await screen.findByTestId('file-system-config-radio-manual')).click();
     const ap = await screen.findByTestId('file-system-add-partition');
     ap.click();
     ap.click();

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

@@ -548,7 +548,7 @@ describe('Step Registration', () => {
 
     getNextButton().click();
 
-    screen.getByTestId('fsc-paritioning-toggle');
+    screen.getByRole('heading', { name: /file system configuration/i });
   });
 
   test('clicking Back loads Upload to AWS', async () => {
@@ -756,7 +756,7 @@ describe('Step Packages', () => {
     const back = screen.getByRole('button', { name: /Back/ });
     back.click();
 
-    screen.getByTestId('fsc-paritioning-toggle');
+    screen.getByRole('heading', { name: /file system configuration/i });
   });
 
   test('clicking Cancel loads landing page', async () => {
@@ -1428,10 +1428,10 @@ describe('Click through all steps', () => {
     getNextButton().click();
 
     // fsc
-    const toggle = await screen.findByTestId(
-      'file-system-config-toggle-manual'
-    );
-    within(toggle).getByRole('button').click();
+    screen.getByRole('heading', {
+      name: /file system configuration/i,
+    });
+    screen.getByTestId('file-system-config-radio-manual').click();
     const ap = await screen.findByTestId('file-system-add-partition');
     ap.click();
     ap.click();