Skip to content

[Discover] Deangularize and euificate sidebar #47559

Merged
kertal merged 74 commits intoelastic:masterfrom
kertal:kertal-pr-2019-10-08-discover-sidebar-field
Mar 31, 2020
Merged

[Discover] Deangularize and euificate sidebar #47559
kertal merged 74 commits intoelastic:masterfrom
kertal:kertal-pr-2019-10-08-discover-sidebar-field

Conversation

@kertal
Copy link
Member

@kertal kertal commented Oct 8, 2019 •
edited
Loading

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:

Bildschirmfoto 2020-03-22 um 21 00 55

New:

Bildschirmfoto 2020-03-22 um 21 00 43

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.

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
Copy link
Contributor

elasticmachine commented Oct 8, 2019

💔 Build Failed

@kertal kertal self-assigned this Oct 9, 2019
@elasticmachine
Copy link
Contributor

elasticmachine commented Dec 17, 2019

💔 Build Failed

History

  • 💔 Build #14231 failed 90ba91d1c4ad40ede97abd1db0407cd753e1cf09

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

@flash1293 flash1293 mentioned this pull request Jan 16, 2020
Closed
17 tasks
@kertal
Copy link
Member Author

kertal commented Jan 29, 2020

@elasticmachine merge upstream

@elasticmachine
Copy link
Contributor

elasticmachine commented Jan 29, 2020

merge conflict between base and head

@streamich streamich added Feature:Discover Discover Application Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// labels Feb 7, 2020
@elasticmachine
Copy link
Contributor

elasticmachine commented Feb 7, 2020

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

@kertal kertal force-pushed the kertal-pr-2019-10-08-discover-sidebar-field branch from e95adb6 to 59af21d Compare February 10, 2020 14:31
@kertal kertal changed the title [Discover] De-angularize sidebar fields [Discover] De-angularize and redesign sidebar fields Feb 10, 2020
@myasonik
Copy link
Contributor

myasonik commented Mar 4, 2020

@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
Copy link
Member Author

kertal commented Mar 5, 2020

@myasonik for sure!

sulemanof
sulemanof reviewed Mar 26, 2020
View reviewed changes
sulemanof
sulemanof reviewed Mar 26, 2020
View reviewed changes
snide
snide approved these changes Mar 27, 2020
View reviewed changes
Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
myasonik suggested changes Mar 27, 2020
View reviewed changes
Copy link
Contributor

@myasonik myasonik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

...cy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx Outdated
const addLabel = i18n.translate(
'kbn.discover.fieldChooser.detailViews.filterValueButtonAriaLabel',
{
defaultMessage: 'Filter for this value',
Copy link
Contributor

@myasonik myasonik Mar 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.)

Copy link
Member Author

@kertal kertal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

...cy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx Outdated
const removeLabel = i18n.translate(
'kbn.discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel',
{
defaultMessage: 'Filter out this value',
Copy link
Contributor

@myasonik myasonik Mar 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

@kertal kertal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@gchaps gchaps Mar 31, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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}.

Copy link
Member Author

@kertal kertal Apr 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Contributor

@gchaps gchaps Apr 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the one on top:

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

Copy link
Member Author

@kertal kertal Apr 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

already none :)

@kertal kertal requested a review from myasonik March 30, 2020 11:50
@timroes timroes mentioned this pull request Mar 30, 2020
Closed
6 tasks
@kertal
Copy link
Member Author

kertal commented Mar 31, 2020

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 31, 2020

💚 Build Succeeded

History

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

@kertal kertal merged commit 0082ca7 into elastic:master Mar 31, 2020
@kertal kertal mentioned this pull request Mar 31, 2020
Merged
kertal added a commit to kertal/kibana that referenced this pull request Mar 31, 2020
@kertal
[Discover] Deangularize and euificate sidebar (elastic#47559)
f19a1ee 
* 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
kertal added a commit that referenced this pull request Mar 31, 2020
@kertal
[Discover] Deangularize and euificate sidebar (#47559) (#61987)
886979b 
* 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
gmmorris added a commit to gmmorris/kibana that referenced this pull request Mar 31, 2020
@gmmorris
Merge remote-tracking branch 'upstream/master' into alerting/start-trial
2d80df2 
* 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)
  ...
gmmorris added a commit to gmmorris/kibana that referenced this pull request Apr 1, 2020
@gmmorris
Merge branch 'master' into event-log/query-support
a0e1dcd 
* 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)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@flash1293 flash1293 flash1293 approved these changes

@cchaos cchaos Awaiting requested review from cchaos

+4 more reviewers

@sulemanof sulemanof sulemanof left review comments

@gchaps gchaps gchaps left review comments

@snide snide snide approved these changes

@myasonik myasonik myasonik approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@kertal kertal

Labels

Feature:Discover Discover Application Feature:NP Migration release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.8.0 v8.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

(Accessibility) - Discover Tab Navigation/Contrast