diff --git a/src/web/components/conditionalRoute/ConditionalRoute.jsx b/src/web/components/conditionalRoute/ConditionalRoute.jsx new file mode 100644 index 0000000000..97323b30fc --- /dev/null +++ b/src/web/components/conditionalRoute/ConditionalRoute.jsx @@ -0,0 +1,30 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'prop-types'; + +import {Route, Redirect} from 'react-router-dom'; +import useCapabilities from 'web/hooks/useCapabilities'; + +const ConditionalRoute = ({component: Component, feature, ...rest}) => { + const capabilities = useCapabilities(); + const isEnabled = capabilities.featureEnabled(feature); + + return ( + + isEnabled ? : + } + {...rest} + /> + ); +}; + +ConditionalRoute.propTypes = { + component: PropTypes.elementType.isRequired, + feature: PropTypes.string.isRequired, +}; + +export default ConditionalRoute; diff --git a/src/web/components/conditionalRoute/__tests__/ConditionalRoute.jsx b/src/web/components/conditionalRoute/__tests__/ConditionalRoute.jsx new file mode 100644 index 0000000000..a88608e852 --- /dev/null +++ b/src/web/components/conditionalRoute/__tests__/ConditionalRoute.jsx @@ -0,0 +1,47 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import {describe, test, expect} from '@gsa/testing'; +import {screen, rendererWith} from 'web/utils/testing'; +import {Route, MemoryRouter} from 'react-router-dom'; +import ConditionalRoute from 'web/components/conditionalRoute/ConditionalRoute'; +import Capabilities from 'gmp/capabilities/capabilities'; + +const MockComponent = () =>
Mock Component
; + +describe('ConditionalRoute', () => { + const featureList = [ + {name: 'ENABLED_FEATURE', _enabled: 1}, + {name: 'DISABLED_FEATURE', _enabled: 0}, + ]; + const capabilities = new Capabilities(['everything'], featureList); + const {render} = rendererWith({capabilities, router: true}); + test.each([ + { + feature: 'ENABLED_FEATURE', + expectedText: 'Mock Component', + description: 'renders the component when the feature is enabled', + }, + { + feature: 'DISABLED_FEATURE', + expectedText: 'Not Found', + description: 'redirects when the feature is disabled', + }, + { + feature: 'unknown-feature', + expectedText: 'Not Found', + description: 'does not render the component for an unknown feature', + }, + ])('$description', ({feature, expectedText}) => { + render( + + +
Not Found
} /> +
, + ); + + expect(screen.getByText(expectedText)).toBeVisible(); + }); +});