feat: check flag status snippet

Unleash · Sep 5, 2024 · ae08c49 · ae08c49
1 parent b1ce023
commit ae08c49
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 40 deletions.
diff --git 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,
                     }) => (
                         <NewInUnleashItem
+                            key={label}
                             onClick={() => {
                                 trackEvent('new-in-unleash-click', {
                                     props: {

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

diff --git 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
@@ -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,66 +36,77 @@ 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 (
+        <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 { 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('<YOUR_API_TOKEN>', apiKey)
         .replace('<YOUR_API_URL>', 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(
+        '<YOUR_FLAG>',
+        feature,
+    );
 
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
             <Box sx={{ mt: 4 }}>
                 <SectionHeader>Setup the SDK</SectionHeader>
                 <p>1. Install the SDK</p>
-                <StyledCodeBlock>
-                    {installCommand}
-                    <CopyToClipboard title='Copy command' arrow>
-                        <IconButton
-                            onClick={onCopyToClipboard(installCommand)}
-                            size='small'
-                        >
-                            <CopyIcon />
-                        </IconButton>
-                    </CopyToClipboard>
-                </StyledCodeBlock>
+                <CopyBlock title='Copy command' code={installCommand} />
                 <p>2. Initialize the SDK</p>
-                <StyledCodeBlock>
-                    {filledCodeSnippet}
-                    <CopyToClipboard title='Copy snippet' arrow>
-                        <IconButton
-                            onClick={onCopyToClipboard(filledCodeSnippet)}
-                            size='small'
-                        >
-                            <CopyIcon />
-                        </IconButton>
-                    </CopyToClipboard>
-                </StyledCodeBlock>
+                <CopyBlock
+                    title='Copy snippet'
+                    code={filledInitializeCodeSnippet}
+                />
+                <p>3. Check feature status</p>
+                <CopyBlock
+                    title='Copy snippet'
+                    code={filledCheckFlagCodeSnippet}
+                />
             </Box>
         </SpacedContainer>
     );

diff --git 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
+<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: ``,
+};
diff --git a/...nd/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/...nd/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -509,6 +509,7 @@ export const ProjectFeatureToggles = ({
                         }}
                         project={projectId}
                         environments={environments}
+                        feature={project.onboardingStatus.feature}
                     />
                 </div>
             </PageContent>