Wizard: Add services to Review step

This adds systemd services expandable to the Review step.

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

@@ -34,6 +34,7 @@ import {
   HostnameList,
   KernelList,
   FirewallList,
+  ServicesList,
 } from './ReviewStepTextLists';
 
 import isRhel from '../../../../../src/Utilities/isRhel';
@@ -54,6 +55,7 @@ import {
   selectTimezone,
   selectNtpServers,
   selectFirewall,
+  selectServices,
 } from '../../../../store/wizardSlice';
 import { useFlag } from '../../../../Utilities/useGetEnvironment';
 
@@ -74,6 +76,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const timezone = useAppSelector(selectTimezone);
   const ntpServers = useAppSelector(selectNtpServers);
   const firewall = useAppSelector(selectFirewall);
+  const services = useAppSelector(selectServices);
 
   const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(true);
   const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(true);
@@ -89,6 +92,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const [isExpandedHostname, setIsExpandedHostname] = useState(true);
   const [isExpandedKernel, setIsExpandedKernel] = useState(true);
   const [isExpandedFirewall, setIsExpandedFirewall] = useState(true);
+  const [isExpandedServices, setIsExpandedServices] = useState(true);
   const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
   const [isExpandedUsers, setIsExpandedUsers] = useState(true);
 
@@ -97,6 +101,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const isHostnameEnabled = useFlag('image-builder.hostname.enabled');
   const isKernelEnabled = useFlag('image-builder.kernel.enabled');
   const isFirewallEnabled = useFlag('image-builder.firewall.enabled');
+  const isServicesStepEnabled = useFlag('image-builder.services.enabled');
 
   const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
     setIsExpandedImageOutput(isExpandedImageOutput);
@@ -124,6 +129,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
     setIsExpandedKernel(isExpandedKernel);
   const onToggleFirewall = (isExpandedFirewall: boolean) =>
     setIsExpandedFirewall(isExpandedFirewall);
+  const onToggleServices = (isExpandedServices: boolean) =>
+    setIsExpandedServices(isExpandedServices);
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
   const onToggleUsers = (isExpandedUsers: boolean) =>
@@ -447,6 +454,24 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
             <FirewallList />
           </ExpandableSection>
         )}
+      {isServicesStepEnabled &&
+        (services.enabled.length > 0 || services.disabled.length > 0) && (
+          <ExpandableSection
+            toggleContent={composeExpandable(
+              'Systemd services',
+              'revisit-services',
+              'wizard-services'
+            )}
+            onToggle={(_event, isExpandedServices) =>
+              onToggleServices(isExpandedServices)
+            }
+            isExpanded={isExpandedServices}
+            isIndented
+            data-testid="services-expandable"
+          >
+            <ServicesList />
+          </ExpandableSection>
+        )}
       {isFirstBootEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(

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

@@ -77,6 +77,7 @@ import {
   selectKernel,
   selectUserAdministrator,
   selectFirewall,
+  selectServices,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -980,6 +981,49 @@ export const FirewallList = () => {
   );
 };
 
+export const ServicesList = () => {
+  const services = useAppSelector(selectServices);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Disabled
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {services.disabled.length > 0 || services.masked.length > 0 ? (
+            <CodeBlock>
+              <CodeBlockCode>
+                {services.disabled.concat(services.masked).join(' ')}
+              </CodeBlockCode>
+            </CodeBlock>
+          ) : (
+            'None'
+          )}
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Enabled
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {services.enabled.length > 0 ? (
+            <CodeBlock>
+              <CodeBlockCode>{services.enabled.join(' ')}</CodeBlockCode>
+            </CodeBlock>
+          ) : (
+            'None'
+          )}
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const FirstBootList = () => {
   const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);
 

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

@@ -1,5 +1,5 @@
 import type { Router as RemixRouter } from '@remix-run/router';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
 import { CREATE_BLUEPRINT } from '../../../../../constants';
@@ -107,6 +107,15 @@ const selectProfile = async () => {
   await waitFor(() => user.click(cis1Profile));
 };
 
+const clickRevisitButton = async () => {
+  const user = userEvent.setup();
+  const expandable = await screen.findByTestId('services-expandable');
+  const revisitButton = await within(expandable).findByTestId(
+    'revisit-services'
+  );
+  await waitFor(() => user.click(revisitButton));
+};
+
 describe('Step Services', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -169,6 +178,15 @@ describe('Step Services', () => {
       screen.queryByRole('button', { name: /close neovim-service/i })
     ).not.toBeInTheDocument();
   });
+
+  test('revisit step button on Review works', async () => {
+    await renderCreateMode();
+    await goToServicesStep();
+    await addDisabledService('telnet');
+    await goToReviewStep();
+    await clickRevisitButton();
+    await screen.findByRole('heading', { name: /Systemd services/ });
+  });
 });
 
 describe('Services request generated correctly', () => {