Merge branch '431-configurator-polish' into 'master'

fix: Configurator UI improvements (#431)

Closes #431

See merge request postgres-ai/database-lab!601

Author: agneum

Diff for: ui/packages/shared/icons/External/icon.svg

@@ -0,0 +1,3 @@
+import { ReactComponent } from './icon.svg'
+
+export const ExternalIcon = ReactComponent

Diff for: ui/packages/shared/icons/External/index.tsx

@@ -5,34 +5,79 @@
  *--------------------------------------------------------------------------
  */
 
+import classNames from 'classnames'
 import { Link, Typography, Box } from '@material-ui/core'
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { ExternalIcon } from '@postgres.ai/shared/icons/External'
+
 import styles from '../styles.module.scss'
 
 type Props = {
   retrievalMode: string
   setOpen: () => void
 }
 
-export const Header = (props: Props) => {
-  return (
-    <div className={styles.root}>
-      <Box mb={3}>
-        <Typography paragraph>
-          Only select parameters can be changed here.
-        </Typography>
-        <Typography paragraph>
-          However, you can still see the{' '}
-          <Link href="#" underline="always" onClick={props.setOpen}>
-            full configuration file{' '}
-          </Link>{' '}
-          (with sensitive values masked).
-        </Typography>
-        <Typography paragraph>
-          <strong>Data retrieval mode</strong>: {props.retrievalMode}
-        </Typography>
-      </Box>
-      <SectionTitle level={2} tag="h2" text="Section global" />
-    </div>
-  )
-}
+export const ConfigSectionTitle = ({ tag }: { tag: string }) => (
+  <SectionTitle
+    level={2}
+    tag="h2"
+    text={
+      <div className={styles.sectionTitle}>
+        <p>Section</p>
+        <p>"{tag}"</p>
+      </div>
+    }
+  />
+)
+
+const DOCS_URL =
+  'https://postgres.ai/docs/reference-guides/database-lab-engine-configuration-reference'
+
+export const Header = (props: Props) => (
+  <div className={styles.root}>
+    <Box mb={3}>
+      <Typography paragraph>
+        Only select parameters can be changed here.
+      </Typography>
+      <Typography paragraph>
+        However, you can still see{' '}
+        <Link
+          href="#"
+          underline="always"
+          onClick={props.setOpen}
+          className={styles.externalLink}
+        >
+          the full config
+        </Link>
+        . For details, read{' '}
+        <a href={DOCS_URL} target="_blank" className={styles.externalLink}>
+          the docs
+          <ExternalIcon className={styles.externalIcon} />
+        </a>
+        .
+      </Typography>
+      <Typography paragraph>
+        <strong>Data retrieval mode</strong>: {props.retrievalMode}
+      </Typography>
+    </Box>
+    <ConfigSectionTitle tag="global" />
+  </div>
+)
+
+export const ModalTitle = () => (
+  <div>
+    <Typography className={styles.modalTitle}>
+      Full configuration file (view only)
+    </Typography>
+    <Typography variant="h3">
+      Sensitive values are masked. For details, read{' '}
+      <a href={DOCS_URL} target="_blank" className={styles.externalLink}>
+        the docs
+        <ExternalIcon
+          className={classNames(styles.externalIcon, styles.largeIcon)}
+        />
+      </a>
+      .
+    </Typography>
+  </div>
+)

Diff for: ui/packages/shared/pages/Configuration/Header/index.tsx

@@ -0,0 +1,112 @@
+import { Box, TextField, Chip } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+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({
+  textField: {
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: '#000 !important',
+    },
+  },
+})
+
+export const InputWithTooltip = ({
+  value,
+  label,
+  error,
+  onChange,
+  tooltipText,
+}: {
+  value?: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  tooltipText: () => React.ReactNode
+  label: string
+  error?: string
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Box mt={2} mb={2} display="flex" alignItems="center">
+      <TextField
+        className={classNames(classes.textField, styles.textField)}
+        label={label}
+        variant="outlined"
+        size="small"
+        value={value}
+        error={Boolean(error)}
+        onChange={onChange}
+      />
+      <Tooltip content={<p className={styles.tooltipText}>{tooltipText()}</p>}>
+        <InfoIcon className={styles.infoIcon} />
+      </Tooltip>
+    </Box>
+  )
+}
+
+export const InputWithChip = ({
+  value,
+  label,
+  id,
+  onChange,
+  tooltipText,
+  handleDeleteDatabase,
+}: {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  tooltipText: () => React.ReactNode
+  handleDeleteDatabase: (event: any, database: string) => void
+  label: string
+  id: string
+}) => {
+  const classes = useStyles()
+  
+  return (
+    <Box mt={2} mb={2}>
+      <Box display="flex" alignItems="center">
+        <TextField
+          className={classNames(classes.textField, styles.textField)}
+          variant="outlined"
+          onChange={onChange}
+          value={value}
+          multiline
+          label={label}
+          inputProps={{
+            name: id,
+            id: id,
+          }}
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+        <Tooltip
+          content={<p className={styles.tooltipText}>{tooltipText()}</p>}
+        >
+          <InfoIcon className={styles.infoIcon} />
+        </Tooltip>
+      </Box>
+      <div>
+        {value &&
+          uniqueDatabases(value)
+            .split(' ')
+            .map((database, index) => {
+              if (database !== '') {
+                return (
+                  <Chip
+                    key={index}
+                    className={styles.chip}
+                    label={database}
+                    onDelete={(event) => handleDeleteDatabase(event, database)}
+                    color="primary"
+                  />
+                )
+              }
+            })}
+      </div>
+    </Box>
+  )
+}