Wizard: Add masked services input

This exposes masked services in the UI by adding a masked services input.

src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx

@@ -458,7 +458,9 @@ const Review = () => {
           </ExpandableSection>
         )}
       {isServicesStepEnabled &&
-        (services.enabled.length > 0 || services.disabled.length > 0) && (
+        (services.enabled.length > 0 ||
+          services.disabled.length > 0 ||
+          services.masked.length > 0) && (
           <ExpandableSection
             toggleContent={composeExpandable(
               'Systemd services',

src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx

@@ -991,11 +991,24 @@ export const ServicesList = () => {
           Disabled
         </TextListItem>
         <TextListItem component={TextListItemVariants.dd}>
-          {services.disabled.length > 0 || services.masked.length > 0 ? (
+          {services.disabled.length > 0 ? (
             <CodeBlock>
-              <CodeBlockCode>
-                {services.disabled.concat(services.masked).join(' ')}
-              </CodeBlockCode>
+              <CodeBlockCode>{services.disabled.join(' ')}</CodeBlockCode>
+            </CodeBlock>
+          ) : (
+            'None'
+          )}
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Masked
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {services.masked.length > 0 ? (
+            <CodeBlock>
+              <CodeBlockCode>{services.masked.join(' ')}</CodeBlockCode>
             </CodeBlock>
           ) : (
             'None'

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

@@ -7,8 +7,10 @@ import { useGetOscapCustomizationsQuery } from '../../../../../store/imageBuilde
 import {
   addDisabledService,
   addEnabledService,
+  addMaskedService,
   removeDisabledService,
   removeEnabledService,
+  removeMaskedService,
   selectComplianceProfileID,
   selectDistribution,
   selectServices,
@@ -38,13 +40,13 @@ const ServicesInput = () => {
     }
   );
 
-  const disabledAndMaskedRequiredByOpenSCAP = disabledServices
-    .concat(maskedServices)
-    .filter(
-      (service) =>
-        oscapProfileInfo?.services?.disabled?.includes(service) ||
-        oscapProfileInfo?.services?.masked?.includes(service)
-    );
+  const disabledRequiredByOpenSCAP = disabledServices.filter((service) =>
+    oscapProfileInfo?.services?.disabled?.includes(service)
+  );
+
+  const maskedRequiredByOpenSCAP = maskedServices.filter((service) =>
+    oscapProfileInfo?.services?.masked?.includes(service)
+  );
 
   const enabledRequiredByOpenSCAP = enabledServices.filter((service) =>
     oscapProfileInfo?.services?.enabled?.includes(service)
@@ -57,13 +59,11 @@ const ServicesInput = () => {
           ariaLabel="Add disabled service"
           placeholder="Add disabled service"
           validator={isServiceValid}
-          list={disabledServices
-            .concat(maskedServices)
-            .filter(
-              (service) =>
-                !disabledAndMaskedRequiredByOpenSCAP.includes(service)
-            )}
-          requiredList={disabledAndMaskedRequiredByOpenSCAP}
+          list={disabledServices.filter(
+            (service) =>
+              !oscapProfileInfo?.services?.disabled?.includes(service)
+          )}
+          requiredList={disabledRequiredByOpenSCAP}
           item="Disabled service"
           addAction={addDisabledService}
           removeAction={removeDisabledService}
@@ -71,6 +71,22 @@ const ServicesInput = () => {
           fieldName="disabledSystemdServices"
         />
       </FormGroup>
+      <FormGroup isRequired={false} label="Masked services">
+        <ChippingInput
+          ariaLabel="Add masked service"
+          placeholder="Add masked service"
+          validator={isServiceValid}
+          list={maskedServices.filter(
+            (service) => !oscapProfileInfo?.services?.masked?.includes(service)
+          )}
+          requiredList={maskedRequiredByOpenSCAP}
+          item="Masked service"
+          addAction={addMaskedService}
+          removeAction={removeMaskedService}
+          stepValidation={stepValidation}
+          fieldName="maskedSystemdServices"
+        />
+      </FormGroup>
       <FormGroup isRequired={false} label="Enabled services">
         <ChippingInput
           ariaLabel="Add enabled service"

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

@@ -10,7 +10,7 @@ const ServicesStep = () => {
       <Title headingLevel="h1" size="xl">
         Systemd services
       </Title>
-      <Text>Enable and disable systemd services.</Text>
+      <Text>Enable, disable and mask systemd services.</Text>
       <ServicesInput />
     </Form>
   );