From dff0420ca8ebae575abb8e3a2c72ede9e8aa5529 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Fri, 8 Sep 2023 10:45:37 +0200 Subject: [PATCH] feat: proxy and edge integration cards (#4636) --- .../src/assets/icons/unleash-integration.svg | 1 + .../AvailableIntegrations.tsx | 33 +-- .../IntegrationCard/IntegrationCard.tsx | 20 +- .../IntegrationIcon/IntegrationIcon.tsx | 228 +++++------------- src/lib/addons/slack-app-definition.ts | 3 +- src/lib/openapi/spec/addon-type-schema.ts | 7 + src/lib/types/model.ts | 1 + 7 files changed, 104 insertions(+), 189 deletions(-) create mode 100644 frontend/src/assets/icons/unleash-integration.svg diff --git a/frontend/src/assets/icons/unleash-integration.svg b/frontend/src/assets/icons/unleash-integration.svg new file mode 100644 index 0000000000..637a6101ce --- /dev/null +++ b/frontend/src/assets/icons/unleash-integration.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx index be845dd35d..b64edfb892 100644 --- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx +++ b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx @@ -97,22 +97,27 @@ export const AvailableIntegrations: VFC = ({ Performance and security - Description + Connect Unleash to private, scalable and distributed + relays. Additional layer for handling massive number + of requests. - - {/* TODO: edge and proxy */} - {/* {providers?.map( - ({ name, displayName, description }) => ( - - ) - )} */} + + + diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx index 4e08c187d3..fa3ff33e04 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx +++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx @@ -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 = ({ configureActionText = 'Configure', link, addon, + deprecated, isExternal = false, }) => { const isConfigured = addon !== undefined; const content = ( - + <> {title} + + Deprecated + + } + /> = ({ elseShow={} /> - + ); if (isExternal) { @@ -131,6 +141,6 @@ export const IntegrationCard: VFC = ({ ); } else { - return {content}; + return {content}; } }; diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx index 1afbc1918f..d4f3c50292 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx +++ b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx @@ -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 ( - Slack logo - ); - case 'jira-comment': - return ( - JIRA logo - ); - case 'webhook': - return ( - Generic Webhook logo - ); - case 'teams': - return ( - Microsoft Teams logo - ); - case 'datadog': - return ( - Datadog logo - ); - case 'jira': - return ( - JIRA logo - ); - case 'android': - return ( - Android logo - ); - case 'dotnet': - return ( - .Net logo - ); - case 'flutter': - return ( - Flutter logo - ); - case 'go': - return ( - Go logo - ); - case 'ios': - return ( - iOS logo - ); - case 'java': - return ( - Java logo - ); - case 'javascript': - return ( - JavaScript logo - ); - case 'node': - return ( - Node.js logo - ); - case 'php': - return ( - PHP logo - ); - case 'python': - return ( - Python logo - ); - case 'react': - return ( - React logo - ); - case 'ruby': - return ( - Ruby logo - ); - case 'rust': - return ( - Rust logo - ); - case 'svelte': - return ( - Svelte logo - ); - case 'vue': - return ( - Vue logo - ); - default: - return ( - - - - ); +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) => ( + ( + + )} + elseShow={() => ( + + + + )} + /> +); diff --git a/src/lib/addons/slack-app-definition.ts b/src/lib/addons/slack-app-definition.ts index 1149bd2bbb..afd43c9da5 100644 --- a/src/lib/addons/slack-app-definition.ts +++ b/src/lib/addons/slack-app-definition.ts @@ -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: [ { diff --git a/src/lib/openapi/spec/addon-type-schema.ts b/src/lib/openapi/spec/addon-type-schema.ts index a97b7acd25..4a9735356d 100644 --- a/src/lib/openapi/spec/addon-type-schema.ts +++ b/src/lib/openapi/spec/addon-type-schema.ts @@ -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.`, diff --git a/src/lib/types/model.ts b/src/lib/types/model.ts index 68e271f93a..d15f65d13e 100644 --- a/src/lib/types/model.ts +++ b/src/lib/types/model.ts @@ -264,6 +264,7 @@ export interface IAddonDefinition { tagTypes?: ITagType[]; installation?: IAddonInstallation; alerts?: IAddonAlert[]; + howTo?: string; } export interface IAddonInstallation {