Wizard: Add firewall to Review step

This adds a firewall expandable to the Review step.
osbuild · Jan 20, 2025 · dc393b3 · dc393b3
1 parent 8a64bbe
commit dc393b3
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 2 deletions.
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
@@ -32,6 +32,7 @@ import {
   TimezoneList,
   LocaleList,
   HostnameList,
+  FirewallList,
 } from './ReviewStepTextLists';
 
 import isRhel from '../../../../../src/Utilities/isRhel';
@@ -46,6 +47,7 @@ import {
   selectDistribution,
   selectImageTypes,
   selectRegistrationType,
+  selectFirewall,
 } from '../../../../store/wizardSlice';
 import { useFlag } from '../../../../Utilities/useGetEnvironment';
 
@@ -60,6 +62,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const complianceProfile = useAppSelector(selectComplianceProfileID);
   const compliancePolicy = useAppSelector(selectCompliancePolicyID);
   const registrationType = useAppSelector(selectRegistrationType);
+  const firewall = useAppSelector(selectFirewall);
 
   const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(true);
   const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(true);
@@ -73,12 +76,14 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const [isExpandedTimezone, setIsExpandedTimezone] = useState(true);
   const [isExpandedLocale, setIsExpandedLocale] = useState(true);
   const [isExpandedHostname, setIsExpandedHostname] = useState(true);
+  const [isExpandedFirewall, setIsExpandedFirewall] = useState(true);
   const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
   const [isExpandedUsers, setIsExpandedUsers] = useState(true);
 
   const isTimezoneEnabled = useFlag('image-builder.timezone.enabled');
   const isLocaleEnabled = useFlag('image-builder.locale.enabled');
   const isHostnameEnabled = useFlag('image-builder.hostname.enabled');
+  const isFirewallEnabled = useFlag('image-builder.firewall.enabled');
 
   const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
     setIsExpandedImageOutput(isExpandedImageOutput);
@@ -102,6 +107,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
     setIsExpandedLocale(isExpandedLocale);
   const onToggleHostname = (isExpandedHostname: boolean) =>
     setIsExpandedHostname(isExpandedHostname);
+  const onToggleFirewall = (isExpandedFirewall: boolean) =>
+    setIsExpandedFirewall(isExpandedFirewall);
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
   const onToggleUsers = (isExpandedUsers: boolean) =>
@@ -385,6 +392,26 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
           <HostnameList />
         </ExpandableSection>
       )}
+      {isFirewallEnabled &&
+        (firewall.ports.length > 0 ||
+          firewall.services.disabled.length > 0 ||
+          firewall.services.enabled.length > 0) && (
+          <ExpandableSection
+            toggleContent={composeExpandable(
+              'Firewall',
+              'revisit-firewall',
+              'wizard-firewall'
+            )}
+            onToggle={(_event, isExpandedFirewall) =>
+              onToggleFirewall(isExpandedFirewall)
+            }
+            isExpanded={isExpandedFirewall}
+            isIndented
+            data-testid="firewall-expandable"
+          >
+            <FirewallList />
+          </ExpandableSection>
+        )}
       {isFirstBootEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(

diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
@@ -71,6 +71,7 @@ import {
   selectUserNameByIndex,
   selectUserPasswordByIndex,
   selectUserSshKeyByIndex,
+  selectFirewall,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -875,6 +876,48 @@ export const HostnameList = () => {
   );
 };
 
+export const FirewallList = () => {
+  const firewall = useAppSelector(selectFirewall);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Ports
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {firewall.ports ? firewall.ports : 'None'}
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Disabled services
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {firewall.services.disabled.length > 0
+            ? firewall.services.disabled
+            : 'None'}
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Enabled services
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {firewall.services.enabled.length > 0
+            ? firewall.services.enabled
+            : 'None'}
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const FirstBootList = () => {
   const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);
 

diff --git a/src/test/Components/CreateImageWizard/steps/Firewall/Firewall.test.tsx b/src/test/Components/CreateImageWizard/steps/Firewall/Firewall.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';
@@ -66,6 +66,15 @@ const addDisabledFirewallService = async (service: string) => {
   await waitFor(() => user.type(disabledServiceInput, service.concat(',')));
 };
 
+const clickRevisitButton = async () => {
+  const user = userEvent.setup();
+  const expandable = await screen.findByTestId('firewall-expandable');
+  const revisitButton = await within(expandable).findByTestId(
+    'revisit-firewall'
+  );
+  await waitFor(() => user.click(revisitButton));
+};
+
 describe('Step Firewall', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -118,6 +127,15 @@ describe('Step Firewall', () => {
     await addPort('wrong--service');
     await screen.findByText('Invalid format.');
   });
+
+  test('revisit step button on Review works', async () => {
+    await renderCreateMode();
+    await goToFirewallStep();
+    await addPort('22:tcp');
+    await goToReviewStep();
+    await clickRevisitButton();
+    await screen.findByRole('heading', { name: /Firewall/ });
+  });
 });
 
 describe('Firewall request generated correctly', () => {
@@ -204,5 +222,4 @@ describe('Firewall request generated correctly', () => {
   });
 });
 
-// TO DO Step Firewall -> revisit step button on Review works
 // TO DO Firewall edit mode