diff --git a/daiquiri/query/assets/js/query/components/forms/FormSql.js b/daiquiri/query/assets/js/query/components/forms/FormSql.js
index f4b996a5..30bccc11 100644
--- a/daiquiri/query/assets/js/query/components/forms/FormSql.js
+++ b/daiquiri/query/assets/js/query/components/forms/FormSql.js
@@ -14,6 +14,7 @@ import Select from './common/Select'
import Text from './common/Text'
import ColumnsDropdown from './dropdowns/ColumnsDropdown'
+import ExamplesDropdown from './dropdowns/ExamplesDropdown'
import SchemasDropdown from './dropdowns/SchemasDropdown'
const FormSql = ({ form, loadJob, query }) => {
@@ -76,6 +77,10 @@ const FormSql = ({ form, loadJob, query }) => {
})
}
+ const handleReplace = (item) => {
+ setValues({...values, query: item.query_string})
+ }
+
return (
{form.label}
@@ -115,6 +120,9 @@ const FormSql = ({ form, loadJob, query }) => {
{
openDropdown == 'columns' &&
}
+ {
+ openDropdown == 'examples' &&
+ }
diff --git a/daiquiri/query/assets/js/query/components/forms/dropdowns/ExamplesDropdown.js b/daiquiri/query/assets/js/query/components/forms/dropdowns/ExamplesDropdown.js
new file mode 100644
index 00000000..e789d383
--- /dev/null
+++ b/daiquiri/query/assets/js/query/components/forms/dropdowns/ExamplesDropdown.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty } from 'lodash'
+
+import { useUserExamplesQuery } from '../../../hooks/queries'
+
+const ExamplesDropdown = ({ onDoubleClick }) => {
+ const { data: examples } = useUserExamplesQuery()
+
+ const [activeItem, setActiveItem] = useState(null)
+ const [filterValue, setFilterValue] = useState('')
+
+ const handleClick = (item) => {
+ if (item != activeItem) {
+ setActiveItem(item)
+ }
+ }
+
+ return (
+
+
+
+
+ {gettext('Columns')}
+
+
+ setFilterValue(event.target.value)}>
+
+
+
+ {
+ examples && examples.filter(
+ (example) => (isEmpty(filterValue) || example.name.includes(filterValue))
+ ).map((example) => (
+ -
+
+
+ ))
+ }
+
+
+
+
+ {gettext('A double click will replace the content of the query field with the example.')}
+
+
+ )
+}
+
+ExamplesDropdown.propTypes = {
+ onDoubleClick: PropTypes.func.isRequired
+}
+
+export default ExamplesDropdown
diff --git a/daiquiri/query/assets/js/query/hooks/queries.js b/daiquiri/query/assets/js/query/hooks/queries.js
index ca95f23a..df9ae214 100644
--- a/daiquiri/query/assets/js/query/hooks/queries.js
+++ b/daiquiri/query/assets/js/query/hooks/queries.js
@@ -55,13 +55,21 @@ export const useJobsQuery = () => {
export const useUserSchemaQuery = () => {
return useQuery({
- queryKey: ['userSchema'],
+ queryKey: ['userSchemas'],
queryFn: () => QueryApi.fetchUserSchema(),
refetchInterval: refetchInterval,
placeholderData: keepPreviousData
})
}
+export const useUserExamplesQuery = () => {
+ return useQuery({
+ queryKey: ['userExamples'],
+ queryFn: () => QueryApi.fetchUserExamples(),
+ placeholderData: keepPreviousData
+ })
+}
+
export const useJobQuery = (jobId) => {
return useQuery({
queryKey: ['job', jobId],