Setup UI: Add remote repositories setup step UI

client/web/src/Layout.tsx

@@ -15,6 +15,7 @@ import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps, SettingsSubjectCommonFields } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { parseQueryAndHash } from '@sourcegraph/shared/src/util/url'
 import { FeedbackPrompt, LoadingSpinner, Panel } from '@sourcegraph/wildcard'
 
@@ -39,14 +40,15 @@ import type { NotebookProps } from './notebooks'
 import { EnterprisePageRoutes, PageRoutes } from './routes.constants'
 import { parseSearchURLQuery, SearchAggregationProps, SearchStreamingProps } from './search'
 import { NotepadContainer } from './search/Notepad'
-import { SetupWizard } from './setup-wizard'
 import { useExperimentalFeatures } from './stores'
 import { ThemePreferenceProps, useTheme } from './theme'
 import { getExperimentalFeatures } from './util/get-experimental-features'
 import { parseBrowserRepoURL } from './util/url'
 
 import styles from './Layout.module.scss'
 
+const LazySetupWizard = lazyComponent(() => import('./setup-wizard'), 'SetupWizard')
+
 export interface LegacyLayoutProps
     extends SettingsCascadeProps<Settings>,
         PlatformContextProps,
@@ -152,7 +154,17 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
     }
 
     if (isSetupWizardPage) {
-        return <SetupWizard />
+        return (
+            <Suspense
+                fallback={
+                    <div className="flex flex-1">
+                        <LoadingSpinner className="m-2" />
+                    </div>
+                }
+            >
+                <LazySetupWizard />
+            </Suspense>
+        )
     }
 
     return (

client/web/src/LegacyLayout.tsx

@@ -15,6 +15,7 @@ import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps, SettingsSubjectCommonFields } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { parseQueryAndHash } from '@sourcegraph/shared/src/util/url'
 import { FeedbackPrompt, LoadingSpinner, Panel } from '@sourcegraph/wildcard'
 
@@ -50,7 +51,6 @@ import type { LegacyLayoutRouteComponentProps, 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'
@@ -64,6 +64,8 @@ import { parseBrowserRepoURL } from './util/url'
 
 import styles from './Layout.module.scss'
 
+const LazySetupWizard = lazyComponent(() => import('./setup-wizard'), 'SetupWizard')
+
 export interface LegacyLayoutProps
     extends SettingsCascadeProps<Settings>,
         PlatformContextProps,
@@ -196,7 +198,17 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
     } satisfies Omit<LegacyLayoutRouteComponentProps, 'location' | 'history' | 'match' | 'staticContext'>
 
     if (isSetupWizardPage) {
-        return <SetupWizard />
+        return (
+            <Suspense
+                fallback={
+                    <div className="flex flex-1">
+                        <LoadingSpinner className="m-2" />
+                    </div>
+                }
+            >
+                <LazySetupWizard />
+            </Suspense>
+        )
     }
 
     return (

client/web/src/components/externalServices/externalServices.tsx

@@ -15,7 +15,7 @@ import NpmIcon from 'mdi-react/NpmIcon'
 
 import { hasProperty } from '@sourcegraph/common'
 import { PerforceIcon, PhabricatorIcon } from '@sourcegraph/shared/src/components/icons'
-import { Link, Code, Text } from '@sourcegraph/wildcard'
+import { Link, Code, Text, setLinkComponent, RouterLink } from '@sourcegraph/wildcard'
 
 import awsCodeCommitSchemaJSON from '../../../../../schema/aws_codecommit.schema.json'
 import azureDevOpsSchemaJSON from '../../../../../schema/azuredevops.schema.json'
@@ -45,6 +45,8 @@ import { EditorAction } from '../../settings/EditorActionsGroup'
 
 import { GerritIcon } from './GerritIcon'
 
+setLinkComponent(RouterLink)
+
 /**
  * Metadata associated with adding a given external service.
  */

client/web/src/enterprise/codeintel/configuration/components/RepositoryPatternList.module.scss

@@ -24,7 +24,7 @@
 .input-actions {
     width: 10%;
     display: flex;
-    justify-content: start;
+    justify-content: flex-start;
     align-self: stretch;
 }
 

client/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx

@@ -100,7 +100,7 @@ export class DynamicallyImportedMonacoSettingsEditor<T extends object = {}> exte
     }
 
     private get effectiveValue(): string {
-        return this.state.value === undefined ? this.props.value : this.state.value
+        return this.props.value
     }
 
     private get isDirty(): boolean {
@@ -130,14 +130,16 @@ export class DynamicallyImportedMonacoSettingsEditor<T extends object = {}> exte
             )
         }
 
