diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx index e86702333029..c61f48490435 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx @@ -179,6 +179,7 @@ export const NewInUnleash = ({ summary, }) => ( { trackEvent('new-in-unleash-click', { props: { diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx index 8e86eb19d7ca..e530c06b8709 100644 --- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx +++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx @@ -23,6 +23,7 @@ interface IConnectSDKDialogProps { onClose: () => void; project: string; environments: string[]; + feature: string; } const ConnectSdk = styled('main')(({ theme }) => ({ @@ -70,6 +71,7 @@ export const ConnectSdkDialog = ({ onClose, environments, project, + feature, }: IConnectSDKDialogProps) => { const theme = useTheme(); const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg')); @@ -115,7 +117,11 @@ export const ConnectSdkDialog = ({ /> ) : null} {isTestConnectionStage ? ( - + ) : null} {stage === 'generate-api-key' ? ( diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx index 52a6d467dbdd..d630a7a45895 100644 --- a/frontend/src/component/onboarding/SelectSdk.tsx +++ b/frontend/src/component/onboarding/SelectSdk.tsx @@ -46,7 +46,7 @@ const SdkListSection = styled('div')(({ theme }) => ({ const SdkTile = styled('div')(({ theme }) => ({ fontSize: theme.typography.body2.fontSize, - backgroundColor: theme.palette.common.white, + backgroundColor: theme.palette.background.default, borderRadius: theme.shape.borderRadius, padding: theme.spacing(2, 3), width: '170px', diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx index 6ef30ba103c2..2a5a7b5ae456 100644 --- a/frontend/src/component/onboarding/TestSdkConnection.tsx +++ b/frontend/src/component/onboarding/TestSdkConnection.tsx @@ -3,7 +3,11 @@ 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 { + checkFlagCodeSnippets, + initializeCodeSnippets, + installCommands, +} from './sdkSnippets'; import copy from 'copy-to-clipboard'; import useToast from 'hooks/useToast'; import CopyIcon from '@mui/icons-material/FileCopy'; @@ -32,36 +36,59 @@ const CopyToClipboard = styled(Tooltip)(({ theme }) => ({ 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} + + + + + + + ); +}; + interface ITestSdkConnectionProps { sdk: Sdk; apiKey: string; + feature: string; } export const TestSdkConnection: FC = ({ sdk, apiKey, + feature, }) => { const { uiConfig } = useUiConfig(); - const { setToastData } = useToast(); const clientApiUrl = `${uiConfig.unleashUrl}/api/`; const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`; const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl; - const codeSnippet = - codeSnippets[sdk.name] || `No snippet found for the ${sdk.name} SDK`; + const initializeCodeSnippet = + initializeCodeSnippets[sdk.name] || + `No snippet found for the ${sdk.name} SDK`; const installCommand = installCommands[sdk.name] || `No install command found for the ${sdk.name} SDK`; - const filledCodeSnippet = codeSnippet + const filledInitializeCodeSnippet = initializeCodeSnippet .replace('', apiKey) .replace('', apiUrl); - - const onCopyToClipboard = (data: string) => () => { - copy(data); - setToastData({ - type: 'success', - title: 'Copied to clipboard', - }); - }; + const checkFlagCodeSnippet = + checkFlagCodeSnippets[sdk.name] || + `No snippet found for the ${sdk.name} SDK`; + const filledCheckFlagCodeSnippet = checkFlagCodeSnippet.replace( + '', + feature, + ); return ( @@ -69,29 +96,17 @@ export const TestSdkConnection: FC = ({ Setup the SDK

1. Install the SDK

- - {installCommand} - - - - - - +

2. Initialize the SDK

- - {filledCodeSnippet} - - - - - - + +

3. Check feature status

+
); diff --git a/frontend/src/component/onboarding/sdkSnippets.ts b/frontend/src/component/onboarding/sdkSnippets.ts index 46960bfd665c..7600cecec33b 100644 --- a/frontend/src/component/onboarding/sdkSnippets.ts +++ b/frontend/src/component/onboarding/sdkSnippets.ts @@ -20,12 +20,15 @@ dotnet add package Newtonsoft.Json`, Vue: 'npm install @unleash/proxy-client-vue', Svelte: 'npm install @unleash/proxy-client-svelte', Swift: 'https://github.com/Unleash/unleash-proxy-client-swift', - Android: - 'implementation("io.getunleash:unleash-android:${unleash.sdk.version}")', + Android: `implementation("io.getunleash:unleash-android:\${unleash.sdk.version}") + +// enabled required permissions + +`, Flutter: 'flutter pub add unleash_proxy_client_flutter', }; -export const codeSnippets: Record = { +export const initializeCodeSnippets: Record = { Node: `import { initialize } from 'unleash-client'; const unleash = initialize({ @@ -181,3 +184,25 @@ final unleash = UnleashClient( clientKey: '', appName: 'unleash-onboarding-flutter');`, }; + +// TODO: add idiomatic way of checking flag status that will populate metrics +export const checkFlagCodeSnippets: Record = { + Node: `setInterval(() => { + console.log('Is enabled', unleash.isEnabled('')); +}, 1000); +`, + Golang: ``, + Ruby: ``, + PHP: ``, + Rust: ``, + DotNet: ``, + Java: ``, + Python: ``, + Javascript: ``, + React: ``, + Vue: ``, + Svelte: ``, + Swift: ``, + Android: ``, + Flutter: ``, +}; diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 42d7ef2bdd7b..967a5f2eeaa0 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -502,14 +502,17 @@ export const ProjectFeatureToggles = ({ {featureToggleModals} - { - setConnectSdkOpen(false); - }} - project={projectId} - environments={environments} - /> + {'feature' in project.onboardingStatus ? ( + { + setConnectSdkOpen(false); + }} + project={projectId} + environments={environments} + feature={project.onboardingStatus.feature} + /> + ) : null}