Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: copy to clipboard sdk snippet (#8083)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-09-05 08:53:52 +02:00 committed by GitHub
parent bcf7f5682e
commit b1ce02369a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/onboarding/ConnectSdkDialog.tsx
View File

@ -132,6 +132,7 @@ export const ConnectSdkDialog = ({
</Button>
<Button
variant='contained'
disabled={!apiKey}
onClick={() => {
setStage('test-connection');
}}

2
frontend/src/component/onboarding/SelectSdk.tsx
View File

@ -126,7 +126,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
</SecondarySectionHeader>
<SdkListSection>
{clientSdks.map((sdk) => (
<SdkTile>
<SdkTile key={sdk.name}>
<StyledAvatar src={formatAssetPath(sdk.icon)} />
<SdkTileContent>
<b>{sdk.name}</b>{' '}

48
frontend/src/component/onboarding/TestSdkConnection.tsx
View File

@ -1,9 +1,12 @@
import type { FC } from 'react';
import { Box, styled, Typography } from '@mui/material';
import { Box, IconButton, styled, Tooltip, Typography } from '@mui/material';
import { SectionHeader } from './SharedComponents';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import type { Sdk } from './sharedTypes';
import { codeSnippets, installCommands } from './sdkSnippets';
import copy from 'copy-to-clipboard';
import useToast from 'hooks/useToast';
import CopyIcon from '@mui/icons-material/FileCopy';
const SpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(5, 8, 8, 8),
@ -20,6 +23,13 @@ const StyledCodeBlock = styled('pre')(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
wordBreak: 'break-all',
whiteSpace: 'pre-wrap',
position: 'relative',
}));
const CopyToClipboard = styled(Tooltip)(({ theme }) => ({
position: 'absolute',
top: theme.spacing(1),
right: theme.spacing(1),
}));
interface ITestSdkConnectionProps {
@ -31,6 +41,7 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
apiKey,
}) => {
const { uiConfig } = useUiConfig();
const { setToastData } = useToast();
const clientApiUrl = `${uiConfig.unleashUrl}/api/`;
const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`;
@ -40,6 +51,17 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
const installCommand =
installCommands[sdk.name] ||
`No install command found for the ${sdk.name} SDK`;
const filledCodeSnippet = codeSnippet
.replace('<YOUR_API_TOKEN>', apiKey)
.replace('<YOUR_API_URL>', apiUrl);
const onCopyToClipboard = (data: string) => () => {
copy(data);
setToastData({
type: 'success',
title: 'Copied to clipboard',
});
};
return (
<SpacedContainer>
@ -47,12 +69,28 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
<Box sx={{ mt: 4 }}>
<SectionHeader>Setup the SDK</SectionHeader>
<p>1. Install the SDK</p>
<StyledCodeBlock>{installCommand}</StyledCodeBlock>
<StyledCodeBlock>
{installCommand}
<CopyToClipboard title='Copy command' arrow>
<IconButton
onClick={onCopyToClipboard(installCommand)}
size='small'
>
<CopyIcon />
</IconButton>
</CopyToClipboard>
</StyledCodeBlock>
<p>2. Initialize the SDK</p>
<StyledCodeBlock>
{codeSnippet
.replace('<YOUR_API_TOKEN>', apiKey)
.replace('<YOUR_API_URL>', apiUrl)}
{filledCodeSnippet}
<CopyToClipboard title='Copy snippet' arrow>
<IconButton
onClick={onCopyToClipboard(filledCodeSnippet)}
size='small'
>
<CopyIcon />
</IconButton>
</CopyToClipboard>
</StyledCodeBlock>
</Box>
</SpacedContainer>