Wizard: Add inputs for disabled and enabled services

This adds inputs for disabled and enabled systemd services. New tests are also added.

src/Components/CreateImageWizard/steps/Services/components/ServicesInputs.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { FormGroup } from '@patternfly/react-core';
+
+import { useAppSelector } from '../../../../../store/hooks';
+import { useGetOscapCustomizationsQuery } from '../../../../../store/imageBuilderApi';
+import {
+  addDisabledService,
+  addEnabledService,
+  removeDisabledService,
+  removeEnabledService,
+  selectComplianceProfileID,
+  selectDistribution,
+  selectServices,
+} from '../../../../../store/wizardSlice';
+import ChippingInput from '../../../ChippingInput';
+import { isServiceValid } from '../../../validators';
+
+const ServicesInput = () => {
+  const disabledServices = useAppSelector(selectServices).disabled;
+  const maskedServices = useAppSelector(selectServices).masked;
+  const enabledServices = useAppSelector(selectServices).enabled;
+
+  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 disabledAndMaskedRequiredByOpenSCAP = disabledServices
+    .concat(maskedServices)
+    .filter(
+      (service) =>
+        oscapProfileInfo?.services?.disabled?.includes(service) ||
+        oscapProfileInfo?.services?.masked?.includes(service)
+    );
+
+  const enabledRequiredByOpenSCAP = enabledServices.filter((service) =>
+    oscapProfileInfo?.services?.enabled?.includes(service)
+  );
+
+  return (
+    <>
+      <FormGroup isRequired={false} label="Disabled services">
+        <ChippingInput
+          ariaLabel="Add disabled service"
+          placeholder="Add disabled service"
+          validator={isServiceValid}
+          list={disabledServices
+            .concat(maskedServices)
+            .filter(
+              (service) =>
+                !disabledAndMaskedRequiredByOpenSCAP.includes(service)
+            )}
+          requiredList={disabledAndMaskedRequiredByOpenSCAP}
+          item="Disabled service"
+          addAction={addDisabledService}
+          removeAction={removeDisabledService}
+        />
+      </FormGroup>
+      <FormGroup isRequired={false} label="Enabled services">
+        <ChippingInput
+          ariaLabel="Add enabled service"
+          placeholder="Add enabled service"
+          validator={isServiceValid}
+          list={enabledServices.filter(
+            (service) => !enabledRequiredByOpenSCAP.includes(service)
+          )}
+          requiredList={enabledRequiredByOpenSCAP}
+          item="Enabled service"
+          addAction={addEnabledService}
+          removeAction={removeEnabledService}
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+export default ServicesInput;

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

@@ -2,13 +2,16 @@ import React from 'react';
 
 import { Text, Form, Title } from '@patternfly/react-core';
 
+import ServicesInput from './components/ServicesInputs';
+
 const ServicesStep = () => {
   return (
     <Form>
       <Title headingLevel="h1" size="xl">
         Systemd services
       </Title>
       <Text>Enable and disable systemd services.</Text>
+      <ServicesInput />
     </Form>
   );
 };

src/Components/CreateImageWizard/validators.ts

@@ -135,3 +135,13 @@ export const isKernelArgumentValid = (arg: string) => {
 export const isPortValid = (port: string) => {
   return /^(\d{1,5}|[a-z]{1,6})(-\d{1,5})?:[a-z]{1,6}$/.test(port);
 };
+
+export const isServiceValid = (service: string) => {
+  // Restraints taken from service name syntax reference
+  // https://www.rfc-editor.org/rfc/rfc6335#section-5.1
+  return (
+    service.length <= 15 &&
+    /^[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z]$/.test(service) &&
+    !/--/.test(service)
+  );
+};

src/store/wizardSlice.ts

@@ -808,12 +808,57 @@ export const wizardSlice = createSlice({
     changeEnabledServices: (state, action: PayloadAction<string[]>) => {
       state.services.enabled = action.payload;
     },
+    addEnabledService: (state, action: PayloadAction<string>) => {
+      if (
+        !state.services.enabled.some((service) => service === action.payload)
+      ) {
+        state.services.enabled.push(action.payload);
+      }
+    },
+    removeEnabledService: (state, action: PayloadAction<string>) => {
+      state.services.enabled.splice(
+        state.services.enabled.findIndex(
+          (service) => service === action.payload
+        ),
+        1
+      );
+    },
     changeMaskedServices: (state, action: PayloadAction<string[]>) => {
       state.services.masked = action.payload;
     },
+    addMaskedService: (state, action: PayloadAction<string>) => {
+      if (
+        !state.services.masked.some((service) => service === action.payload)
+      ) {
+        state.services.masked.push(action.payload);
+      }
+    },
+    removeMaskedService: (state, action: PayloadAction<string>) => {
+      state.services.masked.splice(
+        state.services.masked.findIndex(
+          (service) => service === action.payload
+        ),
+        1
+      );
+    },
     changeDisabledServices: (state, action: PayloadAction<string[]>) => {
       state.services.disabled = action.payload;
     },
+    addDisabledService: (state, action: PayloadAction<string>) => {
+      if (
+        !state.services.disabled.some((service) => service === action.payload)
+      ) {
+        state.services.disabled.push(action.payload);
+      }
+    },
+    removeDisabledService: (state, action: PayloadAction<string>) => {
+      state.services.disabled.splice(
+        state.services.disabled.findIndex(
+          (service) => service === action.payload
+        ),
+        1
+      );
+    },
     changeKernelName: (state, action: PayloadAction<string>) => {
       state.kernel.name = action.payload;
     },
@@ -973,8 +1018,14 @@ export const {
   loadWizardState,
   setFirstBootScript,
   changeEnabledServices,
+  addEnabledService,
+  removeEnabledService,
   changeMaskedServices,
+  addMaskedService,
+  removeMaskedService,
   changeDisabledServices,
+  addDisabledService,
+  removeDisabledService,
   changeKernelName,
   addKernelArg,
   removeKernelArg,