Search: Help link to ElasticSearch docs

catalog/app/containers/NavBar/Provider.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+import * as M from '@material-ui/core'
 
 import * as SearchUIModel from 'containers/Search/model'
 import * as BucketConfig from 'utils/BucketConfig'
@@ -26,9 +27,14 @@ function useSearchUIModel() {
   return React.useContext(SearchUIModel.Context)
 }
 
+interface InputState extends M.InputBaseProps {
+  expanded: boolean
+  focusTrigger: number
+  helpOpen: boolean
+}
+
 interface SearchState {
-  // input: SearchInputProps
-  input: $TSFixMe
+  input: InputState
   onClickAway: () => void
   reset: () => void
   suggestions: ReturnType<typeof Suggestions.use>

catalog/app/containers/NavBar/Suggestions/Suggestions.tsx

@@ -3,10 +3,14 @@ import { Link } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import * as style from 'constants/style'
+import { docs } from 'constants/urls'
+import StyledLink from 'utils/StyledLink'
 
 import { useNavBar } from '../Provider'
 import type { Suggestion } from './model'
 
+const ES_V = '6.7'
+
 const displaySuggestion = (s: Suggestion) => (
   <>
     Search {s.what} {s.where}
@@ -17,6 +21,17 @@ const useSuggestionsStyles = M.makeStyles((t) => ({
   item: {
     paddingLeft: t.spacing(5.5),
   },
+  help: {
+    ...t.typography.caption,
+    borderTop: `1px solid ${t.palette.divider}`,
+    marginTop: t.spacing(1),
+    padding: t.spacing(2, 5.5, 1),
+    color: t.palette.text.hint,
+  },
+  helpExample: {
+    borderBottom: `1px dotted ${t.palette.text.primary}`,
+    cursor: 'help',
+  },
 }))
 
 interface SuggestionsProps {
@@ -40,6 +55,13 @@ function SuggestionsList({ items, selected }: SuggestionsProps) {
           <M.ListItemText primary={displaySuggestion(item)} />
         </M.MenuItem>
       ))}
+      <div className={classes.help}>
+        Learn the{' '}
+        <StyledLink href={`${docs}/catalog/searchquery#search-bar`} target="_blank">
+          advanced search syntax
+        </StyledLink>{' '}
+        for query string queries in ElasticSearch {ES_V}.
+      </div>
     </M.List>
   )
 }

catalog/app/containers/Search/Search.tsx

@@ -7,6 +7,7 @@ import * as FiltersUI from 'components/Filters'
 import Layout from 'components/Layout'
 import * as SearchResults from 'components/SearchResults'
 import Skeleton from 'components/Skeleton'
+import { docs } from 'constants/urls'
 import * as GQL from 'utils/GraphQL'
 import * as JSONPointer from 'utils/JSONPointer'
 import MetaTitle from 'utils/MetaTitle'
@@ -20,6 +21,8 @@ import ResultTypeSelector from './ResultType'
 import { EmptyResults, ResultsSkeleton } from './Results'
 import SortSelector from './Sort'
 
+const ES_V = '6.7'
+
 function useMobileView() {
   const t = M.useTheme()
   return M.useMediaQuery(t.breakpoints.down('sm'))
@@ -256,13 +259,20 @@ function KeywordWildcardFilterWidget({
     },
     [onChange, state],
   )
-  // TODO: link to docs:
-  // https://www.elastic.co/guide/en/elasticsearch/reference/6.7/query-dsl-wildcard-query.html
   return (
     <FiltersUI.TextField
       onChange={handleChange}
       placeholder="Match against (wildcards supported)"
       value={state.wildcard}
+      helperText={
+        <>
+          Learn the{' '}
+          <StyledLink href={`${docs}/catalog/searchquery#search-bar`} target="_blank">
+            advanced search syntax
+          </StyledLink>{' '}
+          for query string queries in ElasticSearch {ES_V}.
+        </>
+      }
     />
   )
 }
@@ -277,13 +287,20 @@ function TextFilterWidget({
     },
     [onChange, state],
   )
-  // TODO: link to docs:
-  // https://www.elastic.co/guide/en/elasticsearch/reference/6.7/query-dsl-simple-query-string-query.html
   return (
     <FiltersUI.TextField
       onChange={handleChange}
       placeholder="Search for"
       value={state.queryString}
+      helperText={
+        <>
+          Learn the{' '}
+          <StyledLink href={`${docs}/catalog/searchquery#search-bar`} target="_blank">
+            advanced search syntax
+          </StyledLink>{' '}
+          for query string queries in ElasticSearch {ES_V}.
+        </>
+      }
     />
   )
 }

docs/CHANGELOG.md

