From de5a0f282534f9c1090844627e1fa6ac0dbea171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 5 Mar 2024 08:16:44 +0000
Subject: [PATCH] chore: add new signals icon instead of webhook icon (#6427)

https://linear.app/unleash/issue/2-2002/add-new-signals-icon-instead-of-using-the-webhooks-icon

Adds a new icon for signals, instead of using the same icon as webhooks.

Includes some slight refactoring.


![image](https://github.com/Unleash/unleash/assets/14320932/51402a4b-99c5-4a09-9c6c-01f87ca4651c)


![image](https://github.com/Unleash/unleash/assets/14320932/c80e308b-a1f2-4a4a-bfc4-2ed2cbb59563)
---
 .../AvailableIntegrations.tsx                 |  2 +-
 .../ConfiguredIntegrations.tsx                |  2 +-
 .../IntegrationIcon/IntegrationIcon.tsx       | 71 ++++++++++++++-----
 .../ProjectActionsTriggerCell.tsx             | 22 +++---
 .../SignalEndpointsSignalsModal.tsx           |  4 +-
 5 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
index d7f44be1517a..1447804febce 100644
--- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
+++ b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
@@ -101,7 +101,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                         condition={isEnterprise() && signalsEnabled}
                         show={
                             <IntegrationCard
-                                icon='webhook'
+                                icon='signals'
                                 title='Signals'
                                 description='Signal endpoints allow third-party services to send signals to Unleash.'
                                 link='/integrations/signals'
diff --git a/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx
index 5eaf73d86ceb..ca433241f6d1 100644
--- a/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx
+++ b/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx
@@ -82,7 +82,7 @@ export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
                     show={
                         <IntegrationCard
                             variant='stacked'
-                            icon='webhook'
+                            icon='signals'
                             title='Signals'
                             description={`${
                                 signalEndpoints.length
diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
index 421325405781..3d0e68209f29 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
@@ -1,8 +1,8 @@
-import { Avatar, styled } from '@mui/material';
+import { ReactNode } from 'react';
+import { Avatar, Icon, styled } from '@mui/material';
 import { DeviceHub } from '@mui/icons-material';
 import { formatAssetPath } from 'utils/formatPath';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 import slackIcon from 'assets/icons/slack.svg';
 import jiraCommentIcon from 'assets/icons/jira-comment.svg';
@@ -37,12 +37,32 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
     overflow: 'hidden',
     width: theme.spacing(4),
     height: theme.spacing(4),
+    fontSize: '28px',
 }));
 
+const StyledCustomIcon = styled(Icon)({
+    '&&&': {
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: 'inherit',
+    },
+});
+
+const StyledSignalsIcon = styled(StyledCustomIcon)(({ theme }) => ({
+    background: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+}));
+
+const signalsIcon = <StyledSignalsIcon>sensors</StyledSignalsIcon>;
+export const SignalsIcon = () => signalsIcon;
+
 const integrations: Record<
     string,
     {
-        icon: string;
+        icon: string | ReactNode;
         title: string;
     }
 > = {
@@ -67,24 +87,41 @@ const integrations: Record<
     react: { title: 'React', icon: react },
     ruby: { title: 'Ruby', icon: ruby },
     rust: { title: 'Rust', icon: rust },
+    signals: {
+        title: 'Signals',
+        icon: signalsIcon,
+    },
     svelte: { title: 'Svelte', icon: svelte },
     vue: { title: 'Vue', icon: vue },
 };
 
-export const IntegrationIcon = ({ name }: IIntegrationIconProps) => (
-    <ConditionallyRender
-        condition={Object.keys(integrations).includes(name)}
-        show={() => (
-            <StyledAvatar
-                src={formatAssetPath(integrations[name].icon)}
-                alt={`${capitalizeFirst(integrations[name].title)} icon`}
-                variant='rounded'
-            />
-        )}
-        elseShow={() => (
+export const IntegrationIcon = ({ name }: IIntegrationIconProps) => {
+    const integration = integrations[name];
+
+    if (!integration) {
+        return (
             <StyledAvatar variant='rounded'>
                 <DeviceHub />
             </StyledAvatar>
-        )}
-    />
-);
+        );
+    }
+
+    if (typeof integration.icon === 'string') {
+        return (
+            <StyledAvatar
+                src={formatAssetPath(integration.icon)}
+                alt={`${capitalizeFirst(integration.title)} icon`}
+                variant='rounded'
+            />
+        );
+    }
+
+    return (
+        <StyledAvatar
+            alt={`${capitalizeFirst(integration.title)} icon`}
+            variant='rounded'
+        >
+            {integration.icon}
+        </StyledAvatar>
+    );
+};
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx
index 9c0fdd134a46..6a54cd1c7767 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx
@@ -2,11 +2,11 @@ import { Avatar, Box, Link, styled } from '@mui/material';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { IActionSet } from 'interfaces/action';
 import { ISignalEndpoint } from 'interfaces/signal';
-import webhooksIcon from 'assets/icons/webhooks.svg';
 import { Link as RouterLink } from 'react-router-dom';
 import { ComponentType } from 'react';
 import { wrapperStyles } from 'component/common/Table/cells/LinkCell/LinkCell.styles';
-import { formatAssetPath } from 'utils/formatPath';
+import { SignalsIcon } from 'component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 const StyledCell = styled(Box)({
     display: 'flex',
@@ -18,6 +18,7 @@ const StyledIcon = styled(Avatar)(({ theme }) => ({
     overflow: 'hidden',
     width: theme.spacing(3),
     height: theme.spacing(3),
+    fontSize: theme.fontSizes.mainHeader,
 }));
 
 const StyledLink = styled(Link)<{
@@ -39,21 +40,26 @@ export const ProjectActionsTriggerCell = ({
     action,
     signalEndpoints,
 }: IProjectActionsTriggerCellProps) => {
-    const { sourceId } = action.match;
+    const { sourceId, source } = action.match;
     const trigger = signalEndpoints.find(({ id }) => id === sourceId);
 
     if (!trigger) {
         return <TextCell>No trigger</TextCell>;
     }
 
+    const sourceIcon =
+        source === 'signal-endpoint' ? (
+            <HtmlTooltip title='Signal endpoint' arrow>
+                <StyledIcon alt='Signal endpoint' variant='rounded'>
+                    <SignalsIcon />
+                </StyledIcon>
+            </HtmlTooltip>
+        ) : null;
+
     return (
         <TextCell>
             <StyledCell>
-                <StyledIcon
-                    src={formatAssetPath(webhooksIcon)}
-                    alt='Signal endpoint'
-                    variant='rounded'
-                />
+                {sourceIcon}
                 <StyledLink
                     component={RouterLink}
                     to='/integrations/signals'
diff --git a/frontend/src/component/signals/SignalEndpointsSignals/SignalEndpointsSignalsModal.tsx b/frontend/src/component/signals/SignalEndpointsSignals/SignalEndpointsSignalsModal.tsx
index 2ae065a6172f..a5a46c2d4aaf 100644
--- a/frontend/src/component/signals/SignalEndpointsSignals/SignalEndpointsSignalsModal.tsx
+++ b/frontend/src/component/signals/SignalEndpointsSignals/SignalEndpointsSignalsModal.tsx
@@ -121,7 +121,7 @@ export const SignalEndpointsSignalsModal = ({
                         columns={[
                             {
                                 header: 'Date',
-                                maxWidth: 180,
+                                maxWidth: 220,
                                 cell: ({ createdAt }) =>
                                     formatDateYMDHMS(
                                         createdAt,
@@ -130,7 +130,7 @@ export const SignalEndpointsSignalsModal = ({
                             },
                             {
                                 header: 'Token',
-                                maxWidth: 350,
+                                maxWidth: 300,
                                 cell: ({ tokenName }) => tokenName,
                             },
                         ]}