Search: Query string syntax help #1828

fiskus · 2020-09-28T14:27:08Z

Description

Added

Help dropdown
Use of react-intl for text

May pay attention to

Hardcoded height for Search's wrapper
Created more small components instead of less large ones, they are simpler to maintain, mix and reuse

codecov-commenter · 2020-09-28T14:29:58Z

Codecov Report

Merging #1828 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1828   +/-   ##
=======================================
  Coverage   89.49%   89.49%           
=======================================
  Files          62       62           
  Lines        7233     7233           
=======================================
  Hits         6473     6473           
  Misses        760      760

Flag	Coverage Δ
#api-python	`87.87% <ø> (ø)`
#lambda	`92.32% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b587d08...9b5f475. Read the comment docs.

fiskus · 2020-09-28T14:30:32Z

catalog/app/containers/NavBar/Search.js

+  '@keyframes appear': {
+    '0%': {
+      transform: 'translateY(-10px)',
+    },
+    '100%': {
+      transform: 'translateY(0)',
+    },
+  },


Can replace it by <M.Slide /> or remove it completely, of course

fiskus · 2020-09-28T14:31:25Z

catalog/app/translations/search-query-syntax.json

@@ -0,0 +1,87 @@
+{


It's a lot of text, so I decided to move it outside of component

catalog/app/containers/NavBar/Search.js

fiskus · 2020-09-28T16:59:52Z

I didn't move the close button from SearchBox to dropdown yet.

The close button purpose now is to collapse SearchBox and reset the input query. We can't collapse SearchBox on blur in this implementation, because click on the dropdown triggers a blur event.
The dropdown can be closed by clicking outside of it or by focusing on SearchBox.

akarve · 2020-10-01T21:26:43Z

catalog/app/translations/en.json

+  "searchQuerySyntax.objectAndPackage": " (objects & packages)",
+  "searchQuerySyntax.operators.and.title": "Conjunction",
+  "searchQuerySyntax.operators.exists.example": "_exists_:content",
+  "searchQuerySyntax.operators.exists.title": "Has any non-null value for keyword",


Suggested change

"searchQuerySyntax.operators.exists.title": "Has any non-null value for keyword",

"searchQuerySyntax.operators.exists.title": "Matches any non-null value for the given field",

akarve · 2020-10-01T21:29:16Z

catalog/app/translations/en.json

+  "searchQuerySyntax.operators.and.title": "Conjunction",
+  "searchQuerySyntax.operators.exists.example": "_exists_:content",
+  "searchQuerySyntax.operators.exists.title": "Has any non-null value for keyword",
+  "searchQuerySyntax.operators.group.title": "Group items",


Suggested change

"searchQuerySyntax.operators.group.title": "Group items",

"searchQuerySyntax.operators.group.title": "Group terms",

akarve

Simplified help text

catalog/app/containers/NavBar/Help.js

Co-authored-by: Aneesh Karve <akarve@users.noreply.github.com>

nl0

some more inline comments
i've noticed a suboptimal ux when clicking on the search button when searchbox is collapsed -- the box gets expanded, but it feels kinda twitchy
inconsistent margin / border (top and bottom) around the search button

nl0 · 2020-10-02T05:00:07Z

catalog/app/containers/NavBar/Help.js

@@ -0,0 +1,313 @@
+import cx from 'classnames'
+import * as Lab from '@material-ui/lab'


lab should come after core (A-Z) and scoped packages should come after non-scoped

Fixed. I think that sorting rule should be operated by eslint https://eslint.org/docs/rules/sort-imports

catalog/app/containers/NavBar/Help.js

nl0 · 2020-10-02T05:15:34Z

catalog/app/containers/NavBar/Search.js

+    setExpanded(false)
+    setHelpOpened(false)
+    if (onBlur) onBlur()
+  })


add onBlur to deps

I've added 'react-hooks/exhaustive-deps': 2 to .eslintrc

catalog/app/containers/NavBar/Search.js

catalog/app/containers/NavBar/Help.js

fiskus

some more inline comments

Resloved them all but one about import sorting.

a suboptimal ux... twitchy

I removed slide animation then. If animation is not smooth, I think it shouldn't be there. This dropdown has a lot of things, and it's heavy. I can improve performance by caching its content later

inconsistent margin / border

I don't recognize it unfortunately. Can you elaborate? Can I fix it as bug in another PR?

fiskus · 2020-10-02T08:40:03Z

catalog/app/containers/NavBar/Help.js

@@ -0,0 +1,313 @@
+import cx from 'classnames'
+import * as Lab from '@material-ui/lab'


Fixed. I think that sorting rule should be operated by eslint https://eslint.org/docs/rules/sort-imports

catalog/app/containers/NavBar/Help.js

fiskus · 2020-10-02T09:10:40Z

catalog/app/containers/NavBar/Search.js

+    setExpanded(false)
+    setHelpOpened(false)
+    if (onBlur) onBlur()
+  })


I've added 'react-hooks/exhaustive-deps': 2 to .eslintrc

fiskus · 2020-10-02T09:40:42Z

catalog/app/containers/NavBar/Search.js

@@ -3,20 +3,33 @@ import { push } from 'connected-react-router/esm/immutable'
 import * as React from 'react'
 import * as redux from 'react-redux'
 import * as M from '@material-ui/core'
+import * as Lab from '@material-ui/lab'


It is already. Did I miss something?

…ch-fields-query-string

fiskus · 2020-10-02T17:31:07Z

1. some more inline comments

done

