Allow creating new items by inserting comma in MultiAutocomplete #42824

romeovs · 2024-05-17T11:15:00Z

Closes #42783

Description

Allows creating new filter items by pressing the comma (,) key without having to blur the input.

How to verify

Describe the steps to verify that the changes are working as expected.

Browse data -> Sample data -> Accounts
Add a filter to the First name header
Play around with the filter value input: add new items, type a name and press ,, paste a list of names, add quote-delimited values like "foo, bar", ...

Demo

Metabase.-.17.May.2024.mp4

Checklist

Tests have been added/updated to cover changes in this PR

github-actions · 2024-05-17T11:16:08Z

Codenotify: Notifying subscribers in CODENOTIFY files for diff 80687b8...6e9b253.

Notify	File(s)
@kdoh	frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.module.css frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.unit.spec.tsx frontend/src/metabase/ui/components/inputs/MultiAutocomplete/utils.ts frontend/src/metabase/ui/components/inputs/MultiAutocomplete/utils.unit.spec.ts

replay-io · 2024-05-17T11:27:06Z

Status	Complete ↗︎
Commit	`6e9b253`
Results	⚠️ 2 Flaky ✅ 2569 Passed

romeovs · 2024-05-17T13:55:59Z

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

-        setSelectedValues(newSelectedValues);
-        setLastSelectedValues(newSelectedValues);
-      }
+    const text = event.clipboardData.getData("text");


Using Text was breaking the test, and both Text and text work in my browsers.

kamilmielnik

Works well 👍

This change obviously makes it difficult to filters/search for strings that include comma character - please make sure that we have product team approval for this.

