2814 timebox create a poc to test the gmail api (#2868)

* create gmail strategy and controller

* gmail button connect

* wip

* trying to fix error { error: 'invalid_grant', error_description: 'Bad Request' }

* access token working

* refresh token working

* Getting the short term token from the front is working

* working

* rename token

* remove comment

* rename env var

* move file

* Fix

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/auth/graphql/mutations/generateTransientToken.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const GENERATE_ONE_TRANSIENT_TOKEN = gql`
+  mutation generateTransientToken {
+    generateTransientToken {
+      transientToken {
+        token
+      }
+    }
+  }
+`;

front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx

@@ -1,8 +1,11 @@
+import { useCallback } from 'react';
 import styled from '@emotion/styled';
 
 import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { Button } from '@/ui/input/button/components/Button';
 import { Card } from '@/ui/layout/card/components/Card';
+import { REACT_APP_SERVER_AUTH_URL } from '~/config';
+import { useGenerateTransientTokenMutation } from '~/generated/graphql';
 
 const StyledCard = styled(Card)`
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -27,15 +30,30 @@ const StyledBody = styled.div`
   padding: ${({ theme }) => theme.spacing(4)};
 `;
 
-export const SettingsAccountsEmptyStateCard = () => (
-  <StyledCard>
-    <StyledHeader>No connected account</StyledHeader>
-    <StyledBody>
-      <Button
-        Icon={IconGoogle}
-        title="Connect with Google"
-        variant="secondary"
-      />
-    </StyledBody>
-  </StyledCard>
-);
+export const SettingsAccountsEmptyStateCard = () => {
+  const [generateTransientToken] = useGenerateTransientTokenMutation();
+
+  const handleGmailLogin = useCallback(async () => {
+    const authServerUrl = REACT_APP_SERVER_AUTH_URL;
+
+    const transientToken = await generateTransientToken();
+
+    const token =
+      transientToken.data?.generateTransientToken.transientToken.token;
+
+    window.location.href = `${authServerUrl}/google-gmail?transientToken=${token}`;
+  }, [generateTransientToken]);
+  return (
+    <StyledCard>
+      <StyledHeader>No connected account</StyledHeader>
+      <StyledBody>
+        <Button
+          Icon={IconGoogle}
+          title="Connect with Google"
+          variant="secondary"
+          onClick={handleGmailLogin}
+        />
+      </StyledBody>
+    </StyledCard>
+  );
+};

front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts

@@ -66,7 +66,7 @@ export const settingsFieldMetadataTypes: Partial<
     Icon: IconTag,
   },
   [FieldMetadataType.MultiSelect]: {
-    label: 'Multi-Select',
+    label: 'MultiSelect',
     Icon: IconTag,
   },
   [FieldMetadataType.Currency]: {

front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -23,9 +23,9 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { NavigationDrawer } from '../NavigationDrawer';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
-import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
-import { NavigationDrawerSection } from '../NavigationDrawerSection';
 import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
+import { NavigationDrawerSection } from '../NavigationDrawerSection';
+import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
 
 const meta: Meta<typeof NavigationDrawer> = {
   title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',

front/src/modules/users/graphql/fragments/userQueryFragment.ts

@@ -25,6 +25,12 @@ export const USER_QUERY_FRAGMENT = gql`
       domainName
       inviteHash
       allowImpersonation
+      featureFlags {
+        id
+        key
+        value
+        workspaceId
+      }
     }
   }
 `;