From d0499dbf94fc348f33879e14f2d4815a39a653cc Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 26 Sep 2024 11:39:05 +0300 Subject: [PATCH] feat: sdk connected using production snippet (#8266) 1. Fix nodejs snippet 2. Tie the snippet to the completed stage. 3. Pull out the code renderer, to shared component ![image](https://github.com/user-attachments/assets/886c9502-4407-4aa7-8b63-84035f8cdb8a) --- .../src/component/onboarding/CodeRenderer.tsx | 88 ++++++++++++++ .../src/component/onboarding/SdkConnected.tsx | 115 +++--------------- .../onboarding/TestSdkConnection.tsx | 100 +-------------- .../component/onboarding/snippets/nodejs.md | 12 +- 4 files changed, 115 insertions(+), 200 deletions(-) create mode 100644 frontend/src/component/onboarding/CodeRenderer.tsx diff --git a/frontend/src/component/onboarding/CodeRenderer.tsx b/frontend/src/component/onboarding/CodeRenderer.tsx new file mode 100644 index 0000000000..886efec300 --- /dev/null +++ b/frontend/src/component/onboarding/CodeRenderer.tsx @@ -0,0 +1,88 @@ +import type { CodeComponent } from 'react-markdown/lib/ast-to-react'; +import type { FC } from 'react'; +import copy from 'copy-to-clipboard'; +import useToast from '../../hooks/useToast'; +import { IconButton, styled, Tooltip } from '@mui/material'; +import CopyIcon from '@mui/icons-material/FileCopy'; +import type { SdkName } from './sharedTypes'; +import android from './snippets/android.md?raw'; +import go from './snippets/go.md?raw'; +import javascript from './snippets/javascript.md?raw'; +import nodejs from './snippets/nodejs.md?raw'; +import python from './snippets/python.md?raw'; +import ruby from './snippets/ruby.md?raw'; +import svelte from './snippets/svelte.md?raw'; +import vue from './snippets/vue.md?raw'; +import flutter from './snippets/flutter.md?raw'; +import java from './snippets/java.md?raw'; +import dotnet from './snippets/dotnet.md?raw'; +import php from './snippets/php.md?raw'; +import react from './snippets/react.md?raw'; +import rust from './snippets/rust.md?raw'; +import swift from './snippets/swift.md?raw'; + +export const codeRenderSnippets: Record = { + Android: android, + Go: go, + JavaScript: javascript, + 'Node.js': nodejs, + Python: python, + Ruby: ruby, + Svelte: svelte, + Vue: vue, + Flutter: flutter, + Java: java, + '.NET': dotnet, + PHP: php, + React: react, + Rust: rust, + Swift: swift, +}; + +const StyledCodeBlock = styled('pre')(({ theme }) => ({ + backgroundColor: theme.palette.background.elevation1, + padding: theme.spacing(2), + borderRadius: theme.shape.borderRadius, + overflow: 'auto', + fontSize: theme.typography.body2.fontSize, + wordBreak: 'break-all', + whiteSpace: 'pre-wrap', + position: 'relative', + maxHeight: theme.spacing(34), +})); + +const CopyToClipboard = styled(Tooltip)(({ theme }) => ({ + position: 'absolute', + top: theme.spacing(1), + right: theme.spacing(1), +})); + +const CopyBlock: FC<{ title: string; code: string }> = ({ title, code }) => { + const onCopyToClipboard = (data: string) => () => { + copy(data); + setToastData({ + type: 'success', + title: 'Copied to clipboard', + }); + }; + const { setToastData } = useToast(); + + return ( + + {code} + + + + + + + ); +}; + +export const CodeRenderer: CodeComponent = ({ inline = false, children }) => { + if (!inline && typeof children?.[0] === 'string') { + return ; + } + + return {children}; +}; diff --git a/frontend/src/component/onboarding/SdkConnected.tsx b/frontend/src/component/onboarding/SdkConnected.tsx index 91bd33b654..5d0abdba71 100644 --- a/frontend/src/component/onboarding/SdkConnected.tsx +++ b/frontend/src/component/onboarding/SdkConnected.tsx @@ -1,113 +1,21 @@ import type { FC } from 'react'; -import { Box, IconButton, styled, Tooltip, Typography } from '@mui/material'; +import { Box, styled, Typography } from '@mui/material'; import { SectionHeader, StepperBox } from './SharedComponents'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import type { SdkName, Sdk } from './sharedTypes'; -import copy from 'copy-to-clipboard'; -import useToast from 'hooks/useToast'; -import CopyIcon from '@mui/icons-material/FileCopy'; +import type { Sdk } from './sharedTypes'; import { Stepper } from './Stepper'; import { Badge } from '../common/Badge/Badge'; import { Markdown } from 'component/common/Markdown/Markdown'; -import type { CodeComponent } from 'react-markdown/lib/ast-to-react'; -import android from './snippets/android.md?raw'; -import go from './snippets/go.md?raw'; -import javascript from './snippets/javascript.md?raw'; -import nodejs from './snippets/nodejs.md?raw'; -import python from './snippets/python.md?raw'; -import ruby from './snippets/ruby.md?raw'; -import svelte from './snippets/svelte.md?raw'; -import vue from './snippets/vue.md?raw'; -import flutter from './snippets/flutter.md?raw'; -import java from './snippets/java.md?raw'; -import dotnet from './snippets/dotnet.md?raw'; -import php from './snippets/php.md?raw'; -import react from './snippets/react.md?raw'; -import rust from './snippets/rust.md?raw'; -import swift from './snippets/swift.md?raw'; - -const snippets: Record = { - Android: android, - Go: go, - JavaScript: javascript, - 'Node.js': nodejs, - Python: python, - Ruby: ruby, - Svelte: svelte, - Vue: vue, - Flutter: flutter, - Java: java, - '.NET': dotnet, - PHP: php, - React: react, - Rust: rust, - Swift: swift, -}; +import { CodeRenderer, codeRenderSnippets } from './CodeRenderer'; const SpacedContainer = styled('div')(({ theme }) => ({ padding: theme.spacing(5, 8, 2, 8), display: 'flex', flexDirection: 'column', gap: theme.spacing(3), -})); - -const StyledCodeBlock = styled('pre')(({ theme }) => ({ - backgroundColor: theme.palette.background.elevation1, - padding: theme.spacing(2), - borderRadius: theme.shape.borderRadius, - overflow: 'auto', fontSize: theme.typography.body2.fontSize, - wordBreak: 'break-all', - whiteSpace: 'pre-wrap', - position: 'relative', - maxHeight: theme.spacing(34), })); -const CopyToClipboard = styled(Tooltip)(({ theme }) => ({ - position: 'absolute', - top: theme.spacing(1), - right: theme.spacing(1), -})); - -const CopyBlock: FC<{ title: string; code: string }> = ({ title, code }) => { - const onCopyToClipboard = (data: string) => () => { - copy(data); - setToastData({ - type: 'success', - title: 'Copied to clipboard', - }); - }; - const { setToastData } = useToast(); - - return ( - - {code} - - - - - - - ); -}; - -const ChangeSdk = styled('div')(({ theme }) => ({ - display: 'inline-flex', - gap: theme.spacing(3), - padding: theme.spacing(1, 2), - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadius, - marginBottom: theme.spacing(3), -})); - -const CodeRenderer: CodeComponent = ({ inline = false, children }) => { - if (!inline && typeof children?.[0] === 'string') { - return ; - } - - return {children}; -}; - interface ISdkConnectedProps { sdk: Sdk; } @@ -119,11 +27,14 @@ export const SdkConnected: FC = ({ sdk }) => { const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`; const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl; - const snippet = (snippets[sdk.name] || '').replace( + const snippet = (codeRenderSnippets[sdk.name] || '').replaceAll( '', apiUrl, ); + const [_connectSnippet, productionSnippet, otherResourcesSnippet] = + snippet.split('---\n'); + return ( Connect an SDK to Unleash @@ -139,7 +50,17 @@ export const SdkConnected: FC = ({ sdk }) => { following default settings. - {snippet} + {productionSnippet} + + + + Additional resources + + Now that we’ve validated the connection, you might want to + look into more advanced use cases and examples: + + + {otherResourcesSnippet} diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx index dab000d048..60b1a8647a 100644 --- a/frontend/src/component/onboarding/TestSdkConnection.tsx +++ b/frontend/src/component/onboarding/TestSdkConnection.tsx @@ -1,57 +1,13 @@ import type { FC } from 'react'; -import { - Avatar, - Box, - IconButton, - Link, - styled, - Tooltip, - Typography, -} from '@mui/material'; +import { Avatar, Box, Link, styled, Typography } from '@mui/material'; import { SectionHeader, StepperBox } from './SharedComponents'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { allSdks, type SdkName, type Sdk } from './sharedTypes'; -import copy from 'copy-to-clipboard'; -import useToast from 'hooks/useToast'; -import CopyIcon from '@mui/icons-material/FileCopy'; +import { allSdks, type Sdk } from './sharedTypes'; import { formatAssetPath } from '../../utils/formatPath'; import { Stepper } from './Stepper'; import { Badge } from '../common/Badge/Badge'; import { Markdown } from 'component/common/Markdown/Markdown'; -import type { CodeComponent } from 'react-markdown/lib/ast-to-react'; -import android from './snippets/android.md?raw'; -import go from './snippets/go.md?raw'; -import javascript from './snippets/javascript.md?raw'; -import nodejs from './snippets/nodejs.md?raw'; -import python from './snippets/python.md?raw'; -import ruby from './snippets/ruby.md?raw'; -import svelte from './snippets/svelte.md?raw'; -import vue from './snippets/vue.md?raw'; -import flutter from './snippets/flutter.md?raw'; -import java from './snippets/java.md?raw'; -import dotnet from './snippets/dotnet.md?raw'; -import php from './snippets/php.md?raw'; -import react from './snippets/react.md?raw'; -import rust from './snippets/rust.md?raw'; -import swift from './snippets/swift.md?raw'; - -const snippets: Record = { - Android: android, - Go: go, - JavaScript: javascript, - 'Node.js': nodejs, - Python: python, - Ruby: ruby, - Svelte: svelte, - Vue: vue, - Flutter: flutter, - Java: java, - '.NET': dotnet, - PHP: php, - React: react, - Rust: rust, - Swift: swift, -}; +import { CodeRenderer, codeRenderSnippets } from './CodeRenderer'; const SpacedContainer = styled('div')(({ theme }) => ({ padding: theme.spacing(5, 8, 2, 8), @@ -60,46 +16,6 @@ const SpacedContainer = styled('div')(({ theme }) => ({ gap: theme.spacing(3), })); -const StyledCodeBlock = styled('pre')(({ theme }) => ({ - backgroundColor: theme.palette.background.elevation1, - padding: theme.spacing(2), - borderRadius: theme.shape.borderRadius, - overflow: 'auto', - fontSize: theme.typography.body2.fontSize, - wordBreak: 'break-all', - whiteSpace: 'pre-wrap', - position: 'relative', - maxHeight: theme.spacing(34), -})); - -const CopyToClipboard = styled(Tooltip)(({ theme }) => ({ - position: 'absolute', - top: theme.spacing(1), - right: theme.spacing(1), -})); - -const CopyBlock: FC<{ title: string; code: string }> = ({ title, code }) => { - const onCopyToClipboard = (data: string) => () => { - copy(data); - setToastData({ - type: 'success', - title: 'Copied to clipboard', - }); - }; - const { setToastData } = useToast(); - - return ( - - {code} - - - - - - - ); -}; - const ChangeSdk = styled('div')(({ theme }) => ({ display: 'inline-flex', gap: theme.spacing(3), @@ -109,14 +25,6 @@ const ChangeSdk = styled('div')(({ theme }) => ({ marginBottom: theme.spacing(3), })); -const CodeRenderer: CodeComponent = ({ inline = false, children }) => { - if (!inline && typeof children?.[0] === 'string') { - return ; - } - - return {children}; -}; - interface ITestSdkConnectionProps { sdk: Sdk; apiKey: string; @@ -137,7 +45,7 @@ export const TestSdkConnection: FC = ({ const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`; const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl; - const snippet = (snippets[sdk.name] || '') + const snippet = (codeRenderSnippets[sdk.name] || '') .replace('', apiKey) .replace('', apiUrl) .replaceAll('', feature); diff --git a/frontend/src/component/onboarding/snippets/nodejs.md b/frontend/src/component/onboarding/snippets/nodejs.md index b01f88de82..0763726e5e 100644 --- a/frontend/src/component/onboarding/snippets/nodejs.md +++ b/frontend/src/component/onboarding/snippets/nodejs.md @@ -24,15 +24,13 @@ setInterval(() => { --- ```js -const { UnleashClient } = require('unleash-proxy-client'); +const { initialize } = require('unleash-client'); -const unleash = new UnleashClient({ - url: '', - appName: 'unleash-onboarding-node', - customHeaders: { Authorization: process.env.UNLEASH_API_KEY }, +const unleash = initialize({ + url: '', + appName: 'unleash-onboarding-node', + customHeaders: { Authorization: process.env.UNLEASH_API_KEY }, }); - -unleash.start(); ``` ---