From 8baa59b6f4db3d6c1067db7c293afab369beeffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Mon, 25 Mar 2024 18:53:30 +0100 Subject: [PATCH] feat: add Active and Add integration card displays (#4591) * feat: add Active and Add integration card displays Closes #4541 * docs: add PaymentSuccess page stories * refactor: move page components --- packages/twenty-front/src/App.tsx | 11 ++-- .../twenty-front/src/DefaultPageTitle.tsx | 11 ---- .../auth/components}/VerifyEffect.tsx | 0 .../SettingsIntegrationComponent.tsx | 53 +++++++++++++----- .../components/SettingsIntegrationGroup.tsx | 54 ++++++++++--------- .../constants/MockRemoteDatabases.ts | 10 ++++ .../constants/SettingsIntegrationRequest.ts | 2 +- .../constants/SettingsIntegrationWindmill.ts | 2 +- .../constants/SettingsIntegrationZapier.ts | 2 +- .../hooks/useSettingsIntegrationCategories.ts | 35 ++++++++++++ .../integrations/types/SettingsIntegration.ts | 7 ++- .../types/SettingsIntegrationCategory.ts | 2 +- .../utils/getSettingsIntegrationAll.ts | 44 +++++++++++++++ ....stories.tsx => PasswordReset.stories.tsx} | 0 .../__stories__/PaymentSuccess.stories.tsx | 48 +++++++++++++++++ .../SettingsIntegrationDetail.tsx | 30 +++++------ .../integrations/SettingsIntegrations.tsx | 10 ++-- .../constants/SettingsIntegrationAll.ts | 26 --------- .../SettingsIntegrationCategories.ts | 12 ----- 19 files changed, 242 insertions(+), 117 deletions(-) delete mode 100644 packages/twenty-front/src/DefaultPageTitle.tsx rename packages/twenty-front/src/{pages/auth => modules/auth/components}/VerifyEffect.tsx (100%) create mode 100644 packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts rename packages/twenty-front/src/{pages => modules}/settings/integrations/constants/SettingsIntegrationRequest.ts (82%) rename packages/twenty-front/src/{pages => modules}/settings/integrations/constants/SettingsIntegrationWindmill.ts (81%) rename packages/twenty-front/src/{pages => modules}/settings/integrations/constants/SettingsIntegrationZapier.ts (93%) create mode 100644 packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts rename packages/twenty-front/src/{pages => modules}/settings/integrations/types/SettingsIntegration.ts (69%) rename packages/twenty-front/src/{pages => modules}/settings/integrations/types/SettingsIntegrationCategory.ts (64%) create mode 100644 packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts rename packages/twenty-front/src/pages/auth/__stories__/{PasswordResert.stories.tsx => PasswordReset.stories.tsx} (100%) create mode 100644 packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx index 9dc41e7f7..20a769b99 100644 --- a/packages/twenty-front/src/App.tsx +++ b/packages/twenty-front/src/App.tsx @@ -1,11 +1,12 @@ -import { Route, Routes } from 'react-router-dom'; +import { Route, Routes, useLocation } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; +import { VerifyEffect } from '@/auth/components/VerifyEffect'; import { billingState } from '@/client-config/states/billingState.ts'; import { AppPath } from '@/types/AppPath'; import { SettingsPath } from '@/types/SettingsPath'; import { DefaultLayout } from '@/ui/layout/page/DefaultLayout'; -import { DefaultPageTitle } from '~/DefaultPageTitle'; +import { PageTitle } from '@/ui/utilities/page-title/PageTitle'; import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect'; import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect'; import { ChooseYourPlan } from '~/pages/auth/ChooseYourPlan.tsx'; @@ -14,7 +15,6 @@ import { CreateWorkspace } from '~/pages/auth/CreateWorkspace'; import { PasswordReset } from '~/pages/auth/PasswordReset'; import { PaymentSuccess } from '~/pages/auth/PaymentSuccess.tsx'; import { SignInUp } from '~/pages/auth/SignInUp'; -import { VerifyEffect } from '~/pages/auth/VerifyEffect'; import { DefaultHomePage } from '~/pages/DefaultHomePage'; import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect'; import { NotFound } from '~/pages/not-found/NotFound'; @@ -46,13 +46,16 @@ import { SettingsProfile } from '~/pages/settings/SettingsProfile'; import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace'; import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers'; import { Tasks } from '~/pages/tasks/Tasks'; +import { getPageTitleFromPath } from '~/utils/title-utils'; export const App = () => { const billing = useRecoilValue(billingState); + const { pathname } = useLocation(); + const pageTitle = getPageTitleFromPath(pathname); return ( <> - + diff --git a/packages/twenty-front/src/DefaultPageTitle.tsx b/packages/twenty-front/src/DefaultPageTitle.tsx deleted file mode 100644 index 87b3c17f0..000000000 --- a/packages/twenty-front/src/DefaultPageTitle.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { useLocation } from 'react-router-dom'; - -import { PageTitle } from '@/ui/utilities/page-title/PageTitle'; -import { getPageTitleFromPath } from '~/utils/title-utils'; - -export const DefaultPageTitle = () => { - const { pathname } = useLocation(); - const pageTitle = getPageTitleFromPath(pathname); - - return ; -}; diff --git a/packages/twenty-front/src/pages/auth/VerifyEffect.tsx b/packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx similarity index 100% rename from packages/twenty-front/src/pages/auth/VerifyEffect.tsx rename to packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx index be6596f6d..333ebef11 100644 --- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx @@ -1,9 +1,13 @@ +import { useNavigate } from 'react-router-dom'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Pill } from 'twenty-ui'; -import { IconArrowUpRight, IconBolt } from '@/ui/display/icon'; +import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration'; +import { IconArrowUpRight, IconBolt, IconPlus } from '@/ui/display/icon'; +import { Status } from '@/ui/display/status/components/Status'; import { Button } from '@/ui/input/button/components/Button'; -import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration'; +import { isDefined } from '~/utils/isDefined'; interface SettingsIntegrationComponentProps { integration: SettingsIntegration; @@ -19,6 +23,12 @@ const StyledContainer = styled.div` flex-direction: row; justify-content: space-between; padding: ${({ theme }) => theme.spacing(3)}; + + ${({ onClick }) => + isDefined(onClick) && + css` + cursor: pointer; + `} `; const StyledSection = styled.div` @@ -48,33 +58,52 @@ const StyledLogo = styled.img` export const SettingsIntegrationComponent = ({ integration, }: SettingsIntegrationComponentProps) => { - const openLinkInTab = (link: string) => { - window.open(link); - }; + const navigate = useNavigate(); + + const navigateToIntegrationPage = () => navigate(integration.link); + const openExternalLink = () => window.open(integration.link); return ( - + - {integration.to ? ( + {isDefined(integration.to) && ( <>
→
- ) : ( - <> )} {integration.text} {integration.type === 'Soon' ? ( + ) : integration.type === 'Active' ? ( + + ) : integration.type === 'Add' ? ( +