(for example in our Sample Database there is a person with this address: 5509-5501,5500-5508 McKinley Avenue - now it won't be possible to just paste this value into the filter input)

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.unit.spec.tsx

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.unit.spec.tsx

romeovs · 2024-05-22T13:47:42Z

@kamilmielnik there is a follow up to add escaping for the comma character.

romeovs · 2024-05-24T08:48:18Z

@kamilmielnik re:

This change obviously makes it difficult to filters/search for strings that include comma character - please make sure that we have product team approval for this.

I've added those follow up changes here, since they were small and it doesn't make sense to merge this in the "broken" state. Please have another look.

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/util.ts

kamilmielnik

Works really well 👍

I think it's ready to go once we address "Case 3".

kamilmielnik · 2024-05-24T11:31:41Z

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

    setSearchValue("");
+
+    if (values.length > 0) {


values aren't used in this if/else block - is this correct?

Two more occurrences of this below.

Suggested change

if (values.length > 0) {

if (validValues.length > 0) {

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/util.ts

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.unit.spec.tsx

mngr · 2024-05-27T16:57:38Z

Captura de ecrã 2024-05-27, às 17 56 36

When I'm trying to enter quote embraced string like "Gizmo, Widget" it is inserted as 2 separate values

kamilmielnik · 2024-05-28T07:11:41Z

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

+
+    if (newSearchValue !== "") {
+      const values = parseValues(newSearchValue);
+      if (values.length === 1) {


What if values.length > 1 ?

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/utils.ts

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

metabase-bot bot assigned romeovs May 17, 2024

metabase-bot bot added the .Team/QueryingComponents label May 17, 2024

romeovs added the no-backport Do not backport this PR to any branch label May 17, 2024

romeovs changed the title ~~comma in multiselect~~ Allow creating new items by inserting comma in MultiAutocomplete May 17, 2024

romeovs commented May 17, 2024

View reviewed changes

romeovs requested review from nemanjaglumac and ranquild and removed request for ranquild and nemanjaglumac May 17, 2024 14:42

romeovs force-pushed the 42783-comma-in-multiselect branch from 83318af to c97430c Compare May 21, 2024 10:40

romeovs added 5 commits May 21, 2024 13:38

Pass current values to shouldCreate

20af160

Allow comma to create new item

4e50319

Simplify getAvailableSelectItems

0cfcb00

Add unit test for MultiAutocomplete input

b710f39

Use text instead of Text in paste

b96beea

romeovs force-pushed the 42783-comma-in-multiselect branch from c97430c to b96beea Compare May 21, 2024 11:38

romeovs added 2 commits May 21, 2024 15:22

Handle spaces in MultiAutocomplete

ed5f465

Merge branch 'master' into 42783-comma-in-multiselect

e5acb89

romeovs requested a review from a team May 22, 2024 06:47

kamilmielnik approved these changes May 22, 2024

View reviewed changes

romeovs added 7 commits May 22, 2024 15:49

Remove cast

80f032b

Reuse last var

0f95fc4

Use haveLastBeenCalledWith over haveBeenCalledWith

95c94bf

Handle pasting when there is text in the input already

724cda1

Accept quote-delimited values

866cd86

Add info icon

2851aa0

Handle tab as a separator

60b5fe6

romeovs added 3 commits May 24, 2024 11:03

Fix test cases for unsanitized parseValues

c19647c

Add csv-parse

ddee37f

Use csv-parse to parse values

020ef53

romeovs commented May 24, 2024

View reviewed changes

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/util.ts Outdated Show resolved Hide resolved

Apply the correct color to the info icon

59cb331

kamilmielnik reviewed May 24, 2024

View reviewed changes

romeovs and others added 5 commits May 24, 2024 15:17

Rename util to utils

673f71e

Break up tooltip text

e864c44

Only return unique values

2db6c27

Be more accepting around quotes in the middle of unescaped values

7d2b63b

provide Buffer for csv-parse package in storybook

c9ee0fb

romeovs force-pushed the 42783-comma-in-multiselect branch from 805099e to b783140 Compare May 27, 2024 08:34

Use browser-friendly version of csv-parse

bcd93bc

romeovs force-pushed the 42783-comma-in-multiselect branch from b783140 to bcd93bc Compare May 27, 2024 09:35

romeovs added 5 commits May 27, 2024 11:55

Remove unused eslint rule

155cc36

Add specital case for csv-parse to jest config

de5ca35

Put uniqueness check in each state update

c177519

Only add partial value if it is valid

ab8966e

Only add partial value if it is valid

c160e18

Fix test case for FilterValuePicker

a1dab7d

kamilmielnik approved these changes May 28, 2024

View reviewed changes

romeovs and others added 4 commits May 28, 2024 09:42

Just use Set

51e0cc2

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

Allow parsing more than one value

4a0e4dd

Use isValid everywhere it makes sense

c7853ec

Add test for RTL languages

6e9b253

romeovs merged commit b6bb9d1 into master May 28, 2024
108 checks passed

romeovs deleted the 42783-comma-in-multiselect branch May 28, 2024 11:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow creating new items by inserting comma in MultiAutocomplete #42824

Allow creating new items by inserting comma in MultiAutocomplete #42824

romeovs commented May 17, 2024 •

edited

github-actions bot commented May 17, 2024 •

edited

replay-io bot commented May 17, 2024 •

edited

romeovs May 17, 2024

kamilmielnik left a comment

romeovs commented May 22, 2024

romeovs commented May 24, 2024

kamilmielnik left a comment

kamilmielnik May 24, 2024

mngr commented May 27, 2024

kamilmielnik May 28, 2024

romeovs May 28, 2024

Allow creating new items by inserting comma in MultiAutocomplete #42824

Allow creating new items by inserting comma in MultiAutocomplete #42824

Conversation

romeovs commented May 17, 2024 • edited

Description

How to verify

Demo

Checklist

github-actions bot commented May 17, 2024 • edited

replay-io bot commented May 17, 2024 • edited

romeovs May 17, 2024

Choose a reason for hiding this comment

kamilmielnik left a comment

Choose a reason for hiding this comment

romeovs commented May 22, 2024

romeovs commented May 24, 2024

kamilmielnik left a comment

Choose a reason for hiding this comment

kamilmielnik May 24, 2024

Choose a reason for hiding this comment

mngr commented May 27, 2024

kamilmielnik May 28, 2024

Choose a reason for hiding this comment

romeovs May 28, 2024

Choose a reason for hiding this comment

romeovs commented May 17, 2024 •

edited

github-actions bot commented May 17, 2024 •

edited

replay-io bot commented May 17, 2024 •

edited