(feat) add autocompletion for repo meta creation page

[erzhtor]

Part of https://github.com/sourcegraph/pr-faqs/issues/96.

Test plan

• sg start
• Enable repository-metadata feature flag
• Open any repo page repo meta setting page, example: https://sourcegraph.test:3443/github.com/sourcegraph/sourcegraph/-/settings/metadata
• Check that key input suggests similar existing repo metadata when typing

Screenshot

Screen.Recording.2023-05-16.at.16.59.26.mov

[sourcegraph-buildkite]

Bundle size report 📦

Initial size	Total size	Async size	Modules
0.04% (+1.04 kb)	-0.01% (-1.68 kb)	-0.02% (-2.72 kb)	0.00% (0)

Look at the Statoscope report for a full comparison between the commits 447770c and 0ed8fe3 or learn more.

Open explanation

• Initial size is the size of the initial bundle (the one that is loaded when you open the page)
• Total size is the size of the initial bundle + all the async loaded chunks
• Async size is the size of all the async loaded chunks
• Modules is the number of modules in the initial bundle

[sourcegraph-bot]

📖 Storybook live preview

[toolmantim]

So great to see this come to life! Nice work.

I can see the auto-complete highlighting immediately as you type, but the filtering happens after a debounce/delay. I think people expect things to be more immediate, vs waiting to pause? Batching/delaying/trailing input is probably okay, but waiting for input to pause seems a bit old-school. Could we make the filtering immediate too?

Could we sort the auto-complete options same as we do the list?

I like what you've done with the key:value auto-complete, and I listened to you and @ryphil discuss the pros and cons in the call recording. But I think we should change it to autocomplete for key only on the key input. And values for the values input (but scoped based on the key, or no autocomplete if no key is set). I think this aligns more to people's existing experience with autocomplete, vs having to learn this other way of it working (autocomplete affecting two inputs).

And finally… I spotted one bug, but I've no idea how I made it happen. For this "oss" tag it's appearing twice in the autocomplete 🤔

[sourcegraph-bot]

Codenotify: Notifying subscribers in OWNERS files for diff d71c4a8...447770c.

No notifications.

[erzhtor]

Thanks @toolmantim for the review and feedback!

I can see the auto-complete highlighting immediately as you type, but the filtering happens after a debounce/delay. I think people expect things to be more immediate, vs waiting to pause? Batching/delaying/trailing input is probably okay, but waiting for input to pause seems a bit old-school. Could we make the filtering immediate too?

I intentionally used debouncing, to not overload backend with suggestion queries. But I agree that probably it would be better to make it more instantenous, so changed to throttle approach.

Could we sort the auto-complete options same as we do the list?

I used sorting based on particular key:value pair usage count, so if the meta is used in more repos, it will appear higher in rank. However with separate key and value suggestion approach it make sense to just order alphabetically I think, updated.

I like what you've done with the key:value auto-complete, and I listened to you and @ryphil discuss the pros and cons in the call recording. But I think we should change it to autocomplete for key only on the key input. And values for the values input (but scoped based on the key, or no autocomplete if no key is set). I think this aligns more to people's existing experience with autocomplete, vs having to learn this other way of it working (autocomplete affecting two inputs).

Got it. I agree that your suggestion probably is more UX friendly, updated accordingly.

And finally… I spotted one bug, but I've no idea how I made it happen. For this "oss" tag it's appearing twice in the autocomplete 🤔

Should be fixed with new separate key & value suggestion filters. P.S: It seems that previously form was submitting empty string to value, which made oss:null and oss:"" as not equal. I push a migration to clear all empty values to null and add empty string constraint to create/update meta APIs.

I also, changed input forms to put in a single line, because key:value are usually short and thought to make form more compact. But let me know if you disagree.

Screen.Recording.2023-05-19.at.21.33.16.mov

Would appreciate if you could re-take a look.

[toolmantim]

Looks great! 🙌🏼