fix: misc integration-related fixes and improvements (#4754)

https://linear.app/unleash/issue/2-1401/misc-fixes-and-improvements-related-to-the-new-slack-app-integration

This includes multiple UI-related misc fixes and improvements that are
not only related with the new Slack App integration but also
integrations in general.

 - Improves the styling in the "how does it work" section;
 - Improves the text in the `IntegrationMultiSelector`s;
 - Switches "Configure" and "Open" around to match designs;
- Properly handles click event on `IntegrationCardMenu` (fix navigation
on dialog click);
- Fixes titles and contents for "enable/disable" and "delete"
integration dialogs to match designs;
- Updates Slack App integration "how does it work" section to better
reflect the intended behavior;
 - Removes redundant alerts after previous point;
- Adds an alert in the old Slack integration configuration warning of
its deprecation and suggesting the new Slack App integration instead;
 - Fixes typos;
 - Slight refactors;


![image](https://github.com/Unleash/unleash/assets/14320932/17b09742-f00b-4be2-829f-8248ffe67996)

Co-authored by @nicolaesocaciu

frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx

@@ -135,9 +135,9 @@ export const IntegrationMultiSelector: VFC<IIntegrationMultiSelectorProps> = ({
 
     const DefaultHelpText = () => (
         <StyledHelpText>
-            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.
         </StyledHelpText>
     );
 

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<AddonTypeSchema, 'howTo' | 'name'>;
     title?: string;
@@ -17,7 +22,7 @@ export const IntegrationHowToSection: VFC<IIntegrationHowToSectionProps> = ({
     if (!provider?.name || !provider?.howTo) return null;
 
     return (
-        <StyledRaisedSection>
+        <StyledHowDoesItWorkSection>
             <Typography
                 variant="h4"
                 component="h3"
@@ -30,6 +35,6 @@ export const IntegrationHowToSection: VFC<IIntegrationHowToSectionProps> = ({
                 <IntegrationIcon name={provider.name} /> {title}
             </Typography>
             <ReactMarkdown>{provider!.howTo || ''}</ReactMarkdown>
-        </StyledRaisedSection>
+        </StyledHowDoesItWorkSection>
     );
 };

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -257,7 +257,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                                         >
                                             Here's some of the fantastic work
                                         </a>{' '}
-                                        our community has build to make Unleash
+                                        our community has built to make Unleash
                                         work in even more contexts.
                                     </Typography>
                                 </div>

frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx

@@ -51,7 +51,7 @@ export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
                                 isEnabled={enabled}
                                 description={description || ''}
                                 link={`/integrations/edit/${id}`}
-                                configureActionText="Configure"
+                                configureActionText="Open"
                             />
                         );
                     })}

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx

@@ -83,7 +83,7 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
     title,
     description,
     isEnabled,
-    configureActionText = 'Open',
+    configureActionText = 'Configure',
     link,
     addon,
     deprecated,

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<IIntegrationCardMenuProps> = ({
     addon,
 }) => {
@@ -54,11 +48,14 @@ export const IntegrationCardMenu: VFC<IIntegrationCardMenuProps> = ({
     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<IIntegrationCardMenuProps> = ({
     }, [setToastApiError, refetchAddons, setToastData, removeAddon]);
 
     return (
-        <StyledMenu>
+        <StyledMenu onClick={e => e.preventDefault()}>
             <Tooltip title="More actions" arrow>
                 <IconButton
                     onClick={handleMenuClick}
@@ -123,13 +120,13 @@ export const IntegrationCardMenu: VFC<IIntegrationCardMenuProps> = ({
                     vertical: 'top',
                     horizontal: 'right',
                 }}
-                onClick={event => {
-                    event.preventDefault();
-                }}
                 onClose={handleMenuClick}
             >
                 <MenuItem
-                    onClick={preventPropagation(() => setIsToggleOpen(true))}
+                    onClick={() => {
+                        setIsToggleOpen(true);
+                        closeMenu();
+                    }}
                     disabled={!updateAccess}
                 >
                     <ListItemIcon>
@@ -141,7 +138,10 @@ export const IntegrationCardMenu: VFC<IIntegrationCardMenuProps> = ({
                 </MenuItem>{' '}
                 <MenuItem
                     disabled={!deleteAccess}
-                    onClick={preventPropagation(() => setIsDeleteOpen(true))}
+                    onClick={() => {
+                        setIsDeleteOpen(true);
+                        closeMenu();
+                    }}
                 >
                     <ListItemIcon>
                         <Delete />
@@ -152,22 +152,32 @@ export const IntegrationCardMenu: VFC<IIntegrationCardMenuProps> = ({
 
             <Dialogue
                 open={isToggleOpen}
-                onClick={preventPropagation(toggleIntegration)}
-                onClose={preventPropagation(() => setIsToggleOpen(false))}
-                title="Confirm deletion"
+                onClick={toggleIntegration}
+                onClose={() => setIsToggleOpen(false)}
+                title={
+                    addon.enabled
+                        ? `Disable integration?`
+                        : `Enable integration?`
+                }
             >
                 <div>
-                    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'}
                 </div>
             </Dialogue>
             <Dialogue
                 open={isDeleteOpen}
-                onClick={preventPropagation(deleteIntegration)}
-                onClose={preventPropagation(() => setIsDeleteOpen(false))}
-                title="Confirm deletion"
+                onClick={deleteIntegration}
+                onClose={() => setIsDeleteOpen(false)}
+                title="Delete integration?"
             >
-                <div>Are you sure you want to delete this Integration?</div>
+                <Alert severity="warning">
+                    Deleting this integration instance will delete all its
+                    configuration. It will stop working immediately.
+                </Alert>
             </Dialogue>
         </StyledMenu>
     );

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[] = [

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',

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',

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: {