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],