Add ExamplesDropdown

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 (
     <div className="form mb-4">
       <h2>{form.label}</h2>
@@ -115,6 +120,9 @@ const FormSql = ({ form, loadJob, query }) => {
         {
           openDropdown == 'columns' && <ColumnsDropdown onDoubleClick={handlePaste} />
         }
+        {
+          openDropdown == 'examples' && <ExamplesDropdown onDoubleClick={handleReplace} />
+        }
 
       </div>
 

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 (
+    <div className="mb-4">
+      <div className="card">
+        <div className="dq-browser">
+          <div className="dq-browser-title">
+            {gettext('Columns')}
+          </div>
+          <div className="dq-browser-filter">
+            <input
+              type="text"
+              className="form-control"
+              placeholder={gettext('Filter experiments')}
+              value={filterValue}
+              onChange={(event) => setFilterValue(event.target.value)}>
+            </input>
+          </div>
+          <ul className="dq-browser-list">
+            {
+              examples && examples.filter(
+                (example) => (isEmpty(filterValue) || example.name.includes(filterValue))
+              ).map((example) => (
+                <li key={example.id}>
+                  <button
+                    className={classNames('btn btn-link d-flex', {'active': activeItem === example})}
+                    onClick={() => handleClick(example)}
+                    onDoubleClick={() => onDoubleClick(example)}
+                  >
+                    <div>{example.name}</div>
+                  </button>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+      </div>
+      <small className="form-text text-muted">
+        {gettext('A double click will replace the content of the query field with the example.')}
+      </small>
+    </div>
+  )
+}
+
+ExamplesDropdown.propTypes = {
+  onDoubleClick: PropTypes.func.isRequired
+}
+
+export default ExamplesDropdown

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