From a5ecbf7df5c6060528e13df900bbbd59cc501fdf Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Fri, 16 Feb 2024 13:35:45 +0100 Subject: [PATCH] Integrations: design fixes and remove feature flag (#4003) * Integrations: design fixes and remove feature flag * Fix --- .../public/images/integrations/Github.png | Bin 423 -> 0 bytes .../integrations/{Cal.png => cal-logo.png} | Bin .../images/integrations/github-logo.png | Bin 0 -> 6393 bytes .../{MailChimp.png => mailchimp-logo.png} | Bin .../{Slack.png => slack-logo.png} | Bin .../{Tally.png => tally-logo.png} | Bin .../{Twenty.svg => twenty-logo.svg} | 0 .../{Windmill.png => windmill-logo.png} | Bin .../SettingsNavigationDrawerItems.tsx | 15 +++--- .../modules/workspace/types/FeatureFlagKey.ts | 1 - .../SettingsIntegrationComponent.tsx | 43 +++++------------- .../integrations/SettingsIntegrationGroup.tsx | 5 +- .../integrations/SettingsIntegrations.tsx | 5 +- .../SettingsIntegrations.stories.tsx | 34 ++++++++++++++ .../constants/IntegrationTypes.ts | 22 --------- .../integrations/constants/Integrations.ts | 12 ----- .../integrations/constants/Request.ts | 19 -------- .../SettingsIntegrationCategories.ts | 10 ++++ .../constants/SettingsIntegrationRequest.ts | 18 ++++++++ .../constants/SettingsIntegrationWindmill.ts | 21 +++++++++ .../constants/SettingsIntegrationZapier.ts | 42 +++++++++++++++++ .../integrations/constants/Windmill.ts | 19 -------- .../settings/integrations/constants/Zapier.ts | 40 ---------------- .../integrations/types/SettingsIntegration.ts | 10 ++++ .../types/SettingsIntegrationCategory.ts | 9 ++++ .../core/feature-flag/feature-flag.entity.ts | 1 - 26 files changed, 165 insertions(+), 161 deletions(-) delete mode 100644 packages/twenty-front/public/images/integrations/Github.png rename packages/twenty-front/public/images/integrations/{Cal.png => cal-logo.png} (100%) create mode 100644 packages/twenty-front/public/images/integrations/github-logo.png rename packages/twenty-front/public/images/integrations/{MailChimp.png => mailchimp-logo.png} (100%) rename packages/twenty-front/public/images/integrations/{Slack.png => slack-logo.png} (100%) rename packages/twenty-front/public/images/integrations/{Tally.png => tally-logo.png} (100%) rename packages/twenty-front/public/images/integrations/{Twenty.svg => twenty-logo.svg} (100%) rename packages/twenty-front/public/images/integrations/{Windmill.png => windmill-logo.png} (100%) create mode 100644 packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrations.stories.tsx delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/IntegrationTypes.ts delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/Integrations.ts delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/Request.ts create mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts create mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationRequest.ts create mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts create mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationZapier.ts delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/Windmill.ts delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/Zapier.ts create mode 100644 packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts create mode 100644 packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts diff --git a/packages/twenty-front/public/images/integrations/Github.png b/packages/twenty-front/public/images/integrations/Github.png deleted file mode 100644 index a8aff42a6e066ffa1f6bf9e6e5031c4a7e8074ce..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 423 zcmV;Y0a*TtP)cuZo-uLYcta{n){_SjpK<|3LC^uZ2@-X!HoCv!0!o6Q0*nLu zz$@?oTwA{f-hdh~25brO;4lTCrUBfg0NiK*pTMjl`3&%(ZPOO8kRbUy@Th6iTVM@%w(BNv0OTBf&epu? znPJ{HI0rU?ce_3nPJR+IqsqQvX9n0JFlUF>gaD|<0DcX-f*@!EXZ8nLO3?RFpNMg?8oJ_~gwrl%}_Zr=q80}t># R12X^s002ovPDHLkV1nQ4rZfNm diff --git a/packages/twenty-front/public/images/integrations/Cal.png b/packages/twenty-front/public/images/integrations/cal-logo.png similarity index 100% rename from packages/twenty-front/public/images/integrations/Cal.png rename to packages/twenty-front/public/images/integrations/cal-logo.png diff --git a/packages/twenty-front/public/images/integrations/github-logo.png b/packages/twenty-front/public/images/integrations/github-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..6cb3b705d018006a2bd4200ea94c9d5fb98b6f76 GIT binary patch literal 6393 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 Hu0mjfZ$b4` literal 0 HcmV?d00001 diff --git a/packages/twenty-front/public/images/integrations/MailChimp.png b/packages/twenty-front/public/images/integrations/mailchimp-logo.png similarity index 100% rename from packages/twenty-front/public/images/integrations/MailChimp.png rename to packages/twenty-front/public/images/integrations/mailchimp-logo.png diff --git a/packages/twenty-front/public/images/integrations/Slack.png b/packages/twenty-front/public/images/integrations/slack-logo.png similarity index 100% rename from packages/twenty-front/public/images/integrations/Slack.png rename to packages/twenty-front/public/images/integrations/slack-logo.png diff --git a/packages/twenty-front/public/images/integrations/Tally.png b/packages/twenty-front/public/images/integrations/tally-logo.png similarity index 100% rename from packages/twenty-front/public/images/integrations/Tally.png rename to packages/twenty-front/public/images/integrations/tally-logo.png diff --git a/packages/twenty-front/public/images/integrations/Twenty.svg b/packages/twenty-front/public/images/integrations/twenty-logo.svg similarity index 100% rename from packages/twenty-front/public/images/integrations/Twenty.svg rename to packages/twenty-front/public/images/integrations/twenty-logo.svg diff --git a/packages/twenty-front/public/images/integrations/Windmill.png b/packages/twenty-front/public/images/integrations/windmill-logo.png similarity index 100% rename from packages/twenty-front/public/images/integrations/Windmill.png rename to packages/twenty-front/public/images/integrations/windmill-logo.png diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx index d5ae7b3a7..b588faa30 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx @@ -32,7 +32,6 @@ export const SettingsNavigationDrawerItems = () => { }, [signOut, navigate]); const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED'); - const isIntegrationsEnabled = useIsFeatureEnabled('IS_INTEGRATIONS_ENABLED'); const isIntegrationsItemActive = !!useMatch({ path: useResolvedPath('/settings/integrations').pathname, end: true, @@ -144,14 +143,12 @@ export const SettingsNavigationDrawerItems = () => { }) } /> - {isIntegrationsEnabled && ( - - )} + diff --git a/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts b/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts index 3d23fb7d2..b0b10fef2 100644 --- a/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts +++ b/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts @@ -1,6 +1,5 @@ export type FeatureFlagKey = | 'IS_MESSAGING_ENABLED' | 'IS_BLOCKLIST_ENABLED' - | 'IS_INTEGRATIONS_ENABLED' | 'IS_QUICK_ACTIONS_ENABLED' | 'IS_NEW_RECORD_BOARD_ENABLED'; diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx index 19345b702..0886dbd65 100644 --- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx +++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx @@ -1,12 +1,12 @@ -import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { SoonPill } from 'tsup.ui.index'; import { IconArrowUpRight, IconBolt } from '@/ui/display/icon'; +import { SoonPill } from '@/ui/display/pill/components/SoonPill'; +import { Button } from '@/ui/input/button/components/Button'; +import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration'; -import { Integration, IntegrationType } from './constants/IntegrationTypes'; interface SettingsIntegrationComponentProps { - integration: Integration; + integration: SettingsIntegration; } const StyledContainer = styled.div` @@ -36,20 +36,6 @@ const StyledIntegrationLogo = styled.div` color: ${({ theme }) => theme.border.color.strong}; `; -const StyledButton = styled.button` - align-items: center; - background: ${({ theme }) => theme.background.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${({ theme }) => theme.font.color.secondary}; - display: flex; - flex-direction: row; - font-size: ${({ theme }) => theme.font.size.md}; - gap: ${({ theme }) => theme.spacing(1)}; - padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}; - cursor: pointer; -`; - const StyledSoonPill = styled(SoonPill)` padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}; `; @@ -62,7 +48,6 @@ const StyledLogo = styled.img` export const SettingsIntegrationComponent = ({ integration, }: SettingsIntegrationComponentProps) => { - const theme = useTheme(); const openLinkInTab = (link: string) => { window.open(link); }; @@ -83,21 +68,15 @@ export const SettingsIntegrationComponent = ({ {integration.text} - {integration.type === IntegrationType.Soon ? ( + {integration.type === 'Soon' ? ( ) : ( - openLinkInTab(integration.link)}> - {integration.type === IntegrationType.Use ? ( - - ) : ( - - )} - {integration.type === IntegrationType.Goto ? ( -
{integration.linkText}
- ) : ( -
Use
- )} - +