Migrate filter bar to React, EUI, and Typescript by Bargs · Pull Request #25563 · elastic/kibana

Bargs · 2018-11-12T21:42:36Z

Summary

Rewrites the filter bar in React, EUI, and Typescript. Updates the look and feel of the filter bar and makes it consistent with the rest of K7.

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 · 2018-11-12T21:42:38Z

Pinging @elastic/kibana-app

elasticmachine · 2018-11-12T21:59:45Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-13T15:40:57Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-13T21:38:23Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-15T15:52:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-15T18:06:35Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-16T22:33:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-04T19:18:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-05T21:41:49Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-06T22:10:29Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-12T21:34:47Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-19T17:18:09Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-19T19:03:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos · 2019-01-28T23:47:49Z

You need to add some title attributes. The below examples are how they're setup in the EUI docs:

Filter trigger button

const filterButtonTitle = `${this.state.filters.length} filters applied. Select to ${this.state.isFiltersVisible ? 'hide' : 'show'}.`;

    const filterTriggerButton = (
      <EuiFilterButton
        ...
        title={filterButtonTitle}
      >
        Filters
      </EuiFilterButton>
    );

EuiGlobalFilterItem

let title = `Filter: ${prefix} ${field}: "${value}". Select for more filter actions.`;
    if (isPinned) {
      title = `Pinned ${title}`;
    } else if (isDisabled) {
      title = `Disabled ${title}`;
    }

    const badge = (
      <EuiBadge
        ...
        title={title}
        iconOnClick={this.deleteFilter}
        iconOnClickAriaLabel={`Delete filter`}
        onClick={this.togglePopover}
        onClickAriaLabel="Filter actions"
      >
        {prefix}
        <span>{field}: </span>
        <span>&quot;{value}&quot;</span>
      </EuiBadge>
    );

ppisljar

tested it on windows with edge, seems to work fine (except that whole kibana performs super slow there and our sample dashboards are pretty much unusable)
tested also in IE11, works fine as well (performance is actually way better than in edge, there is some weird flickering happening when selecting dropdown values, but everything is usable.

LGTM

Made requested updates

Bargs · 2019-01-30T00:52:14Z

Thanks @cchaos, I added titles the badges. Could you take a look at the custom label switch as well? As far as I can tell we're passing in the exact same props as in the demo, but the label is not getting read out by the screenreader, even though it's working in the demo.

elasticmachine · 2019-01-30T01:07:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-30T01:56:22Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cchaos · 2019-01-30T04:26:22Z

It's actually not working in the EUI docs either because it requires an id to be passed so that it can create the necessary connection between the hidden checkbox and label via the htmlFor prop.

to it and screenreaders will be able to read the text

Bargs · 2019-01-30T16:28:03Z

@cchaos hmmm weird, you're right, adding an id fixed it in this PR. The global header demo doesn't pass an ID though and it was working for me in MacOS's VoiceOver. Strange.

elasticmachine · 2019-01-30T17:12:17Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-30T18:01:54Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

text so that it can be used in the filter apply modal as well

elasticmachine · 2019-01-30T19:06:53Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…)" This reverts commit 410c094.

…29662) This reverts commit 410c094.

…stic#25563)" (elastic#29662)" This reverts commit 45b24af.

Fixes the build issues introduced in #25563 and re-introduces the new react/eui/typescript filter bar, essentially reverting the revert in #29662. I did have to resolve one merge conflict in query_bar.tsx, and re-deleted all of the old filter bar code where translation code had been added.

Rewrites the filter bar in React, EUI, and Typescript. Updates the look and feel of the filter bar and makes it consistent with the rest of K7.

…)" (elastic#29662) This reverts commit a5717c7.

Fixes the build issues introduced in elastic#25563 and re-introduces the new react/eui/typescript filter bar, essentially reverting the revert in elastic#29662. I did have to resolve one merge conflict in query_bar.tsx, and re-deleted all of the old filter bar code where translation code had been added.

Bargs added Feature:Filters Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// labels Nov 12, 2018

Bargs force-pushed the euifyFilterBar branch from a3425c2 to d46fdeb Compare November 13, 2018 15:27

Bargs force-pushed the euifyFilterBar branch from e9d35b0 to 7912143 Compare November 15, 2018 15:37

Bargs force-pushed the euifyFilterBar branch from b0997ea to 665a016 Compare November 16, 2018 22:16

