chore: rename incoming webhooks to signals (#6415)

https://linear.app/unleash/issue/2-1994/ui-feature-rename-adapt-the-signals-ui https://linear.app/unleash/issue/2-1996/rename-feature-in-the-code-base Implements the feature rename to Signals by adapting the code base and UI.
Unleash · Mar 4, 2024 · 6872933 · 6872933
1 parent 4fc0a80
commit 6872933
Show file tree

Hide file tree

Showing 50 changed files with 777 additions and 875 deletions.
diff --git a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
@@ -108,10 +108,10 @@ const PremiumFeatures = {
         url: 'https://docs.getunleash.io/reference/banners',
         label: 'Banners',
     },
-    'incoming-webhooks': {
+    signals: {
         plan: FeaturePlan.ENTERPRISE,
-        url: 'https://docs.getunleash.io/reference/incoming-webhooks',
-        label: 'Incoming Webhooks',
+        url: 'https://docs.getunleash.io/reference/signals',
+        label: 'Signals',
     },
     actions: {
         plan: FeaturePlan.ENTERPRISE,

diff --git a/frontend/src/component/incomingWebhooks/IncomingWebhooks.tsx b/frontend/src/component/incomingWebhooks/IncomingWebhooks.tsx
diff --git a/...end/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksDeleteDialog.tsx b/...end/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksDeleteDialog.tsx
diff --git a/...rc/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/...rc/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
@@ -8,10 +8,10 @@ import { RequestIntegrationCard } from '../RequestIntegrationCard/RequestIntegra
 import { OFFICIAL_SDKS } from './SDKs';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useUiFlag } from 'hooks/useUiFlag';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IAvailableIntegrationsProps {
     providers: AddonTypeSchema[];
-    onNewIncomingWebhook: () => void;
 }
 
 const StyledContainer = styled('div')(({ theme }) => ({
@@ -53,9 +53,9 @@ const StyledGrayContainer = styled('div')(({ theme }) => ({
 
 export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
     providers,
-    onNewIncomingWebhook,
 }) => {
-    const incomingWebhooksEnabled = useUiFlag('incomingWebhooks');
+    const { isEnterprise } = useUiConfig();
+    const signalsEnabled = useUiFlag('signals');
 
     const customProviders = [JIRA_INFO];
     const serverSdks = OFFICIAL_SDKS.filter((sdk) => sdk.type === 'server');
@@ -98,13 +98,13 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             ),
                         )}
                     <ConditionallyRender
-                        condition={incomingWebhooksEnabled}
+                        condition={isEnterprise() && signalsEnabled}
                         show={
                             <IntegrationCard
                                 icon='webhook'
-                                title='Incoming Webhooks'
-                                description='Incoming Webhooks allow third-party services to send observable events to Unleash.'
-                                onClick={onNewIncomingWebhook}
+                                title='Signals'
+                                description='Signal endpoints allow third-party services to send signals to Unleash.'
+                                link='/integrations/signals'
                             />
                         }
                     />

diff --git a/.../component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx b/.../component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx
@@ -4,6 +4,10 @@ import { StyledCardsGrid } from '../IntegrationList.styles';
 import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
 import { VFC } from 'react';
 import { Typography, styled } from '@mui/material';
+import { useSignalEndpoints } from 'hooks/api/getters/useSignalEndpoints/useSignalEndpoints';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const StyledConfiguredSection = styled('section')(({ theme }) => ({
     display: 'flex',
@@ -23,6 +27,10 @@ export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
     addons,
     providers,
 }) => {
+    const { signalEndpoints } = useSignalEndpoints();
+    const signalsEnabled = useUiFlag('signals');
+    const { isEnterprise } = useUiConfig();
+
     const ref = useLoading(loading || false);
 
     return (
@@ -65,6 +73,26 @@ export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
                             />
                         );
                     })}
+                <ConditionallyRender
+                    condition={
+                        isEnterprise() && signalsEnabled
+                        // && signalEndpoints.length > 0
+                    }
+                    show={
+                        <IntegrationCard
+                            variant='stacked'
+                            icon='webhook'
+                            title='Signals'
+                            description={`${
+                                signalEndpoints.length
+                            } signal endpoint${
+                                signalEndpoints.length === 1 ? '' : 's'
+                            } configured`}
+                            link='/integrations/signals'
+                            configureActionText='View signal endpoints'
+                        />
+                    }
+                />
             </StyledCardsGrid>
         </StyledConfiguredSection>
     );

diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
@@ -10,7 +10,10 @@ import type { AddonSchema } from 'openapi';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
+type CardVariant = 'default' | 'stacked';
+
 interface IIntegrationCardBaseProps {
+    variant?: CardVariant;
     id?: string | number;
     icon?: string;
     title: string;
@@ -37,7 +40,9 @@ type IIntegrationCardProps =
     | IIntegrationCardWithLinkProps
     | IIntegrationCardWithOnClickProps;
 
-const StyledCard = styled('div')(({ theme }) => ({
+const StyledCard = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: CardVariant }>(({ theme, variant = 'default' }) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(3),
@@ -48,6 +53,24 @@ const StyledCard = styled('div')(({ theme }) => ({
     ':hover': {
         backgroundColor: theme.palette.action.hover,
     },
+    ...(variant === 'stacked' && {
+        position: 'relative',
+        zIndex: 0,
+        '&:after': {
+            content: '""',
+            width: 'auto',
+            height: theme.spacing(0.75),
+            position: 'absolute',
+            zIndex: -1,
+            bottom: theme.spacing(-0.75),
+            left: theme.spacing(1),
+            right: theme.spacing(1),
+            borderBottomLeftRadius: `${theme.shape.borderRadiusMedium}px`,
+            borderBottomRightRadius: `${theme.shape.borderRadiusMedium}px`,
+            border: `1px solid ${theme.palette.divider}`,
+            boxShadow: theme.boxShadows.card,
+        },
+    }),
 }));
 
 const StyledLink = styled(Link)({
@@ -89,6 +112,7 @@ const StyledOpenInNewIcon = styled(OpenInNewIcon)(({ theme }) => ({
 }));
 
 export const IntegrationCard: VFC<IIntegrationCardProps> = ({
+    variant = 'default',
     icon,
     title,
     description,
@@ -113,7 +137,7 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
     };
 
     const content = (
-        <StyledCard>
+        <StyledCard variant={variant}>
             <StyledHeader>
                 <StyledTitle variant='h3' data-loading>
                     <IntegrationIcon name={icon as string} /> {title}