[discover] De-angularize index pattern selection by kertal · Pull Request #46347 · elastic/kibana

kertal · 2019-09-23T15:45:04Z

Summary

Convert Discover's index pattern selection to EUI and adapt a new design.

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

…-23-discover-index-pattern-select

elasticmachine · 2019-09-23T17:32:31Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-24T16:30:08Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-24T19:00:52Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…-23-discover-index-pattern-select

elasticmachine · 2019-09-27T08:30:13Z

Pinging @elastic/kibana-app

elasticmachine · 2019-09-27T09:13:33Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns

Looking much better. There were some little differences between this and Lens, so I've opened a design PR against this PR.

You can view/merger it here:
👉 PR → kertal#2

I realize there is more design work to be done here in the future, but the new selector heading was very closely matched to the headings below (Available, Selected). This makes some visual changes to those subheadings.

The height of the index pattern title did not match the heigh of the ComoBox which resulted in a jump, which I have fixed here. Also, the ComboBox dropdown was wider than its parent input, so I've added padding to the entire sidebar and removed it from the child elements.

Let me know if you have questions!

…index-pattern-select Discover sidebar style updates

…github.com:kertal/kibana into kertal-pr-2019-09-23-discover-index-pattern-select

cchaos · 2019-09-27T14:51:29Z

@ryankeairns I actually have a PR that is soon to merge for Lens that changes this behavior to not swap the text for a combo box but instead uses the EuiSelectable in a popover. If you'd like to align these utilities, you can consider the new pattern in this PR #46350 or we can collaborate after 7.5.

kertal · 2019-09-27T15:00:26Z

@ryankeairns I actually have a PR that is soon to merge for Lens that changes this behavior to not swap the text for a combo box but instead uses the EuiSelectable in a popover. If you'd like to align these utilities, you can consider the new pattern in this PR #46350 or we can collaborate after 7.5.

I'm aware of this changes, think we should finish both PRs separately, and then create a shared component for both, shouldn't be much effort

cchaos · 2019-09-27T15:15:47Z

create a shared component for both

Agreed! I already broke the popover itself into its own component.

ryankeairns

LGTM. As discussed, we will incorporate the newer Lens-style design (using a popover instead of Combobox) in a follow-up PR.

kertal · 2019-09-27T15:37:53Z

@ryankeairns thx for the changes btw. 🙏

elasticmachine · 2019-09-27T15:45:43Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

kertal · 2019-09-30T06:27:53Z

@elasticmachine merge upstream

…n-select

elasticmachine · 2019-09-30T07:36:55Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

flash1293

Tested and works, LGTM 👍

Doesn't have to be solved in this PR, but we should definitely give the side bar a min width when migrating it, in some cases there is really little space for the index pattern title:

flash1293 · 2019-09-30T07:42:24Z

src/legacy/ui/public/styles/_legacy/components/_sidebar.scss

-        border: none;
-        border-radius: 0;
-      }
+    .sidebar-item-title,


Out of scope for this PR, but we should move this css to our regular class name style at some point.

flash1293 · 2019-09-30T07:49:10Z

...gacy/core_plugins/kibana/public/discover/components/field_chooser/discover_index_pattern.tsx

