General purpose search form component

[chillu]

Parent story: #1777

Acceptance Criteria

• I can type in a search term
• There's a configurable placeholder
• I can clear my search term input (both in collapsed and expanded view)
• I can toggle a view with more advanced search inputs
• The advanced search inputs are configurable via a form schema
• There are event hooks for triggering a search and clearing search results

Notes

• Designs: https://invis.io/FTG16IYV5KB#/299750159_POC_CMS_Search_Menu_C3
• Excludes search filter tags
• To be added to pattern library
• Related: New Search UI for AssetAdmin
• Related: New Search UI for Pages

Tasks

• Set up component
• Define reducer, state, actions
• Update usage doc
• Update Pattern lib
• Write unit test
• Update AssetAdmin to use the new search component instead (technically not part of the card, but it gives me something to test the component against and it won't be very long).

Pull requests

• NEW General purpose search form component silverstripe-admin#572
• FIX reference new search component. webpack-config#23

Related PRs

• ENHANCEMENT Use the new general purpose search component. silverstripe-asset-admin#812 You can use this one to see the new Search component in action.

[maxime-rainville]

Doesn't https://github.com/silverstripe/silverstripe-asset-admin/blob/1/client/src/components/Search/Search.js already a cover lot of the points in the acceptance critera?

I'm thinking I might be better moving it under admin and working from there.

[maxime-rainville]

The asset admin search components looks like this right now:

<Search
    onSearch={this.handleDoSearch}
    id="AssetSearchForm"
    searchFormSchemaUrl={searchFormSchemaUrl}
    filters={filters}
    formData={{}}
    />

filters receives GET URL param.
formData is populated from the redux state.
searchFormSchemaUrl is mandatory and allows a form schema to be passed.
AssetAdmin give it a folderId props which it doesn't do anything with.

I would tweak things this way.

<Search
    onSearch={this.handleDoSearch}
    onClear={this.clear}
    onShowFilters={this.showFilter}
    onHideFilters={this.showFilter}
    onShow={this.showSearch}
    onHide={this.hideSearch}

    show={true}
    hiddeable={false}
    showFilters={true}
    toggable={true}
    placeholder={searchTerm}
    id="RandomSearchForm"
    formSchemaUrl={searchFormSchemaUrl}
    filters={filters}
    formData={{}}
    />

• placeholder is optional and will default to Search ...
• toggable is true and show is false, a search button will be displayed without a search box. Clicking the search button will fire onShow.
• toggable is true and show is true, a search box will be displayed with an X allowing the user the hide the search box. Clicking the X will fire onHide.
• toggable is false and show is false, nothing will show. Some other component will have to open the search.
• toggable is false and show is true, a search box will be displayed with an X allowing the user the hide the search box. Clicking the X will fire onHide.
  formSchemaUrl will be optional. If not set no advance filters will be available.
• if hiddeable is false, the X mark will never show.

Edit

On second thought, I'll merge hiddeable and toggable into a displayBehavior that can be set to blank, hiddeable or toggable.

[maxime-rainville]

I'm almost done with the basic set up of the component and the styling. There's a few question to clear up:

• The current File Search component has an Advanced label when you hover over the drop down icon. That would clash with the clear/enter label, so I presume we need ditch this label.
• There's a clear label that appears in some of the mock up, where the
  sometimes appear. It's not immediately apparent to me when I should display enter and when I should display clear.

[maxime-rainville]

Yeah finally got it over line.

Here's what it looks like. https://youtu.be/xNFkyLOgrzg

[robbieaverill]

Looks awesome! Does the content area need a loading indicator to prevent the search button from rendering half way off the container? 😛

[maxime-rainville]

I've made some adjustments based on @clarkepaul's feedback: https://youtu.be/eAyTQYW-kXM

• The bottom shadow will now display over the file side panel.
• The Advanced fitler collapsable will now line up with the drop down button.
• There's now a clear button showed directly in the search box where the [enter] would be shown as per the mock ups.

Getting the switch between the [enter] hint and clear button ended up being a bit of a mission, because I had to track if the search form was dirty and make sure it got reset to pristine on search.

The enter hint will show if the search box has the focus and is dirty.

The clear button will show if there's data to clear and if the enter hint is not showing.

edit
I'm not quite done. I still need to write some unit test for the new logic and fix linting.

[chillu]

Looks great, those Youtube previews are super helpful for low friction review. Great to see the pattern library being actively used as well

[clarkepaul]

Functionality is working great :), do we have control over how the search suggested results appears?

[maxime-rainville]

The suggested results you see in the vid is just the browser's native auto-suggest features. It remembers values you posted in the form previously and will offer them to you again.

We could use autocomplete=off on the input field and provide our own auto suggest feature, but that would probably need to be another card.

[maxime-rainville]

@lukereative and I had a catch up with @newleeland today. That should be be last changes to this guy ... fingers crossed. Here's what's been changed

• Got rid of the blue glow and blue border on focus.
• Only display the shadow when the Search input box has the focus or when the advanced filters are open.
• The clear button in the search box will now focus on the search box after click.
• The clear button in the advanced filters form will now focus on the first field after click.

https://youtu.be/YEhsHme3pyk