feat(ui): Add select input on configuration page for SE (database-lab#463)

* Add select input for SE on configuration page
* Choose latest image version by default
* Add text for contact information under the input

Author: Adrinlol

ui/packages/ce/src/App/Instance/Page/index.tsx

@@ -8,12 +8,13 @@ import { getInstanceRetrieval } from 'api/instances/getInstanceRetrieval'
 import { getSnapshots } from 'api/snapshots/getSnapshots'
 import { destroyClone } from 'api/clones/destroyClone'
 import { resetClone } from 'api/clones/resetClone'
-import { getWSToken } from "api/engine/getWSToken";
-import { initWS } from "api/engine/initWS";
+import { getWSToken } from 'api/engine/getWSToken'
+import { initWS } from 'api/engine/initWS'
 import { getConfig } from 'api/configs/getConfig'
 import { getFullConfig } from 'api/configs/getFullConfig'
 import { updateConfig } from 'api/configs/updateConfig'
 import { testDbSource } from 'api/configs/testDbSource'
+import { getEngine } from 'api/engine/getEngine'
 
 export const Page = () => {
   const routes = {
@@ -34,6 +35,7 @@ export const Page = () => {
     updateConfig,
     testDbSource,
     initWS,
+    getEngine,
   }
 
   const elements = {

ui/packages/shared/package.json

@@ -14,6 +14,7 @@
     "@monaco-editor/react": "^4.4.5",
     "@mui/material": "^5.10.12",
     "@postgres.ai/shared": "link:../shared",
+    "@postgres.ai/ce": "link:../ce",
     "@types/node": "^12.20.33",
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.10",

ui/packages/shared/pages/Configuration/InputWithTooltip/index.tsx

@@ -1,12 +1,14 @@
-import { TextField, Chip } from '@material-ui/core'
+import classNames from 'classnames'
 import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core'
+import { TextField, Chip, makeStyles } from '@material-ui/core'
+
+import { Select } from '@postgres.ai/shared/components/Select'
 import { InfoIcon } from '@postgres.ai/shared/icons/Info'
 import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+
 import { uniqueDatabases } from '../utils'
 
 import styles from '../styles.module.scss'
-import classNames from 'classnames'
 
 const useStyles = makeStyles(
   {
@@ -15,6 +17,16 @@ const useStyles = makeStyles(
         borderColor: '#000 !important',
       },
     },
+    selectField: {
+      marginTop: '0',
+      '& .MuiInputBase-root': {
+        padding: '6px',
+      },
+
+      '& .MuiSelect-select:focus': {
+        backgroundColor: 'inherit',
+      },
+    },
   },
   { index: 1 },
 )
@@ -67,7 +79,10 @@ export const InputWithChip = ({
   value: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   tooltipText: () => React.ReactNode
-  handleDeleteDatabase: (event: any, database: string) => void
+  handleDeleteDatabase: (
+    event: React.FormEvent<HTMLInputElement>,
+    database: string,
+  ) => void
   label: string
   id: string
   disabled: boolean | undefined
@@ -122,3 +137,46 @@ export const InputWithChip = ({
     </Box>
   )
 }
+
+export const SelectWithTooltip = ({
+  value,
+  label,
+  error,
+  onChange,
+  tooltipText,
+  disabled,
+  items,
+}: {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  tooltipText: () => React.ReactNode
+  label: string
+  error?: boolean
+  disabled: boolean | undefined
+  items: { value: string; children: React.ReactNode }[]
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Box mt={2} mb={2}>
+      <Box mb={1} display="flex" alignItems="center">
+        <Select
+          className={classNames(
+            classes.selectField,
+            !disabled && classes.textField,
+            styles.textField,
+          )}
+          label={label}
+          error={error}
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+          items={items}
+        />
+        <Tooltip interactive content={<p>{tooltipText()}</p>}>
+          <InfoIcon className={styles.infoIcon} />
+        </Tooltip>
+      </Box>
+    </Box>
+  )
+}

ui/packages/shared/pages/Configuration/imageOptions.ts

@@ -0,0 +1,12 @@
+export const imageOptions = [
+  {
+    name: 'Generic Postgres (postgresai/extended-postgres)',
+    type: 'Generic Postgres',
+  },
+  { name: 'Generic Postgres with PostGIS', type: 'postgis' },
+  { name: 'Amazon RDS for Postgres', type: 'rds' },
+  { name: 'Amazon RDS Aurora for Postgres', type: 'rds' },
+  { name: 'Heroku Postgres', type: 'heroku' },
+  { name: 'Supabase Postgres', type: 'supabase' },
+  { name: 'Custom image', type: 'custom' },
+]