From cb31b4c63956ee490ea7ab6741a394a1a8a1f324 Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Mon, 29 Aug 2022 14:53:18 +0300
Subject: [PATCH 1/9] make Athena default

---
 .../app/containers/Bucket/Queries/Queries.tsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/Queries.tsx b/catalog/app/containers/Bucket/Queries/Queries.tsx
index cf8fde4c3a6..487f992ca00 100644
--- a/catalog/app/containers/Bucket/Queries/Queries.tsx
+++ b/catalog/app/containers/Bucket/Queries/Queries.tsx
@@ -75,8 +75,8 @@ export default function Queries({
   const { paths, urls } = NamedRoutes.use()
 
   const [tab, setTab] = React.useState(() => {
-    if (matchPath(location.pathname, urls.bucketAthena(bucket))) return Section.ATHENA
-    return Section.ES
+    if (matchPath(location.pathname, urls.bucketESQueries(bucket))) return Section.ES
+    return Section.ATHENA
   })
 
   const onTab = (event: React.ChangeEvent<{}>, newTab: Section) => {
@@ -104,18 +104,18 @@ export default function Queries({
         value={tab}
         centered={sm}
       >
-        <NavTab
-          label="ElasticSearch"
-          value={Section.ES}
-          classes={tabClasses}
-          to={urls.bucketESQueries(bucket)}
-        />
         <NavTab
           label="Athena SQL"
           value={Section.ATHENA}
           classes={tabClasses}
           to={urls.bucketAthena(bucket)}
         />
+        <NavTab
+          label="ElasticSearch"
+          value={Section.ES}
+          classes={tabClasses}
+          to={urls.bucketESQueries(bucket)}
+        />
       </M.Tabs>
 
       <div className={classes.panel}>
@@ -125,7 +125,7 @@ export default function Queries({
           <Route path={paths.bucketAthenaWorkgroup} component={Athena} exact />
           <Route path={paths.bucketAthenaExecution} component={Athena} exact />
           <Route>
-            <Redirect to={urls.bucketESQueries(bucket)} />
+            <Redirect to={urls.bucketAthena(bucket)} />
           </Route>
         </Switch>
       </div>

From 73484421962cc0f687f6dded8c7c999e73c8ad0c Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Mon, 29 Aug 2022 15:27:07 +0300
Subject: [PATCH 2/9] remove vertical menu

---
 catalog/app/containers/Bucket/Bucket.js       |   1 +
 catalog/app/containers/Bucket/BucketNav.tsx   |   5 +-
 .../app/containers/Bucket/Queries/Queries.tsx | 118 ++----------------
 3 files changed, 17 insertions(+), 107 deletions(-)

diff --git a/catalog/app/containers/Bucket/Bucket.js b/catalog/app/containers/Bucket/Bucket.js
index 466f1c19ce9..e804b9f13ce 100644
--- a/catalog/app/containers/Bucket/Bucket.js
+++ b/catalog/app/containers/Bucket/Bucket.js
@@ -42,6 +42,7 @@ const match = (cases) => (pathname) => {
 }
 
 const sections = {
+  es: { path: 'bucketESQueries', exact: true },
   overview: { path: 'bucketOverview', exact: true },
   packages: { path: 'bucketPackageList' },
   tree: [
diff --git a/catalog/app/containers/Bucket/BucketNav.tsx b/catalog/app/containers/Bucket/BucketNav.tsx
index 12e6bbbb9c4..63f91cfdfcf 100644
--- a/catalog/app/containers/Bucket/BucketNav.tsx
+++ b/catalog/app/containers/Bucket/BucketNav.tsx
@@ -23,7 +23,7 @@ function NavTab(props: NavTabProps) {
 
 interface BucketNavProps {
   bucket: string
-  section: 'overview' | 'packages' | 'queries' | 'search' | 'tree' | false // `keyof` sections object
+  section: 'es' | 'overview' | 'packages' | 'queries' | 'search' | 'tree' | false // `keyof` sections object
 }
 
 const useBucketNavSkeletonStyles = M.makeStyles((t) => ({
@@ -79,6 +79,9 @@ function Tabs({ bucket, preferences, section = false }: TabsProps) {
       {section === 'search' && (
         <NavTab label="Search" value="search" to={urls.bucketSearch(bucket)} />
       )}
+      {(section === 'queries' || section === 'es') && (
+        <NavTab label="ElasticSearch" value="es" to={urls.bucketESQueries(bucket)} />
+      )}
     </M.Tabs>
   )
 }
diff --git a/catalog/app/containers/Bucket/Queries/Queries.tsx b/catalog/app/containers/Bucket/Queries/Queries.tsx
index 487f992ca00..10c7ae58198 100644
--- a/catalog/app/containers/Bucket/Queries/Queries.tsx
+++ b/catalog/app/containers/Bucket/Queries/Queries.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { RouteComponentProps } from 'react-router'
-import { Link, Redirect, Route, Switch, matchPath } from 'react-router-dom'
+import { Redirect, Route, Switch } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import MetaTitle from 'utils/MetaTitle'
@@ -10,125 +10,31 @@ import Athena from './Athena'
 import ElasticSearch from './ElasticSearch'
 
 const useStyles = M.makeStyles((t) => ({
-  actions: {
-    margin: t.spacing(2, 0),
-  },
-  container: {
-    [t.breakpoints.up('sm')]: {
-      display: 'flex',
-      padding: t.spacing(3),
-    },
-  },
-  inner: {
-    margin: t.spacing(2, 0, 0),
-  },
-  form: {
-    margin: t.spacing(0, 0, 4),
-  },
-  panel: {
-    flexGrow: 1,
+  root: {
     padding: t.spacing(2, 0),
-    [t.breakpoints.up('sm')]: {
-      padding: t.spacing(1, 3),
-      maxWidth: 'calc(100% - 200px)',
-    },
-  },
-  select: {
-    margin: t.spacing(3, 0),
-  },
-  tabWrapper: {
-    alignItems: 'flex-start',
-  },
-  tabs: {
-    [t.breakpoints.down('sm')]: {
-      borderBottom: `1px solid ${t.palette.divider}`,
-    },
-    [t.breakpoints.up('sm')]: {
-      borderRight: `1px solid ${t.palette.divider}`,
-      width: t.spacing(20),
-    },
-  },
-  viewer: {
-    margin: t.spacing(3, 0),
   },
 }))
 
-type NavTabProps = React.ComponentProps<typeof M.Tab> & React.ComponentProps<typeof Link>
-
-function NavTab(props: NavTabProps) {
-  return <M.Tab component={Link} {...props} />
-}
-
-enum Section {
-  ATHENA,
-  ES,
-}
-
 export default function Queries({
-  location,
   match: {
     params: { bucket },
   },
 }: RouteComponentProps<{ bucket: string }>) {
   const classes = useStyles()
-
   const { paths, urls } = NamedRoutes.use()
-
-  const [tab, setTab] = React.useState(() => {
-    if (matchPath(location.pathname, urls.bucketESQueries(bucket))) return Section.ES
-    return Section.ATHENA
-  })
-
-  const onTab = (event: React.ChangeEvent<{}>, newTab: Section) => {
-    setTab(newTab)
-  }
-
-  const tabClasses = React.useMemo(
-    () => ({
-      wrapper: classes.tabWrapper,
-    }),
-    [classes],
-  )
-
-  const t = M.useTheme()
-  const sm = M.useMediaQuery(t.breakpoints.down('sm'))
-
   return (
-    <div className={classes.container}>
+    <div className={classes.root}>
       <MetaTitle>{['Queries', bucket]}</MetaTitle>
 
-      <M.Tabs
-        className={classes.tabs}
-        orientation={sm ? 'horizontal' : 'vertical'}
-        onChange={onTab}
-        value={tab}
-        centered={sm}
-      >
-        <NavTab
-          label="Athena SQL"
-          value={Section.ATHENA}
-          classes={tabClasses}
-          to={urls.bucketAthena(bucket)}
-        />
-        <NavTab
-          label="ElasticSearch"
-          value={Section.ES}
-          classes={tabClasses}
-          to={urls.bucketESQueries(bucket)}
-        />
-      </M.Tabs>
-
-      <div className={classes.panel}>
-        <Switch>
-          <Route path={paths.bucketESQueries} component={ElasticSearch} exact />
-          <Route path={paths.bucketAthena} component={Athena} exact />
-          <Route path={paths.bucketAthenaWorkgroup} component={Athena} exact />
-          <Route path={paths.bucketAthenaExecution} component={Athena} exact />
-          <Route>
-            <Redirect to={urls.bucketAthena(bucket)} />
-          </Route>
-        </Switch>
-      </div>
+      <Switch>
+        <Route path={paths.bucketESQueries} component={ElasticSearch} exact />
+        <Route path={paths.bucketAthena} component={Athena} exact />
+        <Route path={paths.bucketAthenaWorkgroup} component={Athena} exact />
+        <Route path={paths.bucketAthenaExecution} component={Athena} exact />
+        <Route>
+          <Redirect to={urls.bucketAthena(bucket)} />
+        </Route>
+      </Switch>
     </div>
   )
 }

From 3c8ccac1837382107ff4cae7af2ed75053e8046c Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Wed, 31 Aug 2022 17:02:34 +0300
Subject: [PATCH 3/9] add database

---
 .../Bucket/Queries/Athena/Database.tsx        | 217 ++++++++++++++++++
 .../Bucket/Queries/Athena/QueryEditor.tsx     |   9 +
 .../Bucket/Queries/Athena/Workgroups.tsx      |   1 +
 .../Bucket/Queries/requests/athena.ts         |  75 ++++++
 4 files changed, 302 insertions(+)
 create mode 100644 catalog/app/containers/Bucket/Queries/Athena/Database.tsx

diff --git a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
new file mode 100644
index 00000000000..7ffbcc36ad6
--- /dev/null
+++ b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
@@ -0,0 +1,217 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+import * as Lab from '@material-ui/lab'
+
+import Skeleton from 'components/Skeleton'
+
+import * as requests from '../requests'
+
+interface SelectErrorProps {
+  error: Error
+}
+
+function SelectError({ error }: SelectErrorProps) {
+  return (
+    <Lab.Alert severity="error">
+      <Lab.AlertTitle>{error.name}</Lab.AlertTitle>
+      {error.message}
+    </Lab.Alert>
+  )
+}
+
+function SelectSkeleton() {
+  return <Skeleton height={48} mt={1} animate />
+}
+
+const LOAD_MORE = '__load-more__'
+
+interface Response {
+  list: string[]
+  next?: string
+}
+
+const useSelectStyles = M.makeStyles({
+  root: {
+    width: '100%',
+  },
+})
+
+interface SelectProps {
+  data: Response
+  label: string
+  onChange: (value: string) => void
+  onLoadMore: (prev: Response) => void
+}
+
+function Select({ data, label, onChange, onLoadMore }: SelectProps) {
+  const classes = useSelectStyles()
+  const handleChange = React.useCallback(
+    (event) => {
+      const { value } = event.target
+      if (value === LOAD_MORE) {
+        onLoadMore(data)
+      } else {
+        onChange(value)
+      }
+    },
+    [data, onLoadMore, onChange],
+  )
+
+  return (
+    <M.FormControl className={classes.root}>
+      <M.InputLabel>{label}</M.InputLabel>
+      <M.Select onChange={handleChange}>
+        {data.list.map((value) => (
+          <M.MenuItem value={value}>{value}</M.MenuItem>
+        ))}
+        {data.next && <M.MenuItem value={LOAD_MORE}>Load more</M.MenuItem>}
+      </M.Select>
+    </M.FormControl>
+  )
+}
+
+interface SelectCatalogNameProps {
+  onChange: (catalogName: string) => void
+}
+
+function SelectCatalogName({ onChange }: SelectCatalogNameProps) {
+  const [prev, setPrev] = React.useState<requests.athena.CatalogNamesResponse | null>(
+    null,
+  )
+  const data = requests.athena.useCatalogNames(prev)
+  return data.case({
+    Ok: (response) => (
+      <Select
+        data={response}
+        label="Catalog name"
+        onChange={onChange}
+        onLoadMore={setPrev}
+      />
+    ),
+    Err: (error) => <SelectError error={error} />,
+    _: () => <SelectSkeleton />,
+  })
+}
+
+interface SelectDatabaseProps {
+  catalogName: requests.athena.CatalogName | null
+  onChange: (database: requests.athena.Database) => void
+}
+
+function SelectDatabase({ catalogName, onChange }: SelectDatabaseProps) {
+  const [prev, setPrev] = React.useState<requests.athena.DatabasesResponse | null>(null)
+  const data = requests.athena.useDatabases(catalogName, prev)
+  return data.case({
+    Ok: (response) => (
+      <Select data={response} label="Database" onChange={onChange} onLoadMore={setPrev} />
+    ),
+    Err: (error) => <SelectError error={error} />,
+    _: () => <SelectSkeleton />,
+  })
+}
+
+const useDialogStyles = M.makeStyles((t) => ({
+  select: {
+    width: '100%',
+    '& + &': {
+      marginTop: t.spacing(2),
+    },
+  },
+}))
+
+interface DialogProps {
+  open: boolean
+  onClose: () => void
+  onChange: (value: requests.athena.Database) => void
+}
+
+function Dialog({ open, onChange, onClose }: DialogProps) {
+  const classes = useDialogStyles()
+  const [catalogName, setCatalogName] =
+    React.useState<requests.athena.CatalogName | null>(null)
+  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} />
+        </div>
+        {catalogName && (
+          <div className={classes.select}>
+            <SelectDatabase catalogName={catalogName} onChange={onChange} />
+          </div>
+        )}
+      </M.DialogContent>
+      <M.DialogActions>
+        <M.Button color="primary" variant="outlined" onClick={onClose}>
+          Cancel
+        </M.Button>
+        <M.Button color="primary" variant="contained" onClick={onClose}>
+          Submit
+        </M.Button>
+      </M.DialogActions>
+    </M.Dialog>
+  )
+}
+
+const useChangeButtonStyles = M.makeStyles((t) => ({
+  root: {
+    alignItems: 'center',
+    display: 'flex',
+  },
+  button: {
+    marginLeft: t.spacing(1),
+  },
+}))
+
+interface ChangeButtonProps {
+  className?: string
+  database: requests.athena.Database | null
+  onClick: () => void
+}
+
+function ChangeButton({ className, database, onClick }: ChangeButtonProps) {
+  const classes = useChangeButtonStyles()
+  if (database) {
+    return (
+      <M.Typography className={cx(classes.root, className)}>
+        Use <strong>{database}</strong> database or
+        <M.Button
+          className={classes.button}
+          color="primary"
+          onClick={onClick}
+          variant="outlined"
+        >
+          change database
+        </M.Button>
+      </M.Typography>
+    )
+  }
+
+  return (
+    <M.Button className={cx(classes.button, className)} color="primary" onClick={onClick}>
+      Set database to use in query execution
+    </M.Button>
+  )
+}
+
+interface DatabaseProps {
+  className?: string
+  value: requests.athena.Database | null
+  onChange: (value: string) => void
+}
+
+export default function Database({ className, value, onChange }: DatabaseProps) {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <>
+      <Dialog open={open} onChange={onChange} onClose={() => setOpen(false)} />
+      <ChangeButton
+        className={className}
+        database={value}
+        onClick={() => setOpen(true)}
+      />
+    </>
+  )
+}
diff --git a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
index f4c17aaa2f3..3f7b6989b07 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
@@ -14,6 +14,8 @@ import StyledLink from 'utils/StyledLink'
 
 import * as requests from '../requests'
 
+import Database from './Database'
+
 const ATHENA_REF = 'https://aws.amazon.com/athena/'
 
 const useStyles = M.makeStyles((t) => ({
@@ -158,8 +160,13 @@ export { FormSkeleton as Skeleton }
 
 const useFormStyles = M.makeStyles((t) => ({
   actions: {
+    alignItems: 'center',
+    display: 'flex',
     margin: t.spacing(2, 0),
   },
+  db: {
+    marginLeft: t.spacing(1),
+  },
   error: {
     margin: t.spacing(1, 0, 0),
   },
@@ -182,6 +189,7 @@ export function Form({
 }: FormProps) {
   const classes = useFormStyles()
   const [value, setValue] = React.useState<string | null>(initialValue)
+  const [database, setDatabase] = React.useState<requests.athena.Database | null>(null)
 
   const { loading, error, onSubmit } = useQueryRun(bucket, workgroup, queryExecutionId)
   const handleSubmit = React.useCallback(() => {
@@ -208,6 +216,7 @@ export function Form({
         >
           Run query
         </M.Button>
+        <Database className={classes.db} onChange={setDatabase} value={database} />
       </div>
     </div>
   )
diff --git a/catalog/app/containers/Bucket/Queries/Athena/Workgroups.tsx b/catalog/app/containers/Bucket/Queries/Athena/Workgroups.tsx
index a74abfdb054..438bd97a192 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/Workgroups.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/Workgroups.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as RRDom from 'react-router-dom'
 import * as M from '@material-ui/core'
 import * as Lab from '@material-ui/lab'
+
 import Skeleton from 'components/Skeleton'
 import * as NamedRoutes from 'utils/NamedRoutes'
 
diff --git a/catalog/app/containers/Bucket/Queries/requests/athena.ts b/catalog/app/containers/Bucket/Queries/requests/athena.ts
index 3e18f7dcf72..472dda13507 100644
--- a/catalog/app/containers/Bucket/Queries/requests/athena.ts
+++ b/catalog/app/containers/Bucket/Queries/requests/athena.ts
@@ -431,3 +431,78 @@ export function useQueryRun(workgroup: string): (q: string) => Promise<QueryRunR
     [athena, workgroup],
   )
 }
+
+export type CatalogName = string
+export interface CatalogNamesResponse {
+  list: CatalogName[]
+  next?: string
+}
+
+interface CatalogNamesArgs {
+  athena: Athena
+  prev?: CatalogNamesResponse
+}
+
+async function fetchCatalogNames({
+  athena,
+  prev,
+}: CatalogNamesArgs): Promise<CatalogNamesResponse> {
+  const catalogsOutput = await athena
+    ?.listDataCatalogs({ NextToken: prev?.next })
+    .promise()
+  const list =
+    catalogsOutput?.DataCatalogsSummary?.map(
+      ({ CatalogName }) => CatalogName || 'Unknown',
+    ) || []
+  return {
+    list: (prev?.list || []).concat(list),
+    next: catalogsOutput.NextToken,
+  }
+}
+
+export function useCatalogNames(
+  prev: CatalogNamesResponse | null,
+): AsyncData<CatalogNamesResponse> {
+  const athena = AWS.Athena.use()
+  return useData(fetchCatalogNames, { athena, prev })
+}
+
+export type Database = string
+export interface DatabasesResponse {
+  list: CatalogName[]
+  next?: string
+}
+
+interface DatabasesArgs {
+  athena: Athena
+  catalogName: CatalogName
+  prev: DatabasesResponse
+}
+
+async function fetchDatabases({
+  athena,
+  catalogName,
+  prev,
+}: DatabasesArgs): Promise<DatabasesResponse> {
+  const databasesOutput = await athena
+    ?.listDatabases({ CatalogName: catalogName, NextToken: prev?.next })
+    .promise()
+  // TODO: add `Description` besides `Name`
+  const list = databasesOutput?.DatabaseList?.map(({ Name }) => Name || 'Unknown') || []
+  return {
+    list: (prev?.list || []).concat(list),
+    next: databasesOutput.NextToken,
+  }
+}
+
+export function useDatabases(
+  catalogName: CatalogName | null,
+  prev: DatabasesResponse | null,
+): AsyncData<DatabasesResponse> {
+  const athena = AWS.Athena.use()
+  return useData(
+    fetchDatabases,
+    { athena, catalogName, prev },
+    { noAutoFetch: !catalogName },
+  )
+}

From 7bf2e1b60239c332a4434cc6435979ce828a0c1b Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Wed, 31 Aug 2022 17:14:18 +0300
Subject: [PATCH 4/9] more intuitive layout

---
 .../Bucket/Queries/Athena/Database.tsx        | 35 ++++++++-----------
 .../Bucket/Queries/Athena/QueryEditor.tsx     |  6 ++--
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
index 7ffbcc36ad6..ebf3531dbdc 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
@@ -21,7 +21,7 @@ function SelectError({ error }: SelectErrorProps) {
 }
 
 function SelectSkeleton() {
-  return <Skeleton height={48} mt={1} animate />
+  return <Skeleton height={32} animate />
 }
 
 const LOAD_MORE = '__load-more__'
@@ -84,7 +84,7 @@ function SelectCatalogName({ onChange }: SelectCatalogNameProps) {
     Ok: (response) => (
       <Select
         data={response}
-        label="Catalog name"
+        label="Data catalog"
         onChange={onChange}
         onLoadMore={setPrev}
       />
@@ -173,26 +173,19 @@ interface ChangeButtonProps {
 
 function ChangeButton({ className, database, onClick }: ChangeButtonProps) {
   const classes = useChangeButtonStyles()
-  if (database) {
-    return (
-      <M.Typography className={cx(classes.root, className)}>
-        Use <strong>{database}</strong> database or
-        <M.Button
-          className={classes.button}
-          color="primary"
-          onClick={onClick}
-          variant="outlined"
-        >
-          change database
-        </M.Button>
-      </M.Typography>
-    )
-  }
-
   return (
-    <M.Button className={cx(classes.button, className)} color="primary" onClick={onClick}>
-      Set database to use in query execution
-    </M.Button>
+    <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>
   )
 }
 
diff --git a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
index 3f7b6989b07..305284ae9d6 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
@@ -161,12 +161,10 @@ export { FormSkeleton as Skeleton }
 const useFormStyles = M.makeStyles((t) => ({
   actions: {
     alignItems: 'center',
+    justifyContent: 'space-between',
     display: 'flex',
     margin: t.spacing(2, 0),
   },
-  db: {
-    marginLeft: t.spacing(1),
-  },
   error: {
     margin: t.spacing(1, 0, 0),
   },
@@ -208,6 +206,7 @@ export function Form({
       )}
 
       <div className={classes.actions}>
+        <Database onChange={setDatabase} value={database} />
         <M.Button
           variant="contained"
           color="primary"
@@ -216,7 +215,6 @@ export function Form({
         >
           Run query
         </M.Button>
-        <Database className={classes.db} onChange={setDatabase} value={database} />
       </div>
     </div>
   )

From 37d08c57974159add97cdc96ba1e713617c7cbd3 Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Wed, 31 Aug 2022 17:52:00 +0300
Subject: [PATCH 5/9] add ExecutionContext, use it for query run

---
 .../Bucket/Queries/Athena/Database.tsx        | 25 ++++++++----
 .../Bucket/Queries/Athena/QueryEditor.tsx     | 13 +++---
 .../Bucket/Queries/requests/athena.ts         | 40 +++++++++++++------
 3 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
index ebf3531dbdc..21e2d496fba 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
@@ -123,13 +123,19 @@ const useDialogStyles = M.makeStyles((t) => ({
 interface DialogProps {
   open: boolean
   onClose: () => void
-  onChange: (value: requests.athena.Database) => void
+  onChange: (value: requests.athena.ExecutionContext) => void
 }
 
 function Dialog({ open, onChange, onClose }: DialogProps) {
   const classes = useDialogStyles()
   const [catalogName, setCatalogName] =
     React.useState<requests.athena.CatalogName | null>(null)
+  const [database, setDatabase] = React.useState<requests.athena.Database | null>(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>
@@ -139,7 +145,7 @@ function Dialog({ open, onChange, onClose }: DialogProps) {
         </div>
         {catalogName && (
           <div className={classes.select}>
-            <SelectDatabase catalogName={catalogName} onChange={onChange} />
+            <SelectDatabase catalogName={catalogName} onChange={setDatabase} />
           </div>
         )}
       </M.DialogContent>
@@ -147,7 +153,12 @@ function Dialog({ open, onChange, onClose }: DialogProps) {
         <M.Button color="primary" variant="outlined" onClick={onClose}>
           Cancel
         </M.Button>
-        <M.Button color="primary" variant="contained" onClick={onClose}>
+        <M.Button
+          color="primary"
+          disabled={!catalogName || !database}
+          onClick={handleSubmit}
+          variant="contained"
+        >
           Submit
         </M.Button>
       </M.DialogActions>
@@ -167,7 +178,7 @@ const useChangeButtonStyles = M.makeStyles((t) => ({
 
 interface ChangeButtonProps {
   className?: string
-  database: requests.athena.Database | null
+  database?: requests.athena.Database
   onClick: () => void
 }
 
@@ -191,8 +202,8 @@ function ChangeButton({ className, database, onClick }: ChangeButtonProps) {
 
 interface DatabaseProps {
   className?: string
-  value: requests.athena.Database | null
-  onChange: (value: string) => void
+  value: requests.athena.ExecutionContext | null
+  onChange: (value: requests.athena.ExecutionContext) => void
 }
 
 export default function Database({ className, value, onChange }: DatabaseProps) {
@@ -202,7 +213,7 @@ export default function Database({ className, value, onChange }: DatabaseProps)
       <Dialog open={open} onChange={onChange} onClose={() => setOpen(false)} />
       <ChangeButton
         className={className}
-        database={value}
+        database={value?.database}
         onClick={() => setOpen(true)}
       />
     </>
diff --git a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
index 305284ae9d6..36534afe051 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
@@ -79,11 +79,11 @@ function useQueryRun(
     [bucket, history, urls, workgroup],
   )
   const onSubmit = React.useCallback(
-    async (value: string) => {
+    async (value: string, executionContext?: requests.athena.ExecutionContext) => {
       setLoading(true)
       setError(undefined)
       try {
-        const { id } = await runQuery(value)
+        const { id } = await runQuery(value, executionContext)
         if (id === queryExecutionId) notify('Query execution results remain unchanged')
         setLoading(false)
         goToExecution(id)
@@ -187,13 +187,14 @@ export function Form({
 }: FormProps) {
   const classes = useFormStyles()
   const [value, setValue] = React.useState<string | null>(initialValue)
-  const [database, setDatabase] = React.useState<requests.athena.Database | null>(null)
+  const [executionContext, setExecutionContext] =
+    React.useState<requests.athena.ExecutionContext | null>(null)
 
   const { loading, error, onSubmit } = useQueryRun(bucket, workgroup, queryExecutionId)
   const handleSubmit = React.useCallback(() => {
     if (!value) return
-    onSubmit(value)
-  }, [onSubmit, value])
+    onSubmit(value, executionContext || undefined)
+  }, [executionContext, onSubmit, value])
 
   return (
     <div className={className}>
@@ -206,7 +207,7 @@ export function Form({
       )}
 
       <div className={classes.actions}>
-        <Database onChange={setDatabase} value={database} />
+        <Database onChange={setExecutionContext} value={executionContext} />
         <M.Button
           variant="contained"
           color="primary"
diff --git a/catalog/app/containers/Bucket/Queries/requests/athena.ts b/catalog/app/containers/Bucket/Queries/requests/athena.ts
index 472dda13507..b5cafbc7242 100644
--- a/catalog/app/containers/Bucket/Queries/requests/athena.ts
+++ b/catalog/app/containers/Bucket/Queries/requests/athena.ts
@@ -385,29 +385,41 @@ export interface QueryRunResponse {
   id: string
 }
 
+export interface ExecutionContext {
+  catalogName: CatalogName
+  database: Database
+}
+
 interface RunQueryArgs {
   athena: Athena
   queryBody: string
   workgroup: string
+  executionContext?: ExecutionContext
 }
 
 export async function runQuery({
   athena,
   queryBody,
   workgroup,
+  executionContext,
 }: RunQueryArgs): Promise<QueryRunResponse> {
   try {
-    const { QueryExecutionId } = await athena
-      .startQueryExecution({
-        QueryString: queryBody,
-        ResultConfiguration: {
-          EncryptionConfiguration: {
-            EncryptionOption: 'SSE_S3',
-          },
+    const options: Athena.Types.StartQueryExecutionInput = {
+      QueryString: queryBody,
+      ResultConfiguration: {
+        EncryptionConfiguration: {
+          EncryptionOption: 'SSE_S3',
         },
-        WorkGroup: workgroup,
-      })
-      .promise()
+      },
+      WorkGroup: workgroup,
+    }
+    if (executionContext) {
+      options.QueryExecutionContext = {
+        Catalog: executionContext.catalogName,
+        Database: executionContext.database,
+      }
+    }
+    const { QueryExecutionId } = await athena.startQueryExecution(options).promise()
     if (!QueryExecutionId) throw new Error('No execution id')
     return {
       id: QueryExecutionId,
@@ -421,12 +433,14 @@ export async function runQuery({
   }
 }
 
-export function useQueryRun(workgroup: string): (q: string) => Promise<QueryRunResponse> {
+export function useQueryRun(
+  workgroup: string,
+): (q: string, execCtx?: ExecutionContext) => Promise<QueryRunResponse> {
   const athena = AWS.Athena.use()
   return React.useCallback(
-    (queryBody: string) => {
+    (queryBody: string, executionContext?: ExecutionContext) => {
       if (!athena) return Promise.reject(new Error('No Athena available'))
-      return runQuery({ athena, queryBody, workgroup })
+      return runQuery({ athena, queryBody, workgroup, executionContext })
     },
     [athena, workgroup],
   )

From fbc91afe47302eb589aa6ea9dc39de620099175e Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Wed, 31 Aug 2022 18:03:35 +0300
Subject: [PATCH 6/9] move defeniton above reference

---
 .../Bucket/Queries/requests/athena.ts         | 122 +++++++++---------
 1 file changed, 61 insertions(+), 61 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/requests/athena.ts b/catalog/app/containers/Bucket/Queries/requests/athena.ts
index b5cafbc7242..c2bd761b4a8 100644
--- a/catalog/app/containers/Bucket/Queries/requests/athena.ts
+++ b/catalog/app/containers/Bucket/Queries/requests/athena.ts
@@ -385,67 +385,6 @@ export interface QueryRunResponse {
   id: string
 }
 
-export interface ExecutionContext {
-  catalogName: CatalogName
-  database: Database
-}
-
-interface RunQueryArgs {
-  athena: Athena
-  queryBody: string
-  workgroup: string
-  executionContext?: ExecutionContext
-}
-
-export async function runQuery({
-  athena,
-  queryBody,
-  workgroup,
-  executionContext,
-}: RunQueryArgs): Promise<QueryRunResponse> {
-  try {
-    const options: Athena.Types.StartQueryExecutionInput = {
-      QueryString: queryBody,
-      ResultConfiguration: {
-        EncryptionConfiguration: {
-          EncryptionOption: 'SSE_S3',
-        },
-      },
-      WorkGroup: workgroup,
-    }
-    if (executionContext) {
-      options.QueryExecutionContext = {
-        Catalog: executionContext.catalogName,
-        Database: executionContext.database,
-      }
-    }
-    const { QueryExecutionId } = await athena.startQueryExecution(options).promise()
-    if (!QueryExecutionId) throw new Error('No execution id')
-    return {
-      id: QueryExecutionId,
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log('Unable to fetch')
-    // eslint-disable-next-line no-console
-    console.error(e)
-    throw e
-  }
-}
-
-export function useQueryRun(
-  workgroup: string,
-): (q: string, execCtx?: ExecutionContext) => Promise<QueryRunResponse> {
-  const athena = AWS.Athena.use()
-  return React.useCallback(
-    (queryBody: string, executionContext?: ExecutionContext) => {
-      if (!athena) return Promise.reject(new Error('No Athena available'))
-      return runQuery({ athena, queryBody, workgroup, executionContext })
-    },
-    [athena, workgroup],
-  )
-}
-
 export type CatalogName = string
 export interface CatalogNamesResponse {
   list: CatalogName[]
@@ -520,3 +459,64 @@ export function useDatabases(
     { noAutoFetch: !catalogName },
   )
 }
+
+export interface ExecutionContext {
+  catalogName: CatalogName
+  database: Database
+}
+
+interface RunQueryArgs {
+  athena: Athena
+  queryBody: string
+  workgroup: string
+  executionContext?: ExecutionContext
+}
+
+export async function runQuery({
+  athena,
+  queryBody,
+  workgroup,
+  executionContext,
+}: RunQueryArgs): Promise<QueryRunResponse> {
+  try {
+    const options: Athena.Types.StartQueryExecutionInput = {
+      QueryString: queryBody,
+      ResultConfiguration: {
+        EncryptionConfiguration: {
+          EncryptionOption: 'SSE_S3',
+        },
+      },
+      WorkGroup: workgroup,
+    }
+    if (executionContext) {
+      options.QueryExecutionContext = {
+        Catalog: executionContext.catalogName,
+        Database: executionContext.database,
+      }
+    }
+    const { QueryExecutionId } = await athena.startQueryExecution(options).promise()
+    if (!QueryExecutionId) throw new Error('No execution id')
+    return {
+      id: QueryExecutionId,
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log('Unable to fetch')
+    // eslint-disable-next-line no-console
+    console.error(e)
+    throw e
+  }
+}
+
+export function useQueryRun(
+  workgroup: string,
+): (q: string, execCtx?: ExecutionContext) => Promise<QueryRunResponse> {
+  const athena = AWS.Athena.use()
+  return React.useCallback(
+    (queryBody: string, executionContext?: ExecutionContext) => {
+      if (!athena) return Promise.reject(new Error('No Athena available'))
+      return runQuery({ athena, queryBody, workgroup, executionContext })
+    },
+    [athena, workgroup],
+  )
+}

From e511eb1aa90239c8f9163d33a77d730805cfc87d Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Fri, 2 Sep 2022 17:01:53 +0300
Subject: [PATCH 7/9] fix initial value

---
 .../Bucket/Queries/Athena/Database.tsx        | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
index 21e2d496fba..b3de3679667 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/Database.tsx
@@ -121,16 +121,19 @@ const useDialogStyles = M.makeStyles((t) => ({
 }))
 
 interface DialogProps {
-  open: boolean
-  onClose: () => void
+  initialValue: requests.athena.ExecutionContext | null
   onChange: (value: requests.athena.ExecutionContext) => void
+  onClose: () => void
+  open: boolean
 }
 
-function Dialog({ open, onChange, onClose }: DialogProps) {
+function Dialog({ initialValue, open, onChange, onClose }: DialogProps) {
   const classes = useDialogStyles()
   const [catalogName, setCatalogName] =
-    React.useState<requests.athena.CatalogName | null>(null)
-  const [database, setDatabase] = React.useState<requests.athena.Database | null>(null)
+    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 })
@@ -210,7 +213,12 @@ export default function Database({ className, value, onChange }: DatabaseProps)
   const [open, setOpen] = React.useState(false)
   return (
     <>
-      <Dialog open={open} onChange={onChange} onClose={() => setOpen(false)} />
+      <Dialog
+        initialValue={value}
+        onChange={onChange}
+        onClose={() => setOpen(false)}
+        open={open}
+      />
       <ChangeButton
         className={className}
         database={value?.database}

From 778a1925a42a0388c5ef2d993d0998f330f783e3 Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Fri, 2 Sep 2022 18:45:36 +0300
Subject: [PATCH 8/9] remove type noise

---
 catalog/app/containers/Bucket/Queries/requests/athena.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/requests/athena.ts b/catalog/app/containers/Bucket/Queries/requests/athena.ts
index c2bd761b4a8..b9e5e9938af 100644
--- a/catalog/app/containers/Bucket/Queries/requests/athena.ts
+++ b/catalog/app/containers/Bucket/Queries/requests/athena.ts
@@ -508,9 +508,7 @@ export async function runQuery({
   }
 }
 
-export function useQueryRun(
-  workgroup: string,
-): (q: string, execCtx?: ExecutionContext) => Promise<QueryRunResponse> {
+export function useQueryRun(workgroup: string) {
   const athena = AWS.Athena.use()
   return React.useCallback(
     (queryBody: string, executionContext?: ExecutionContext) => {

From 153ead5da2018f873dd9a18e697d6e05745f8b7c Mon Sep 17 00:00:00 2001
From: Maxim Chervonny <fiskus@chervonny.ru>
Date: Fri, 2 Sep 2022 19:03:18 +0300
Subject: [PATCH 9/9] refactor null vs undefined

---
 catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx | 4 ++--
 catalog/app/containers/Bucket/Queries/requests/athena.ts     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
index 36534afe051..5f707059aee 100644
--- a/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
+++ b/catalog/app/containers/Bucket/Queries/Athena/QueryEditor.tsx
@@ -79,7 +79,7 @@ function useQueryRun(
     [bucket, history, urls, workgroup],
   )
   const onSubmit = React.useCallback(
-    async (value: string, executionContext?: requests.athena.ExecutionContext) => {
+    async (value: string, executionContext: requests.athena.ExecutionContext | null) => {
       setLoading(true)
       setError(undefined)
       try {
@@ -193,7 +193,7 @@ export function Form({
   const { loading, error, onSubmit } = useQueryRun(bucket, workgroup, queryExecutionId)
   const handleSubmit = React.useCallback(() => {
     if (!value) return
-    onSubmit(value, executionContext || undefined)
+    onSubmit(value, executionContext)
   }, [executionContext, onSubmit, value])
 
   return (
diff --git a/catalog/app/containers/Bucket/Queries/requests/athena.ts b/catalog/app/containers/Bucket/Queries/requests/athena.ts
index b9e5e9938af..e672a2b4ac7 100644
--- a/catalog/app/containers/Bucket/Queries/requests/athena.ts
+++ b/catalog/app/containers/Bucket/Queries/requests/athena.ts
@@ -469,7 +469,7 @@ interface RunQueryArgs {
   athena: Athena
   queryBody: string
   workgroup: string
-  executionContext?: ExecutionContext
+  executionContext: ExecutionContext | null
 }
 
 export async function runQuery({
@@ -511,7 +511,7 @@ export async function runQuery({
 export function useQueryRun(workgroup: string) {
   const athena = AWS.Athena.use()
   return React.useCallback(
-    (queryBody: string, executionContext?: ExecutionContext) => {
+    (queryBody: string, executionContext: ExecutionContext | null) => {
       if (!athena) return Promise.reject(new Error('No Athena available'))
       return runQuery({ athena, queryBody, workgroup, executionContext })
     },