Add Row Explorer Block

[Ghrehh]

Description

Adds the Row Explorer block.

The Row Explorer block when provided with a data source will provide a card per row of that table, when clicked that card will expand into a view allowing the user to see every column of that row.

There weren't any styles given for the mobile view, so I just did something that seemed sensible, see the gif below.

Mobile styles are achieved via custom css and handlebars, I tried using the conditional display functionality but upon ejecting the component, only the currently visible components would be ejected.

The functionality of the search bar is a little strange, currently we don't have a true onChange handler for the input component, so it only resubmits upon blur or hitting enter.

Gifs:

desktop	mobile

[codecov-commenter]

Codecov Report

Merging #8454 (31ba7ab) into develop (9714df8) will not change coverage. The diff coverage is n/a.

:exclamation: Current head 31ba7ab differs from pull request most recent head cf48fba. Consider uploading reports for the commit cf48fba to get more accurate results

@@           Coverage Diff            @@
##           develop    #8454   +/-   ##
========================================
  Coverage    66.64%   66.64%           
========================================
  Files          118      118           
  Lines         4020     4020           
  Branches       648      648           
========================================
  Hits          2679     2679           
  Misses         939      939           
  Partials       402      402           

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[shogunpurple]

@Ghrehh pulled this down to have a play around - looking great, love the mobile styles as well. This component is awesome.

Just one thing that seems to be missing - after editing the form, I can't save the record that I'm currently editing. Not sure if I'm doing something wrong but can't see anything in the code to allow you to save the record and the savebutton on the formblock seems to be missing.

[shogunpurple]

Ahh - I see what's wrong. The showSaveButton prop hasn't been passed to the formblock inside the row explorer. When I turn that prop on everything works as expected. Pushed that update to the branch 👍

[Ghrehh]

@shogunpurple Ah nice one, oversight on my part. Thanks for pushing up the change.

[deanhannigan]

Hey Gerard, the component came together really well, nice job! Just some minor issues to look into:

• The background and border properties in the custom CSS are replacing the global defaults for the spectrum themes.

Removing these styles from your containers will ensure the global theme values are not overridden

background-color: white;
border: 1px solid rgb(225, 225, 225);

• The variable detailsHeading isn't currently used anywhere

• The form currently doesn't display in the builder as a result of the custom CSS in place. It would be nice to see the structure of the form in the builder as its being configured. The builder has a store variable that can be used to determine any builder specific behaviour $builderStore.inBuilder

~~Is the Select a row to view its fields container necessary? It displays in the builder but doesn't seem to be used in the app itself.~~ This was a local issue.

Any issues, let me know!

[Ghrehh]

Me and @deanhannigan talked about adding a binding that could be used by components to see whether they were currently in the builder or not. This could be used to always show the non-zero-state of the Row Explorer as seeing the form is more useful to the user than just seeing the zero-state. Users could also use this in their custom components to do something similar perhaps.

I did some poking around but I think I need someone with more domain knowledge to show me how to add a binding, I could figure out where the binding definitions are provided, but I'm not sure where the actual data stems from. Perhaps this is better left as a follow up PR anyway. What do you think Dean? I addressed the other points you raised though.

[aptkingston]

Will give this a review myself this morning! Looks great.

[Ghrehh]

@aptkingston Thanks for the in-depth review, I pushed up the changes you requested. Could you give this another look when you get a chance please?