From d477cb8691756d505b70bacb6840d184177368e0 Mon Sep 17 00:00:00 2001 From: sjaanus Date: Thu, 26 Sep 2024 11:29:35 +0300 Subject: [PATCH] Fix --- .../src/component/onboarding/CodeRenderer.tsx | 88 +++++++++++++++ .../src/component/onboarding/SdkConnected.tsx | 101 +----------------- .../onboarding/TestSdkConnection.tsx | 100 +---------------- 3 files changed, 96 insertions(+), 193 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 000000000000..886efec3008a --- /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 a563aed21f48..5d0abdba71ea 100644 --- a/frontend/src/component/onboarding/SdkConnected.tsx +++ b/frontend/src/component/onboarding/SdkConnected.tsx @@ -1,48 +1,12 @@ 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), @@ -52,63 +16,6 @@ const SpacedContainer = styled('div')(({ theme }) => ({ fontSize: theme.typography.body2.fontSize, })); -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; } @@ -120,7 +27,7 @@ export const SdkConnected: FC = ({ sdk }) => { const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`; const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl; - const snippet = (snippets[sdk.name] || '').replaceAll( + const snippet = (codeRenderSnippets[sdk.name] || '').replaceAll( '', apiUrl, ); diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx index dab000d04800..60b1a8647a12 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);