feat: copy to clipboard sdk snippet (#8083)

frontend/src/component/onboarding/ConnectSdkDialog.tsx

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

frontend/src/component/onboarding/SelectSdk.tsx

@@ -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>{' '}

frontend/src/component/onboarding/TestSdkConnection.tsx

@@ -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
+                    {filledCodeSnippet}
-                        .replace('<YOUR_API_TOKEN>', apiKey)
+                    <CopyToClipboard title='Copy snippet' arrow>
-                        .replace('<YOUR_API_URL>', apiUrl)}
+                        <IconButton
+                            onClick={onCopyToClipboard(filledCodeSnippet)}
+                            size='small'
+                        >
+                            <CopyIcon />
+                        </IconButton>
+                    </CopyToClipboard>
                 </StyledCodeBlock>
             </Box>
         </SpacedContainer>