diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx index e867023330..c61f484904 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 8e86eb19d7..e530c06b87 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 52a6d467db..d630a7a458 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 6ef30ba103..2a5a7b5ae4 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,29 +36,7 @@ const CopyToClipboard = styled(Tooltip)(({ theme }) => ({ right: theme.spacing(1), })); -interface ITestSdkConnectionProps { - sdk: Sdk; - apiKey: string; -} -export const TestSdkConnection: FC = ({ - sdk, - apiKey, -}) => { - 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 installCommand = - installCommands[sdk.name] || - `No install command found for the ${sdk.name} SDK`; - const filledCodeSnippet = codeSnippet - .replace('', apiKey) - .replace('', apiUrl); - +const CopyBlock: FC<{ title: string; code: string }> = ({ title, code }) => { const onCopyToClipboard = (data: string) => () => { copy(data); setToastData({ @@ -62,6 +44,51 @@ export const TestSdkConnection: FC = ({ 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 clientApiUrl = `${uiConfig.unleashUrl}/api/`; + const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`; + const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl; + 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 filledInitializeCodeSnippet = initializeCodeSnippet + .replace('', apiKey) + .replace('', apiUrl); + 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 46960bfd66..7600cecec3 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 42d7ef2bdd..967a5f2eea 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}