Edit search label in embed config

[emilyhu0106]

Overview

Update embedded map UI to add a "Text search label" and search sidebar UI to show custom label which is set on the EmbedConfig

Connects #1534

Demo

Embed Config page

Embedded Map

Testing Instructions

• Run ./scripts/server and log in as any users with embed permissions (e.g. c2@example.com)
• Go to the Setting - Embed page to set the search label config
  • The info text is descriptive enough for users
  • When no fields are marked searchable, the custom search box is reset to the default text and disabled.
  • No lag during typing
  • If the text search label is blank, it is replaced with the default text
• Go to preview and embed mode map
  • The search label changes accordingly

Checklist

• fixup! commits have been squashed
• CI passes after rebase
• CHANGELOG.md updated with summary of features or fixes, following Keep a Changelog guidelines

[emilyhu0106]

In the issue #1534 description we have

Update API to allow passing text_search_label when updating EmbedConfig
Normalize empty string to null

When I am implementing this change, I realize that whenever text_search_label is empty string or null, it will be updated into the default text. Should this normalization be achieved at API level?

[emilyhu0106]

Update the timeout interval to 1000 ms since this is more practical to finish typing in the text input; 500 ms pause will cause a lag when typing a bit slower

[emilyhu0106]

The placeholder text is the same as the text search label when it is embed mode and not default text.

[emilyhu0106]

For the search label input component, it only cares about if any field is searchable

[TaiWilkin]

Taking a look now

[TaiWilkin]

When I am implementing this change, I realize that whenever text_search_label is empty string or null, it will be updated into the default text. Should this normalization be achieved at API level?

I think it's fine that we're managing the change to default text on the UI only, as it allows us to have a single source of truth for the default text.

[TaiWilkin]

As a whole this is working very well. The search text label change in embed config is being applied smoothly and consistently.
I found a couple of anomalies as I was testing the search input:

• The initial content of the text input is blank, but is updated when I click into it. You might be able to fix that by replacing empty text with the DEFAULT_SEARCH_TEXT here. The downside of that approach is that if they leave the field blank long enough that it auto-saves, the text will get replaced with the default value. You could work around that by preventing autosaving the embed config while the textbox is blank (and only saving a blank field / replacing the text on blur). Let me know if you'd like to pair on that approach.
• When I enter multiple spaces, then click away from the textbox, it stays blank; however, if I click back into the box and then click out again without changing anything, it is replaced with the default text. I suggest using .trim() on the text when you check to see if the field is blank.

I'm not sure about the descriptive content, so I've tagged @lederer for review to give this a look over as well.

[lederer]

This is neat. Thanks for putting this together. I left some comments.

Currently if no "searchable" checboxes are checked, the input is disabled. This is good! Can you also make the entire subsection grayed out? Maybe just set the opacity of it to, say, 60%.

[lederer]

Thanks for making those changes. Few more tweaks requested in some code comments. Almost there!

[emilyhu0106]

Thanks for making those changes. Few more tweaks requested in some code comments. Almost there!

I made the changes accordingly. Please take another look, thank you!

[TaiWilkin]

Great job working through those changes! The fix for the default text onChange vs onBlur issue was surprisingly complicated to resolve, but you did a good job working through it.

[emilyhu0106]

Thank you both for reviewing!