[Vis: Default editor] EUIficate and Reactify the sidebar #49864

sulemanof · 2019-10-31T14:22:11Z

Summary

This resolves #38272.

The state control panel was moved to the sidebar bottom:

When there is an Auto apply button available (Vega, Markdown):

The panel is resizable:

The panel is collapsible:

The PR consists of next sub tasks:

- removal of next angular directives and move the functionality to React rails:
- - vis-editor-sidebar;
- - vis-editor-default;
- - vis-editor-resizer ;
- - collapsible-sidebar;
- get rid of fancy-forms and move the logic to React state;
- handle an internal editor state in React reducers;
- create a common EUI resizer - Resizer component eui#1298;
- get rid of props mutations in input_control_vis;

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

Dev Docs

If you are using the default editor in your VisType visualization definition, remove the editor: 'default' param from it. The default editor controller will be used by default.

The default editor controller receives an optionsTemplate or optionTabs parameter.
These tabs should be React components:

{
    name: 'my_new_vis',
    title: 'My New Vis',
    icon: 'my_icon',
    description: 'Cool new chart',
    editorConfig: {
       optionsTemplate: MyReactComponent // or if multiple tabs are required:
       optionTabs: [
           { title: 'tab 3', editor: MyReactComponent }
       ]
    }
  }

elasticmachine · 2019-10-31T15:36:47Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: fcd0c40

elasticmachine · 2019-11-01T16:29:20Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: d50871e

elasticmachine · 2019-11-05T11:23:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: a691bd6

elasticmachine · 2019-11-06T11:10:12Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: cb76cf0

# Conflicts: # src/legacy/core_plugins/kibana/public/visualize/editor/editor.js # src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts

elasticmachine · 2019-11-06T15:44:38Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 62b7eb6

elasticmachine · 2019-11-11T09:12:17Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 7526ccc

elasticmachine · 2019-11-11T10:40:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 78b88bd

elasticmachine · 2019-11-11T16:32:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 4609e9c

elasticmachine · 2019-11-12T11:48:07Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 0afe33e

elasticmachine · 2019-11-12T15:15:42Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 0b9ddc0

elasticmachine · 2019-11-12T17:24:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 78ccb5e

elasticmachine · 2019-11-13T11:12:52Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: d6729ab

# Conflicts: # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

# Conflicts: # src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.tsx

flash1293 · 2020-01-16T12:38:42Z

src/legacy/ui/public/vis/editors/default/components/sidebar/sidebar.tsx

