From 0409f150aa25a3723195b58fb43765d7d8852a08 Mon Sep 17 00:00:00 2001 From: martmull Date: Mon, 7 Oct 2024 14:59:33 +0200 Subject: [PATCH] WIP: add 'Add account' button --- .../hooks/useTriggerGoogleApisOAuth.ts | 2 +- .../modules/ui/input/components/Select.tsx | 27 +++++++++++++++++-- .../WorkflowEditActionFormSendEmail.tsx | 20 ++++++++++---- 3 files changed, 41 insertions(+), 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 index 0c6ec18d28bc0..270ae1aadd210 100644 --- 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 index f88f3712b2cea..ba29909b509df 100644 --- 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,6 +11,7 @@ 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: Value; @@ -18,6 +19,12 @@ export type SelectOption = { Icon?: IconComponent; }; +type CallToActionButton = { + text: string; + onClick: (event: MouseEvent) => void; + Icon?: IconComponent; +}; + export type SelectProps = { className?: string; disabled?: boolean; @@ -32,6 +39,7 @@ export type SelectProps = { options: SelectOption[]; value?: Value; withSearchInput?: boolean; + callToActionButton?: CallToActionButton; }; const StyledContainer = styled.div<{ fullWidth?: boolean }>` @@ -89,6 +97,7 @@ export const Select = ({ options, value, withSearchInput, + callToActionButton, }: SelectProps) => { const selectContainerRef = useRef(null); @@ -109,7 +118,9 @@ export const Select = ({ [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 = ({ ))} )} + {!!callToActionButton && !!filteredOptions.length && ( + + )} + {!!callToActionButton && ( + + + + )} } 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 index 9c54a5c12a7b1..1e5dd31daed51 100644 --- 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({ 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);