+        const { className, ...otherProps } = this.props
+
         return (
-            <div className={this.props.className || ''}>
+            <div className={className || ''}>
                 {this.props.actions && (
                     <EditorActionsGroup actions={this.props.actions} onClick={this.runAction.bind(this)} />
                 )}
                 <React.Suspense fallback={<LoadingSpinner className="mt-2" />}>
                     <MonacoSettingsEditor
-                        {...this.props}
+                        {...otherProps}
                         onDidSave={this.onSave}
                         onChange={this.onChange}
                         value={effectiveValue}

client/web/src/settings/EditorActionsGroup.module.scss

@@ -1,9 +1,5 @@
 .actions {
     display: flex;
     flex-wrap: wrap;
-}
-
-.action {
-    margin: 0.5rem 0.5rem 0 0;
-    flex: 0 auto;
+    gap: 0.25rem;
 }

client/web/src/settings/EditorActionsGroup.tsx

@@ -46,7 +46,7 @@ export const EditorActionsGroup: React.FunctionComponent<EditorActionsGroupProps
         )}
         <div className={classNames(styles.actions, 'mb-2')}>
             {actions.map(({ id, label }) => (
-                <Button key={id} className={styles.action} onClick={() => onClick(id)} variant="secondary" size="sm">
+                <Button key={id} onClick={() => onClick(id)} variant="secondary" outline={true} size="sm">
                     {label}
                 </Button>
             ))}

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

@@ -1,11 +1,12 @@
-import { FC } from 'react'
+import { FC, ReactElement, useCallback } from 'react'
 
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary'
-import { Container, H1, H2 } from '@sourcegraph/wildcard'
+import { H1, H2 } from '@sourcegraph/wildcard'
 
 import { BrandLogo } from '../components/branding/BrandLogo'
 
-import { SetupStepsRoot, CustomNextButton, StepConfiguration } from './components/setup-steps'
+import { RemoteRepositoriesStep } from './components/remote-repositories-step'
+import { SetupStepsRoot, StepConfiguration } from './components/setup-steps'
 
 import styles from './Setup.module.scss'
 
@@ -14,38 +15,36 @@ const SETUP_STEPS: StepConfiguration[] = [
         id: '001',
         name: 'Add local repositories',
         path: '/setup/local-repositories',
-        render: () => <H2>Hello local repositories step</H2>,
+        component: LocalRepositoriesStep,
     },
     {
         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>
-        ),
+        component: RemoteRepositoriesStep,
     },
     {
         id: '003',
         name: 'Sync repositories',
         path: '/setup/sync-repositories',
-        render: () => <H2>Hello sync repositories step</H2>,
+        component: () => <H2>Hello sync repositories step</H2>,
     },
 ]
 
