From 87471a19a447475b8fa47c131c916c8a844b1a6d Mon Sep 17 00:00:00 2001
From: Maksim Chervonnyi <mail@redmax.dev>
Date: Mon, 2 Sep 2024 13:42:23 +0200
Subject: [PATCH] Show `database` and `catalogName` (#4123)

Co-authored-by: Alexei Mochalov <nl_0@quiltdata.io>
---
 catalog/CHANGELOG.md                          |   2 +
 .../Bucket/Queries/Athena/Database.tsx        | 208 ++++++++----------
 .../Bucket/Queries/Athena/QueryEditor.tsx     |  58 ++++-
 3 files changed, 141 insertions(+), 127 deletions(-)

diff --git a/catalog/CHANGELOG.md b/catalog/CHANGELOG.md
index 657a4534516..d159f505049 100644
--- a/catalog/CHANGELOG.md
+++ b/catalog/CHANGELOG.md
@@ -16,6 +16,8 @@ where verb is one of
 
 ## Changes
 
+- [Changed] Athena: always show catalog name, simplify setting execution context
+([#4123](https://github.com/quiltdata/quilt/pull/4123))
 - [Added] Support `ui.actions.downloadObject` and `ui.actions.downloadPackage`
 options for configuring visibility of download buttons under "Bucket"
 and "Packages" respectively
diff --git a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
index 136a8c29396..dbe46d38b72 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
@@ -4,26 +4,39 @@ import * as M from '@material-ui/core'
 import * as Lab from '@material-ui/lab'
 
 import Skeleton from 'components/Skeleton'
+import * as Dialogs from 'utils/GlobalDialogs'
 
 import * as requests from '../requests'
 
 interface SelectErrorProps {
+  className?: string
   error: Error
 }
 
-function SelectError({ error }: SelectErrorProps) {
+function SelectError({ className, error }: SelectErrorProps) {
+  const openDialog = Dialogs.use()
+  const handleClick = React.useCallback(() => {
+    openDialog(() => (
+      <M.Box p={2}>
+        <M.Typography>{error.message}</M.Typography>
+      </M.Box>
+    ))
+  }, [error.message, openDialog])
   return (
-    <Lab.Alert severity="error">
-      <Lab.AlertTitle>{error.name}</Lab.AlertTitle>
-      {error.message}
+    <Lab.Alert
+      action={
+        <M.Button onClick={handleClick} size="small" color="inherit">
+          Show more
+        </M.Button>
+      }
+      className={className}
+      severity="error"
+    >
+      {error.name}
     </Lab.Alert>
   )
 }
 
-function SelectSkeleton() {
-  return <Skeleton height={32} animate />
-}
-
 const LOAD_MORE = '__load-more__'
 
 interface Response {
@@ -38,14 +51,24 @@ const useSelectStyles = M.makeStyles({
 })
 
 interface SelectProps {
+  className?: string
   data: Response
   label: string
   onChange: (value: string) => void
   onLoadMore: (prev: Response) => void
   value: string | null
-}
-
-function Select({ data, label, onChange, onLoadMore, value }: SelectProps) {
+  disabled?: boolean
+}
+
+function Select({
+  className,
+  data,
+  disabled,
+  label,
+  onChange,
+  onLoadMore,
+  value,
+}: SelectProps) {
   const classes = useSelectStyles()
   const handleChange = React.useCallback(
     (event) => {
@@ -59,7 +82,7 @@ function Select({ data, label, onChange, onLoadMore, value }: SelectProps) {
   )
 
   return (
-    <M.FormControl className={classes.root}>
+    <M.FormControl className={cx(classes.root, className)} disabled={disabled}>
       <M.InputLabel>{label}</M.InputLabel>
       <M.Select onChange={handleChange} value={value?.toLowerCase()}>
         {data.list.map((item) => (
@@ -74,11 +97,12 @@ function Select({ data, label, onChange, onLoadMore, value }: SelectProps) {
 }
 
 interface SelectCatalogNameProps {
+  className?: string
   value: requests.athena.CatalogName | null
   onChange: (catalogName: requests.athena.CatalogName) => void
 }
 
-function SelectCatalogName({ value, onChange }: SelectCatalogNameProps) {
+function SelectCatalogName({ className, value, onChange }: SelectCatalogNameProps) {
   const [prev, setPrev] = React.useState<requests.athena.CatalogNamesResponse | null>(
     null,
   )
@@ -86,6 +110,7 @@ function SelectCatalogName({ value, onChange }: SelectCatalogNameProps) {
   return data.case({
     Ok: (response) => (
       <Select
+        className={className}
         data={response}
         label="Data catalog"
         onChange={onChange}
@@ -93,152 +118,95 @@ function SelectCatalogName({ value, onChange }: SelectCatalogNameProps) {
         value={value}
       />
     ),
-    Err: (error) => <SelectError error={error} />,
-    _: () => <SelectSkeleton />,
+    Err: (error) => <SelectError className={className} error={error} />,
+    _: () => <Skeleton className={className} height={32} animate />,
   })
 }
 
-interface SelectDatabaseProps {
+interface SelectDatabaseProps
+  extends Omit<SelectProps, 'data' | 'label' | 'onChange' | 'onLoadMore'> {
   catalogName: requests.athena.CatalogName | null
   onChange: (database: requests.athena.Database) => void
   value: requests.athena.Database | null
 }
 
-function SelectDatabase({ catalogName, onChange, value }: SelectDatabaseProps) {
+function SelectDatabase({ catalogName, onChange, ...rest }: SelectDatabaseProps) {
   const [prev, setPrev] = React.useState<requests.athena.DatabasesResponse | null>(null)
   const data = requests.athena.useDatabases(catalogName, prev)
   return data.case({
     Ok: (response) => (
       <Select
+        {...rest}
         data={response}
         label="Database"
         onChange={onChange}
         onLoadMore={setPrev}
-        value={value}
       />
     ),
-    Err: (error) => <SelectError error={error} />,
-    _: () => <SelectSkeleton />,
+    Err: (error) => <SelectError className={rest.className} error={error} />,
+    _: () => <Skeleton className={rest.className} height={32} animate />,
   })
 }
 
-const useDialogStyles = M.makeStyles((t) => ({
-  select: {
-    width: '100%',
-    '& + &': {
-      marginTop: t.spacing(2),
-    },
-  },
-}))
-
-interface DialogProps {
-  initialValue: requests.athena.ExecutionContext | null
-  onChange: (value: requests.athena.ExecutionContext) => void
-  onClose: () => void
-  open: boolean
-}
-
-function Dialog({ initialValue, open, onChange, onClose }: DialogProps) {
-  const classes = useDialogStyles()
-  const [catalogName, setCatalogName] =
-    React.useState<requests.athena.CatalogName | null>(initialValue?.catalogName || null)
-  const [database, setDatabase] = React.useState<requests.athena.Database | null>(
-    initialValue?.database || null,
-  )
-  const handleSubmit = React.useCallback(() => {
-    if (!catalogName || !database) return
-    onChange({ catalogName, database })
-    onClose()
-  }, [catalogName, database, onChange, onClose])
-  return (
-    <M.Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-      <M.DialogTitle>Select data catalog and database</M.DialogTitle>
-      <M.DialogContent>
-        <div className={classes.select}>
-          <SelectCatalogName onChange={setCatalogName} value={catalogName} />
-        </div>
-        {catalogName && (
-          <div className={classes.select}>
-            <SelectDatabase
-              catalogName={catalogName}
-              onChange={setDatabase}
-              value={database}
-            />
-          </div>
-        )}
-      </M.DialogContent>
-      <M.DialogActions>
-        <M.Button color="primary" variant="outlined" onClick={onClose}>
-          Cancel
-        </M.Button>
-        <M.Button
-          color="primary"
-          disabled={!catalogName || !database}
-          onClick={handleSubmit}
-          variant="contained"
-        >
-          Submit
-        </M.Button>
-      </M.DialogActions>
-    </M.Dialog>
-  )
-}
-
-const useChangeButtonStyles = M.makeStyles((t) => ({
+const useStyles = M.makeStyles((t) => ({
   root: {
     alignItems: 'center',
     display: 'flex',
   },
+  field: {
+    cursor: 'pointer',
+    marginRight: t.spacing(2),
+    width: '50%',
+    '& input': {
+      cursor: 'pointer',
+    },
+    '& > *': {
+      cursor: 'pointer',
+    },
+  },
   button: {
     marginLeft: t.spacing(1),
   },
 }))
 
-interface ChangeButtonProps {
-  className?: string
-  database?: requests.athena.Database
-  onClick: () => void
-}
-
-function ChangeButton({ className, database, onClick }: ChangeButtonProps) {
-  const classes = useChangeButtonStyles()
-  return (
-    <M.Typography className={cx(classes.root, className)} variant="body2">
-      Use {database ? <strong>{database}</strong> : 'default'} database or
-      <M.Button
-        className={classes.button}
-        color="primary"
-        onClick={onClick}
-        size="small"
-        variant="outlined"
-      >
-        {database ? 'change' : 'set'} database
-      </M.Button>
-    </M.Typography>
-  )
-}
-
 interface DatabaseProps {
   className?: string
   value: requests.athena.ExecutionContext | null
-  onChange: (value: requests.athena.ExecutionContext) => void
+  onChange: (value: requests.athena.ExecutionContext | null) => void
 }
 
 export default function Database({ className, value, onChange }: DatabaseProps) {
-  const [open, setOpen] = React.useState(false)
+  const classes = useStyles()
+  const [catalogName, setCatalogName] =
+    React.useState<requests.athena.CatalogName | null>(value?.catalogName || null)
+  const handleCatalogName = React.useCallback(
+    (name) => {
+      setCatalogName(name)
+      onChange(null)
+    },
+    [onChange],
+  )
+  const handleDatabase = React.useCallback(
+    (database) => {
+      if (!catalogName) return
+      onChange({ catalogName, database })
+    },
+    [catalogName, onChange],
+  )
   return (
-    <>
-      <Dialog
-        initialValue={value}
-        onChange={onChange}
-        onClose={() => setOpen(false)}
-        open={open}
+    <div className={cx(classes.root, className)}>
+      <SelectCatalogName
+        className={classes.field}
+        onChange={handleCatalogName}
+        value={catalogName}
       />
-      <ChangeButton
-        className={className}
-        database={value?.database}
-        onClick={() => setOpen(true)}
+      <SelectDatabase
+        className={classes.field}
+        catalogName={catalogName}
+        onChange={handleDatabase}
+        value={value?.database || null}
+        disabled={!catalogName}
       />
-    </>
+    </div>
   )
 }
diff --git a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
index eca3ff08d60..584f53ff45f 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
@@ -7,6 +7,7 @@ import * as Lab from '@material-ui/lab'
 import 'ace-builds/src-noconflict/mode-sql'
 import 'ace-builds/src-noconflict/theme-eclipse'
 
+import { useConfirm } from 'components/Dialog'
 import Skeleton from 'components/Skeleton'
 import * as Notifications from 'containers/Notifications'
 import * as NamedRoutes from 'utils/NamedRoutes'
@@ -178,10 +179,23 @@ export { FormSkeleton as Skeleton }
 
 const useFormStyles = M.makeStyles((t) => ({
   actions: {
-    alignItems: 'center',
-    justifyContent: 'space-between',
     display: 'flex',
+    justifyContent: 'space-between',
     margin: t.spacing(2, 0),
+    [t.breakpoints.up('sm')]: {
+      alignItems: 'center',
+    },
+    [t.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
+  },
+  database: {
+    [t.breakpoints.up('sm')]: {
+      width: '50%',
+    },
+    [t.breakpoints.down('sm')]: {
+      marginBottom: t.spacing(2),
+    },
   },
   error: {
     margin: t.spacing(1, 0, 0),
@@ -209,14 +223,45 @@ export function Form({ bucket, className, onChange, value, workgroup }: FormProp
         : null,
     [value],
   )
+  const confirm = useConfirm({
+    onSubmit: (confirmed) => {
+      if (confirmed) {
+        if (!value?.query) {
+          throw new Error('Query is not set')
+        }
+        onSubmit(value!.query, executionContext)
+      }
+    },
+    submitTitle: 'Proceed',
+    title: 'Execution context is not set',
+  })
   const { loading, error, onSubmit } = useQueryRun(bucket, workgroup, value?.id)
   const handleSubmit = React.useCallback(() => {
     if (!value?.query) return
-    onSubmit(value?.query, executionContext)
-  }, [executionContext, onSubmit, value])
+    if (!executionContext) {
+      return confirm.open()
+    }
+    onSubmit(value.query, executionContext)
+  }, [confirm, executionContext, onSubmit, value])
+  const handleExecutionContext = React.useCallback(
+    (exeContext) => {
+      if (!exeContext) {
+        onChange({ ...value, catalog: undefined, db: undefined })
+        return
+      }
+      const { catalogName, database } = exeContext
+      onChange({ ...value, catalog: catalogName, db: database })
+    },
+    [onChange, value],
+  )
 
   return (
     <div className={className}>
+      {confirm.render(
+        <M.Typography>
+          Data catalog and database are not set. Run query without them?
+        </M.Typography>,
+      )}
       <EditorField
         onChange={(query: string) => onChange({ ...value, query })}
         query={value?.query || ''}
@@ -230,9 +275,8 @@ export function Form({ bucket, className, onChange, value, workgroup }: FormProp
 
       <div className={classes.actions}>
         <Database
-          onChange={({ catalogName, database }) =>
-            onChange({ ...value, catalog: catalogName, db: database })
-          }
+          className={classes.database}
+          onChange={handleExecutionContext}
           value={executionContext}
         />
         <M.Button