Merge pull request #4095 from greenbone/add-conditional-route-for-fea…

…tures-flags

Add: conditional route component for feature flag

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 (
+    <Route
+      render={props =>
+        isEnabled ? <Component {...props} /> : <Redirect to="/notfound" />
+      }
+      {...rest}
+    />
+  );
+};
+
+ConditionalRoute.propTypes = {
+  component: PropTypes.elementType.isRequired,
+  feature: PropTypes.string.isRequired,
+};
+
+export default ConditionalRoute;

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 = () => <div>Mock Component</div>;
+
+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(
+      <MemoryRouter>
+        <ConditionalRoute component={MockComponent} feature={feature} />
+        <Route path="/notfound" render={() => <div>Not Found</div>} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText(expectedText)).toBeVisible();
+  });
+});