From e8662f86838432d892c83aa9bdbea46cdb584f02 Mon Sep 17 00:00:00 2001 From: regexowl Date: Mon, 20 Jan 2025 15:03:19 +0100 Subject: [PATCH] Wizard: Add firewall to Review step This adds a firewall expandable to the Review step. --- .../steps/Review/ReviewStep.tsx | 27 +++++++++ .../steps/Review/ReviewStepTextLists.tsx | 55 +++++++++++++++++++ .../steps/Firewall/Firewall.test.tsx | 21 ++++++- 3 files changed, 101 insertions(+), 2 deletions(-) diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx index 1c23de0cf..6651a24d6 100644 --- a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx +++ b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx @@ -33,6 +33,7 @@ import { LocaleList, HostnameList, KernelList, + FirewallList, } from './ReviewStepTextLists'; import isRhel from '../../../../../src/Utilities/isRhel'; @@ -52,6 +53,7 @@ import { selectKeyboard, selectTimezone, selectNtpServers, + selectFirewall, } from '../../../../store/wizardSlice'; import { useFlag } from '../../../../Utilities/useGetEnvironment'; @@ -71,6 +73,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { const keyboard = useAppSelector(selectKeyboard); const timezone = useAppSelector(selectTimezone); const ntpServers = useAppSelector(selectNtpServers); + const firewall = useAppSelector(selectFirewall); const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(true); const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(true); @@ -85,6 +88,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { const [isExpandedLocale, setIsExpandedLocale] = useState(true); const [isExpandedHostname, setIsExpandedHostname] = useState(true); const [isExpandedKernel, setIsExpandedKernel] = useState(true); + const [isExpandedFirewall, setIsExpandedFirewall] = useState(true); const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true); const [isExpandedUsers, setIsExpandedUsers] = useState(true); @@ -92,6 +96,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { const isLocaleEnabled = useFlag('image-builder.locale.enabled'); const isHostnameEnabled = useFlag('image-builder.hostname.enabled'); const isKernelEnabled = useFlag('image-builder.kernel.enabled'); + const isFirewallEnabled = useFlag('image-builder.firewall.enabled'); const onToggleImageOutput = (isExpandedImageOutput: boolean) => setIsExpandedImageOutput(isExpandedImageOutput); @@ -117,6 +122,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { setIsExpandedHostname(isExpandedHostname); const onToggleKernel = (isExpandedKernel: boolean) => setIsExpandedKernel(isExpandedKernel); + const onToggleFirewall = (isExpandedFirewall: boolean) => + setIsExpandedFirewall(isExpandedFirewall); const onToggleFirstBoot = (isExpandableFirstBoot: boolean) => setIsExpandedFirstBoot(isExpandableFirstBoot); const onToggleUsers = (isExpandedUsers: boolean) => @@ -420,6 +427,26 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { )} + {isFirewallEnabled && + (firewall.ports.length > 0 || + firewall.services.disabled.length > 0 || + firewall.services.enabled.length > 0) && ( + + onToggleFirewall(isExpandedFirewall) + } + isExpanded={isExpandedFirewall} + isIndented + data-testid="firewall-expandable" + > + + + )} {isFirstBootEnabled && ( { ); }; +export const FirewallList = () => { + const firewall = useAppSelector(selectFirewall); + + return ( + + + + Ports + + + + + {firewall.ports ? firewall.ports.join(' ') : 'None'} + + + + + Disabled services + + + + + {firewall.services.disabled.length > 0 + ? firewall.services.disabled.join(' ') + : 'None'} + + + + + Enabled services + + + + + {firewall.services.enabled.length > 0 + ? firewall.services.enabled.join(' ') + : 'None'} + + + + + + ); +}; + 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 index 2b8731e70..cba11737f 100644 --- 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'; @@ -67,6 +67,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(); @@ -119,6 +128,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', () => { @@ -205,5 +223,4 @@ describe('Firewall request generated correctly', () => { }); }); -// TO DO Step Firewall -> revisit step button on Review works // TO DO Firewall edit mode