@@ -24,6 +24,7 @@ Entries inside each section should be ordered by type:
 
 ## Catalog, Lambdas
 * [Added] Support multipart checksums ([#3403](https://github.com/quiltdata/quilt/pull/3403))
+* [Added] Search: Help link to ElasticSearch docs ([#3861](https://github.com/quiltdata/quilt/pull/3861))
 * [Fixed] Faceted Search: show helpful message in case of search query syntax errors ([#3821](https://github.com/quiltdata/quilt/pull/3821))
 * [Fixed] JsonEditor: fix changing collections items, that have `.additionalProperties` or `.items` JSON Schema ([#3860](https://github.com/quiltdata/quilt/pull/3860))
 * [Changed] Faceted Search: use non-linear scale for numeric range control ([#3805](https://github.com/quiltdata/quilt/pull/3805))

docs/Catalog/SearchQuery.md

@@ -34,9 +34,9 @@ to deep index can be customized per Bucket in the Catalog Admin settings.
 
 ![Example of Admin Bucket indexing options](../imgs/elastic-search-indexing-options.png)
 
-### Navigation Bar
+### Search Bar
 
-The navigation bar on every page in the catalog provides a convenient
+The search bar on every page in the catalog provides a convenient
 shortcut for searching objects and packages in an Amazon S3
 bucket.
 
@@ -47,38 +47,40 @@ The following are all valid search parameters:
 
 **Fields**
 
-- `comment`: Package comment. `comment: TODO`
-- `content`: Object content. `content:Hello`
-- `ext`: Object extension. `ext:*.fastq.gz`
-- `handle`: Package name. `handle:examples\/metadata`
-- `hash`: Package hash. `hash:3192ac1*`
-- `key`: Object key. `key:phase*`
-- `key_text`: Analyzed object key. `key:"phase"`
-- `last_modified`: Last modified date. `last_modified:[2022-02-04 TO
-  2022-02-20]`
-- `metadata`: Package metadata. `metadata:dapi`
-- `size`: Object size in bytes. `size:>=4096`
-- `version_id`: Object version id. `version_id:t.LVVCx*`
-- `pointer_file`: Package revision tag in S3; either "latest" or a top hash. `pointer_file: latest`
-- `package_stats.total_files`: Package total files.
-  `package_stats.total_files:>100`
-- `package_stats.total_bytes`: Package total bytes.
-  `package_stats.total_bytes:<100`
+| Syntax | Description | Example |
+|- | - | - |
+| `comment`| Package comment | `comment:TODO` |
+| `content`| Object content | `content:Hello` |
+| `ext`| Object extension | `ext:*.fastq.gz` |
+| `handle`| Package name | `handle:examples\/metadata` |
+| `hash`| Package hash | `hash:3192ac1*` |
+| `key`| Object key | `key:phase*` |
+| `key_text`| Analyzed object key | `key:"phase"` |
+| `last_modified`| Last modified date | `last_modified:[2022-02-04 TO 2022-02-20]`|
+| `metadata` | Package metadata | `metadata:dapi` |
+| `size` | Object size in bytes | `size:>=4096` |
+| `version_id` | Object version id | `version_id:t.LVVCx*` |
+| `pointer_file` | Package revision tag in S3; either "latest" or a top hash | `pointer_file:latest` |
+| `package_stats.total_files` | Package total files | `package_stats.total_files:>100` |
+| `package_stats.total_bytes` | Package total bytes | `package_stats.total_bytes:<100` |
 
 **Logical operators and grouping**
 
-- `AND`: Conjunction. `a AND b`
-- `OR`: Disjunction. `a OR b`
-- `NOT`: Negation. `NOT a`
-- `_exists_`: Matches any non-null value for the given field. `_exists_: content`
-- `()`: Group terms. `(a AND b) NOT c`
+| Syntax | Description | Example |
+|- | - | - |
+| `AND` | Conjunction | `a AND b` |
+| `OR` | Disjunction | `a OR b` |
+| `NOT` | Negation | `NOT a` |
+| `_exists_` | Matches any non-null value for the given field | `_exists_: content` |
+| `()` | Group terms | `(a AND b) NOT c` |
 
 **Wildcard and regular expressions**
 
-- `*`: Zero or more characters, avoid leading `*` (slows performance).
-  `ext:config.y*ml`
-- `?`: Exactly one character. `ext:React.?sx`
-- `//`: Regular expression (slows performance). `content:/lmnb[12]/`
+| Syntax | Description | Example |
+|- | - | - |
+| `*` | Zero or more characters, avoid leading `*` (slows performance) | `ext:config.y*ml` |
+| `?` | Exactly one character | `ext:React.?sx` |
+| `//` | Regular expression (slows performance) | `content:/lmnb[12]/` |
 
 ### QUERIES > ELASTICSEARCH tab