Setup Wizard: add new setup steps UI

client/shared/src/settings/temporary/TemporarySettings.ts

@@ -58,6 +58,7 @@ export interface TemporarySettingsSchema {
     'batches.minSavedPerChangeset': number
     'search.notebooks.minSavedPerView': number
     'repo.commitPage.diffMode': DiffMode
+    'setup.activeStepId': string
 }
 
 /**

client/web/src/Layout.tsx

@@ -51,8 +51,10 @@ import type { LayoutRouteComponentProps, LayoutRouteProps } from './routes'
 import { EnterprisePageRoutes, PageRoutes } from './routes.constants'
 import { parseSearchURLQuery, SearchAggregationProps, SearchStreamingProps } from './search'
 import { NotepadContainer } from './search/Notepad'
+import { SetupWizard } from './setup-wizard'
 import type { SiteAdminAreaRoute } from './site-admin/SiteAdminArea'
 import type { SiteAdminSideBarGroups } from './site-admin/SiteAdminSidebar'
+import { useExperimentalFeatures } from './stores'
 import { useTheme, useThemeProps } from './theme'
 import type { UserAreaRoute } from './user/area/UserArea'
 import type { UserAreaHeaderNavItem } from './user/area/UserAreaHeader'
@@ -132,6 +134,9 @@ export const Layout: React.FunctionComponent<React.PropsWithChildren<LayoutProps
     const isSearchNotebookListPage = location.pathname === EnterprisePageRoutes.Notebooks
     const isRepositoryRelatedPage = routeMatch === PageRoutes.RepoContainer ?? false
 
+    const { setupWizard } = useExperimentalFeatures()
+    const isSetupWizardPage = setupWizard && location.pathname.startsWith(PageRoutes.SetupWizard)
+
     // enable fuzzy finder by default unless it's explicitly disabled in settings
     const fuzzyFinder = getExperimentalFeatures(props.settingsCascade.final).fuzzyFinder ?? true
     const [isFuzzyFinderVisible, setFuzzyFinderVisible] = useState(false)
@@ -193,6 +198,10 @@ export const Layout: React.FunctionComponent<React.PropsWithChildren<LayoutProps
         isMacPlatform: isMacPlatform(),
     } satisfies Omit<LayoutRouteComponentProps, 'location' | 'history' | 'match' | 'staticContext'>
 
+    if (isSetupWizardPage) {
+        return <SetupWizard />
+    }
+
     return (
         <div
             className={classNames(

client/web/src/SourcegraphWebApp.tsx

@@ -73,7 +73,6 @@ import type { LayoutRouteProps } from './routes'
 import { EnterprisePageRoutes } from './routes.constants'
 import { parseSearchURL, getQueryStateFromLocation, SearchAggregationProps } from './search'
 import { SearchResultsCacheProvider } from './search/results/SearchResultsCacheProvider'
-import { SetupWizard } from './setup-wizard'
 import type { SiteAdminAreaRoute } from './site-admin/SiteAdminArea'
 import type { SiteAdminSideBarGroups } from './site-admin/SiteAdminSidebar'
 import {
@@ -146,9 +145,6 @@ interface SourcegraphWebAppState extends SettingsCascadeProps {
      * Whether globbing is enabled for filters.
      */
     globbing: boolean
-
-    /** Experimental feature flag */
-    isSetupWizardEnabled: boolean
 }
 
 const notificationStyles: BrandedNotificationItemStyleProps = {
@@ -191,7 +187,6 @@ export class SourcegraphWebApp extends React.Component<SourcegraphWebAppProps, S
             settingsCascade: EMPTY_SETTINGS_CASCADE,
             viewerSubject: siteSubjectNoAdmin(),
             globbing: false,
-            isSetupWizardEnabled: false,
         }
     }
 
@@ -229,7 +224,6 @@ export class SourcegraphWebApp extends React.Component<SourcegraphWebAppProps, S
                         authenticatedUser,
                         globbing: globbingEnabledFromSettings(settingsCascade),
                         viewerSubject: viewerSubjectFromSettings(settingsCascade, authenticatedUser),
-                        isSetupWizardEnabled: !!getExperimentalFeatures().setupWizard,
                     })
                 },
                 () => this.setState({ authenticatedUser: null })
@@ -337,7 +331,7 @@ export class SourcegraphWebApp extends React.Component<SourcegraphWebAppProps, S
             return <HeroPage icon={ServerIcon} title={`${statusCode}: ${statusText}`} subtitle={subtitle} />
         }
 