+    );
+  }
+
+  /**


Nice catch!

kertal · 2019-09-30T08:59:22Z

Tested and works, LGTM 👍

Doesn't have to be solved in this PR, but we should definitely give the side bar a min width when migrating it, in some cases there is really little space for the index pattern title:

Thx you for the review and valuable hints dear @flash1293 ⚡️ . about the min width, I've already experimented with making the width customizable via drag and drop. this will be the direction to go, and then you should also have a min width. currently this part is still bootstrap/angular, but that will change soon

* Implementation of DiscoverIndexPattern React component * Implement usage of the DiscoverIndexPattern * Adapt tests

kertal added 3 commits September 23, 2019 14:55

DiscoverIndexPattern react component

48224e0

Merge remote-tracking branch 'upstream/master' into kertal-pr-2019-09…

67f16de

…-23-discover-index-pattern-select

Implement usage of the IndexPattern select

8ba7d8a

kertal changed the title ~~Kertal pr 2019 09 23 discover index pattern select~~ De-angularize discover index pattern select Sep 23, 2019

Implementation of change link

666fb29

kertal changed the title ~~De-angularize discover index pattern select~~ De-angularize discover index pattern selection Sep 24, 2019

Adapt tests

62e27e6

kertal self-assigned this Sep 26, 2019

Merge remote-tracking branch 'upstream/master' into kertal-pr-2019-09…

5b9f497

…-23-discover-index-pattern-select

kertal changed the title ~~De-angularize discover index pattern selection~~ [discover] De-angularize discover index pattern selection Sep 26, 2019

kertal changed the title ~~[discover] De-angularize discover index pattern selection~~ [discover] De-angularize index pattern selection Sep 26, 2019

kertal added 2 commits September 27, 2019 10:03

Catch console warning when hiding/removing the EuiCombo

754d589

add comments + improve variable naming

adbd509

kertal marked this pull request as ready for review September 27, 2019 08:25

kertal requested a review from a team as a code owner September 27, 2019 08:25

kertal requested review from a team and flash1293 September 27, 2019 08:29

kertal added the Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// label Sep 27, 2019

kertal added Feature:Discover Discover Application release_note:enhancement v8.0.0 v7.5.0 labels Sep 27, 2019

sidebar style updates

e09bbba

ryankeairns requested changes Sep 27, 2019

View reviewed changes

Merge pull request #2 from ryankeairns/kertal-pr-2019-09-23-discover-…

788c53b

…index-pattern-select Discover sidebar style updates

Merge branch 'kertal-pr-2019-09-23-discover-index-pattern-select' of …

1d7a878

…github.com:kertal/kibana into kertal-pr-2019-09-23-discover-index-pattern-select

kertal requested a review from ryankeairns September 27, 2019 15:01

ryankeairns approved these changes Sep 27, 2019

View reviewed changes

Merge branch 'master' into kertal-pr-2019-09-23-discover-index-patter…

3a3d885

…n-select

flash1293 approved these changes Sep 30, 2019

View reviewed changes

kertal merged commit f9cc456 into elastic:master Sep 30, 2019

kertal mentioned this pull request Sep 30, 2019

[7.x] [discover] De-angularize index pattern selection (#46347) #46896

Merged

kertal added a commit to kertal/kibana that referenced this pull request Sep 30, 2019

[discover] De-angularize index pattern selection (elastic#46347)

2472950

* Implementation of DiscoverIndexPattern React component * Implement usage of the DiscoverIndexPattern * Adapt tests

kertal added a commit that referenced this pull request Oct 2, 2019

[discover] De-angularize index pattern selection (#46347) (#46896)

21a3491

* Implementation of DiscoverIndexPattern React component * Implement usage of the DiscoverIndexPattern * Adapt tests

nickofthyme mentioned this pull request Mar 10, 2020

Search box for changing index pattern in the discover app is no longer searchable via name (aka custom pattern ID) #59432

Closed

+                  );
+                }
+                /**

Conversation

kertal commented Sep 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

elasticmachine commented Sep 23, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Sep 24, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 24, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Sep 27, 2019

Uh oh!

elasticmachine commented Sep 27, 2019

💚 Build Succeeded

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos commented Sep 27, 2019

Uh oh!

kertal commented Sep 27, 2019

Uh oh!

cchaos commented Sep 27, 2019

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

kertal commented Sep 27, 2019

Uh oh!

elasticmachine commented Sep 27, 2019

💚 Build Succeeded

Uh oh!

kertal commented Sep 30, 2019

Uh oh!

elasticmachine commented Sep 30, 2019

💚 Build Succeeded

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

flash1293 Sep 30, 2019

Choose a reason for hiding this comment

Uh oh!

flash1293 Sep 30, 2019

Choose a reason for hiding this comment

Uh oh!

kertal commented Sep 30, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

kertal commented Sep 23, 2019 •

edited

Loading