feat: check flag status snippet (#8097)

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx

@@ -179,6 +179,7 @@ export const NewInUnleash = ({
                         summary,
                     }) => (
                         <NewInUnleashItem
+                            key={label}
                             onClick={() => {
                                 trackEvent('new-in-unleash-click', {
                                     props: {

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 ? (
-                        <TestSdkConnection sdk={sdk} apiKey={apiKey} />
+                        <TestSdkConnection
+                            sdk={sdk}
+                            apiKey={apiKey}
+                            feature={feature}
+                        />
                     ) : null}
 
                     {stage === 'generate-api-key' ? (

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',

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 {
+const CopyBlock: FC<{ title: string; code: string }> = ({ title, code }) => {
-    sdk: Sdk;
-    apiKey: string;
-}
-export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
-    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('<YOUR_API_TOKEN>', apiKey)
-        .replace('<YOUR_API_URL>', apiUrl);
-
     const onCopyToClipboard = (data: string) => () => {
         copy(data);
         setToastData({
@@ -62,6 +44,51 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
             title: 'Copied to clipboard',
         });
     };
+    const { setToastData } = useToast();
+
+    return (
+        <StyledCodeBlock>
+            {code}
+            <CopyToClipboard title={title} arrow>
+                <IconButton onClick={onCopyToClipboard(code)} size='small'>
+                    <CopyIcon />
+                </IconButton>
+            </CopyToClipboard>
+        </StyledCodeBlock>
+    );
+};
+
+interface ITestSdkConnectionProps {
+    sdk: Sdk;
+    apiKey: string;
+    feature: string;
+}
+export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
+    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('<YOUR_API_TOKEN>', apiKey)
+        .replace('<YOUR_API_URL>', apiUrl);
+    const checkFlagCodeSnippet =
+        checkFlagCodeSnippets[sdk.name] ||
+        `No snippet found for the ${sdk.name} SDK`;
+    const filledCheckFlagCodeSnippet = checkFlagCodeSnippet.replace(
+        '<YOUR_FLAG>',
+        feature,
+    );
 
     return (
         <SpacedContainer>
@@ -69,29 +96,17 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
             <Box sx={{ mt: 4 }}>
                 <SectionHeader>Setup the SDK</SectionHeader>
                 <p>1. Install the SDK</p>
-                <StyledCodeBlock>
+                <CopyBlock title='Copy command' code={installCommand} />
-                    {installCommand}
-                    <CopyToClipboard title='Copy command' arrow>
-                        <IconButton
-                            onClick={onCopyToClipboard(installCommand)}
-                            size='small'
-                        >
-                            <CopyIcon />
-                        </IconButton>
-                    </CopyToClipboard>
-                </StyledCodeBlock>
                 <p>2. Initialize the SDK</p>
-                <StyledCodeBlock>
+                <CopyBlock
-                    {filledCodeSnippet}
+                    title='Copy snippet'
-                    <CopyToClipboard title='Copy snippet' arrow>
+                    code={filledInitializeCodeSnippet}
-                        <IconButton
+                />
-                            onClick={onCopyToClipboard(filledCodeSnippet)}
+                <p>3. Check feature status</p>
-                            size='small'
+                <CopyBlock
-                        >
+                    title='Copy snippet'
-                            <CopyIcon />
+                    code={filledCheckFlagCodeSnippet}
-                        </IconButton>
+                />
-                    </CopyToClipboard>
-                </StyledCodeBlock>
             </Box>
         </SpacedContainer>
     );

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:
+    Android: `implementation("io.getunleash:unleash-android:\${unleash.sdk.version}")
-        'implementation("io.getunleash:unleash-android:${unleash.sdk.version}")',
+
+// enabled required permissions
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />`,
     Flutter: 'flutter pub add unleash_proxy_client_flutter',
 };
 
-export const codeSnippets: Record<SdkName, string> = {
+export const initializeCodeSnippets: Record<SdkName, string> = {
     Node: `import { initialize } from 'unleash-client';
 
 const unleash = initialize({
@@ -181,3 +184,25 @@ final unleash = UnleashClient(
     clientKey: '<YOUR_API_TOKEN>',
     appName: 'unleash-onboarding-flutter');`,
 };
+
+// TODO: add idiomatic way of checking flag status that will populate metrics
+export const checkFlagCodeSnippets: Record<SdkName, string> = {
+    Node: `setInterval(() => {
+  console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
+}, 1000);
+`,
+    Golang: ``,
+    Ruby: ``,
+    PHP: ``,
+    Rust: ``,
+    DotNet: ``,
+    Java: ``,
+    Python: ``,
+    Javascript: ``,
+    React: ``,
+    Vue: ``,
+    Svelte: ``,
+    Swift: ``,
+    Android: ``,
+    Flutter: ``,
+};

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -502,14 +502,17 @@ export const ProjectFeatureToggles = ({
 
                     {featureToggleModals}
 
-                    <ConnectSdkDialog
+                    {'feature' in project.onboardingStatus ? (
-                        open={connectSdkOpen}
+                        <ConnectSdkDialog
-                        onClose={() => {
+                            open={connectSdkOpen}
-                            setConnectSdkOpen(false);
+                            onClose={() => {
-                        }}
+                                setConnectSdkOpen(false);
-                        project={projectId}
+                            }}
-                        environments={environments}
+                            project={projectId}
-                    />
+                            environments={environments}
+                            feature={project.onboardingStatus.feature}
+                        />
+                    ) : null}
                 </div>
             </PageContent>
             <BatchSelectionActionsBar count={selectedData.length}>