2. i've noticed a suboptimal ux when clicking on the search button when searchbox is collapsed -- the box gets expanded, but it feels kinda twitchy

I removed animation for now. But will fix it with another PR: will delay dropdown animation for sure, and try something more to make it smoother

3. inconsistent margin / border (top and bottom) around the search button

Will fix border issues in another PR. I will play with margins too

nl0 · 2020-10-05T15:20:00Z

catalog/.eslintrc.js

@@ -72,6 +69,7 @@ module.exports = {
    'react-hooks/rules-of-hooks': 'error',
    'redux-saga/no-yield-in-race': 2,
    'redux-saga/yield-effects': 2,
+    'react-hooks/exhaustive-deps': 2,


@fiskus this is nice, but i think we should keep the A-Z order for consistency

Got it. Will fix in the next PR

fiskus added 9 commits September 24, 2020 13:49

add popup with brief help on search syntax

eb1a1ee

set app theme for help popup

330ea2d

minor changes to make code similar

698984a

refactor

989e728

move texts to json file

b341dfc

use Box instead of Popper

85adb5c

rename suggest to help

5993c58

minor text addition

71532bd

consistent coding style

5244043

fiskus added the javascript Pull requests that update Javascript code label Sep 28, 2020

fiskus requested review from nl0 and akarve September 28, 2020 14:32

fiskus commented Sep 28, 2020

View reviewed changes

add note to docs

8733700

fiskus added 14 commits September 28, 2020 23:02

use toggle button and tune icon to open up search box help

edc1715

remove title and move caption to the bottom

d65f919

use TreeView for syntax help

b139485

improve mobile view

92e8aef

highlight code samples

4f2d1e0

add help dropdown to bucket page, restore focus/blur behavior

7654ce7

fix column width for mobile

8e66667

add examples

b99d7de

update text

faf455e

add package/object note

6d48ed1

move Help to component file

32ad174

prepare to use react-intl

280533c

use react-intl for messages

6d5c209

divide into small components, reuse them for i18n

1a48cff

fiskus added 5 commits October 1, 2020 20:15

remove extra element

16bd905

set dependency

60d79c6

cosmetic changes

767c439

use syntax as a data, not i18n string

757b106

use more convinient link title

6134399

akarve reviewed Oct 1, 2020

View reviewed changes

get rid of react-intl, use more examples

7fd28c7

akarve reviewed Oct 1, 2020

View reviewed changes

fiskus added 3 commits October 2, 2020 00:35

hide examples for mobile

a47b5e5

space for last example

b1216fd

text update

63fdd47

akarve reviewed Oct 1, 2020

View reviewed changes

fiskus and others added 3 commits October 2, 2020 01:16

add total files and total bytes

3b97732

update titles

5ec19ae

Apply suggestions from code review

e100f29

Co-authored-by: Aneesh Karve <akarve@users.noreply.github.com>

akarve requested review from akarve and nl0 October 1, 2020 22:36

akarve approved these changes Oct 1, 2020

View reviewed changes

fix spaced bug

e3477ca

nl0 requested changes Oct 2, 2020

View reviewed changes

fiskus added 3 commits October 2, 2020 11:47

minor cosmetic changes

be0cad3

add exhaustive deps to react callbacks, also minor cosmetic changes

9731a08

remove animation

8170d0b

fiskus commented Oct 2, 2020

View reviewed changes

Merge branch 'master' of https://github.com/quiltdata/quilt into sear…

9b5f475

…ch-fields-query-string

fiskus merged commit b173499 into master Oct 2, 2020

fiskus deleted the search-fields-query-string branch October 2, 2020 17:36

nl0 reviewed Oct 5, 2020

View reviewed changes

fiskus mentioned this pull request Oct 6, 2020

Catalog/Search: Fix icon paddings #1836

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search: Query string syntax help #1828

Search: Query string syntax help #1828

fiskus commented Sep 28, 2020 •

edited

Loading

codecov-commenter commented Sep 28, 2020 •

edited

Loading

fiskus Sep 28, 2020

fiskus Sep 28, 2020

fiskus commented Sep 28, 2020

akarve Oct 1, 2020

akarve Oct 1, 2020

akarve left a comment

nl0 left a comment

nl0 Oct 2, 2020

fiskus Oct 2, 2020

nl0 Oct 2, 2020

fiskus Oct 2, 2020

fiskus left a comment •

edited

Loading

fiskus Oct 2, 2020

fiskus Oct 2, 2020

fiskus Oct 2, 2020

fiskus commented Oct 2, 2020

nl0 Oct 5, 2020

fiskus Oct 5, 2020

	"searchQuerySyntax.operators.exists.title": "Has any non-null value for keyword",
	"searchQuerySyntax.operators.exists.title": "Matches any non-null value for the given field",

	"searchQuerySyntax.operators.group.title": "Group items",
	"searchQuerySyntax.operators.group.title": "Group terms",

		@@ -0,0 +1,313 @@
		import cx from 'classnames'
		import * as Lab from '@material-ui/lab'

Search: Query string syntax help #1828

Search: Query string syntax help #1828

Conversation

fiskus commented Sep 28, 2020 • edited Loading

Description

Added

May pay attention to

codecov-commenter commented Sep 28, 2020 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fiskus commented Sep 28, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akarve left a comment

Choose a reason for hiding this comment

nl0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fiskus left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fiskus commented Oct 2, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fiskus commented Sep 28, 2020 •

edited

Loading

codecov-commenter commented Sep 28, 2020 •

edited

Loading

fiskus left a comment •

edited

Loading