Update tutorial panel dstackai/dstack-cloud#205 (#1659)

dstackai · Sep 4, 2024 · dd550dc · dd550dc
1 parent e4d467d
commit dd550dc
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 20 deletions.
diff --git a/frontend/src/App/slice.ts b/frontend/src/App/slice.ts
@@ -52,6 +52,7 @@ const getInitialState = (): IAppState => {
             configureCLICompleted: false,
             discordCompleted: false,
             tallyCompleted: false,
+            quickStartCompleted: false,
         },
     };
 };

diff --git a/frontend/src/App/types.ts b/frontend/src/App/types.ts
@@ -36,5 +36,6 @@ export interface IAppState {
         configureCLICompleted: boolean;
         discordCompleted: boolean;
         tallyCompleted: boolean;
+        quickStartCompleted: boolean;
     };
 }
diff --git a/frontend/src/components/Code/styles.module.scss b/frontend/src/components/Code/styles.module.scss
@@ -4,4 +4,5 @@
     padding: 8px;
     background-color: awsui.$color-background-input-disabled;
     border-radius: 8px;
+    white-space: pre-wrap;
 }
diff --git a/frontend/src/consts.ts b/frontend/src/consts.ts
@@ -1,5 +1,6 @@
 export const DATE_TIME_FORMAT = 'MM/dd/yyyy HH:mm';
 export const DISCORD_URL = 'https://discord.gg/u8SmfwPpMd';
+export const QUICK_START_URL = 'https://dstack.ai/docs/quickstart/';
 export const TALLY_FORM_ID = '3xYlYG';
 export const DOCS_URL = 'https://dstack.ai/docs/';
 export const DEFAULT_TABLE_PAGE_SIZE = 20;
