[frontend] Introduce FeatureFlagged utility component

Author: fellowseb

opencti-platform/opencti-front/src/components/FeatureFlagged.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { screen } from '@testing-library/react';
+import FeatureFlagged from './FeatureFlagged';
+import testRender from '../utils/tests/test-render';
+import useHelper from '../utils/hooks/useHelper';
+import type { ModuleHelper } from '../utils/platformModulesHelper';
+
+vi.mock('../utils/hooks/useHelper');
+
+describe('FeatureFlagged', () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('renders Enabled when one of the flags is enabled', () => {
+    vi.mocked(useHelper).mockReturnValue({
+      isFeatureEnable: (flag: string) => flag === 'SOME_FLAG',
+    } as unknown as ModuleHelper);
+    testRender(
+      <FeatureFlagged
+        flags={['SOME_FLAG', 'SOME_OTHER_FLAG']}
+        Enabled="Enabled"
+        Disabled="Disabled"
+      />,
+    );
+    expect(screen.getByText('Enabled')).toBeInTheDocument();
+  });
+
+  it('renders Disabled when none of the flags are enabled', () => {
+    vi.mocked(useHelper).mockReturnValue({
+      isFeatureEnable: () => false,
+    } as unknown as ModuleHelper);
+    testRender(
+      <FeatureFlagged
+        flags={['SOME_FLAG', 'SOME_OTHER_FLAG']}
+        Enabled="Enabled"
+        Disabled="Disabled"
+      />,
+    );
+    expect(screen.getByText('Disabled')).toBeInTheDocument();
+  });
+});

opencti-platform/opencti-front/src/components/FeatureFlagged.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import useHelper from '../utils/hooks/useHelper';
+
+interface FeatureFlaggedProps {
+  flags: string[];
+  Enabled: ReactNode;
+  Disabled: ReactNode;
+}
+
+/**
+ * Utility component to switch between two components based on the value
+ * of feature flags. If at least one othe given `flags` is enabled then
+ * the `Enabled` component is rendered, otherwise it's the `Disabled` component.
+ */
+const FeatureFlagged = ({ flags, Enabled, Disabled }: FeatureFlaggedProps) => {
+  const { isFeatureEnable } = useHelper();
+  const areSomeFeaturesEnabled = flags.some(isFeatureEnable);
+  return areSomeFeaturesEnabled ? Enabled : Disabled;
+};
+
+export default FeatureFlagged;