+
+ Official SDKs
+
+
+ In order to connect your application to Unleash you
+ will need a client SDK (software developer kit) for
+ your programming language and an API token.
+
+
+
+
+ Server-side SDKs
+
+
+ Server-side clients run on your server and
+ communicate directly with your Unleash instance.
+
+
+
+
+ Client-side SDKs
+
+
+ Client-side SDKs can connect to the Unleash Proxy or
+ to the Unleash front-end API, but not to the regular
+ Unleash client API.
+
+
+
diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts
new file mode 100644
index 0000000000..bd6e02f90a
--- /dev/null
+++ b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts
@@ -0,0 +1,117 @@
+export interface Sdk {
+ name: string;
+ displayName: string;
+ description: string;
+ documentationUrl: string;
+ type: 'server' | 'client';
+}
+
+export const OFFICIAL_SDKS: Sdk[] = [
+ {
+ name: 'go',
+ displayName: 'GO SDK',
+ description: 'Officially Unleash Client for Go',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/go',
+ type: 'server',
+ },
+ {
+ name: 'java',
+ displayName: 'Java SDK',
+ description: 'Officially Unleash Client for Java',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/java',
+ type: 'server',
+ },
+ {
+ name: 'node',
+ displayName: 'Node.js SDK',
+ description: 'Officially Unleash Client for Node.js',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/node',
+ type: 'server',
+ },
+ {
+ name: 'php',
+ displayName: 'PHP SDK',
+ description: 'Officially Unleash Client for PHP',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/php',
+ type: 'server',
+ },
+ {
+ name: 'python',
+ displayName: 'Python SDK',
+ description: 'Officially Unleash Client for Python',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/python',
+ type: 'server',
+ },
+ {
+ name: 'ruby',
+ displayName: 'Ruby SDK',
+ description: 'Officially Unleash Client for Ruby',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/ruby',
+ type: 'server',
+ },
+ {
+ name: 'rust',
+ displayName: 'Rust SDK',
+ description: 'Officially Unleash Client for Rust',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/rust',
+ type: 'server',
+ },
+ {
+ name: 'dotnet',
+ displayName: '.Net SDK',
+ description: 'Officially Unleash Client for .Net',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/dotnet ',
+ type: 'server',
+ },
+ {
+ name: 'android',
+ displayName: 'Android SDK',
+ description: 'Officially Unleash Client for Android',
+ documentationUrl:
+ 'https://docs.getunleash.io/reference/sdks/android-proxy',
+ type: 'client',
+ },
+ {
+ name: 'flutter',
+ displayName: 'Flutter Proxy SDK',
+ description: 'Officially Unleash Client for Flutter',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/flutter',
+ type: 'client',
+ },
+ {
+ name: 'ios',
+ displayName: 'iOS Proxy SDK',
+ description: 'Officially Unleash Client for iOS',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/ios-proxy',
+ type: 'client',
+ },
+ {
+ name: 'javascript',
+ displayName: 'Javascript Proxy SDK',
+ description: 'Officially Unleash Client for Javascript',
+ documentationUrl:
+ 'https://docs.getunleash.io/reference/sdks/javascript-browser',
+ type: 'client',
+ },
+ {
+ name: 'react',
+ displayName: 'React Proxy SDK',
+ description: 'Officially Unleash Client for React',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/react',
+ type: 'client',
+ },
+ {
+ name: 'svelte',
+ displayName: 'Svelte Proxy SDK',
+ description: 'Officially Unleash Client for Svelte',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/svelte',
+ type: 'client',
+ },
+ {
+ name: 'vue',
+ displayName: 'Vue Proxy SDK',
+ description: 'Officially Unleash Client for Vue',
+ documentationUrl: 'https://docs.getunleash.io/reference/sdks/vue',
+ type: 'client',
+ },
+];
diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
index a424c807a3..0a3efdd5e7 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
@@ -1,6 +1,6 @@
-import { VFC } from 'react';
+import React, { Fragment, VFC } from 'react';
import { Link } from 'react-router-dom';
-import { styled, Typography } from '@mui/material';
+import { styled, Typography, Theme } from '@mui/material';
import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -17,6 +17,7 @@ interface IIntegrationCardProps {
isEnabled?: boolean;
configureActionText?: string;
link: string;
+ isExternal?: boolean;
addon?: AddonSchema;
}
@@ -33,6 +34,19 @@ const StyledLink = styled(Link)(({ theme }) => ({
backgroundColor: theme.palette.action.hover,
},
}));
+const StyledAnchor = styled('a')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ padding: theme.spacing(3),
+ borderRadius: `${theme.shape.borderRadiusMedium}px`,
+ border: `1px solid ${theme.palette.divider}`,
+ textDecoration: 'none',
+ color: 'inherit',
+ boxShadow: theme.boxShadows.card,
+ ':hover': {
+ backgroundColor: theme.palette.action.hover,
+ },
+}));
const StyledHeader = styled('div')(({ theme }) => ({
display: 'flex',
@@ -64,11 +78,12 @@ export const IntegrationCard: VFC = ({
configureActionText = 'Configure',
link,
addon,
+ isExternal = false,
}) => {
const isConfigured = addon !== undefined;
- return (
-
+ const content = (
+
= ({
show={
-
+
{description}
{configureActionText}
-
+
);
+
+ if (isExternal) {
+ return (
+
+ {content}
+
+ );
+ } else {
+ return {content} ;
+ }
};
diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
index b7c7fd822a..1afbc1918f 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
@@ -9,6 +9,22 @@ import webhooksIcon from 'assets/icons/webhooks.svg';
import teamsIcon from 'assets/icons/teams.svg';
import dataDogIcon from 'assets/icons/datadog.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';
+import go from 'assets/icons/sdks/Logo-go.svg';
+import ios from 'assets/icons/sdks/Logo-ios.svg';
+import java from 'assets/icons/sdks/Logo-java.svg';
+import javascript from 'assets/icons/sdks/Logo-javascript.svg';
+import node from 'assets/icons/sdks/Logo-node.svg';
+import php from 'assets/icons/sdks/Logo-php.svg';
+import python from 'assets/icons/sdks/Logo-python.svg';
+import react from 'assets/icons/sdks/Logo-react.svg';
+import ruby from 'assets/icons/sdks/Logo-ruby.svg';
+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',
@@ -70,6 +86,110 @@ export const IntegrationIcon = ({ name }: IIntegrationIconProps) => {
src={formatAssetPath(jiraIcon)}
/>
);
+ case 'android':
+ return (
+ })
+ );
+ case 'dotnet':
+ return (
+ })
+ );
+ case 'flutter':
+ return (
+ })
+ );
+ case 'go':
+ return (
+ })
+ );
+ case 'ios':
+ return (
+ })
+ );
+ case 'java':
+ return (
+ })
+ );
+ case 'javascript':
+ return (
+ })
+ );
+ case 'node':
+ return (
+ })
+ );
+ case 'php':
+ return (
+ })
+ );
+ case 'python':
+ return (
+ })
+ );
+ case 'react':
+ return (
+ })
+ );
+ case 'ruby':
+ return (
+ })
+ );
+ case 'rust':
+ return (
+ })
+ );
+ case 'svelte':
+ return (
+ })
+ );
+ case 'vue':
+ return (
+ })
+ );
default:
return (