Make "Replay Onboarding" button available on home settings page (#804)

* Fix unrelated bug, settings button in the home sidebar
doesn't go to the home settings after my previous fixes to routes

* Turn on "Replay Onboarding" button in home settings

* Use ONBOARDING_PROJECT_NAME in both places

* Fix formatting

src/components/UserSidebarMenu.tsx

@@ -7,7 +7,7 @@ import {
   faSignOutAlt,
 } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useState } from 'react'
 import { paths } from '../Router'
 import { Models } from '@kittycad/lib'
@@ -17,6 +17,7 @@ import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 type User = Models['User_type']
 
 const UserSidebarMenu = ({ user }: { user?: User }) => {
+  const location = useLocation()
   const filePath = useAbsoluteFilePath()
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
@@ -132,7 +133,10 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     // since /settings is a nested route the sidebar doesn't close
                     // automatically when navigating to it
                     close()
-                    navigate(filePath + paths.SETTINGS)
+                    const targetPath = location.pathname.includes(paths.FILE)
+                      ? filePath + paths.SETTINGS
+                      : paths.HOME + paths.SETTINGS
+                    navigate(targetPath)
                   }}
                 >
                   Settings

src/routes/Onboarding/Introduction.tsx

@@ -1,6 +1,11 @@
 import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../../components/ActionButton'
-import { onboardingPaths, useDismiss, useNextClick } from '.'
+import {
+  ONBOARDING_PROJECT_NAME,
+  onboardingPaths,
+  useDismiss,
+  useNextClick,
+} from '.'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { bracket } from 'lib/exampleKcl'
@@ -25,14 +30,20 @@ function OnboardingWithNewFile() {
   }))
   const {
     settings: {
-      context: { defaultDirectory, defaultProjectName },
+      context: { defaultDirectory },
     },
   } = useGlobalStateContext()
 
   async function createAndOpenNewProject() {
     const projects = await getProjectsInDir(defaultDirectory)
-    const nextIndex = await getNextProjectIndex(defaultProjectName, projects)
-    const name = interpolateProjectNameWithIndex(defaultProjectName, nextIndex)
+    const nextIndex = await getNextProjectIndex(
+      ONBOARDING_PROJECT_NAME,
+      projects
+    )
+    const name = interpolateProjectNameWithIndex(
+      ONBOARDING_PROJECT_NAME,
+      nextIndex
+    )
     const newFile = await createNewProject(defaultDirectory + '/' + name)
     navigate(`${paths.FILE}/${encodeURIComponent(newFile.path)}`)
   }

src/routes/Onboarding/index.tsx

@@ -18,6 +18,8 @@ import FutureWork from './FutureWork'
 import { paths } from 'Router'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 
+export const ONBOARDING_PROJECT_NAME = 'Tutorial Project $nn'
+
 export const onboardingPaths = {
   INDEX: '/',
   CAMERA: '/camera',

src/routes/Settings.tsx

@@ -24,11 +24,19 @@ import {
 } from 'lib/cameraControls'
 import { UnitSystem } from 'machines/settingsMachine'
 import { useDotDotSlash } from 'hooks/useDotDotSlash'
+import {
+  createNewProject,
+  getNextProjectIndex,
+  getProjectsInDir,
+  interpolateProjectNameWithIndex,
+} from 'lib/tauriFS'
+import { ONBOARDING_PROJECT_NAME } from './Onboarding'
 
 export const Settings = () => {
   const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData
   const navigate = useNavigate()
   const location = useLocation()
+  const isFileSettings = location.pathname.includes(paths.FILE)
   const dotDotSlash = useDotDotSlash()
   useHotkeys('esc', () => navigate(dotDotSlash()))
   const {
@@ -63,6 +71,33 @@ export const Settings = () => {
     }
   }
 
+  function restartOnboarding() {
+    send({
+      type: 'Set Onboarding Status',
+      data: { onboardingStatus: '' },
+    })
+
+    if (isFileSettings) {
+      navigate(dotDotSlash(1) + paths.ONBOARDING.INDEX)
+    } else {
+      createAndOpenNewProject()
+    }
+  }
+
+  async function createAndOpenNewProject() {
+    const projects = await getProjectsInDir(defaultDirectory)
+    const nextIndex = await getNextProjectIndex(
+      ONBOARDING_PROJECT_NAME,
+      projects
+    )
+    const name = interpolateProjectNameWithIndex(
+      ONBOARDING_PROJECT_NAME,
+      nextIndex
+    )
+    const newFile = await createNewProject(defaultDirectory + '/' + name)
+    navigate(`${paths.FILE}/${encodeURIComponent(newFile.path)}`)
+  }
+
   return (
     <div className="fixed inset-0 z-40 overflow-auto body-bg">
       <AppHeader showToolbar={false} project={loaderData?.project}>
@@ -257,26 +292,18 @@ export const Settings = () => {
             ))}
           </select>
         </SettingsSection>
-        {location.pathname.includes(paths.FILE) && (
         <SettingsSection
           title="Onboarding"
           description="Replay the onboarding process"
         >
           <ActionButton
             Element="button"
-              onClick={() => {
-                send({
-                  type: 'Set Onboarding Status',
-                  data: { onboardingStatus: '' },
-                })
-                navigate(dotDotSlash(1) + paths.ONBOARDING.INDEX)
-              }}
+            onClick={restartOnboarding}
             icon={{ icon: faArrowRotateBack }}
           >
             Replay Onboarding
           </ActionButton>
         </SettingsSection>
-        )}
       </div>
     </div>
   )