Wizard: change order of the systemd services

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

@@ -22,19 +22,6 @@ const Services = () => {
 
   return (
     <>
-      <FormGroup label="Disabled services">
-        <LabelInput
-          ariaLabel="Add disabled service"
-          placeholder="Add disabled service"
-          validator={isServiceValid}
-          list={disabledServices}
-          item="Disabled service"
-          addAction={addDisabledFirewallService}
-          removeAction={removeDisabledFirewallService}
-          stepValidation={stepValidation}
-          fieldName="disabledServices"
-        />
-      </FormGroup>
       <FormGroup label="Enabled services">
         <LabelInput
           ariaLabel="Add enabled service"
@@ -48,6 +35,19 @@ const Services = () => {
           fieldName="enabledServices"
         />
       </FormGroup>
+      <FormGroup label="Disabled services">
+        <LabelInput
+          ariaLabel="Add disabled service"
+          placeholder="Add disabled service"
+          validator={isServiceValid}
+          list={disabledServices}
+          item="Disabled service"
+          addAction={addDisabledFirewallService}
+          removeAction={removeDisabledFirewallService}
+          stepValidation={stepValidation}
+          fieldName="disabledServices"
+        />
+      </FormGroup>
     </>
   );
 };

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

@@ -899,20 +899,6 @@ export const FirewallList = () => {
             'None'
           )}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
-          Disabled services
-        </Content>
-        <Content component={ContentVariants.dd}>
-          {firewall.services.disabled.length > 0 ? (
-            <CodeBlock>
-              <CodeBlockCode>
-                {firewall.services.disabled.join(' ')}
-              </CodeBlockCode>
-            </CodeBlock>
-          ) : (
-            'None'
-          )}
-        </Content>
         <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
           Enabled services
         </Content>
@@ -927,6 +913,20 @@ export const FirewallList = () => {
             'None'
           )}
         </Content>
+        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          Disabled services
+        </Content>
+        <Content component={ContentVariants.dd}>
+          {firewall.services.disabled.length > 0 ? (
+            <CodeBlock>
+              <CodeBlockCode>
+                {firewall.services.disabled.join(' ')}
+              </CodeBlockCode>
+            </CodeBlock>
+          ) : (
+            'None'
+          )}
+        </Content>
       </Content>
     </Content>
   );
@@ -938,6 +938,18 @@ export const ServicesList = () => {
   return (
     <Content>
       <Content component={ContentVariants.dl} className="review-step-dl">
+        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          Enabled
+        </Content>
+        <Content component={ContentVariants.dd}>
+          {services.enabled.length > 0 ? (
+            <CodeBlock>
+              <CodeBlockCode>{services.enabled.join(' ')}</CodeBlockCode>
+            </CodeBlock>
+          ) : (
+            'None'
+          )}
+        </Content>
         <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
           Disabled
         </Content>
@@ -962,18 +974,6 @@ export const ServicesList = () => {
             'None'
           )}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
-          Enabled
-        </Content>
-        <Content component={ContentVariants.dd}>
-          {services.enabled.length > 0 ? (
-            <CodeBlock>
-              <CodeBlockCode>{services.enabled.join(' ')}</CodeBlockCode>
-            </CodeBlock>
-          ) : (
-            'None'
-          )}
-        </Content>
       </Content>
     </Content>
   );

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

@@ -54,6 +54,23 @@ const ServicesInput = () => {
 
   return (
     <>
+      <FormGroup isRequired={false} label="Enabled services">
+        <LabelInput
+          ariaLabel="Add enabled service"
+          placeholder="Add enabled service"
+          validator={isServiceValid}
+          list={enabledServices.filter(
+            (service) => !enabledRequiredByOpenSCAP.includes(service)
+          )}
+          requiredList={enabledRequiredByOpenSCAP}
+          requiredCategoryName="Required by OpenSCAP"
+          item="Enabled service"
+          addAction={addEnabledService}
+          removeAction={removeEnabledService}
+          stepValidation={stepValidation}
+          fieldName="enabledSystemdServices"
+        />
+      </FormGroup>
       <FormGroup isRequired={false} label="Disabled services">
         <LabelInput
           ariaLabel="Add disabled service"
@@ -89,23 +106,6 @@ const ServicesInput = () => {
           fieldName="maskedSystemdServices"
         />
       </FormGroup>
-      <FormGroup isRequired={false} label="Enabled services">
-        <LabelInput
-          ariaLabel="Add enabled service"
-          placeholder="Add enabled service"
-          validator={isServiceValid}
-          list={enabledServices.filter(
-            (service) => !enabledRequiredByOpenSCAP.includes(service)
-          )}
-          requiredList={enabledRequiredByOpenSCAP}
-          requiredCategoryName="Required by OpenSCAP"
-          item="Enabled service"
-          addAction={addEnabledService}
-          removeAction={removeEnabledService}
-          stepValidation={stepValidation}
-          fieldName="enabledSystemdServices"
-        />
-      </FormGroup>
     </>
   );
 };

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

@@ -171,22 +171,22 @@ describe('Step Services', () => {
       name: /clear input/i,
     });
 
+    // Enabled services input
+    expect(screen.queryByText('Invalid format.')).not.toBeInTheDocument();
+    await addEnabledService('-------');
+    expect(await screen.findByText('Invalid format.')).toBeInTheDocument();
+    await waitFor(() => user.click(clearInputButtons[0]));
+
     // Disabled services input
     expect(screen.queryByText('Invalid format.')).not.toBeInTheDocument();
     await addDisabledService('-------');
     expect(await screen.findByText('Invalid format.')).toBeInTheDocument();
-    await waitFor(() => user.click(clearInputButtons[0]));
+    await waitFor(() => user.click(clearInputButtons[1]));
 
     // Masked services input
     expect(screen.queryByText('Invalid format.')).not.toBeInTheDocument();
     await addMaskedService('-------');
     expect(await screen.findByText('Invalid format.')).toBeInTheDocument();
-    await waitFor(() => user.click(clearInputButtons[1]));
-
-    // Enabled services input
-    expect(screen.queryByText('Invalid format.')).not.toBeInTheDocument();
-    await addEnabledService('-------');
-    expect(await screen.findByText('Invalid format.')).toBeInTheDocument();
     await waitFor(() => user.click(clearInputButtons[2]));
   });