feat(appliance): introduce mock up database configuration step in install flow (#64162)

<!-- PR description tips:
https://www.notion.so/sourcegraph/Write-a-good-pull-request-description-610a7fd3e613496eb76f450db5a49b6e
-->
Initial demo version of the database config on installation of a new
Sourcegraph search instance managed by Appliance

Currently the disabled external db form and tab options are mock ups
that don't do anything.

<img width="620" alt="Screenshot 2024-07-31 at 3 06 56 AM"
src="https://github.com/user-attachments/assets/98f87ba5-3825-432e-90c9-18c0513325a7">
<img width="830" alt="Screenshot 2024-07-31 at 3 07 09 AM"
src="https://github.com/user-attachments/assets/ad820705-4910-4949-b9cc-d5070024d31c">
<img width="837" alt="Screenshot 2024-07-31 at 3 07 18 AM"
src="https://github.com/user-attachments/assets/c4839fe4-a70f-4b65-a40f-c5ba1fed85d6">


## Test plan
Tested locally

<!-- REQUIRED; info at
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles
-->

## Changelog

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->

---------

Co-authored-by: Craig Furman <[email protected]>

Author: DaedalusG

internal/appliance/frontend/maintenance/src/Install.tsx

@@ -1,13 +1,45 @@
 import React, { useState, useEffect } from 'react'
 
-import { Button, FormControl, InputLabel, MenuItem, Paper, Select, Stack, Typography } from '@mui/material'
+import {
+    Button,
+    FormControl,
+    RadioGroup,
+    InputLabel,
+    MenuItem,
+    Paper,
+    Select,
+    Stack,
+    Typography,
+    Radio,
+    FormControlLabel,
+    FormGroup,
+    FormLabel,
+    FormHelperText,
+    Box,
+    TextField,
+    Tab,
+    Tabs,
+} from '@mui/material'
 
 import { changeStage } from './state'
 
 export const Install: React.FC = () => {
+    type installState = 'select-version' | 'select-db-type'
+    const [installState, setInstallState] = useState<installState>('select-version')
+
     const [versions, setVersions] = useState<string[]>([])
     const [selectedVersion, setSelectedVersion] = useState<string>('')
 
+    type dbType = 'built-in' | 'external'
+    const [dbType, setDbType] = useState<dbType>('built-in')
+
+    type dbTab = 'pgsql' | 'codeintel' | 'codeinsights'
+    const [dbTab, setDbTab] = useState<dbTab>('pgsql')
+
+    const handleDbTabChange = (event: React.SyntheticEvent, newValue: dbTab) => {
+        setDbTab(newValue)
+    }
+
     useEffect(() => {
         const fetchVersions = async () => {
             try {
@@ -48,37 +80,107 @@ export const Install: React.FC = () => {
         fetchVersions()
     }, [])
 
+    const next = () => {
+        if (selectedVersion === '') {
+            alert('Please select a version')
+            return
+        }
+        setInstallState('select-db-type')
+    }
+
+    const back = () => {
+        setInstallState('select-version')
+    }
+
     const install = () => {
         changeStage({ action: 'installing', data: selectedVersion })
     }
 
+    const handleDbSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setDbType(event.target.value as dbType)
+    }
+
     return (
+        // Render a version selection box followed by a database configuration screen, then an install prompt
         <div className="install">
-            <Typography variant="h5">Let's get started...</Typography>
+            <Typography variant="h5">Setup Sourcegraph</Typography>
             <Paper elevation={3} sx={{ p: 4 }}>
-                <Stack direction="column" spacing={2} sx={{ alignItems: 'center' }}>
-                    <FormControl sx={{ minWidth: 200 }}>
-                        <InputLabel id="demo-simple-select-label">Version</InputLabel>
-                        <Select
-                            value={selectedVersion}
-                            label="Version"
-                            onChange={e => setSelectedVersion(e.target.value)}
-                            sx={{ width: 200 }}
-                        >
-                            {versions.map(version => (
-                                <MenuItem key={version} value={version}>
-                                    {version}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </FormControl>
-                    <div className="message">
-                        <Typography variant="caption">Press install to begin installation.</Typography>
-                    </div>
-                    <Button variant="contained" sx={{ width: 200 }} onClick={install}>
-                        Install
-                    </Button>
-                </Stack>
+                {installState === 'select-version' ? (
+                    <Stack direction="column" spacing={2} sx={{ alignItems: 'center' }}>
+                        <FormControl sx={{ minWidth: 200 }}>
+                            <InputLabel id="demo-simple-select-label">Version</InputLabel>
+                            <Select
+                                value={selectedVersion}
+                                label="Version"
+                                onChange={e => setSelectedVersion(e.target.value)}
+                                sx={{ width: 200 }}
+                            >
+                                {versions.map(version => (
+                                    <MenuItem key={version} value={version}>
+                                        {version}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                        <div className="message">
+                            <Typography variant="caption">Proceed to database configuration.</Typography>
+                        </div>
+                        <Button variant="contained" sx={{ width: 200 }} onClick={next}>
+                            Next
+                        </Button>
+                    </Stack>
+                ) : installState === 'select-db-type' ? (
+                    <Stack direction="column" spacing={2} alignItems={'center'}>
+                        <FormControl>
+                            <FormLabel>Configure Sourcegraph Databases</FormLabel>
+                            <FormGroup>
+                                <RadioGroup value={dbType} onChange={handleDbSelect} defaultValue="built-in">
+                                    <FormControlLabel value="built-in" control={<Radio />} label="built-in DBs" />
+                                    <FormHelperText id="my-helper-text" fontSize="small">
+                                        Selecting built-in dbs, configures sourcegraph to use built in databases.
+                                        Provisioned and controlled directly by appliance.{' '}
+                                    </FormHelperText>
+                                    <FormControlLabel
+                                        value="external"
+                                        control={<Radio />}
+                                        label="External DBs (not yet supported)"
+                                    />
+                                </RadioGroup>
+                            </FormGroup>
+                        </FormControl>
+                        {dbType === 'external' ? (
+                            <Box sx={{ width: '80%' }} alignContent={'center'}>
+                                <Box
+                                    alignContent={'center'}
+                                    sx={{ paddingBottom: 2.5, borderBottom: 1, borderColor: 'divider' }}
+                                >
+                                    <Tabs value={dbTab} onChange={handleDbTabChange}>
+                                        <Tab label="Pgsql" disabled />
+                                        <Tab label="Codeintel-db" disabled />
+                                        <Tab label="Codeinsights-db" disabled />
+                                    </Tabs>
+                                </Box>
+                                <FormGroup>
+                                    <Stack spacing={2}>
+                                        <TextField disabled label="Port" defaultValue="5432" />
+                                        <TextField disabled label="User" defaultValue="sg" />
+                                        <TextField disabled label="Password" defaultValue="sg" />
+                                        <TextField disabled label="Database" defaultValue="sg" />
+                                        <TextField disabled label="SSL Mode" defaultValue="disable" />
+                                    </Stack>
+                                </FormGroup>
+                            </Box>
+                        ) : null}
+                        <Stack direction="row" spacing={2}>
+                            <Button variant="contained" sx={{ width: 200 }} onClick={back}>
+                                Back
+                            </Button>
+                            <Button variant="contained" sx={{ width: 200 }} onClick={install}>
+                                Install
+                            </Button>
+                        </Stack>
+                    </Stack>
+                ) : null}
             </Paper>
         </div>
     )