[Discover] Deangularize and euificate sidebar #47559

kertal · 2019-10-08T09:28:44Z

Summary

Deangularize and Euification of sidebar. Before this PR only, parts of the sidebar (index selection, field filter) were in React, now it's 100% 📈

Out of scope: initially we planed a redesign of the sidebar, and decided to postpone this for now (Might be part of #51531).

Old:

New:

Part of #38646 and resolves #37547

Testing

Check for regressions, since big parts where rewritten!

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~~

elasticmachine · 2019-10-08T10:43:16Z

💔 Build Failed

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

elasticmachine · 2019-12-17T10:42:13Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 7a7d236

History

💔 Build #14231 failed 90ba91d

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

kertal · 2020-01-29T15:07:03Z

@elasticmachine merge upstream

elasticmachine · 2020-01-29T15:07:05Z

merge conflict between base and head

elasticmachine · 2020-02-07T11:07:06Z

Pinging @elastic/kibana-app (Team:KibanaApp)

…-08-discover-sidebar-field

myasonik · 2020-03-04T22:09:25Z

@bhavyarm is going to be merging some a11y tests shortly with a test failing inside of the sidebar. (It will be merged skipped.)

Can we make sure to turn on the tests added in #59375 before this PR merges?

kertal · 2020-03-05T12:26:33Z

@myasonik for sure!

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx

…-08-discover-sidebar-field

snide

I ran through the functionality of this just to make sure there are no breaks. Given the size of this PR, @kertal and I decided I'll do my PR separately after this merged. Since it's for 7.8 we've got plenty of time, but I should have it up in a day or two.

myasonik

Hoping we can make a few a11y improvements in this PR too 🙂

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field.tsx

myasonik · 2020-03-27T15:11:54Z

...cy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx

+  const addLabel = i18n.translate(
+    'kbn.discover.fieldChooser.detailViews.filterValueButtonAriaLabel',
+    {
+      defaultMessage: 'Filter for this value',


Can we pass in what the value of "this" is so that the action can have more context?

Rendered string should ultimately read something like "Filter for currency value". (Might want to check with a copy writer on the best way to phrase that.)

I changed it to Filter for {fieldname}: "{value}"
dear @gchaps , does that sound ok?

myasonik · 2020-03-27T15:12:17Z

...cy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx

+  const removeLabel = i18n.translate(
+    'kbn.discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel',
+    {
+      defaultMessage: 'Filter out this value',


Same as above, replace "this" with the actual thing

I changed it to Filter out {fieldname}: "{value}"
dear @gchaps , does that sound ok?

@kertal Can you please give me an example of how this message will read with values for {fieldname} and {value}?

I'm leaning more toward something that might be a littler easier to read "Filter out value for {fieldname}.

@gchaps currently it would be

Exlusive Filter: Filter out extension: "php" Inclusive Filter: Filter for extension: "php"

that would change to

Exlusive Filter: Filter out "php" for extension Inclusive Filter: Filter for "php" for(?) extension

I like the one on top:

Filter out extension: "php"
Filter for extension: "php"

already none :)

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field.tsx

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx

...cy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx

...gacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/string_progress_bar.tsx

...cy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx

…-08-discover-sidebar-field

kertal · 2020-03-31T01:49:16Z

@elasticmachine merge upstream

kibanamachine · 2020-03-31T03:31:27Z

💚 Build Succeeded

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

History

💔 Build #37342 failed 08e9c5f
💔 Build #37172 failed 5dad93c
💔 Build #37085 failed 3da56c5
💚 Build #36817 succeeded f3a230d
💔 Build #36798 failed 75552dc

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

* Split angular templates into React components * Add tooltip for field label * Adapt SCSS * Cleanup angular directives * Extract helper functions * Improve tests + docs * Move css to _sidebar.scss * Exclude _id field from displaying the Visualize button to prevent an ES error * A11y improvements

* upstream/master: (69 commits) Adding PagerDuty icon to connectors cards (elastic#60805) Fix drag and drop flakiness (elastic#61993) Grok debugger migration (elastic#60658) Endpoint: Fix resolver SVG position issue (elastic#61886) [SIEM] version 7.7 rule import (elastic#61903) Added styles to make combobox list items wider for alerting flyout (elastic#61894) [UA] Tight worker loop can cause high CPU usage (elastic#60950) [ML] DF Analytics results table: use index pattern field format if one exists (elastic#61709) [ML] Catching unknown index pattern errors (elastic#61935) [Discover] Deangularize and euificate sidebar (elastic#47559) Endpoint: Add ts-node dev dependency (elastic#61884) Add an onBlur handler for the kuery bar. Only resubmit when input changes. (elastic#61901) [ML] Handle Empty Partition Field Values in Single Metric Viewer (elastic#61649) Auto interval on date histogram is getting displayed as timestamp per… (elastic#59171) [Maps] Explicitly pass fetch function to ems-client (elastic#61846) [SIEM][CASE] Fix aria-labels and translations (elastic#61670) [ML] Settings: Increase number of items that can be paged in calendars and filters lists (elastic#61842) [EPM] update epm filepath route (elastic#61910) APM] Set ignore_above to 1024 for telemetry saved object (elastic#61732) [Logs UI] Log stream row rendering (elastic#60773) ...

* master: (64 commits) Adding PagerDuty icon to connectors cards (elastic#60805) Fix drag and drop flakiness (elastic#61993) Grok debugger migration (elastic#60658) Endpoint: Fix resolver SVG position issue (elastic#61886) [SIEM] version 7.7 rule import (elastic#61903) Added styles to make combobox list items wider for alerting flyout (elastic#61894) [UA] Tight worker loop can cause high CPU usage (elastic#60950) [ML] DF Analytics results table: use index pattern field format if one exists (elastic#61709) [ML] Catching unknown index pattern errors (elastic#61935) [Discover] Deangularize and euificate sidebar (elastic#47559) Endpoint: Add ts-node dev dependency (elastic#61884) Add an onBlur handler for the kuery bar. Only resubmit when input changes. (elastic#61901) [ML] Handle Empty Partition Field Values in Single Metric Viewer (elastic#61649) Auto interval on date histogram is getting displayed as timestamp per… (elastic#59171) [Maps] Explicitly pass fetch function to ems-client (elastic#61846) [SIEM][CASE] Fix aria-labels and translations (elastic#61670) [ML] Settings: Increase number of items that can be paged in calendars and filters lists (elastic#61842) [EPM] update epm filepath route (elastic#61910) APM] Set ignore_above to 1024 for telemetry saved object (elastic#61732) [Logs UI] Log stream row rendering (elastic#60773) ...

Split angular templates into React components

f8d8e5a

kertal self-assigned this Oct 9, 2019

flash1293 mentioned this pull request Jan 16, 2020

Audit and convert tests to jest #54339

Closed

17 tasks

streamich added Feature:Discover Discover Application Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Feb 7, 2020

Merge upstream/master, fix conflicts

59af21d

kertal force-pushed the kertal-pr-2019-10-08-discover-sidebar-field branch from e95adb6 to 59af21d Compare February 10, 2020 14:31

Remove duplicate of _discover.scss

220cd67

kertal changed the title ~~[Discover] De-angularize sidebar fields~~ [Discover] De-angularize and redesign sidebar fields Feb 10, 2020

kertal added 5 commits February 26, 2020 12:37

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

1e3c700

…-08-discover-sidebar-field

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

a9d37f8

…-08-discover-sidebar-field

Add tooltip for field label

c25a63d

Merge upstream/master

fc4bc92

Fix some failed tests

21b513c

kertal added 2 commits March 5, 2020 06:30

Adapt SCSS

7486709

Fix visualize button

275f6cc

kertal added 6 commits March 6, 2020 11:35

Merge upstream/master, fix conflicts

0055270

Adapt recent changes for visualize url

ce63f3c

Refactor cababilities

02046bb

Refactor warnings

04a3b95

Add recompute of details when displayed

c91b081

Fix tests

344c026

sulemanof reviewed Mar 26, 2020

View reviewed changes

src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx Show resolved Hide resolved

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

2bc7b92

…-08-discover-sidebar-field

snide approved these changes Mar 27, 2020

View reviewed changes

kertal added 3 commits March 27, 2020 13:31

Address review comments

48532da

Merge upstream/master fix conflicts

75552dc

Fix type

f3a230d

myasonik suggested changes Mar 27, 2020

View reviewed changes

kertal added 4 commits March 30, 2020 08:25

a11y changes part 1

8e554df

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

2c493d5

…-08-discover-sidebar-field

Refactor popular field list, change Add + Remove links of fields

3da56c5

Remove role presentation, that i inserted at the wrong place

f7d4c2e

kertal requested a review from myasonik March 30, 2020 11:50

kertal added 2 commits March 30, 2020 15:11

Fix i18n

5dad93c

Fix jest testg

08e9c5f

timroes mentioned this pull request Mar 30, 2020

[Meta] Discover rewrite to EUI #38646

Closed

6 tasks

Merge branch 'master' into kertal-pr-2019-10-08-discover-sidebar-field

cfa1200

myasonik approved these changes Mar 31, 2020

View reviewed changes

kertal added the Feature:NP Migration label Mar 31, 2020

kertal merged commit 0082ca7 into elastic:master Mar 31, 2020

kertal mentioned this pull request Mar 31, 2020

[7.x] [Discover] Deangularize and euificate sidebar (#47559) #61987

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Deangularize and euificate sidebar #47559

[Discover] Deangularize and euificate sidebar #47559

kertal commented Oct 8, 2019 •

edited

Loading

elasticmachine commented Oct 8, 2019

elasticmachine commented Dec 17, 2019

kertal commented Jan 29, 2020

elasticmachine commented Jan 29, 2020

elasticmachine commented Feb 7, 2020

myasonik commented Mar 4, 2020

kertal commented Mar 5, 2020

snide left a comment

myasonik left a comment

myasonik Mar 27, 2020

kertal Mar 30, 2020

myasonik Mar 27, 2020

kertal Mar 30, 2020

gchaps Mar 31, 2020

kertal Apr 2, 2020 •

edited

Loading

gchaps Apr 2, 2020

kertal Apr 2, 2020

kertal commented Mar 31, 2020

kibanamachine commented Mar 31, 2020

[Discover] Deangularize and euificate sidebar #47559

[Discover] Deangularize and euificate sidebar #47559

Conversation

kertal commented Oct 8, 2019 • edited Loading

Summary

Testing

Checklist

For maintainers

elasticmachine commented Oct 8, 2019

💔 Build Failed

elasticmachine commented Dec 17, 2019

💔 Build Failed

History

kertal commented Jan 29, 2020

elasticmachine commented Jan 29, 2020

elasticmachine commented Feb 7, 2020

myasonik commented Mar 4, 2020

kertal commented Mar 5, 2020

snide left a comment

Choose a reason for hiding this comment

myasonik left a comment

Choose a reason for hiding this comment

myasonik Mar 27, 2020

Choose a reason for hiding this comment

kertal Mar 30, 2020

Choose a reason for hiding this comment

myasonik Mar 27, 2020

Choose a reason for hiding this comment

kertal Mar 30, 2020

Choose a reason for hiding this comment

gchaps Mar 31, 2020

Choose a reason for hiding this comment

kertal Apr 2, 2020 • edited Loading

Choose a reason for hiding this comment

gchaps Apr 2, 2020

Choose a reason for hiding this comment

kertal Apr 2, 2020

Choose a reason for hiding this comment

kertal commented Mar 31, 2020

kibanamachine commented Mar 31, 2020

💚 Build Succeeded

History

kertal commented Oct 8, 2019 •

edited

Loading

kertal Apr 2, 2020 •

edited

Loading