[Composable template] Preview composite template #72598

sebelga · 2020-07-21T09:56:15Z

This PR adds the "Preview template" functionality to composable templates.

The user can preview the final composite template in 3 places

In the details flyout

At any time during the creation/editing wizard flow (clicking on the "Preview template" button)

In the final "Review" step of the wizard, under the "Preview" tab

How to test

Click on a composable template in the table and verify that the preview tab renders correctly in the flyout
In the wizard (creation or editing), there should be a button to open the "Preview" flyout. If you are on the "Component templates" step or the "Mappings" step, you should be able to switch the flyout content (by clicking on a Component template name or by clicking the "edit" icon on a mappings field).

If you want to test the back and forth between flyouts you might need to set the zoom level to 50% in order to see the "Preview template" button all the time. See the image below

Notes for the mappings editor

I had to lift the <StateProvider /> up and wrap the app with it so we consume its component anywhere in the app. For this PR we needed to be able to open the <EditField /> flyout content inside the global Flyout.

This change implied a big refactor, with logic that got moved in new files but that hasn't been touched.

Note for reviewer

I would recommend to follow the commits history for the review as it builds incrementally the feature and changes made.

Release notes

We have added the possibility to preview the final composite of a composable template. The user will be able to see this preview from the creation or editing wizard flow, or when looking at the details of a composable template.

TODO

In follow-up PRs I will

Add tests for the FlyoutMultiContent
Add a README.md for the FlyoutMultiContent
Text copy review
Add UI component that lets the user select which part of the preview he wants to see
Improve UX around the "Update" button

elasticmachine · 2020-07-21T09:58:45Z

Pinging @elastic/es-ui (Team:Elasticsearch UI)

apmmachine · 2020-07-21T13:52:38Z

💚 Build Succeeded

Expand to view the summary

Build stats

