WIP: add 'Add account' button

twentyhq · Oct 7, 2024 · 0409f15 · 0409f15
1 parent fd46298
commit 0409f15
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts b/packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts
@@ -13,7 +13,7 @@ export const useTriggerGoogleApisOAuth = () => {
 
   const triggerGoogleApisOAuth = useCallback(
     async (
-      redirectLocation?: AppPath,
+      redirectLocation?: AppPath | string,
       messageVisibility?: MessageChannelVisibility,
       calendarVisibility?: CalendarChannelVisibility,
     ) => {

diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useMemo, useRef, useState } from 'react';
+import React, { MouseEvent, useMemo, useRef, useState } from 'react';
 import { IconChevronDown, IconComponent } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -11,13 +11,20 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
+import { isDefined } from '~/utils/isDefined';
 
 export type SelectOption<Value extends string | number | null> = {
   value: Value;
   label: string;
   Icon?: IconComponent;
 };
 
+type CallToActionButton = {
+  text: string;
+  onClick: (event: MouseEvent<HTMLDivElement>) => void;
+  Icon?: IconComponent;
+};
+
 export type SelectProps<Value extends string | number | null> = {
   className?: string;
   disabled?: boolean;
@@ -32,6 +39,7 @@ export type SelectProps<Value extends string | number | null> = {
   options: SelectOption<Value>[];
   value?: Value;
   withSearchInput?: boolean;
+  callToActionButton?: CallToActionButton;
 };
 
 const StyledContainer = styled.div<{ fullWidth?: boolean }>`
@@ -89,6 +97,7 @@ export const Select = <Value extends string | number | null>({
   options,
   value,
   withSearchInput,
+  callToActionButton,
 }: SelectProps<Value>) => {
   const selectContainerRef = useRef<HTMLDivElement>(null);
 
@@ -109,7 +118,9 @@ export const Select = <Value extends string | number | null>({
     [options, searchInputValue],
   );
 
-  const isDisabled = disabledFromProps || options.length <= 1;
+  const isDisabled =
+    disabledFromProps ||
+    (options.length <= 1 && !isDefined(callToActionButton));
 
   const { closeDropdown } = useDropdown(dropdownId);
 
@@ -177,6 +188,18 @@ export const Select = <Value extends string | number | null>({
                   ))}
                 </DropdownMenuItemsContainer>
               )}
+              {!!callToActionButton && !!filteredOptions.length && (
+                <DropdownMenuSeparator />
+              )}
+              {!!callToActionButton && (
+                <DropdownMenuItemsContainer hasMaxHeight>
+                  <MenuItem
+                    onClick={callToActionButton.onClick}
+                    LeftIcon={callToActionButton.Icon}
+                    text={callToActionButton.text}
+                  />
+                </DropdownMenuItemsContainer>
+              )}
             </>
           }
           dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx
@@ -4,15 +4,17 @@ import { WorkflowEditActionFormBase } from '@/workflow/components/WorkflowEditAc
 import { WorkflowSendEmailStep } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { IconMail } from 'twenty-ui';
+import { IconMail, IconPlus } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { useFindManyRecords } from 'packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords';
-import { ConnectedAccount } from 'packages/twenty-front/src/modules/accounts/types/ConnectedAccount';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { useRecoilValue } from 'recoil';
-import { currentWorkspaceMemberState } from 'packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
 
 const StyledTriggerSettings = styled.div`
   padding: ${({ theme }) => theme.spacing(6)};
@@ -36,6 +38,9 @@ export const WorkflowEditActionFormSendEmail = ({
 }) => {
   const theme = useTheme();
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
+  const workflowId = useRecoilValue(workflowIdState);
+  const redirectUrl = `/object/workflow/${workflowId}`;
 
   const form = useForm<SendEmailFormData>({
     defaultValues: {
@@ -133,6 +138,11 @@ export const WorkflowEditActionFormSendEmail = ({
                 emptyOption={emptyOption}
                 value={field.value}
                 options={connectedAccountOptions}
+                callToActionButton={{
+                  onClick: () => triggerGoogleApisOAuth(redirectUrl),
+                  Icon: IconPlus,
+                  text: 'Add account',
+                }}
                 onChange={(connectedAccountId) => {
                   field.onChange(connectedAccountId);