+              return (
+                <div
+                  key={name}
+                  className={`visEditorSidebar__config ${


nit: could use classNames helper

src/legacy/ui/public/vis/editors/default/default_editor.tsx

flash1293 · 2020-01-16T13:16:54Z

There is a small margin problem in the "custom extends" settings of an axis:

On master it looks like this:

flash1293 · 2020-01-16T13:17:20Z

Markdown vis has an additional line above the tabs for some reason (same on input controls) - is this intended?:

flash1293

This looks good to me, left some small nits. Great work @sulemanof , this is a big improvement 🎉

# Conflicts: # src/legacy/core_plugins/kibana/public/visualize/plugin.ts # src/legacy/core_plugins/visualizations/public/legacy_imports.ts # src/plugins/expressions/public/functions/var.ts

sulemanof · 2020-01-17T09:27:37Z

Markdown vis has an additional line above the tabs for some reason (same on input controls) - is this intended?:

There the div with class visEditorSidebar__indexPatternPlaceholder was added in places where a vis doesn't have an index pattern. The markdown and vega are among those. This intends to separate tab buttons and sidebar additional controls. This was introduced by @cchaos in this commit

sulemanof · 2020-01-17T11:02:41Z

🎉🎉🎉

* EUIficate the sidebar * Create a state reducer and a state context * Create an editor context and actions * Improve types * Apply aggs reordering * Fix functionality * Improve types * Fix sub_agg changes * Remove legacy dependencies * Watch dirty state * Fix dirty state changes * Update actions and reducers * Handle keyboard submit * Apply editor form validation * Remove fancy forms * Update validation * Use embeddable instead of visualize loader * Add auto apply behavior * Remove legacy styles * Remove the sidebar * Restrict responsive to the bottom_bar * Upgrade @elastic/eui to v14.10.0 * Replace EuiBottomBar with EuiControlBar * Get rid of mutations in control vis * Revert "Upgrade @elastic/eui to v14.10.0" This reverts commit 2cd86c5. * Replace bottom bar with a control panel for sidebar * Replace selectors * Use editor resizer * Apply selectors * Change selectors * Fix sub agg change values * Add collapse button * Fix tests * Get rid of editor editor_state_context, simplify the code * Fix jest tests, update snapshots * Fix types * Moving collapse button to right of index pattern * Tweaks bottom buttons * Moved Vega buttons so they don’t scroll away * Fix responsiveness * Resolve UI comments * Fix console resizer * Update dev docs * Bail out of additional render in metrics and axes * Apply performance optimizations for metrics and axis panel * Remove unused translations * Use debounce when autoapply enabled Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> # Conflicts: # x-pack/legacy/plugins/rollup/public/visualize/editor_config.js # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

…t-of-legacy * 'master' of github.com:elastic/kibana: (142 commits) [Vis] Move Timelion Vis to vis_type_timelion (elastic#52069) Deprecate `chrome.navlinks.update` and add documentation (elastic#54893) [ML] Single Metric Viewer: Fix time bounds with custom strings. (elastic#55045) [Vis: Default editor] EUIficate and Reactify the sidebar (elastic#49864) [Mappings editor] Fix cannot set boolean value for "null_value" param (elastic#55015) [SIEM] Adds support for apm-* to the network map (elastic#54876) [Reporting] Define shims of legacy dependencies (elastic#54082) Resolver is overflow: hidden to prevent obscured elements from showing up (elastic#55076) Upgraded EUI to 18.2.1 (elastic#55090) [Maps] Support styles on agg fields with _of_ in name (elastic#54965) Remove xpack_main requirement, it's no longer in use (elastic#55060) Fix Snapshots Policies Alignment Issue in IE11 (elastic#54866) first rule cuts (elastic#54990) [DOCS] Adds geocentroid note to coordinate map (elastic#54389) [Canvas] Fixes the Copy Post Url link (elastic#54831) Fixes bugs with full screen filters (elastic#54792) [ML] Fix decoding in the URL state (elastic#54915) Remove redundant `x-pack/typings`. (elastic#55042) [SIEM][Detection Engine] Adds critical missing status route to prepackaged rules Generate legacy vars when rendering all applications (elastic#54768) ... # Conflicts: # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

…5162) * EUIficate the sidebar * Create a state reducer and a state context * Create an editor context and actions * Improve types * Apply aggs reordering * Fix functionality * Improve types * Fix sub_agg changes * Remove legacy dependencies * Watch dirty state * Fix dirty state changes * Update actions and reducers * Handle keyboard submit * Apply editor form validation * Remove fancy forms * Update validation * Use embeddable instead of visualize loader * Add auto apply behavior * Remove legacy styles * Remove the sidebar * Restrict responsive to the bottom_bar * Upgrade @elastic/eui to v14.10.0 * Replace EuiBottomBar with EuiControlBar * Get rid of mutations in control vis * Revert "Upgrade @elastic/eui to v14.10.0" This reverts commit 2cd86c5. * Replace bottom bar with a control panel for sidebar * Replace selectors * Use editor resizer * Apply selectors * Change selectors * Fix sub agg change values * Add collapse button * Fix tests * Get rid of editor editor_state_context, simplify the code * Fix jest tests, update snapshots * Fix types * Moving collapse button to right of index pattern * Tweaks bottom buttons * Moved Vega buttons so they don’t scroll away * Fix responsiveness * Resolve UI comments * Fix console resizer * Update dev docs * Bail out of additional render in metrics and axes * Apply performance optimizations for metrics and axis panel * Remove unused translations * Use debounce when autoapply enabled Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> # Conflicts: # x-pack/legacy/plugins/rollup/public/visualize/editor_config.js # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

* EUIficate the sidebar * Create a state reducer and a state context * Create an editor context and actions * Improve types * Apply aggs reordering * Fix functionality * Improve types * Fix sub_agg changes * Remove legacy dependencies * Watch dirty state * Fix dirty state changes * Update actions and reducers * Handle keyboard submit * Apply editor form validation * Remove fancy forms * Update validation * Use embeddable instead of visualize loader * Add auto apply behavior * Remove legacy styles * Remove the sidebar * Restrict responsive to the bottom_bar * Upgrade @elastic/eui to v14.10.0 * Replace EuiBottomBar with EuiControlBar * Get rid of mutations in control vis * Revert "Upgrade @elastic/eui to v14.10.0" This reverts commit 2cd86c5. * Replace bottom bar with a control panel for sidebar * Replace selectors * Use editor resizer * Apply selectors * Change selectors * Fix sub agg change values * Add collapse button * Fix tests * Get rid of editor editor_state_context, simplify the code * Fix jest tests, update snapshots * Fix types * Moving collapse button to right of index pattern * Tweaks bottom buttons * Moved Vega buttons so they don’t scroll away * Fix responsiveness * Resolve UI comments * Fix console resizer * Update dev docs * Bail out of additional render in metrics and axes * Apply performance optimizations for metrics and axis panel * Remove unused translations * Use debounce when autoapply enabled Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* upstream/master: (83 commits) [Reporting] Fix map tiles not loading by using Chrome's Remote Protocol (elastic#55137) [Data Plugin] combine autocomplete provider and suggestions provider (elastic#54451) resolves elastic#53038 - remove references to specific license levels (elastic#53858) highlighting rules should still know about url parts when in sql state (elastic#55200) [Metric] convert mocha tests to jest (elastic#54054) [skip-ci] Update vector styling docs for 7.6 UI changes and new features (elastic#55087) Fix enable API to schedule task after alert is updated (elastic#55095) chore(NA): add 7.6 branch to the list of backport branches (elastic#54998) Convert tests to jest in vis_type_timeseries/public & common folders (elastic#55023) [ML] Accessibility fix for structural markup on table rows (elastic#55075) [Mappings editor] include/exclude fields only support custom options (elastic#54949) [Vis] Move Timelion Vis to vis_type_timelion (elastic#52069) Deprecate `chrome.navlinks.update` and add documentation (elastic#54893) [ML] Single Metric Viewer: Fix time bounds with custom strings. (elastic#55045) [Vis: Default editor] EUIficate and Reactify the sidebar (elastic#49864) [Mappings editor] Fix cannot set boolean value for "null_value" param (elastic#55015) [SIEM] Adds support for apm-* to the network map (elastic#54876) [Reporting] Define shims of legacy dependencies (elastic#54082) Resolver is overflow: hidden to prevent obscured elements from showing up (elastic#55076) Upgraded EUI to 18.2.1 (elastic#55090) ...

kibanamachine · 2020-04-10T17:03:45Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: f4a60ae

History

💚 Build #21026 succeeded f4a60ae
💚 Build #20501 succeeded f9345c3
💚 Build #20491 succeeded 9c895d1
💔 Build #20163 failed b3c3422
💚 Build #20085 succeeded 2d52c0d

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

sulemanof added 3 commits October 29, 2019 13:30

EUIficate the sidebar

3a39ece

Merge remote-tracking branch 'upstream/master' into EUIfication/sidebar

abb59f0

Create a state reducer and a state context

fcd0c40

sulemanof added 2 commits November 1, 2019 17:28

Create an editor context and actions

c1bd92c

Improve types

d50871e

sulemanof added 2 commits November 4, 2019 11:50

Apply aggs reordering

c8c4a85

Fix functionality

a691bd6

Improve types

cb76cf0

Merge remote-tracking branch 'upstream/master' into EUIfication/sidebar

62b7eb6

# Conflicts: # src/legacy/core_plugins/kibana/public/visualize/editor/editor.js # src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts

Fix sub_agg changes

a46ec08

sulemanof force-pushed the EUIfication/sidebar branch from 7526ccc to a46ec08 Compare November 11, 2019 09:11

sulemanof added 2 commits November 11, 2019 12:21

Remove legacy dependencies

78b88bd

Watch dirty state

8041626

Fix dirty state changes

4609e9c

Update actions and reducers

0afe33e

Handle keyboard submit

0b9ddc0

Apply editor form validation

78ccb5e

Remove fancy forms

d6729ab

sulemanof added 5 commits January 14, 2020 18:20

Fix comments

84e874b

Merge remote-tracking branch 'upstream/master' into EUIfication/sidebar

b3c3422

# Conflicts: # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

Remove unused translations

6ba4465

Merge remote-tracking branch 'upstream/master' into EUIfication/sidebar

9c895d1

# Conflicts: # src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.tsx

Use debounce when autoapply enabled

f9345c3

flash1293 reviewed Jan 16, 2020

View reviewed changes

flash1293 approved these changes Jan 16, 2020

View reviewed changes

Merge remote-tracking branch 'upstream/master' into EUIfication/sidebar

f4a60ae

# Conflicts: # src/legacy/core_plugins/kibana/public/visualize/plugin.ts # src/legacy/core_plugins/visualizations/public/legacy_imports.ts # src/plugins/expressions/public/functions/var.ts

sulemanof merged commit 3e46060 into elastic:master Jan 17, 2020

sulemanof deleted the EUIfication/sidebar branch January 17, 2020 11:02

sulemanof mentioned this pull request Jan 17, 2020

[7.x] [Vis: Default editor] EUIficate and Reactify the sidebar (#49864) #55162

Merged

sulemanof added backported v7.7.0 labels Jan 17, 2020

This was referenced Jan 22, 2020

[Console] Styling for split panel #55530

Merged

Move SplitPanel to kibana_react #55529

Merged

maryia-lapata mentioned this pull request Jan 27, 2020

Cannot change the interval of date histogram agg on Default Editor #55970

Closed

tylersmalley mentioned this pull request Mar 10, 2020

Kibana freezing form Terms Sibling Pipeline Aggregation #58971

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Vis: Default editor] EUIficate and Reactify the sidebar #49864

[Vis: Default editor] EUIficate and Reactify the sidebar #49864

sulemanof commented Oct 31, 2019 •

edited by jinmu03

Loading

elasticmachine commented Oct 31, 2019

elasticmachine commented Nov 1, 2019

elasticmachine commented Nov 5, 2019

elasticmachine commented Nov 6, 2019

elasticmachine commented Nov 6, 2019

elasticmachine commented Nov 11, 2019

elasticmachine commented Nov 11, 2019

elasticmachine commented Nov 11, 2019

elasticmachine commented Nov 12, 2019

elasticmachine commented Nov 12, 2019

elasticmachine commented Nov 12, 2019

elasticmachine commented Nov 13, 2019

flash1293 Jan 16, 2020

flash1293 commented Jan 16, 2020

flash1293 commented Jan 16, 2020 •

edited

Loading

flash1293 left a comment

sulemanof commented Jan 17, 2020

sulemanof commented Jan 17, 2020

kibanamachine commented Apr 10, 2020

[Vis: Default editor] EUIficate and Reactify the sidebar #49864

[Vis: Default editor] EUIficate and Reactify the sidebar #49864

Conversation

sulemanof commented Oct 31, 2019 • edited by jinmu03 Loading

Summary

Checklist

For maintainers

Dev Docs

elasticmachine commented Oct 31, 2019

💔 Build Failed

elasticmachine commented Nov 1, 2019

💔 Build Failed

elasticmachine commented Nov 5, 2019

💔 Build Failed

elasticmachine commented Nov 6, 2019

💔 Build Failed

elasticmachine commented Nov 6, 2019

💔 Build Failed

elasticmachine commented Nov 11, 2019

💔 Build Failed

elasticmachine commented Nov 11, 2019

💔 Build Failed

elasticmachine commented Nov 11, 2019

💔 Build Failed

elasticmachine commented Nov 12, 2019

💔 Build Failed

elasticmachine commented Nov 12, 2019

💔 Build Failed

elasticmachine commented Nov 12, 2019

💔 Build Failed

elasticmachine commented Nov 13, 2019

💔 Build Failed

flash1293 Jan 16, 2020

Choose a reason for hiding this comment

flash1293 commented Jan 16, 2020

flash1293 commented Jan 16, 2020 • edited Loading

flash1293 left a comment

Choose a reason for hiding this comment

sulemanof commented Jan 17, 2020

sulemanof commented Jan 17, 2020

kibanamachine commented Apr 10, 2020

💔 Build Failed

History

sulemanof commented Oct 31, 2019 •

edited by jinmu03

Loading

flash1293 commented Jan 16, 2020 •

edited

Loading