Add first browser component and refactor a bit

daiquiri/core/assets/scss/base.scss

@@ -6,6 +6,7 @@ $material-symbols-font-path: '~material-symbols/';
 
 @import '~bootstrap/scss/bootstrap';
 
+@import 'browser';
 @import 'card';
 @import 'fonts';
 @import 'footer';

daiquiri/core/assets/scss/browser.scss

@@ -0,0 +1,48 @@
+.dq-browser {
+    .row {
+        div[class^='col'] {
+            border-right: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+            &:last-child {
+                border-right: none;
+            }
+        }
+
+        .dq-browser-title {
+            padding: 0.25rem 0.75rem;
+            border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+        }
+
+        .dq-browser-list {
+            margin: 0;
+            padding: 0;
+
+            height: 100px;
+            overflow-y: auto;
+
+            li {
+                margin: 0;
+                list-style: none;
+
+                button.btn-link {
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 0;
+                    width: 100%;
+                    text-align: left;
+
+                    text-decoration: none;
+                    cursor: pointer;
+
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    &:hover {
+                        color: var(--dq-card-nav-hover-color);
+                        background-color: var(--dq-card-nav-hover-bg);
+                    }
+                }
+            }
+        }
+    }
+}

daiquiri/metadata/assets/js/api/MetadataApi.js

@@ -0,0 +1,11 @@
+import BaseApi from 'daiquiri/core/assets/js/api/BaseApi'
+
+class MetadataApi extends BaseApi {
+
+  static fetchUserSchemas() {
+    return this.get('/metadata/api/schemas/user/')
+  }
+
+}
+
+export default MetadataApi

daiquiri/metadata/assets/js/hooks/queries.js

@@ -0,0 +1,10 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import MetadataApi from '../api/MetadataApi'
+
+export const useUserSchemasQuery = () => {
+  return useQuery({
+    queryKey: ['schemasUser'],
+    queryFn: () => MetadataApi.fetchUserSchemas(),
+    placeholderData: keepPreviousData
+  })
+}

daiquiri/query/assets/js/query/components/App.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import { parseLocation, updateLocation } from '../utils/location'
 
-import Form from './form/Form'
+import Form from './forms/Form'
 import Forms from './Forms'
 import Job from './job/Job'
 import Jobs from './Jobs'

daiquiri/query/assets/js/query/components/Forms.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { isNil } from 'lodash'
 
-import { useFormsQuery } from '../hooks/query'
+import { useFormsQuery } from '../hooks/queries'
 import { basePath } from '../utils/location'
 
 import Loading from './Loading'

daiquiri/query/assets/js/query/components/Jobs.js

@@ -6,7 +6,7 @@ import { isEmpty, isNil } from 'lodash'
 import { baseUrl, userId } from 'daiquiri/core/assets/js/utils/meta'
 import { useLsState } from 'daiquiri/core/assets/js/hooks/ls'
 
-import { useJobsQuery } from '../hooks/query'
+import { useJobsQuery } from '../hooks/queries'
 import { basePath } from '../utils/location'
 
 import Loading from './Loading'

daiquiri/query/assets/js/query/components/Status.js

@@ -4,7 +4,7 @@ import { isNil } from 'lodash'
 import { baseUrl } from 'daiquiri/core/assets/js/utils/meta'
 import { bytes2human } from 'daiquiri/core/assets/js/utils/bytes'
 
