Wizard: Add kernel append input (HMS-5299)

src/Components/CreateImageWizard/ChippingInput.tsx

@@ -19,6 +19,7 @@ type ChippingInputProps = {
   ariaLabel: string;
   placeholder: string;
   validator: (value: string) => boolean;
+  requiredList?: string[] | undefined;
   list: string[] | undefined;
   item: string;
   addAction: (value: string) => UnknownAction;
@@ -30,6 +31,7 @@ const ChippingInput = ({
   placeholder,
   validator,
   list,
+  requiredList,
   item,
   addAction,
   removeAction,
@@ -48,23 +50,23 @@ const ChippingInput = ({
   };
 
   const addItem = (value: string) => {
-    if (validator(value) && !list?.includes(value)) {
-      dispatch(addAction(value));
-      setInputValue('');
-      setErrorText('');
-    }
-
-    if (list?.includes(value)) {
+    if (list?.includes(value) || requiredList?.includes(value)) {
       setErrorText(`${item} already exists.`);
+      return;
     }
 
     if (!validator(value)) {
       setErrorText('Invalid format.');
+      return;
     }
+
+    dispatch(addAction(value));
+    setInputValue('');
+    setErrorText('');
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, value: string) => {
-    if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
+    if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       addItem(value);
     }
@@ -112,7 +114,24 @@ const ChippingInput = ({
           <HelperTextItem variant={'error'}>{errorText}</HelperTextItem>
         </HelperText>
       )}
-      <ChipGroup numChips={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
+      {requiredList && requiredList.length > 0 && (
+        <ChipGroup
+          categoryName="Required by OpenSCAP"
+          numChips={20}
+          className="pf-v5-u-mt-sm pf-v5-u-w-100"
+        >
+          {requiredList.map((item) => (
+            <Chip
+              key={item}
+              onClick={() => dispatch(removeAction(item))}
+              isReadOnly
+            >
+              {item}
+            </Chip>
+          ))}
+        </ChipGroup>
+      )}
+      <ChipGroup numChips={20} className="pf-v5-u-mt-sm pf-v5-u-w-100">
         {list?.map((item) => (
           <Chip key={item} onClick={() => dispatch(removeAction(item))}>
             {item}

src/Components/CreateImageWizard/steps/Kernel/components/KernelArguments.tsx

@@ -2,8 +2,53 @@ import React from 'react';
 
 import { FormGroup } from '@patternfly/react-core';
 
+import { useAppSelector } from '../../../../../store/hooks';
+import { useGetOscapCustomizationsQuery } from '../../../../../store/imageBuilderApi';
+import {
+  addKernelArg,
+  removeKernelArg,
+  selectComplianceProfileID,
+  selectDistribution,
+  selectKernel,
+} from '../../../../../store/wizardSlice';
+import ChippingInput from '../../../ChippingInput';
+import { isKernelArgumentValid } from '../../../validators';
+
 const KernelArguments = () => {
-  return <FormGroup isRequired={false} label="Append"></FormGroup>;
+  const kernelAppend = useAppSelector(selectKernel).append;
+
+  const release = useAppSelector(selectDistribution);
+  const complianceProfileID = useAppSelector(selectComplianceProfileID);
+
+  const { data: oscapProfileInfo } = useGetOscapCustomizationsQuery(
+    {
+      distribution: release,
+      // @ts-ignore if complianceProfileID is undefined the query is going to get skipped, so it's safe here to ignore the linter here
+      profile: complianceProfileID,
+    },
+    {
+      skip: !complianceProfileID,
+    }
+  );
+
+  const requiredByOpenSCAP = kernelAppend.filter((arg) =>
+    oscapProfileInfo?.kernel?.append?.split(' ').includes(arg)
+  );
+
+  return (
+    <FormGroup isRequired={false} label="Append">
+      <ChippingInput
+        ariaLabel="Add kernel argument"
+        placeholder="Add kernel argument"
+        validator={isKernelArgumentValid}
+        list={kernelAppend.filter((arg) => !requiredByOpenSCAP.includes(arg))}
+        requiredList={requiredByOpenSCAP}
+        item="Kernel argument"
+        addAction={addKernelArg}
+        removeAction={removeKernelArg}
+      />
+    </FormGroup>
+  );
 };
 
 export default KernelArguments;

src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx

@@ -51,8 +51,9 @@ import {
   changeEnabledServices,
   changeMaskedServices,
   changeDisabledServices,
-  changeKernelAppend,
   selectComplianceType,
+  clearKernelAppend,
+  addKernelArg,
 } from '../../../../store/wizardSlice';
 import { useHasSpecificTargetOnly } from '../../utilities/hasSpecificTargetOnly';
 import { parseSizeUnit } from '../../utilities/parseSizeUnit';
@@ -174,7 +175,7 @@ const ProfileSelector = () => {
     clearOscapPackages(currentProfileData?.packages || []);
     dispatch(changeFileSystemConfigurationType('automatic'));
     handleServices(undefined);
-    dispatch(changeKernelAppend(''));
+    dispatch(clearKernelAppend());
   };
 
   const handlePackages = (
@@ -228,6 +229,17 @@ const ProfileSelector = () => {
     dispatch(changeDisabledServices(services?.disabled || []));
   };
 
+  const handleKernelAppend = (kernelAppend: string | undefined) => {
+    dispatch(clearKernelAppend());
+
+    if (kernelAppend) {
+      const kernelArgsArray = kernelAppend.split(' ');
+      for (const arg in kernelArgsArray) {
+        dispatch(addKernelArg(kernelArgsArray[arg]));
+      }
+    }
+  };
+
   const handleSelect = (
     _event: React.MouseEvent<Element, MouseEvent>,
     selection: OScapSelectOptionValueType | ComplianceSelectOptionValueType
@@ -251,7 +263,7 @@ const ProfileSelector = () => {
           handlePartitions(oscapPartitions);
           handlePackages(oldOscapPackages, newOscapPackages);
           handleServices(response.services);
-          dispatch(changeKernelAppend(response.kernel?.append || ''));
+          handleKernelAppend(response.kernel?.append);
           if (complianceType === 'openscap') {
             dispatch(
               changeCompliance({

src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx

@@ -130,19 +130,6 @@ export const OscapProfileInformation = ({
               >
                 {oscapProfile?.profile_id}
               </TextListItem>
-              <TextListItem
-                component={TextListItemVariants.dt}
-                className="pf-v5-u-min-width"
-              >
-                Kernel arguments:
-              </TextListItem>
-              <TextListItem component={TextListItemVariants.dd}>
-                <CodeBlock>
-                  <CodeBlockCode>
-                    {oscapProfileInfo?.kernel?.append}
-                  </CodeBlockCode>
-                </CodeBlock>
-              </TextListItem>
               <TextListItem
                 component={TextListItemVariants.dt}
                 className="pf-v5-u-min-width"

src/Components/CreateImageWizard/steps/Oscap/index.tsx

@@ -31,9 +31,9 @@ import {
   changeDisabledServices,
   removePackage,
   changeFileSystemConfigurationType,
-  changeKernelAppend,
   selectDistribution,
   selectComplianceType,
+  clearKernelAppend,
 } from '../../../../store/wizardSlice';
 import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment';
 
@@ -84,7 +84,7 @@ const OscapStep = () => {
     dispatch(changeEnabledServices([]));
     dispatch(changeMaskedServices([]));
     dispatch(changeDisabledServices([]));
-    dispatch(changeKernelAppend(''));
+    dispatch(clearKernelAppend());
   };
 
   return (

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -336,7 +336,7 @@ function commonRequestToState(
     },
     kernel: {
       name: request.customizations.kernel?.name || '',
-      append: request.customizations?.kernel?.append || '',
+      append: request.customizations?.kernel?.append?.split(' ') || [],
     },
     timezone: {
       timezone: request.customizations.timezone?.timezone || '',
@@ -763,13 +763,25 @@ const getPayloadRepositories = (state: RootState) => {
 
 const getKernel = (state: RootState) => {
   const kernel = selectKernel(state);
+  const kernelAppendString = selectKernel(state).append.join(' ');
 
-  if (!kernel.name && !kernel.append) {
+  const kernelRequest = {};
+
+  if (!kernel.name && kernel.append.length === 0) {
     return undefined;
   }
 
-  return {
-    name: selectKernel(state).name || undefined,
-    append: selectKernel(state).append || undefined,
-  };
+  if (kernel.name) {
+    Object.assign(kernelRequest, {
+      name: kernel.name,
+    });
+  }
+
+  if (kernelAppendString !== '') {
+    Object.assign(kernelRequest, {
+      append: kernelAppendString,
+    });
+  }
+
+  return Object.keys(kernelRequest).length > 0 ? kernelRequest : undefined;
 };

src/Components/CreateImageWizard/validators.ts

@@ -124,6 +124,14 @@ export const isKernelNameValid = (kernelName: string) => {
   );
 };
 
+export const isKernelArgumentValid = (arg: string) => {
+  if (!arg) {
+    return true;
+  }
+
+  return /^[a-zA-Z0-9=-_,"']*$/.test(arg);
+};
+
 export const isPortValid = (port: string) => {
   return /^(\d{1,5}|[a-z]{1,6})(-\d{1,5})?:[a-z]{1,6}$/.test(port);
 };

src/store/wizardSlice.ts

@@ -135,7 +135,7 @@ export type wizardState = {
   };
   kernel: {
     name: string;
-    append: string;
+    append: string[];
   };
   locale: Locale;
   details: {
@@ -213,7 +213,7 @@ export const initialState: wizardState = {
   },
   kernel: {
     name: '',
-    append: '',
+    append: [],
   },
   locale: {
     languages: [],
@@ -817,8 +817,27 @@ export const wizardSlice = createSlice({
     changeKernelName: (state, action: PayloadAction<string>) => {
       state.kernel.name = action.payload;
     },
-    changeKernelAppend: (state, action: PayloadAction<string>) => {
-      state.kernel.append = action.payload;
+    addKernelArg: (state, action: PayloadAction<string>) => {
+      const existingArgIndex = state.kernel.append.findIndex(
+        (arg) => arg === action.payload
+      );
+
+      if (existingArgIndex !== -1) {
+        state.kernel.append[existingArgIndex] = action.payload;
+      } else {
+        state.kernel.append.push(action.payload);
+      }
+    },
+    removeKernelArg: (state, action: PayloadAction<string>) => {
+      if (state.kernel.append.length > 0) {
+        state.kernel.append.splice(
+          state.kernel.append.findIndex((arg) => arg === action.payload),
+          1
+        );
+      }
+    },
+    clearKernelAppend: (state) => {
+      state.kernel.append = [];
     },
     changeTimezone: (state, action: PayloadAction<string>) => {
       state.timezone.timezone = action.payload;
@@ -954,7 +973,9 @@ export const {
   changeMaskedServices,
   changeDisabledServices,
   changeKernelName,
-  changeKernelAppend,
+  addKernelArg,
+  removeKernelArg,
+  clearKernelAppend,
   changeTimezone,
   addNtpServer,
   removeNtpServer,

src/test/Components/CreateImageWizard/steps/Firewall/Firewall.test.tsx

@@ -48,7 +48,7 @@ const goToReviewStep = async () => {
 const addPort = async (port: string) => {
   const user = userEvent.setup();
   const portsInput = await screen.findByPlaceholderText(/add port/i);
-  await waitFor(() => user.type(portsInput, port.concat(',')));
+  await waitFor(() => user.type(portsInput, port.concat(' ')));
 };
 
 describe('Step Firewall', () => {