From d31d07d9c8dd8c9fefb25c3c200342f4bfce7043 Mon Sep 17 00:00:00 2001 From: Frank Noirot Date: Fri, 6 Oct 2023 10:00:35 -0400 Subject: [PATCH] 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 | 8 +++- src/routes/Onboarding/Introduction.tsx | 19 ++++++-- src/routes/Onboarding/index.tsx | 2 + src/routes/Settings.tsx | 65 ++++++++++++++++++-------- 4 files changed, 69 insertions(+), 25 deletions(-) diff --git a/src/components/UserSidebarMenu.tsx b/src/components/UserSidebarMenu.tsx index 6f26a3e1d..a9eef1e86 100644 --- a/src/components/UserSidebarMenu.tsx +++ b/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 diff --git a/src/routes/Onboarding/Introduction.tsx b/src/routes/Onboarding/Introduction.tsx index 3328f5ed0..00663e9d2 100644 --- a/src/routes/Onboarding/Introduction.tsx +++ b/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)}`) } diff --git a/src/routes/Onboarding/index.tsx b/src/routes/Onboarding/index.tsx index d82b5a3c3..8c7f64eb0 100644 --- a/src/routes/Onboarding/index.tsx +++ b/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', diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 6cbf1b97f..3b601cb9e 100644 --- a/src/routes/Settings.tsx +++ b/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 (
@@ -257,26 +292,18 @@ export const Settings = () => { ))} - {location.pathname.includes(paths.FILE) && ( - + - { - send({ - type: 'Set Onboarding Status', - data: { onboardingStatus: '' }, - }) - navigate(dotDotSlash(1) + paths.ONBOARDING.INDEX) - }} - icon={{ icon: faArrowRotateBack }} - > - Replay Onboarding - - - )} + Replay Onboarding + +
)