diff --git a/frontend/src/layouts/AppLayout/TutorialPanel/constants.tsx b/frontend/src/layouts/AppLayout/TutorialPanel/constants.tsx
@@ -78,7 +78,7 @@ export const BILLING_TUTORIAL: TutorialPanelProps.Tutorial = {
 
 export const CONFIGURE_CLI_TUTORIAL: TutorialPanelProps.Tutorial = {
     completed: false,
-    title: 'Configure the CLI',
+    title: 'Set up the CLI',
     description: (
         <>
             <Box variant="p" color="text-body-secondary" padding={{ top: 'n' }}>
@@ -103,7 +103,7 @@ export const CONFIGURE_CLI_TUTORIAL: TutorialPanelProps.Tutorial = {
 
 export const JOIN_DISCORD_TUTORIAL: TutorialPanelProps.Tutorial = {
     completed: false,
-    title: 'Join Discord',
+    title: 'Community',
     description: (
         <>
             <Box variant="p" color="text-body-secondary" padding={{ top: 'n' }}>
@@ -115,6 +115,20 @@ export const JOIN_DISCORD_TUTORIAL: TutorialPanelProps.Tutorial = {
     tasks: [],
 };
 
+export const QUICKSTART_TUTORIAL: TutorialPanelProps.Tutorial = {
+    completed: false,
+    title: 'Quickstart',
+    description: (
+        <>
+            <Box variant="p" color="text-body-secondary" padding={{ top: 'n' }}>
+                Check out the quickstart guide to get started with dstack
+            </Box>
+        </>
+    ),
+    completedScreenDescription: 'TBA',
+    tasks: [],
+};
+
 export const CREDITS_TUTORIAL: TutorialPanelProps.Tutorial = {
     completed: false,
     title: 'Get free credits',

diff --git a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { DISCORD_URL, TALLY_FORM_ID } from 'consts';
+import { DISCORD_URL, QUICK_START_URL, TALLY_FORM_ID } from 'consts';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { goToUrl } from 'libs';
 import { useGetRunsQuery } from 'services/run';
@@ -10,7 +10,13 @@ import { useGetUserBillingInfoQuery } from 'services/user';
 import { openTutorialPanel, selectTutorialPanel, selectUserName, updateTutorialPanelState } from 'App/slice';
 
 import { useSideNavigation } from '../hooks';
-import { BILLING_TUTORIAL, CONFIGURE_CLI_TUTORIAL, CREDITS_TUTORIAL, JOIN_DISCORD_TUTORIAL } from './constants';
+import {
+    BILLING_TUTORIAL,
+    CONFIGURE_CLI_TUTORIAL,
+    // CREDITS_TUTORIAL,
+    JOIN_DISCORD_TUTORIAL,
+    QUICKSTART_TUTORIAL,
+} from './constants';
 
 import { ITutorialItem } from 'App/types';
 
@@ -19,7 +25,8 @@ export const useTutorials = () => {
     const dispatch = useAppDispatch();
     const { mainProjectSettingsUrl, billingUrl } = useSideNavigation();
     const useName = useAppSelector(selectUserName);
-    const { billingCompleted, configureCLICompleted, discordCompleted, tallyCompleted } = useAppSelector(selectTutorialPanel);
+    const { billingCompleted, configureCLICompleted, discordCompleted, tallyCompleted, quickStartCompleted } =
+        useAppSelector(selectTutorialPanel);
 
     const { data: userBillingData } = useGetUserBillingInfoQuery({ username: useName ?? '' }, { skip: !useName });
     const { data: runsData } = useGetRunsQuery({
@@ -66,22 +73,27 @@ export const useTutorials = () => {
         dispatch(updateTutorialPanelState({ discordCompleted: true }));
     }, []);
 
-    const startCreditsTutorial = useCallback(() => {
-        if (typeof Tally !== 'undefined') {
-            Tally.openPopup(TALLY_FORM_ID);
-            dispatch(updateTutorialPanelState({ tallyCompleted: true }));
-        }
+    const startQuickStartTutorial = useCallback(() => {
+        goToUrl(QUICK_START_URL, true);
+        dispatch(updateTutorialPanelState({ quickStartCompleted: true }));
     }, []);
 
+    // const startCreditsTutorial = useCallback(() => {
+    //     if (typeof Tally !== 'undefined') {
+    //         Tally.openPopup(TALLY_FORM_ID);
+    //         dispatch(updateTutorialPanelState({ tallyCompleted: true }));
+    //     }
+    // }, []);
+
     const tutorials = useMemo<ITutorialItem[]>(() => {
         return [
-            {
-                ...CREDITS_TUTORIAL,
-                id: 1,
-                startWithoutActivation: true,
-                completed: tallyCompleted,
-                startCallback: startCreditsTutorial,
-            },
+            // {
+            //     ...CREDITS_TUTORIAL,
+            //     id: 1,
+            //     startWithoutActivation: true,
+            //     completed: tallyCompleted,
+            //     startCallback: startCreditsTutorial,
+            // },
 
             {
                 ...CONFIGURE_CLI_TUTORIAL,
@@ -100,16 +112,25 @@ export const useTutorials = () => {
             },
 
             {
-                ...JOIN_DISCORD_TUTORIAL,
+                ...QUICKSTART_TUTORIAL,
                 id: 4,
                 startWithoutActivation: true,
+                completed: quickStartCompleted,
+                startCallback: startQuickStartTutorial,
+            },
+
+            {
+                ...JOIN_DISCORD_TUTORIAL,
+                id: 5,
+                startWithoutActivation: true,
                 completed: discordCompleted,
                 startCallback: startDiscordTutorial,
             },
         ];
     }, [
         mainProjectSettingsUrl,
         billingUrl,
+        quickStartCompleted,
         discordCompleted,
         tallyCompleted,
         billingCompleted,

diff --git a/frontend/src/pages/Project/Details/Settings/index.tsx b/frontend/src/pages/Project/Details/Settings/index.tsx
@@ -154,7 +154,7 @@ export const ProjectSettings: React.FC = () => {
                     >
                         <SpaceBetween size="s">
                             <Box variant="p" color="text-body-secondary">
-                                Run the command below to configure this project as a remote
+                                Run the following commands to set up the CLI for this project
                             </Box>
 
                             <Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>

diff --git a/frontend/src/pages/Project/hooks/useConfigProjectCliComand.ts b/frontend/src/pages/Project/hooks/useConfigProjectCliComand.ts
@@ -9,7 +9,7 @@ type Args = {
 export const useConfigProjectCliCommand = ({ projectName }: Args) => {
     const currentUserToken = useAppSelector(selectAuthToken);
 
-    const cliCommand = `dstack config --url ${location.origin} --project ${projectName} --token ${currentUserToken}`;
+    const cliCommand = `pip install dstack\n\ndstack config --url ${location.origin} --project ${projectName} --token ${currentUserToken}`;
 
     const copyCliCommand = () => {
         copyToClipboard(cliCommand);