-import { useStatusQuery } from '../hooks/query'
+import { useStatusQuery } from '../hooks/queries'
 
 const Status = () => {
   const { data: status } = useStatusQuery()

daiquiri/query/assets/js/query/components/form/Form.js → daiquiri/query/assets/js/query/components/forms/Form.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { isNil } from 'lodash'
 
-import { useFormQuery } from '../../hooks/query'
+import { useFormQuery } from '../../hooks/queries'
 
 import FormSql from './FormSql'
 import FormCustom from './FormCustom'

daiquiri/query/assets/js/query/components/form/FormCustom.js → daiquiri/query/assets/js/query/components/forms/FormCustom.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import Template from 'daiquiri/core/assets/js/components/Template'
 
-const FormCustom = ({ form, loadJob }) => {
+const FormCustom = ({ form }) => {
   return (
     <div className="form">
       <h2>{form.label}</h2>
@@ -13,8 +13,7 @@ const FormCustom = ({ form, loadJob }) => {
 }
 
 FormCustom.propTypes = {
-  form: PropTypes.object.isRequired,
-  loadJob: PropTypes.func.isRequired
+  form: PropTypes.object.isRequired
 }
 
 export default FormCustom

daiquiri/query/assets/js/query/components/form/FormSql.js → daiquiri/query/assets/js/query/components/forms/FormSql.js

@@ -6,11 +6,14 @@ import { useLsState } from 'daiquiri/core/assets/js/hooks/ls'
 
 import Template from 'daiquiri/core/assets/js/components/Template'
 
+import { useQueryLanguagesQuery, useQueuesQuery } from '../../hooks/queries'
+import { useSubmitJobMutation } from '../../hooks/mutations'
+
 import Query from './common/Query'
 import Select from './common/Select'
 import Text from './common/Text'
 
-import { useQueryLanguagesQuery, useQueuesQuery, useSubmitJobMutation } from '../../hooks/query'
+import SchemaDropdown from './dropdowns/SchemaDropdown'
 
 const FormSql = ({ form, loadJob, query }) => {
 
@@ -23,7 +26,6 @@ const FormSql = ({ form, loadJob, query }) => {
   })
   const [errors, setErrors] = useState({})
 
-
   const { data: queues } = useQueuesQuery()
   const { data: queryLanguages } = useQueryLanguagesQuery()
   const mutation = useSubmitJobMutation()
@@ -90,13 +92,7 @@ const FormSql = ({ form, loadJob, query }) => {
         </div>
 
         {
-          openDropdown && (
-            <div className="card mt-2">
-              <div className="card-body">
-                {openDropdown}
-              </div>
-            </div>
-          )
+          openDropdown == 'schemas' && <SchemaDropdown />
         }
       </div>
 

daiquiri/query/assets/js/query/components/form/FormUpload.js → daiquiri/query/assets/js/query/components/forms/FormUpload.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Template from 'daiquiri/core/assets/js/components/Template'
 import { bytes2human } from 'daiquiri/core/assets/js/utils/bytes'
 
-import { useStatusQuery, useUploadJobMutation } from '../../hooks/query'
+import { useStatusQuery, useUploadJobMutation } from '../../hooks/queries'
 
 import Text from './common/Text'
 

daiquiri/query/assets/js/query/components/forms/dropdowns/SchemaDropdown.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useUserSchemasQuery } from 'daiquiri/metadata/assets/js/hooks/queries'
+import { useUserSchemaQuery } from '../../../hooks/queries'
+
+const SchemaDropdown = ({ }) => {
+  const { data: schemas } = useUserSchemasQuery()
+  const { data: userSchema } = useUserSchemaQuery()
+
+  console.log(schemas)
+  console.log(userSchema)
+
+  return (
+    <div className="card mb-4">
+      <div className="dq-browser">
+        <div className="row g-0">
+          <div className="col-md-4">
+            <div className="dq-browser-title">
+              {gettext('Schemas')}
+            </div>
+            <ul className="dq-browser-list">
+              <li><button className="btn btn-link" onClick={()=> {}}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</button></li>
+            </ul>
+          </div>
+          <div className="col-md-4">
+            <div className="dq-browser-title">
+              {gettext('Tables')}
+            </div>
+            <ul className="dq-browser-list">
+              <li><button className="btn btn-link" onClick={()=> {}}>Lorem</button></li>
+            </ul>
+          </div>
+          <div className="col-md-4">
+            <div className="dq-browser-title">
+              {gettext('Columns')}
+            </div>
+            <ul className="dq-browser-list">
+              <li><button className="btn btn-link" onClick={()=> {}}>Lorem</button></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+SchemaDropdown.propTypes = {
+
+}
+
+export default SchemaDropdown

daiquiri/query/assets/js/query/components/job/Job.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { isNil } from 'lodash'
 import classNames from 'classnames'
 
-import { useJobQuery } from '../../hooks/query'
+import { useJobQuery } from '../../hooks/queries'
 
 import { useLsState } from 'daiquiri/core/assets/js/hooks/ls'
 

daiquiri/query/assets/js/query/components/job/JobAbortModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { useModal } from 'daiquiri/core/assets/js/hooks/modal'
 
-import { useAbortJobMutation } from '../../hooks/query'
+import { useAbortJobMutation } from '../../hooks/mutations'
 
 const JobAbortModal = ({ job, show, toggle }) => {
   const [ref, showModal, hideModal]  = useModal()

daiquiri/query/assets/js/query/components/job/JobArchiveModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { useModal } from 'daiquiri/core/assets/js/hooks/modal'
 
-import { useArchiveJobMutation } from '../../hooks/query'
+import { useArchiveJobMutation } from '../../hooks/mutations'
 
 const JobArchiveModal = ({ job, show, toggle }) => {
   const [ref, showModal, hideModal]  = useModal()

daiquiri/query/assets/js/query/components/job/JobRenameModal.js

@@ -4,7 +4,7 @@ import className from 'classnames'
 
 import { useModal } from 'daiquiri/core/assets/js/hooks/modal'
 
-import { useUpdateJobMutation } from '../../hooks/query'
+import { useUpdateJobMutation } from '../../hooks/mutations'
 
 const JobRenameModal = ({ job, show, toggle }) => {
   const [ref, showModal, hideModal]  = useModal()

daiquiri/query/assets/js/query/components/job/JobResults.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import Table from 'daiquiri/core/assets/js/components/Table'
 
-import { useJobColumnsQuery, useJobRowsQuery } from '../../hooks/query'
+import { useJobColumnsQuery, useJobRowsQuery } from '../../hooks/queries'
 
 const JobResults = ({ job }) => {
   const [params, setParams] = useState({

daiquiri/query/assets/js/query/hooks/mutations.js

@@ -0,0 +1,82 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import QueryApi from '../api/QueryApi'
+
+export const useSubmitJobMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (variables) => {
+      return QueryApi.submitJob(variables.values)
+    },
+    onSuccess: (data, variables) => {
+      variables.loadJob(data.id)
+      queryClient.invalidateQueries({ queryKey: ['jobs'] })
+    },
+    onError: (error, variables) => {
+      variables.setErrors(error.errors)
+    }
+  })
+}
+
+export const useUploadJobMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (variables) => {
+      return QueryApi.uploadJob(variables.values)
+    },
+    onSuccess: (data, variables) => {
+      variables.loadJob(data.id)
+      queryClient.invalidateQueries({ queryKey: ['jobs'] })
+    },
+    onError: (error, variables) => {
+      variables.setErrors(error.errors)
+    }
+  })
+}
+
+export const useUpdateJobMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (variables) => {
+      return QueryApi.updateJob(variables.job.id, variables.values)
+    },
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(['job', variables.job.id], {...variables.job, ...data})
+      queryClient.invalidateQueries({ queryKey: ['jobs'] })
+      variables.onSuccess()
+    },
+    onError: (error, variables) => {
+      variables.setErrors(error.errors)
+    }
+  })
+}
+
+export const useArchiveJobMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (variables) => {
+      return QueryApi.archiveJob(variables.job.id)
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['jobs'] })
+      variables.onSuccess()
+    }
+  })
+}
+
+export const useAbortJobMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (variables) => {
+      return QueryApi.abortJob(variables.job.id)
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['jobs'] })
+      variables.onSuccess()
+    }
+  })
+}