Build Cause: [Pull request #72598 updated]
Start Time: 2020-07-21T13:50:27.356+0000
Duration: 2 min 8 sec

jloleysens

@sebelga Great work!

I think the preview tab is going to be super helpful to users and really helps solidify how component templates and templates fit together 🤓!

Overall I only found one bug that I think we should look into, but otherwise I think this is good to go!

UI/UX

I noticed the flyout has an "Update" button, but it didn't look I needed to ever press it. Is there a case in which you think this button will be needed? If not, perhaps we can remove it.

As mentioned in the code comments, it would be good to get es-docs@ to take a look at the new copy.

Bugs

When editing a mapping in the mappings editor, selecting "Field type" and pressing backspace resulted in the UI crashing with:

...lugins/es_ui_shared/__packages_do_not_import__/flyout_multi_content/flyout_multi_content.tsx

...onents/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx

...k/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx

x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx

cjcenizal · 2020-07-21T16:31:25Z

@sebelga I love how we're making the interaction between index templates and component templates more transparent to users with this feature! At the same time I have some UX concerns. Can you help me understand a couple things?

What's the thinking behind exposing the user to the entire set of composed configurations at every step?

For example, let's say I'm looking at the component templates step:

At this step, I'm asking myself, "How do these component templates combine?" In the current UX, the preview shows the final output, so if a configuration from a later step overrides the configuration of the component templates I see here, then I will be confused about the connection between the information on the screen. If we show the user just the result of the component templates they've selected (which can be implemented with a special simulate call) then we can avoid this confusion. I'd assume the user would go to the Review step any time they want to see the end result.

Similarly, let's say I'm editing settings:

At this point the question I'm asking myself is, "How do these settings override those of the component templates?" But if the preview is full of mappings information, I need to hunt through the preview to find the information I need. This is really frustrating when the object is large. This UX pain point applies to the mappings and aliases tabs too.

Did you consider a UX in which we only show the user pertinent information at every step? I think there are some interesting UX benefits we could provide if we explored this approach. For example, we could render errors that are specific to a step by building step-specific simulate requests that exclude configurations from the other steps. I'm picturing the error below rendered next to the Settings JSON editor:

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>

sebelga · 2020-07-22T08:05:38Z

Thanks for the review @jloleysens and @cjcenizal !

I noticed the flyout has an "Update" button, but it didn't look I needed to ever press it. Is there a case in which you think this button will be needed? If not, perhaps we can remove it.

I haven't noticed that, I will check 👍 Do you remember in which flyout this occurs? I guess it is not the mappings editor "edit field" one 😊

When editing a mapping in the mappings editor, selecting "Field type" and pressing backspace resulted in the UI crashing with

I will look into that. I wonder if that is in master already or not... I (almost) never use backpack! 😊

@cjcenizal I hear your concerns. I personally prefer not to think for our users. Some might want to see the full template, some might be bothered by too much information. I don't think that we are (yet) in a position to decide for them and narrow what they see and don't see. I prefer to leave them the choice of that decision.

I suggest to have either a filter dropdown select that lets the user do the narrowing himself with the following options:

Preview

v Components
v Mappings
v Settings
x Aliases

or the same but in a horizontal line of checkboxes (if they fit in one line)

Would that help alleviate your concerns?

sebelga · 2020-07-22T14:43:50Z

I noticed the flyout has an "Update" button, but it didn't look I needed to ever press it.

@jloleysens This is needed if you have the flyout open and for example you add a component template or you edit the index settings. At that moment you need to click the "Update" button to see the changes reflected.

cjcenizal · 2020-07-22T15:57:55Z

@sebelga I think a UI component that lets you select which part of the preview you want to see is a great solution!

To the discussion about the "Update" button, I noticed that there isn't any feedback about whether it needs to be pressed or not. This would contribute to the confusion JL experienced (I experienced this too). I've seen this solved in other apps by disabling the button and showing some kind of message, e.g. "Up to date", when the preview is up-to-date. I also suggest setting isLoading={true} and replacing the preview with some sort of loading state when the preview request is in flight.

sebelga · 2020-07-23T06:42:02Z

@jloleysens I've addressed all your feedback, do you mind having another look? Cheers!

sebelga · 2020-07-23T06:46:09Z

@cjcenizal For the improved UX of the filtering of the preview and the "Update" button I will address them in a separate PR. I want to make sure that this PR gets merged today.

For the "Update" button improvement this will require some work as currently the mappings editor sends change update on each keystroke of the forms. Here we only want to be alerted when a new property has been added or deleted. So the onChange handler has to be revisited.
I had that issue when I tried to add the "Live update" toggle I had envisioned. I had too many updates from the mappings editor and thus making loads of unnecessary HTTP requests.

jloleysens

@sebelga Thanks for addressing those points! I read the code for the bug fix (not allowing empty types) and am satisfied that it is fixed - did not re-test locally.

sebelga · 2020-07-23T11:55:20Z

@elasticmachine merge upstream

kibanamachine · 2020-07-23T22:00:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 4721a18

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
esUiShared	177	+2	175
indexManagement	175	+3	172
total	-	+5	-

async chunks size

id	value	diff	baseline
indexManagement	1.5MB	+23.2KB	1.5MB

page load bundle size

id	value	diff	baseline
esUiShared	1009.1KB	+7.5KB	1001.7KB
indexManagement	256.8KB	+1.3KB	255.5KB
total	-	+8.8KB	-

History

💔 Build #63880 failed b734378
💔 Build #63825 failed 7f7eacb
💔 Build #63524 failed ecb6e38
💔 Build #63284 failed bd3b48d
💔 Build #63229 failed b5b6aa1

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* master: (111 commits) Remove flaky note from gauge tests (elastic#73240) Convert functional vega tests to ts and unskip tests (elastic#72238) [Graph] Unskip graph tests (elastic#72291) Add default Elasticsearch credentials to docs (elastic#72617) [APM] Read body from indicesStats in upload-telemetry-data (elastic#72732) The directory in the command was missing the /generated directory and would cause all definitions to be regenerated in the wrong place. (elastic#72766) [KP] use new ES client in SO service (elastic#72289) [Security Solution][Exceptions] Prevents value list entries from co-existing with non value list entries (elastic#72995) Return EUI CSS to Shareable Runtime (elastic#72990) Removed useless karma test (elastic#73190) [INGEST_MANAGER] Make package config name blank for endpoint on Package Config create (elastic#73082) [Ingest Manager] Support DEGRADED state in fleet agent event (elastic#73104) [Security Solution][Detections] Change detections breadcrumb title (elastic#73059) [ML] Fixing unnecessary deleting job polling (elastic#73087) [ML] Fixing recognizer wizard create job button (elastic#73025) [Composable template] Preview composite template (elastic#72598) [Uptime] Use manual intervals for ping histogram (elastic#72928) [Security Solution][Endpoint] Task/policy save modal text change, remove duplicate policy details text (elastic#73130) [Maps] fix tile layer attibution text and attribution link validation errors (elastic#73160) skip ingest pipeline api tests ...

sebelga added 13 commits July 21, 2020 10:23

Add server api route

683ab46

Add prop to FormWizard to customize right side of nav

2b4e5f3

Add <SimulateTemplateFlyout /> component

2b50be6

Fix step logistics hook deps

90219e8

Fix legacy index templates documentation link

66df8bf

Add preview in Review step for composable templates

84e6c13

Hide "Preview template" button on "logistics" and "review" steps

27a3c28

Add "Preview" tab to details panel of composable templates

7bbd6f6

Add FlyoutMultiContent to manage flyout globally

0e8d5f9

Add FlyoutMultiContent to manage flyout globally (2)

d80e07a

Use FlyoutMultiContent for ComponentTemplateDetails and SimulateTemplate

c340f57

Refactor mappings editor to lift StateProvider up

ecc0319

Fix component integration tests

b5b6aa1

sebelga requested a review from a team as a code owner July 21, 2020 09:56

sebelga requested a review from jloleysens July 21, 2020 09:58

sebelga added Feature:Index Management Index and index templates UI Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more v7.10.0 v8.0.0 labels Jul 21, 2020

sebelga added the release_note:enhancement label Jul 21, 2020

sebelga added 2 commits July 21, 2020 15:08

Fix component integration tests

4b2a2cd

Automatically remove content when component unmounts

bd3b48d

jloleysens reviewed Jul 21, 2020

View reviewed changes

Update comment

ecb6e38

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>

Rename "FlyoutMultiContent" to "GlobalFlyout"

b0adb68

sebelga added 3 commits July 22, 2020 18:15

Fix bug when trying to clear the mapping field type

b083c4f

Rename "FlyoutMultiContent" to "GlobalFlyout" (2)

4163264

Address CR feedback and fix tests

7f7eacb

sebelga requested a review from jloleysens July 23, 2020 06:42

jloleysens approved these changes Jul 23, 2020

View reviewed changes

elasticmachine and others added 3 commits July 23, 2020 05:55

Merge branch 'master' into feature/simulate-composable-template

87363c0

Fix TS issue

b734378

Fix TS issue

4721a18

sebelga merged commit 1329b68 into elastic:master Jul 24, 2020

sebelga deleted the feature/simulate-composable-template branch July 24, 2020 05:50

sebelga mentioned this pull request Jul 24, 2020

[7.x] [Composable template] Preview composite template (#72598) #73191

Merged

sebelga added a commit that referenced this pull request Jul 24, 2020

[7.x] [Composable template] Preview composite template (#72598) (#73191)

42b3a79

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

sebelga mentioned this pull request Aug 31, 2020

[Mappings editor] Fix bug when trying to clear the mapping field type #76263

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Composable template] Preview composite template #72598

[Composable template] Preview composite template #72598

sebelga commented Jul 21, 2020 •

edited

Loading

elasticmachine commented Jul 21, 2020

apmmachine commented Jul 21, 2020

Build stats

jloleysens left a comment

cjcenizal commented Jul 21, 2020

sebelga commented Jul 22, 2020 •

edited

Loading

sebelga commented Jul 22, 2020

cjcenizal commented Jul 22, 2020

sebelga commented Jul 23, 2020

sebelga commented Jul 23, 2020

jloleysens left a comment

sebelga commented Jul 23, 2020

kibanamachine commented Jul 23, 2020

[Composable template] Preview composite template #72598

[Composable template] Preview composite template #72598

Conversation

sebelga commented Jul 21, 2020 • edited Loading

How to test

Notes for the mappings editor

Note for reviewer

Release notes

TODO

elasticmachine commented Jul 21, 2020

apmmachine commented Jul 21, 2020

💚 Build Succeeded

Build stats

jloleysens left a comment

Choose a reason for hiding this comment

UI/UX

Bugs

cjcenizal commented Jul 21, 2020

sebelga commented Jul 22, 2020 • edited Loading

sebelga commented Jul 22, 2020

cjcenizal commented Jul 22, 2020

sebelga commented Jul 23, 2020

sebelga commented Jul 23, 2020

jloleysens left a comment

Choose a reason for hiding this comment

sebelga commented Jul 23, 2020

kibanamachine commented Jul 23, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

page load bundle size

History

sebelga commented Jul 21, 2020 •

edited

Loading

sebelga commented Jul 22, 2020 •

edited

Loading