ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make onboarding optional, able to be ignored on desktop (#6564)

Browse Source 
* Remove unused `telemetryLoader`

* Remove onboarding redirect behavior

* Allow subRoute to be passed to navigateToProject

* Replace warning dialog routes with toasts

* Wire up new utilities and toasts to UI components

* Add home sidebar buttons for tutorial flow

* Rename menu item

* Add flex-1 so home-layout fills available space

* Remove onboarding avatar tests, they are becoming irrelevant

* Consolidate onboarding tests to one longer one

and update it to not use pixel color checks, and use fixtures.

* Shorten warning toast button text

* tsc, lint, and circular deps

* Update circular dep file

* Fix mistakes made in circular update tweaking

* One more dumb created circular dep

* Update src/routes/Onboarding/utils.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* Fix narrow screen home layout breaking

* fix: kevin, navigation routes fixed

* fix: filename parsing is correct now for onboarding with the last file sep

* Fix e2e test state checks that are diff on Linux

* Create onboarding project entirely through systemIOMachine

* Fix Windows path construction

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: Kevin Nadro <kevin@zoo.dev>
This commit is contained in:
Frank Noirot
2025-04-30 14:43:51 -04:00
committed by GitHub
parent 525f213f1d
commit 820082d7f2
48 changed files with 821 additions and 1038 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/routes/Onboarding/Introduction.tsx
View File

@ -1,124 +1,11 @@
import { useEffect, useState } from 'react'
import { useNavigate, useRouteLoaderData } from 'react-router-dom'
import { useLspContext } from '@src/components/LspProvider'
import { useFileContext } from '@src/hooks/useFileContext'
import { isKclEmptyOrOnlySettings } from '@src/lang/wasm'
import { APP_NAME } from '@src/lib/constants'
import { createAndOpenNewTutorialProject } from '@src/lib/desktopFS'
import { bracket } from '@src/lib/exampleKcl'
import { isDesktop } from '@src/lib/isDesktop'
import { PATHS } from '@src/lib/paths'
import { codeManager, kclManager } from '@src/lib/singletons'
import { Themes, getSystemTheme } from '@src/lib/theme'
import { reportRejection } from '@src/lib/trap'
import type { IndexLoaderData } from '@src/lib/types'
import { useSettings } from '@src/lib/singletons'
import { onboardingPaths } from '@src/routes/Onboarding/paths'
import { OnboardingButtons, useDemoCode } from '@src/routes/Onboarding/utils'
import { ONBOARDING_SUBPATHS } from '@src/lib/onboardingPaths'
/**
* Show either a welcome screen or a warning screen
* depending on if the user has code in the editor.
*/
export default function OnboardingIntroduction() {
const [shouldShowWarning, setShouldShowWarning] = useState(
!isKclEmptyOrOnlySettings(codeManager.code) && codeManager.code !== bracket
)
return shouldShowWarning ? (
<OnboardingResetWarning setShouldShowWarning={setShouldShowWarning} />
) : (
<OnboardingIntroductionInner />
)
}
interface OnboardingResetWarningProps {
setShouldShowWarning: (arg: boolean) => void
}
function OnboardingResetWarning(props: OnboardingResetWarningProps) {
return (
<div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
<div className="relative max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
{!isDesktop() ? (
<OnboardingWarningWeb {...props} />
) : (
<OnboardingWarningDesktop {...props} />
)}
</div>
</div>
)
}
function OnboardingWarningDesktop(props: OnboardingResetWarningProps) {
const navigate = useNavigate()
const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
const { context: fileContext } = useFileContext()
const { onProjectClose, onProjectOpen } = useLspContext()
async function onAccept() {
onProjectClose(
loaderData.file || null,
fileContext.project.path || null,
false
)
await createAndOpenNewTutorialProject({ onProjectOpen, navigate })
props.setShouldShowWarning(false)
}
return (
<>
<h1 className="flex flex-wrap items-center gap-4 text-3xl font-bold">
Would you like to create a new project?
</h1>
<section className="my-12">
<p className="my-4">
You have some content in this project that we don't want to overwrite.
If you would like to create a new project, please click the button
below.
</p>
</section>
<OnboardingButtons
className="mt-6"
onNextOverride={() => {
onAccept().catch(reportRejection)
}}
/>
</>
)
}
function OnboardingWarningWeb(props: OnboardingResetWarningProps) {
useEffect(() => {
async function beforeNavigate() {
// We do want to update both the state and editor here.
codeManager.updateCodeStateEditor(bracket)
await codeManager.writeToFile()
await kclManager.executeCode()
props.setShouldShowWarning(false)
}
return () => {
beforeNavigate().catch(reportRejection)
}
}, [])
return (
<>
<h1 className="text-3xl font-bold text-warn-80 dark:text-warn-10">
Replaying onboarding resets your code
</h1>
<p className="my-4">
We see you have some of your own code written in this project. Please
save it somewhere else before continuing the onboarding.
</p>
<OnboardingButtons className="mt-6" />
</>
)
}
function OnboardingIntroductionInner() {
export default function Introduction() {
// Reset the code to the bracket code
useDemoCode()
@ -182,7 +69,7 @@ function OnboardingIntroductionInner() {
</p>
</section>
<OnboardingButtons
currentSlug={onboardingPaths.INDEX}
currentSlug={ONBOARDING_SUBPATHS.INDEX}
className="mt-6"
/>
</div>