-        const { authenticatedUser, graphqlClient, temporarySettingsStorage, isSetupWizardEnabled } = this.state
+        const { authenticatedUser, graphqlClient, temporarySettingsStorage } = this.state
 
         if (authenticatedUser === undefined || graphqlClient === undefined || temporarySettingsStorage === undefined) {
             return null
@@ -363,7 +357,6 @@ export class SourcegraphWebApp extends React.Component<SourcegraphWebAppProps, S
                 <Router history={globalHistory}>
                     <CompatRouter>
                         <Routes>
-                            {isSetupWizardEnabled ? <Route path="/setup" element={<SetupWizard />} /> : null}
                             <Route
                                 path="*"
                                 element={

client/web/src/routes.constants.ts

@@ -19,6 +19,7 @@ export enum PageRoutes {
     Help = '/help/*',
     Debug = '/-/debug/*',
     RepoContainer = '/*',
+    SetupWizard = '/setup',
     InstallGitHubAppSuccess = '/install-github-app-success',
 }
 

client/web/src/setup-wizard/Setup.module.scss

@@ -3,19 +3,18 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: var(--white);
 }
 
 .header {
     background: radial-gradient(
-        113.96% 113.96% at 50% -8.21%,
-        var(--violet-06) 0%,
-        var(--violet-07) 57.81%,
-        var(--violet-08) 100%
+        130.33% 541.14% at 48.47% 231.96%,
+        var(--violet-06) 17.19%,
+        var(--violet-07) 43.23%,
+        var(--violet-07) 73.44%
     );
+
     width: 100%;
     padding: 1.5rem;
-    margin-bottom: 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;

client/web/src/setup-wizard/SetupWizard.tsx

@@ -1,32 +1,62 @@
-import { FC, useState } from 'react'
+import { FC } from 'react'
 
-import { H1, H2 } from '@sourcegraph/wildcard'
+import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary'
+import { Container, H1, H2 } from '@sourcegraph/wildcard'
 
 import { BrandLogo } from '../components/branding/BrandLogo'
 
-import { SetupTabs, SetupList, SetupTab } from './components/SetupTabs'
+import { SetupStepsRoot, CustomNextButton, StepConfiguration } from './components/setup-steps'
 
 import styles from './Setup.module.scss'
 
+const SETUP_STEPS: StepConfiguration[] = [
+    {
+        id: '001',
+        name: 'Add local repositories',
+        path: '/setup/local-repositories',
+        render: () => <H2>Hello local repositories step</H2>,
+    },
+    {
+        id: '002',
+        name: 'Add remote repositories',
+        path: '/setup/remote-repositories',
+        render: () => (
+            <Container>
+                <H2>Hello remote repositories step</H2>
+                <CustomNextButton label="Custom next step label" disabled={true} />
+            </Container>
+        ),
+    },
+    {
+        id: '003',
+        name: 'Sync repositories',
+        path: '/setup/sync-repositories',
+        render: () => <H2>Hello sync repositories step</H2>,
+    },
+]
+
 export const SetupWizard: FC = props => {
-    const [step, setStep] = useState(0)
+    const [activeStepId, setStepId, status] = useTemporarySetting('setup.activeStepId')
+
+    if (status !== 'loaded') {
+        return null
+    }
+
+    const handleStepChange = (step: StepConfiguration): void => {
+        setStepId(step.id)
+    }
 
     return (
         <div className={styles.root}>
             <header className={styles.header}>
                 <BrandLogo variant="logo" isLightTheme={false} className={styles.logo} />
 
                 <H2 as={H1} className="font-weight-normal text-white mt-3 mb-4">
-                    Welcome to Sourcegraph! Let's get your instance ready.
+                    Welcome to Sourcegraph! Let's get started.
                 </H2>
             </header>
 
-            <SetupTabs activeTabIndex={step} defaultActiveIndex={0} onTabChange={setStep}>
-                <SetupList wrapperClassName="border-bottom-0">
-                    <SetupTab index={0}>Add code hosts</SetupTab>
-                    <SetupTab index={1}>Sync repositories</SetupTab>
-                </SetupList>
-            </SetupTabs>
+            <SetupStepsRoot initialStepId={activeStepId} steps={SETUP_STEPS} onStepChange={handleStepChange} />
         </div>
     )
 }