-export const SetupWizard: FC = props => {
+export const SetupWizard: FC = () => {
     const [activeStepId, setStepId, status] = useTemporarySetting('setup.activeStepId')
 
+    const handleStepChange = useCallback(
+        (step: StepConfiguration): void => {
+            setStepId(step.id)
+        },
+        [setStepId]
+    )
+
     if (status !== 'loaded') {
         return null
     }
 
-    const handleStepChange = (step: StepConfiguration): void => {
-        setStepId(step.id)
-    }
-
     return (
         <div className={styles.root}>
             <header className={styles.header}>
@@ -60,3 +59,7 @@ export const SetupWizard: FC = props => {
         </div>
     )
 }
+
+function LocalRepositoriesStep(props: any): ReactElement {
+    return <H2 {...props}>Hello local repositories step</H2>
+}

client/web/src/setup-wizard/components/remote-repositories-step/RemoteRepositoriesStep.module.scss

@@ -0,0 +1,59 @@
+.root {
+    display: flex;
+    flex-direction: column;
+}
+
+.content {
+    display: flex;
+    gap: 0.25rem;
+    min-height: 30rem;
+
+    &-navigation {
+        flex-basis: 35%;
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding: 1rem;
+    }
+
+    &-main {
+        flex-grow: 1;
+        padding: 1rem;
+    }
+}
+
+.navigation {
+    // Top margin to compensate main and left content first line texts
+    margin-top: 0.2rem;
+}
+
+.code-host-picker {
+    &-header {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    &-list {
+        width: 100%;
+        list-style: none;
+        padding: 0;
+        margin: 1rem 0 0 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        justify-content: stretch;
+    }
+
+    &-item {
+        display: flex;
+        width: 100%;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 0.25rem;
+
+        &:hover {
+            background-color: var(--btn-light-color-variant) !important;
+        }
+    }
+}

client/web/src/setup-wizard/components/remote-repositories-step/RemoteRepositoriesStep.tsx

@@ -0,0 +1,52 @@
+import { FC, HTMLAttributes } from 'react'
+
+import classNames from 'classnames'
+import { Routes, Route, matchPath, useLocation } from 'react-router-dom-v5-compat'
+
+import { Container, Text } from '@sourcegraph/wildcard'
+
+import { CustomNextButton } from '../setup-steps'
+
+import { CodeHostsPicker } from './components/code-host-picker'
+import { CodeHostCreation, CodeHostEdit } from './components/code-hosts'
+import { CodeHostsNavigation } from './components/navigation'
+
+import styles from './RemoteRepositoriesStep.module.scss'
+
+interface RemoteRepositoriesStepProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const RemoteRepositoriesStep: FC<RemoteRepositoriesStepProps> = props => {
+    const { className, ...attributes } = props
+
+    const location = useLocation()
+    const editConnectionRouteMatch = matchPath('/setup/remote-repositories/:codehostId/edit', location.pathname)
+    const newConnectionRouteMatch = matchPath('/setup/remote-repositories/:codeHostType/create', location.pathname)
+
+    return (
+        <div {...attributes} className={classNames(className, styles.root)}>
+            <Text size="small" className="mb-2">
+                Connect remote code hosts where your source code lives.
+            </Text>
+
+            <section className={styles.content}>
+                <Container className={styles.contentNavigation}>
+                    <CodeHostsNavigation
+                        activeConnectionId={editConnectionRouteMatch?.params?.codehostId}
+                        createConnectionType={newConnectionRouteMatch?.params?.codeHostType}
+                        className={styles.navigation}
+                    />
+                </Container>
+
+                <Container className={styles.contentMain}>
+                    <Routes>
+                        <Route index={true} element={<CodeHostsPicker />} />
+                        <Route path=":codeHostType/create" element={<CodeHostCreation />} />
+                        <Route path=":codehostId/edit" element={<CodeHostEdit />} />
+                    </Routes>
+                </Container>
+            </section>
+
+            <CustomNextButton label="Custom next step label" disabled={true} />
+        </div>
+    )
+}

client/web/src/setup-wizard/components/remote-repositories-step/components/code-host-picker/CodeHostsPicker.module.scss

@@ -0,0 +1,29 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.list {
+    width: 100%;
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    justify-content: stretch;
+}
+
+.item {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.25rem;
+
+    &:hover {
+        background-color: var(--btn-light-color-variant) !important;
+    }
+}