Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-10 01:16:39 +02:00
Code Issues Projects Releases Wiki Activity

feat: proxy and edge integration cards (#4636)

Browse Source
This commit is contained in:
Tymoteusz Czech 2023-09-08 10:45:37 +02:00 committed by GitHub
parent 2b210a85fd
commit dff0420ca8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 104 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/icons/unleash-integration.svg Normal file
View File

@ -0,0 +1 @@
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#1A4049" d="M0 0h32v32H0z"/><path d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Z" fill="#1A4049"/><path d="M13.714 9.143H9.143v13.714h13.714V9.143h-4.572v9.142h-4.571V9.143Z" fill="#fff"/><path d="M18.285 18.286h4.572v4.572h-4.572v-4.572Z" fill="#817AFE"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 483 B

33
frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
View File

@ -97,22 +97,27 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
Performance and security
</Typography>
<Typography variant="body2" color="text.secondary">
Description
Connect Unleash to private, scalable and distributed
relays. Additional layer for handling massive number
of requests.
</Typography>
</div>
<StyledCardsGrid small>
{/* TODO: edge and proxy */}
{/* {providers?.map(
({ name, displayName, description }) => (
<IntegrationCard
key={name}
icon={name}
title={displayName || name}
description={description}
link={`/integrations/create/${name}`}
/>
)
)} */}
<StyledCardsGrid>
<IntegrationCard
icon="unleash"
title="Unleash Edge"
description="Unleash Edge is built to help you scale Unleash. As a successor of Unleash Proxy it's even faster and more versitile."
link="/integrations/create/unleash-proxy"
configureActionText="Learn more"
/>
<IntegrationCard
icon="unleash"
title="Unleash Proxy"
description="The Unleash Proxy is a lightweight, stateless proxy that sits between your Unleash client SDKs and the Unleash API."
link="/integrations/create/unleash-proxy"
configureActionText="View documentation"
deprecated="Try Unleash Edge instead. It has all the features of Unleash Proxy and more."
/>
</StyledCardsGrid>
</StyledSection>
<StyledSection>

20
frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
View File

@ -1,6 +1,6 @@
import React, { Fragment, VFC } from 'react';
import { VFC } from 'react';
import { Link } from 'react-router-dom';
import { styled, Typography } from '@mui/material';
import { styled, Tooltip, Typography } from '@mui/material';
import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@ -20,6 +20,7 @@ interface IIntegrationCardProps {
link: string;
isExternal?: boolean;
addon?: AddonSchema;
deprecated?: string;
}
const StyledLink = styled(Link)(({ theme }) => ({
@ -83,16 +84,25 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
configureActionText = 'Configure',
link,
addon,
deprecated,
isExternal = false,
}) => {
const isConfigured = addon !== undefined;
const content = (
<Fragment>
<>
<StyledHeader>
<StyledTitle variant="h3" data-loading>
<IntegrationIcon name={icon as string} /> {title}
</StyledTitle>
<ConditionallyRender
condition={deprecated !== undefined}
show={
<Tooltip title={deprecated} arrow>
<Badge data-loading>Deprecated</Badge>
</Tooltip>
}
/>
<ConditionallyRender
condition={isEnabled === true}
show={
@ -121,7 +131,7 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
elseShow={<ChevronRightIcon />}
/>
</StyledAction>
</Fragment>
</>
);
if (isExternal) {
@ -131,6 +141,6 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
</StyledAnchor>
);
} else {
return <StyledLink to={link}> {content}</StyledLink>;
return <StyledLink to={link}>{content}</StyledLink>;
}
};

228
frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
View File

@ -1,6 +1,8 @@
import { Avatar } from '@mui/material';
import { Avatar, 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';
@ -8,7 +10,7 @@ import jiraIcon from 'assets/icons/jira.svg';
import webhooksIcon from 'assets/icons/webhooks.svg';
import teamsIcon from 'assets/icons/teams.svg';
import dataDogIcon from 'assets/icons/datadog.svg';
import unleashIcon from 'assets/icons/unleash-integration.svg';
import android from 'assets/icons/sdks/Logo-android.svg';
import dotnet from 'assets/icons/sdks/Logo-net.svg';
import flutter from 'assets/icons/sdks/Logo-flutter.svg';
@ -25,176 +27,64 @@ import rust from 'assets/icons/sdks/Logo-rust.svg';
import svelte from 'assets/icons/sdks/Logo-svelte.svg';
import vue from 'assets/icons/sdks/Logo-vue.svg';
const style: React.CSSProperties = {
width: '32.5px',
height: '32.5px',
marginRight: '16px',
};
interface IIntegrationIconProps {
name: string;
}
export const IntegrationIcon = ({ name }: IIntegrationIconProps) => {
switch (name) {
case 'slack':
case 'slack-app':
return (
<img
style={style}
alt="Slack logo"
src={formatAssetPath(slackIcon)}
/>
);
case 'jira-comment':
return (
<img
style={style}
alt="JIRA logo"
src={formatAssetPath(jiraCommentIcon)}
/>
);
case 'webhook':
return (
<img
style={style}
alt="Generic Webhook logo"
src={formatAssetPath(webhooksIcon)}
/>
);
case 'teams':
return (
<img
style={style}
alt="Microsoft Teams logo"
src={formatAssetPath(teamsIcon)}
/>
);
case 'datadog':
return (
<img
style={style}
alt="Datadog logo"
src={formatAssetPath(dataDogIcon)}
/>
);
case 'jira':
return (
<img
style={style}
alt="JIRA logo"
src={formatAssetPath(jiraIcon)}
/>
);
case 'android':
return (
<img
style={style}
alt="Android logo"
src={formatAssetPath(android)}
/>
);
case 'dotnet':
return (
<img
style={style}
alt=".Net logo"
src={formatAssetPath(dotnet)}
/>
);
case 'flutter':
return (
<img
style={style}
alt="Flutter logo"
src={formatAssetPath(flutter)}
/>
);
case 'go':
return (
<img style={style} alt="Go logo" src={formatAssetPath(go)} />
);
case 'ios':
return (
<img style={style} alt="iOS logo" src={formatAssetPath(ios)} />
);
case 'java':
return (
<img
style={style}
alt="Java logo"
src={formatAssetPath(java)}
/>
);
case 'javascript':
return (
<img
style={style}
alt="JavaScript logo"
src={formatAssetPath(javascript)}
/>
);
case 'node':
return (
<img
style={style}
alt="Node.js logo"
src={formatAssetPath(node)}
/>
);
case 'php':
return (
<img style={style} alt="PHP logo" src={formatAssetPath(php)} />
);
case 'python':
return (
<img
style={style}
alt="Python logo"
src={formatAssetPath(python)}
/>
);
case 'react':
return (
<img
style={style}
alt="React logo"
src={formatAssetPath(react)}
/>
);
case 'ruby':
return (
<img
style={style}
alt="Ruby logo"
src={formatAssetPath(ruby)}
/>
);
case 'rust':
return (
<img
style={style}
alt="Rust logo"
src={formatAssetPath(rust)}
/>
);
case 'svelte':
return (
<img
style={style}
alt="Svelte logo"
src={formatAssetPath(svelte)}
/>
);
case 'vue':
return (
<img style={style} alt="Vue logo" src={formatAssetPath(vue)} />
);
default:
return (
<Avatar>
<DeviceHub />
</Avatar>
);
const StyledAvatar = styled(Avatar)(({ theme }) => ({
marginRight: theme.spacing(2),
borderRadius: theme.shape.borderRadius,
overflow: 'hidden',
width: theme.spacing(4),
height: theme.spacing(4),
}));
const integrations: Record<
string,
{
icon: string;
title: string;
}
> = {
slack: { title: 'Slack', icon: slackIcon },
'slack-app': { title: 'Slack', icon: slackIcon },
'jira-comment': { title: 'Jira', icon: jiraCommentIcon },
webhook: { title: 'Webhook', icon: webhooksIcon },
teams: { title: 'Teams', icon: teamsIcon },
datadog: { title: 'Datadog', icon: dataDogIcon },
jira: { title: 'Jira', icon: jiraIcon },
unleash: { title: 'Unleash', icon: unleashIcon },
android: { title: 'Android', icon: android },
dotnet: { title: 'Dotnet', icon: dotnet },
flutter: { title: 'Flutter', icon: flutter },
go: { title: 'Go', icon: go },
ios: { title: 'iOS', icon: ios },
java: { title: 'Java', icon: java },
javascript: { title: 'Javascript', icon: javascript },
node: { title: 'Node', icon: node },
php: { title: 'PHP', icon: php },
python: { title: 'Python', icon: python },
react: { title: 'React', icon: react },
ruby: { title: 'Ruby', icon: ruby },
rust: { title: 'Rust', icon: rust },
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={() => (
<StyledAvatar variant="rounded">
<DeviceHub />
</StyledAvatar>
)}
/>
);

3
src/lib/addons/slack-app-definition.ts
View File

@ -22,7 +22,8 @@ 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. 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 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.',
documentationUrl: 'https://docs.getunleash.io/docs/addons/slack-app',
alerts: [
{

7
src/lib/openapi/spec/addon-type-schema.ts
View File

@ -33,6 +33,13 @@ export const addonTypeSchema = {
description: 'A description of the addon type.',
example: 'Allows Unleash to post updates to Slack.',
},
howTo: {
type: 'string',
description:
'A long description of how to use this addon type. This will be displayed on the top of configuration page. Can contain markdown.',
example:
'This is **how you use** this addon type...\n - Step 1\n - Step 2\n - Step 3',
},
tagTypes: {
type: 'array',
description: `A list of [Unleash tag types](https://docs.getunleash.io/reference/tags#tag-types) that this addon uses. These tags will be added to the Unleash instance when an addon of this type is created.`,

1
src/lib/types/model.ts
View File

@ -264,6 +264,7 @@ export interface IAddonDefinition {
tagTypes?: ITagType[];
installation?: IAddonInstallation;
alerts?: IAddonAlert[];
howTo?: string;
}
export interface IAddonInstallation {