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 : 'None'} + + + Disabled services + + + {firewall.services.disabled.length > 0 + ? firewall.services.disabled + : 'None'} + + + Enabled services + + + {firewall.services.enabled.length > 0 + ? firewall.services.enabled + : '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