diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx index fa4591f455..0c21459b01 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/IntegrationHowToSection/IntegrationHowToSection.tsx b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx index f8902acc3b..2829b25bd5 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 || ''} - + ); }; diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx index 2c0c3b8c19..3e61394c98 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 65bba23039..c2de6b3785 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 9e10205683..37cfdc4daf 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 935117018e..d8fbba42d4 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 8643e4c4ce..ea67ecc721 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 039ba38bd6..43ce4aafcd 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 8c128248f4..f933107289 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 4a9735356d..0dba4fd412 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: {