From 2bde3d415e1b8790794181928928e363be63bc61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 15 Sep 2023 13:05:48 +0100 Subject: [PATCH 1/2] fix: misc integration-related fixes and improvements --- .../IntegrationForm.styles.tsx | 2 + .../IntegrationMultiSelector.tsx | 6 +- .../AvailableIntegrations.tsx | 2 +- .../ConfiguredIntegrations.tsx | 2 +- .../IntegrationCard/IntegrationCard.tsx | 2 +- .../IntegrationCardMenu.tsx | 60 +++++++++++-------- src/lib/addons/index.ts | 2 +- src/lib/addons/slack-app-definition.ts | 14 +---- src/lib/addons/slack-definition.ts | 6 ++ src/lib/openapi/spec/addon-type-schema.ts | 2 +- 10 files changed, 53 insertions(+), 45 deletions(-) diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx index 8c7584f3daa2..f60c35c066fb 100644 --- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx +++ b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx @@ -92,6 +92,8 @@ export const StyledRaisedSection: FC> = ({ flexDirection: 'column', width: '100%', borderRadius: `${theme.shape.borderRadiusLarge}px`, + fontSize: theme.fontSizes.smallBody, + gap: theme.spacing(1.5), })} {...props} /> diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx index fa4591f45520..0c21459b0180 100644 --- a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx +++ b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx @@ -135,9 +135,9 @@ export const IntegrationMultiSelector: VFC = ({ const DefaultHelpText = () => ( - Selecting {entityName}(s) here will filter events so that your - integration will only receive events that are tagged with one of - your {entityName}s. + Selecting {entityName}(s) will filter events, so that your + integration only receives events related to those specific{' '} + {entityName}s. ); diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx index 2c0c3b8c1971..3e61394c9873 100644 --- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx +++ b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx @@ -257,7 +257,7 @@ export const AvailableIntegrations: VFC = ({ > Here's some of the fantastic work {' '} - our community has build to make Unleash + our community has built to make Unleash work in even more contexts. diff --git a/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx index 65bba2303921..c2de6b3785ec 100644 --- a/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx +++ b/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx @@ -51,7 +51,7 @@ export const ConfiguredIntegrations: VFC = ({ isEnabled={enabled} description={description || ''} link={`/integrations/edit/${id}`} - configureActionText="Configure" + configureActionText="Open" /> ); })} diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx index 9e10205683d5..37cfdc4daf99 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx +++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx @@ -83,7 +83,7 @@ export const IntegrationCard: VFC = ({ title, description, isEnabled, - configureActionText = 'Open', + configureActionText = 'Configure', link, addon, deprecated, diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx index 935117018e91..d8fbba42d4ac 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx +++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx @@ -1,5 +1,6 @@ import { useCallback, useState, VFC } from 'react'; import { + Alert, IconButton, ListItemIcon, ListItemText, @@ -36,13 +37,6 @@ const StyledMenu = styled('div')(({ theme }) => ({ alignItems: 'center', })); -const preventPropagation = - (fn: () => void) => (event: React.SyntheticEvent) => { - event.preventDefault(); - event.stopPropagation(); - fn(); - }; - export const IntegrationCardMenu: VFC = ({ addon, }) => { @@ -54,11 +48,14 @@ export const IntegrationCardMenu: VFC = ({ const { refetchAddons } = useAddons(); const { setToastData, setToastApiError } = useToast(); + const closeMenu = () => { + setIsMenuOpen(false); + setAnchorEl(null); + }; + const handleMenuClick = (event: React.SyntheticEvent) => { - event.preventDefault(); if (isMenuOpen) { - setIsMenuOpen(false); - setAnchorEl(null); + closeMenu(); } else { setAnchorEl(event.currentTarget); setIsMenuOpen(true); @@ -98,7 +95,7 @@ export const IntegrationCardMenu: VFC = ({ }, [setToastApiError, refetchAddons, setToastData, removeAddon]); return ( - + e.preventDefault()}> = ({ vertical: 'top', horizontal: 'right', }} - onClick={event => { - event.preventDefault(); - }} onClose={handleMenuClick} > setIsToggleOpen(true))} + onClick={() => { + setIsToggleOpen(true); + closeMenu(); + }} disabled={!updateAccess} > @@ -141,7 +138,10 @@ export const IntegrationCardMenu: VFC = ({ {' '} setIsDeleteOpen(true))} + onClick={() => { + setIsDeleteOpen(true); + closeMenu(); + }} > @@ -152,22 +152,32 @@ export const IntegrationCardMenu: VFC = ({ setIsToggleOpen(false))} - title="Confirm deletion" + onClick={toggleIntegration} + onClose={() => setIsToggleOpen(false)} + title={ + addon.enabled + ? `Disable integration?` + : `Enable integration?` + } >
- Are you sure you want to{' '} - {addon.enabled ? 'disable' : 'enable'} this Integration? + {addon.enabled ? 'Disabling' : 'Enabling'} this integration + will{' '} + {addon.enabled + ? 'prevent it from sending updates' + : 'allow it to send updates'}
setIsDeleteOpen(false))} - title="Confirm deletion" + onClick={deleteIntegration} + onClose={() => setIsDeleteOpen(false)} + title="Delete integration?" > -
Are you sure you want to delete this Integration?
+ + Deleting this integration instance will delete all its + configuration. It will stop working immediately. + ); diff --git a/src/lib/addons/index.ts b/src/lib/addons/index.ts index 8643e4c4cedd..ea67ecc721ca 100644 --- a/src/lib/addons/index.ts +++ b/src/lib/addons/index.ts @@ -22,7 +22,7 @@ export const getAddons: (args: { if (slackAppAddonEnabled) { slackAddon.definition.deprecated = - 'This addon is deprecated. Please try the new Slack App integration instead.'; + 'This integration is deprecated. Please try the new Slack App integration instead.'; } const addons: Addon[] = [ diff --git a/src/lib/addons/slack-app-definition.ts b/src/lib/addons/slack-app-definition.ts index 039ba38bd6e5..43ce4aafcdf8 100644 --- a/src/lib/addons/slack-app-definition.ts +++ b/src/lib/addons/slack-app-definition.ts @@ -21,19 +21,9 @@ const slackAppDefinition: IAddonDefinition = { name: 'slack-app', displayName: 'Slack App', description: - 'The Unleash Slack App posts messages to your Slack workspace. You can decide which channels to post to by configuring your feature toggles with "slack" tags.', - howTo: 'You can decide which channels to post by configuring your feature toggles with “slack” tags. For example, if you’d like the bot to post messages to the #general channel, you should configure your feature toggle with the “slack:general” tag. The Unleash Slack App bot has access to public channels by default. If you want the bot to post messages to private channels, you’ll need to invite it to those channels.', + 'The Unleash Slack App posts messages to the selected channels in your Slack workspace.', + howTo: 'Below you can specify which Slack channels receive event notifications. The configuration settings allow you to choose the events and whether you want to filter them by projects and environments.\n\nYou can also select which channels to post to by configuring your feature toggles with “slack” tags. For example, if you’d like the bot to post messages to the #general channel, you can configure your feature toggle with the “slack:general” tag.\n\nThe Unleash Slack App bot has access to public channels by default. If you want the bot to post messages to private channels, you’ll need to invite it to those channels.', documentationUrl: 'https://docs.getunleash.io/docs/addons/slack-app', - alerts: [ - { - type: 'info', - text: `The Unleash Slack App bot has access to public channels by default. If you want the bot to post messages to private channels, you'll need to invite it to those channels.`, - }, - { - type: 'warning', - text: `Please ensure you have the Unleash Slack App installed in your Slack workspace if you haven't installed it already.`, - }, - ], installation: { url: 'https://unleash-slack-app.vercel.app/install', title: 'Slack App installation', diff --git a/src/lib/addons/slack-definition.ts b/src/lib/addons/slack-definition.ts index 8c128248f464..f93310728907 100644 --- a/src/lib/addons/slack-definition.ts +++ b/src/lib/addons/slack-definition.ts @@ -22,6 +22,12 @@ const slackDefinition: IAddonDefinition = { displayName: 'Slack', description: 'Allows Unleash to post updates to Slack.', documentationUrl: 'https://docs.getunleash.io/docs/addons/slack', + alerts: [ + { + type: 'warning', + text: `This integration is deprecated. Please try the new Slack App integration instead.`, + }, + ], parameters: [ { name: 'url', diff --git a/src/lib/openapi/spec/addon-type-schema.ts b/src/lib/openapi/spec/addon-type-schema.ts index 4a9735356dd8..0dba4fd4124f 100644 --- a/src/lib/openapi/spec/addon-type-schema.ts +++ b/src/lib/openapi/spec/addon-type-schema.ts @@ -184,7 +184,7 @@ export const addonTypeSchema = { description: 'This should be used to inform the user that this addon type is deprecated and should not be used. Deprecated addons will show a badge with this information on the UI.', example: - 'This addon is deprecated. Please try the new addon instead.', + 'This integration is deprecated. Please try the new integration instead.', }, }, components: { From 0f5a6a3c0a3b4a507639206e9c06c3a3f390121e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 15 Sep 2023 13:18:41 +0100 Subject: [PATCH 2/2] fix: only affect how does it work section --- .../IntegrationForm/IntegrationForm.styles.tsx | 2 -- .../IntegrationHowToSection.tsx | 11 ++++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx index f60c35c066fb..8c7584f3daa2 100644 --- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx +++ b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx @@ -92,8 +92,6 @@ export const StyledRaisedSection: FC> = ({ flexDirection: 'column', width: '100%', borderRadius: `${theme.shape.borderRadiusLarge}px`, - fontSize: theme.fontSizes.smallBody, - gap: theme.spacing(1.5), })} {...props} /> diff --git a/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx index f8902acc3b6b..2829b25bd5e7 100644 --- a/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx +++ b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx @@ -1,10 +1,15 @@ import { AddonTypeSchema } from 'openapi'; import { VFC } from 'react'; import { StyledRaisedSection } from '../IntegrationForm/IntegrationForm.styles'; -import { Typography } from '@mui/material'; +import { Typography, styled } from '@mui/material'; import { IntegrationIcon } from '../IntegrationList/IntegrationIcon/IntegrationIcon'; import ReactMarkdown from 'react-markdown'; +const StyledHowDoesItWorkSection = styled(StyledRaisedSection)(({ theme }) => ({ + fontSize: theme.fontSizes.smallBody, + gap: theme.spacing(1.5), +})); + interface IIntegrationHowToSectionProps { provider?: Pick; title?: string; @@ -17,7 +22,7 @@ export const IntegrationHowToSection: VFC = ({ if (!provider?.name || !provider?.howTo) return null; return ( - + = ({ {title} {provider!.howTo || ''} - + ); };