Feature flags env variable gating

packages/twenty-front/src/generated/graphql.tsx

@@ -923,6 +923,7 @@ export type Query = {
   findWorkspaceFromInviteHash: Workspace;
   findWorkspaceInvitations: Array<WorkspaceInvitation>;
   getAvailablePackages: Scalars['JSON'];
+  getFeatureFlagManagementCapability: Scalars['Boolean'];
   getPostgresCredentials?: Maybe<PostgresCredentials>;
   getProductPrices: ProductPricesEntity;
   getPublicWorkspaceDataBySubdomain: PublicWorkspaceDataOutput;
@@ -1568,10 +1569,16 @@ export type WorkspaceEdge = {
   node: Workspace;
 };
 
+export type WorkspaceFeatureFlag = {
+  __typename?: 'WorkspaceFeatureFlag';
+  key: Scalars['String'];
+  value: Scalars['Boolean'];
+};
+
 export type WorkspaceInfo = {
   __typename?: 'WorkspaceInfo';
   allowImpersonation: Scalars['Boolean'];
-  featureFlags: Array<FeatureFlag>;
+  featureFlags: Array<WorkspaceFeatureFlag>;
   id: Scalars['String'];
   logo?: Maybe<Scalars['String']>;
   name: Scalars['String'];
@@ -2102,7 +2109,12 @@ export type UserLookupAdminPanelMutationVariables = Exact<{
 }>;
 
 
-export type UserLookupAdminPanelMutation = { __typename?: 'Mutation', userLookupAdminPanel: { __typename?: 'UserLookup', user: { __typename?: 'UserInfo', id: string, email: string, firstName?: string | null, lastName?: string | null }, workspaces: Array<{ __typename?: 'WorkspaceInfo', id: string, name: string, logo?: string | null, totalUsers: number, allowImpersonation: boolean, users: Array<{ __typename?: 'UserInfo', id: string, email: string, firstName?: string | null, lastName?: string | null }>, featureFlags: Array<{ __typename?: 'FeatureFlag', key: FeatureFlagKey, value: boolean }> }> } };
+export type UserLookupAdminPanelMutation = { __typename?: 'Mutation', userLookupAdminPanel: { __typename?: 'UserLookup', user: { __typename?: 'UserInfo', id: string, email: string, firstName?: string | null, lastName?: string | null }, workspaces: Array<{ __typename?: 'WorkspaceInfo', id: string, name: string, logo?: string | null, totalUsers: number, allowImpersonation: boolean, users: Array<{ __typename?: 'UserInfo', id: string, email: string, firstName?: string | null, lastName?: string | null }>, featureFlags: Array<{ __typename?: 'WorkspaceFeatureFlag', key: string, value: boolean }> }> } };
+
+export type GetFeatureFlagManagementCapabilityQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetFeatureFlagManagementCapabilityQuery = { __typename?: 'Query', getFeatureFlagManagementCapability: boolean };
 
 export type CreateOidcIdentityProviderMutationVariables = Exact<{
   input: SetupOidcSsoInput;
@@ -3668,6 +3680,38 @@ export function useUserLookupAdminPanelMutation(baseOptions?: Apollo.MutationHoo
 export type UserLookupAdminPanelMutationHookResult = ReturnType<typeof useUserLookupAdminPanelMutation>;
 export type UserLookupAdminPanelMutationResult = Apollo.MutationResult<UserLookupAdminPanelMutation>;
 export type UserLookupAdminPanelMutationOptions = Apollo.BaseMutationOptions<UserLookupAdminPanelMutation, UserLookupAdminPanelMutationVariables>;
+export const GetFeatureFlagManagementCapabilityDocument = gql`
+    query GetFeatureFlagManagementCapability {
+  getFeatureFlagManagementCapability
+}
+    `;
+
+/**
+ * __useGetFeatureFlagManagementCapabilityQuery__
+ *
+ * To run a query within a React component, call `useGetFeatureFlagManagementCapabilityQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetFeatureFlagManagementCapabilityQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetFeatureFlagManagementCapabilityQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetFeatureFlagManagementCapabilityQuery(baseOptions?: Apollo.QueryHookOptions<GetFeatureFlagManagementCapabilityQuery, GetFeatureFlagManagementCapabilityQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetFeatureFlagManagementCapabilityQuery, GetFeatureFlagManagementCapabilityQueryVariables>(GetFeatureFlagManagementCapabilityDocument, options);
+      }
+export function useGetFeatureFlagManagementCapabilityLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetFeatureFlagManagementCapabilityQuery, GetFeatureFlagManagementCapabilityQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetFeatureFlagManagementCapabilityQuery, GetFeatureFlagManagementCapabilityQueryVariables>(GetFeatureFlagManagementCapabilityDocument, options);
+        }
+export type GetFeatureFlagManagementCapabilityQueryHookResult = ReturnType<typeof useGetFeatureFlagManagementCapabilityQuery>;
+export type GetFeatureFlagManagementCapabilityLazyQueryHookResult = ReturnType<typeof useGetFeatureFlagManagementCapabilityLazyQuery>;
+export type GetFeatureFlagManagementCapabilityQueryResult = Apollo.QueryResult<GetFeatureFlagManagementCapabilityQuery, GetFeatureFlagManagementCapabilityQueryVariables>;
 export const CreateOidcIdentityProviderDocument = gql`
     mutation CreateOIDCIdentityProvider($input: SetupOIDCSsoInput!) {
   createOIDCIdentityProvider(input: $input) {

packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx

@@ -27,22 +27,17 @@ export const VerifyEffect = () => {
   );
 
   useEffect(() => {
-    const getTokens = async () => {
-      if (isDefined(errorMessage)) {
-        enqueueSnackBar(errorMessage, {
-          variant: SnackBarVariant.Error,
-        });
-      }
-      if (!loginToken) {
-        navigate(AppPath.SignInUp);
-      } else {
-        setIsAppWaitingForFreshObjectMetadata(true);
-        await verify(loginToken);
-      }
-    };
-
-    if (!isLogged) {
-      getTokens();
+    if (isDefined(errorMessage)) {
+      enqueueSnackBar(errorMessage, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+
+    if (isDefined(loginToken)) {
+      setIsAppWaitingForFreshObjectMetadata(true);
+      verify(loginToken);
+    } else if (!isLogged) {
+      navigate(AppPath.SignInUp);
     }
     // Verify only needs to run once at mount
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -141,10 +141,7 @@ describe('useAuth', () => {
     const { result } = renderHooks();
 
     await act(async () => {
-      const res = await result.current.signUpWithCredentials(email, password);
-      expect(res).toHaveProperty('user');
-      expect(res).toHaveProperty('workspaceMember');
-      expect(res).toHaveProperty('workspace');
+      await result.current.signUpWithCredentials(email, password);
     });
 
     expect(mocks[2].result).toHaveBeenCalled();

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -268,6 +268,8 @@ export const useAuth = () => {
 
   const handleVerify = useCallback(
     async (loginToken: string) => {
+      setIsVerifyPendingState(true);
+
       const verifyResult = await verify({
         variables: { loginToken },
       });
@@ -282,16 +284,11 @@ export const useAuth = () => {
 
       setTokenPair(verifyResult.data?.verify.tokens);
 
-      const { user, workspaceMember, workspace } = await loadCurrentUser();
+      await loadCurrentUser();
 
-      return {
-        user,
-        workspaceMember,
-        workspace,
-        tokens: verifyResult.data?.verify.tokens,
-      };
+      setIsVerifyPendingState(false);
     },
-    [verify, setTokenPair, loadCurrentUser],
+    [setIsVerifyPendingState, verify, setTokenPair, loadCurrentUser],
   );
 
   const handleCrendentialsSignIn = useCallback(
@@ -301,21 +298,9 @@ export const useAuth = () => {
         password,
         captchaToken,
       );
-      setIsVerifyPendingState(true);
-
-      const { user, workspaceMember, workspace } = await handleVerify(
-        loginToken.token,
-      );
-
-      setIsVerifyPendingState(false);
-
-      return {
-        user,
-        workspaceMember,
-        workspace,
-      };
+      await handleVerify(loginToken.token);
     },
-    [handleChallenge, handleVerify, setIsVerifyPendingState],
+    [handleChallenge, handleVerify],
   );
 
   const handleSignOut = useCallback(async () => {
@@ -360,13 +345,7 @@ export const useAuth = () => {
         );
       }
 
-      const { user, workspace, workspaceMember } = await handleVerify(
-        signUpResult.data?.signUp.loginToken.token,
-      );
-
-      setIsVerifyPendingState(false);
-
-      return { user, workspaceMember, workspace };
+      await handleVerify(signUpResult.data?.signUp.loginToken.token);
     },
     [
       setIsVerifyPendingState,

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

@@ -1,5 +1,8 @@
 import { SETTINGS_ADMIN_FEATURE_FLAGS_TAB_ID } from '@/settings/admin-panel/constants/SettingsAdminFeatureFlagsTabs';
+import { useFeatureFlagManagementCapability } from '@/settings/admin-panel/hooks/useFeatureFlagManagementCapability';
 import { useFeatureFlagsManagement } from '@/settings/admin-panel/hooks/useFeatureFlagsManagement';
+import { useImpersonate } from '@/settings/admin-panel/hooks/useImpersonate';
+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@@ -24,7 +27,6 @@ import {
   Toggle,
 } from 'twenty-ui';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { useImpersonate } from '@/settings/admin-panel/hooks/useImpersonate';
 
 const StyledLinkContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
@@ -47,7 +49,7 @@ const StyledUserInfo = styled.div`
 `;
 
 const StyledTable = styled(Table)`
-  margin-top: ${({ theme }) => theme.spacing(0.5)};
+  margin-top: ${({ theme }) => theme.spacing(3)};
 `;
 
 const StyledTabListContainer = styled.div`
@@ -87,6 +89,13 @@ export const SettingsAdminContent = () => {
     error,
   } = useFeatureFlagsManagement();
 
+  const { canManageFeatureFlags, isLoading: isLoadingCapability } =
+    useFeatureFlagManagementCapability();
+
+  if (isLoadingCapability) {
+    return <SettingsSkeletonLoader />;
+  }
+
   const handleSearch = async () => {
     setActiveTabId('');
 
@@ -151,37 +160,39 @@ export const SettingsAdminContent = () => {
           />
         )}
 
-        <StyledTable>
-          <TableRow
-            gridAutoColumns="1fr 100px"
-            mobileGridAutoColumns="1fr 80px"
-          >
-            <TableHeader>Feature Flag</TableHeader>
-            <TableHeader align="right">Status</TableHeader>
-          </TableRow>
-
-          {activeWorkspace.featureFlags.map((flag) => (
+        {canManageFeatureFlags && (
+          <StyledTable>
             <TableRow
               gridAutoColumns="1fr 100px"
               mobileGridAutoColumns="1fr 80px"
-              key={flag.key}
             >
-              <TableCell>{flag.key}</TableCell>
-              <TableCell align="right">
-                <Toggle
-                  value={flag.value}
-                  onChange={(newValue) =>
-                    handleFeatureFlagUpdate(
-                      activeWorkspace.id,
-                      flag.key,
-                      newValue,
-                    )
-                  }
-                />
-              </TableCell>
+              <TableHeader>Feature Flag</TableHeader>
+              <TableHeader align="right">Status</TableHeader>
             </TableRow>
-          ))}
-        </StyledTable>
+
+            {activeWorkspace.featureFlags.map((flag) => (
+              <TableRow
+                gridAutoColumns="1fr 100px"
+                mobileGridAutoColumns="1fr 80px"
+                key={flag.key}
+              >
+                <TableCell>{flag.key}</TableCell>
+                <TableCell align="right">
+                  <Toggle
+                    value={flag.value}
+                    onChange={(newValue) =>
+                      handleFeatureFlagUpdate(
+                        activeWorkspace.id,
+                        flag.key,
+                        newValue,
+                      )
+                    }
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </StyledTable>
+        )}
       </>
     );
   };
@@ -190,8 +201,16 @@ export const SettingsAdminContent = () => {
     <>
       <Section>
         <H2Title
-          title="Feature Flags & Impersonation"
-          description="Look up users and manage their workspace feature flags or impersonate it."
+          title={
+            canManageFeatureFlags
+              ? 'Feature Flags & Impersonation'
+              : 'User Impersonation'
+          }
+          description={
+            canManageFeatureFlags
+              ? 'Look up users and manage their workspace feature flags or impersonate it.'
+              : 'Look up users to impersonate them.'
+          }
         />
 
         <StyledContainer>

packages/twenty-front/src/modules/settings/admin-panel/graphql/queries/getFeatureFlagManagementCapability.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const GET_FEATURE_FLAG_MANAGEMENT_CAPABILITY = gql`
+  query GetFeatureFlagManagementCapability {
+    getFeatureFlagManagementCapability
+  }
+`;

packages/twenty-front/src/modules/settings/admin-panel/hooks/useFeatureFlagManagementCapability.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@apollo/client';
+import { GET_FEATURE_FLAG_MANAGEMENT_CAPABILITY } from '../graphql/queries/getFeatureFlagManagementCapability';
+
+export const useFeatureFlagManagementCapability = () => {
+  const { data, loading } = useQuery(GET_FEATURE_FLAG_MANAGEMENT_CAPABILITY);
+
+  return {
+    canManageFeatureFlags: data?.getFeatureFlagManagementCapability ?? false,
+    isLoading: loading,
+  };
+};

packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonate.ts

@@ -1,15 +1,24 @@
 import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
 import { useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useImpersonateMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
+import { useAuth } from '@/auth/hooks/useAuth';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
 
 export const useImpersonate = () => {
   const [currentUser] = useRecoilState(currentUserState);
-  const [impersonate] = useImpersonateMutation();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
+    isAppWaitingForFreshObjectMetadataState,
+  );
+
+  const { verify } = useAuth();
 
+  const [impersonate] = useImpersonateMutation();
   const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -39,6 +48,13 @@ export const useImpersonate = () => {
 
       const { loginToken, workspace } = impersonateResult.data.impersonate;
 
+      if (workspace.id === currentWorkspace?.id) {
+        setIsAppWaitingForFreshObjectMetadata(true);
+        await verify(loginToken.token);
+        setIsAppWaitingForFreshObjectMetadata(false);
+        return;
+      }
+
       return redirectToWorkspaceDomain(workspace.subdomain, AppPath.Verify, {
         loginToken: loginToken.token,
       });