feat: add mechanism for feature flags (#817)

Author: rangoo94

paths.json

@@ -37,8 +37,8 @@
       "@constants/*": ["src/constants/*"],
       "@hooks": ["src/hooks/"],
       "@hooks/*": ["src/hooks/*"],
-      "@features": ["src/features/"],
-      "@features/*": ["src/features/*"],
+      "@feature-flags": ["src/feature-flags/"],
+      "@feature-flags/*": ["src/feature-flags/*"],
       "@redux": ["src/redux/"],
       "@redux/*": ["src/redux/*"],
       "@permissions": ["src/permissions/"],

src/AppRoot.tsx

@@ -10,6 +10,8 @@ import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import {ConfigContext, DashboardContext, MainContext} from '@contexts';
 import {ModalHandler, ModalOutletProvider} from '@contexts/ModalContext';
 
+import {FeatureFlagsProvider} from '@feature-flags';
+
 import {useAxiosInterceptors} from '@hooks/useAxiosInterceptors';
 import {useLastCallback} from '@hooks/useLastCallback';
 
@@ -110,6 +112,7 @@ const AppRoot: React.FC = () => {
   const plugins: Plugin[] = useMemo(() => [createAiInsightsPlugin()], []);
 
   return composeProviders()
+    .append(FeatureFlagsProvider, {})
     .append(ConfigContext.Provider, {value: config})
     .append(DashboardContext.Provider, {value: dashboardValue})
     .append(PermissionsProvider, {scope: permissionsScope, resolver: permissionsResolver})

src/feature-flags/context.tsx

@@ -0,0 +1,10 @@
+import {FC, PropsWithChildren, createContext, useState} from 'react';
+import {useEvent} from 'react-use';
+
+export const FeatureFlagsContext = createContext<Record<string, boolean>>({});
+
+export const FeatureFlagsProvider: FC<PropsWithChildren<{}>> = ({children}) => {
+  const [flags, setFlags] = useState({});
+  useEvent('feature-flags', ({data}) => setFlags({...flags, ...data}));
+  return <FeatureFlagsContext.Provider value={flags}>{children}</FeatureFlagsContext.Provider>;
+};

src/feature-flags/hooks.ts

@@ -0,0 +1,8 @@
+import {useContext} from 'react';
+
+import {FeatureFlagsContext} from './context';
+
+export const useFeatureFlag = (name: string): boolean => {
+  const flags = useContext(FeatureFlagsContext);
+  return Boolean(flags[name]);
+};

src/feature-flags/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export {FeatureFlagsProvider} from './context';