adriankirchner mentioned this pull request Nov 18, 2018

Clicking the search button in dashboard no longer forces refresh #23329

Closed

lukasolson assigned lukasolson and Bargs Dec 4, 2018

lukasolson force-pushed the euifyFilterBar branch 2 times, most recently from f1bdea0 to 3b158aa Compare December 4, 2018 19:07

lukasolson force-pushed the euifyFilterBar branch from 729fc5c to 7c2f9e8 Compare December 5, 2018 21:26

timroes mentioned this pull request Dec 11, 2018

[i18n] Translate filter_bar #26250

Merged

lukasolson force-pushed the euifyFilterBar branch from 31851d2 to 2cbddb1 Compare December 12, 2018 21:18

lukasolson force-pushed the euifyFilterBar branch from 2cbddb1 to 888ffb2 Compare December 19, 2018 17:03

Bargs requested a review from a team as a code owner December 19, 2018 17:03

snide mentioned this pull request Jan 2, 2019

[META]: Datepicker + searchbar + EUI work left for K7 #27902

Closed

7 of 8 tasks

lukasolson force-pushed the euifyFilterBar branch from 79a944a to dc94d4f Compare January 2, 2019 23:33

ppisljar approved these changes Jan 29, 2019

View reviewed changes

Bargs added 3 commits January 29, 2019 17:28

Merge branch 'master' into euifyFilterBar

bc31a95

Add title attribute to filter badges

26ffc5c

Merge remote-tracking branch 'origin/euifyFilterBar' into euifyFilterBar

58505d6

remove unused import

312a98f

timroes mentioned this pull request Jan 30, 2019

EUIfication of KibanaApp #29608

Closed

2 of 5 tasks

add ID to EuiSwitch so that the label element can be correctly connected

54a515c

to it and screenreaders will be able to read the text

lukasolson reviewed Jan 30, 2019

View reviewed changes

Comment thread src/ui/public/filter_bar/filter_view/base_filter_view.tsx Outdated

translate string I missed

99af617

Switch from react components to a function that returns simple display

303060c

text so that it can be used in the filter apply modal as well

lukasolson reviewed Jan 30, 2019

View reviewed changes

Comment thread src/ui/public/filter_bar/filter_view/index.tsx

Bargs merged commit 410c094 into elastic:master Jan 30, 2019

Bargs added a commit to Bargs/kibana that referenced this pull request Jan 30, 2019

Revert "Migrate filter bar to React, EUI, and Typescript (elastic#25563…

4b9b3cf

…)" This reverts commit 410c094.

Bargs added a commit that referenced this pull request Jan 30, 2019

Revert "Migrate filter bar to React, EUI, and Typescript (#25563)" (#…

45b24af

…29662) This reverts commit 410c094.

Bargs added a commit to Bargs/kibana that referenced this pull request Jan 31, 2019

Revert "Revert "Migrate filter bar to React, EUI, and Typescript (ela…

a909d86

…stic#25563)" (elastic#29662)" This reverts commit 45b24af.

Bargs mentioned this pull request Jan 31, 2019

Re-introduce new filter bar #29752

Merged

patrykkopycinski pushed a commit to patrykkopycinski/kibana that referenced this pull request May 6, 2026

Revert "Migrate filter bar to React, EUI, and Typescript (elastic#25563…

f5877f0

…)" (elastic#29662) This reverts commit a5717c7.

Conversation

Bargs commented Nov 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

elasticmachine commented Nov 12, 2018

Uh oh!

elasticmachine commented Nov 12, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 13, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 13, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 15, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 15, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Nov 16, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 4, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 5, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 6, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 12, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 19, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 19, 2018

💔 Build Failed

Uh oh!

cchaos commented Jan 28, 2019

Uh oh!

ppisljar left a comment

Choose a reason for hiding this comment

Uh oh!

Bargs commented Jan 30, 2019

Uh oh!

elasticmachine commented Jan 30, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Jan 30, 2019

💚 Build Succeeded

Uh oh!

cchaos commented Jan 30, 2019

Uh oh!

Bargs commented Jan 30, 2019

Uh oh!

Uh oh!

elasticmachine commented Jan 30, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Jan 30, 2019

💚 Build Succeeded

Uh oh!

Uh oh!

elasticmachine commented Jan 30, 2019

💚 Build Succeeded

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Bargs commented Nov 12, 2018 •

edited

Loading