feat(ENG-10552): feature flag context and hook

src/Hub.tsx

@@ -0,0 +1,50 @@
+import { useQuery } from '@tanstack/react-query';
+import { IntegrationPicker } from './modules/integration-picker/IntegrationPicker';
+import { FeatureFlagProvider } from './shared/contexts/featureFlagContext';
+import { getSettings } from './shared/queries';
+import { HubModes } from './types/types';
+
+interface HubProps {
+    mode: HubModes;
+    token: string;
+    apiUrl: string;
+    dashboardUrl: string;
+    height: string;
+    onSuccess?: () => void;
+    onClose?: () => void;
+    onCancel?: () => void;
+    accountId?: string;
+}
+export const Hub = ({
+    mode,
+    token,
+    apiUrl,
+    dashboardUrl,
+    height,
+    onSuccess,
+    onClose,
+    onCancel,
+    accountId,
+}: HubProps) => {
+    const { data: settings } = useQuery({
+        queryKey: ['settings'],
+        queryFn: () => getSettings(apiUrl, token),
+    });
+
+    return (
+        <FeatureFlagProvider featureFlags={settings?.enabled_features ?? []}>
+            {mode === 'integration-picker' && (
+                <IntegrationPicker
+                    token={token}
+                    baseUrl={apiUrl}
+                    dashboardUrl={dashboardUrl}
+                    height={height}
+                    onSuccess={onSuccess}
+                    onClose={onClose}
+                    onCancel={onCancel}
+                    accountId={accountId}
+                />
+            )}
+        </FeatureFlagProvider>
+    );
+};

src/StackOneHub.tsx

@@ -13,6 +13,7 @@ import {
 } from '@stackone/malachite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useEffect } from 'react';
+import { Hub } from './Hub';
 import { CsvImporter } from './modules/csv-importer.tsx/CsvImporter';
 import { IntegrationPicker } from './modules/integration-picker/IntegrationPicker';
 import ErrorContainer from './shared/components/error';
@@ -119,18 +120,17 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
                 }
             >
                 <QueryClientProvider client={queryClient}>
-                    {mode === 'integration-picker' && (
-                        <IntegrationPicker
-                            token={token}
-                            baseUrl={apiUrl}
-                            dashboardUrl={dashboardUrl}
-                            height={height}
-                            onSuccess={onSuccess}
-                            onClose={onClose}
-                            onCancel={onCancel}
-                            accountId={accountId}
-                        />
-                    )}
+                    <Hub
+                        mode={mode}
+                        token={token}
+                        apiUrl={apiUrl}
+                        dashboardUrl={dashboardUrl}
+                        height={height}
+                        onSuccess={onSuccess}
+                        accountId={accountId}
+                        onClose={onClose}
+                        onCancel={onCancel}
+                    />
                 </QueryClientProvider>
             </ErrorBoundary>
         </MalachiteContext>

src/modules/integration-picker/IntegrationPicker.tsx

@@ -1,4 +1,5 @@
 import { Card } from '@stackone/malachite';
+import useFeatureFlags from '../../shared/hooks/useFeatureFlags';
 import { IntegrationPickerContent } from './components/IntegrationPickerContent';
 import CardFooter from './components/cardFooter';
 import CardTitle from './components/cardTitle';
@@ -23,6 +24,8 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
     onSuccess,
     dashboardUrl,
 }) => {
+    const isHubLinkAccountReleaseEnabled = useFeatureFlags('hub_link_account_release');
+
     const {
         // Data
         hubData,
@@ -73,20 +76,22 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
             }
             height={height}
         >
-            <IntegrationPickerContent
-                isLoading={isLoading}
-                hasError={hasError}
-                connectionState={connectionState}
-                selectedIntegration={selectedIntegration}
-                connectorData={connectorData?.config ?? null}
-                hubData={hubData ?? null}
-                fields={fields}
-                guide={guide}
-                errorHubData={errorHubData}
-                errorConnectorData={errorConnectorData}
-                onSelect={setSelectedIntegration}
-                onChange={setFormData}
-            />
+            {isHubLinkAccountReleaseEnabled && (
+                <IntegrationPickerContent
+                    isLoading={isLoading}
+                    hasError={hasError}
+                    connectionState={connectionState}
+                    selectedIntegration={selectedIntegration}
+                    connectorData={connectorData?.config ?? null}
+                    hubData={hubData ?? null}
+                    fields={fields}
+                    guide={guide}
+                    errorHubData={errorHubData}
+                    errorConnectorData={errorConnectorData}
+                    onSelect={setSelectedIntegration}
+                    onChange={setFormData}
+                />
+            )}
         </Card>
     );
 };

src/shared/contexts/featureFlagContext.tsx

@@ -0,0 +1,26 @@
+import { createContext, useMemo } from 'react';
+import { FeatureFlag } from '../types/featureFlags';
+
+export const FeatureFlagContext = createContext<{ featureFlags: FeatureFlag[] }>({
+    featureFlags: [],
+});
+
+export const FeatureFlagProvider = ({
+    featureFlags,
+    children,
+}: {
+    featureFlags: FeatureFlag[];
+    children: React.ReactNode;
+}) => {
+    const memoizedContextValue = useMemo(
+        () => ({
+            featureFlags,
+        }),
+        [featureFlags],
+    );
+    return (
+        <FeatureFlagContext.Provider value={memoizedContextValue}>
+            {children}
+        </FeatureFlagContext.Provider>
+    );
+};

src/shared/hooks/useFeatureFlags.ts

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { FeatureFlagContext } from '../contexts/featureFlagContext';
+import { FeatureFlag } from '../types/featureFlags';
+
+const isFeatureEnabled = ({
+    featureFlags,
+    featureFlag,
+}: { featureFlags: FeatureFlag[]; featureFlag: FeatureFlag }): boolean => {
+    return featureFlags.includes(featureFlag);
+};
+
+export const useFeatureFlags = (featureFlag: FeatureFlag): boolean => {
+    const { featureFlags } = useContext(FeatureFlagContext);
+    if (!featureFlags) {
+        throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
+    }
+
+    return isFeatureEnabled({
+        featureFlags,
+        featureFlag,
+    });
+};
+
+export default useFeatureFlags;

src/shared/queries.ts

@@ -0,0 +1,12 @@
+import { getRequest } from './httpClient';
+import { FeatureFlag } from './types/featureFlags';
+
+export const getSettings = async (baseUrl: string, token: string) => {
+    return await getRequest<{ enabled_features: FeatureFlag[] }>({
+        url: `${baseUrl}/hub/settings`,
+        headers: {
+            'Content-Type': 'application/json',
+            'x-hub-session-token': token,
+        },
+    });
+};

src/shared/types/featureFlags.ts

@@ -0,0 +1 @@
+export type FeatureFlag = 'hub_link_account_release';