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,6 +2,8 @@ import React from 'react';
 
 import { Text, Form, Title } from '@patternfly/react-core';
 
+import ServicesInput from './components/ServicesInputs';
+
 const ServicesStep = () => {
   return (
     <Form>
@@ -9,6 +11,7 @@ const ServicesStep = () => {
         Systemd services
       </Title>
       <Text>Enable and disable systemd services.</Text>
+      <ServicesInput />
     </Form>
   );
 };