Fix filter pill label for filters with negated alias (#50743) (#51001)

* Fix filter pill label for filters with alias

* restore span ref wrapper for filter pill title

* make valueLabel prop optional

src/legacy/core_plugins/data/public/filter/apply_filters/apply_filter_popover_content.tsx

@@ -31,7 +31,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import { IndexPattern } from '../../index_patterns';
-import { getFilterDisplayText } from '../filter_bar/filter_editor/lib/get_filter_display_text';
+import { FilterLabel } from '../filter_bar/filter_editor/lib/filter_label';
 import { mapAndFlattenFilters, esFilters } from '../../../../../../plugins/data/public';
 import { getDisplayValueFromFilter } from '../filter_bar/filter_editor/lib/get_display_value';
 
@@ -58,8 +58,8 @@ export class ApplyFiltersPopoverContent extends Component<Props, State> {
     };
   }
   private getLabel(filter: esFilters.Filter) {
-    const filterDisplayValue = getDisplayValueFromFilter(filter, this.props.indexPatterns);
-    return getFilterDisplayText(filter, filterDisplayValue);
+    const valueLabel = getDisplayValueFromFilter(filter, this.props.indexPatterns);
+    return <FilterLabel filter={filter} valueLabel={valueLabel} />;
   }
 
   public render() {

src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_label.test.js

@@ -0,0 +1,48 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { FilterLabel } from './filter_label';
+import { phraseFilter } from './fixtures/phrase_filter';
+import { shallow } from 'enzyme';
+
+test('alias', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+    }
+  };
+  const component = shallow(<FilterLabel filter={filter} />);
+  expect(component).toMatchSnapshot();
+});
+
+test('negated alias', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+      negate: true,
+    }
+  };
+  const component = shallow(<FilterLabel filter={filter} />);
+  expect(component).toMatchSnapshot();
+});

src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/get_filter_display_text.tsx → src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_label.tsx

@@ -23,7 +23,12 @@ import { i18n } from '@kbn/i18n';
 import { existsOperator, isOneOfOperator } from './filter_operators';
 import { esFilters } from '../../../../../../../../plugins/data/public';
 
-export function getFilterDisplayText(filter: esFilters.Filter, filterDisplayName: string) {
+interface Props {
+  filter: esFilters.Filter;
+  valueLabel?: string;
+}
+
+export function FilterLabel({ filter, valueLabel }: Props) {
   const prefixText = filter.meta.negate
     ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
         defaultMessage: 'NOT ',
@@ -37,7 +42,12 @@ export function getFilterDisplayText(filter: esFilters.Filter, filterDisplayName
     );
 
   if (filter.meta.alias !== null) {
-    return `${prefix}${filter.meta.alias}`;
+    return (
+      <Fragment>
+        {prefix}
+        {filter.meta.alias}
+      </Fragment>
+    );
   }
 
   switch (filter.meta.type) {
@@ -52,43 +62,43 @@ export function getFilterDisplayText(filter: esFilters.Filter, filterDisplayName
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {filterDisplayName}
+          {filter.meta.key}: {valueLabel}
         </Fragment>
       );
     case 'geo_polygon':
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {filterDisplayName}
+          {filter.meta.key}: {valueLabel}
         </Fragment>
       );
     case 'phrase':
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {filterDisplayName}
+          {filter.meta.key}: {valueLabel}
         </Fragment>
       );
     case 'phrases':
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key} {isOneOfOperator.message} {filterDisplayName}
+          {filter.meta.key} {isOneOfOperator.message} {valueLabel}
         </Fragment>
       );
     case 'query_string':
       return (
         <Fragment>
           {prefix}
-          {filterDisplayName}
+          {valueLabel}
         </Fragment>
       );
     case 'range':
     case 'phrase':
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {filterDisplayName}
+          {filter.meta.key}: {valueLabel}
         </Fragment>
       );
     default:

src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx

@@ -62,17 +62,17 @@ class FilterItemUI extends Component<Props, State> {
       this.props.className
     );
 
-    const displayName = getDisplayValueFromFilter(filter, this.props.indexPatterns);
+    const valueLabel = getDisplayValueFromFilter(filter, this.props.indexPatterns);
     const dataTestSubjKey = filter.meta.key ? `filter-key-${filter.meta.key}` : '';
-    const dataTestSubjValue = filter.meta.value ? `filter-value-${displayName}` : '';
+    const dataTestSubjValue = filter.meta.value ? `filter-value-${valueLabel}` : '';
     const dataTestSubjDisabled = `filter-${
       this.props.filter.meta.disabled ? 'disabled' : 'enabled'
     }`;
 
     const badge = (
       <FilterView
         filter={filter}
-        displayName={displayName}
+        valueLabel={valueLabel}
         className={classes}
         iconOnClick={() => this.props.onRemove()}
         onClick={this.togglePopover}

src/legacy/core_plugins/data/public/filter/filter_bar/filter_view/index.tsx

@@ -20,24 +20,23 @@
 import { EuiBadge, useInnerText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { SFC } from 'react';
-import { getFilterDisplayText } from '../filter_editor/lib/get_filter_display_text';
+import { FilterLabel } from '../filter_editor/lib/filter_label';
 import { esFilters } from '../../../../../../../plugins/data/public';
 
 interface Props {
   filter: esFilters.Filter;
-  displayName: string;
+  valueLabel: string;
   [propName: string]: any;
 }
 
 export const FilterView: SFC<Props> = ({
   filter,
   iconOnClick,
   onClick,
-  displayName,
+  valueLabel,
   ...rest
 }: Props) => {
   const [ref, innerText] = useInnerText();
-  const displayText = <span ref={ref}>{getFilterDisplayText(filter, displayName)}</span>;
 
   let title = i18n.translate('data.filter.filterBar.moreFilterActionsMessage', {
     defaultMessage: 'Filter: {innerText}. Select for more filter actions.',
@@ -75,7 +74,9 @@ export const FilterView: SFC<Props> = ({
       })}
       {...rest}
     >
-      {displayText}
+      <span ref={ref}>
+        <FilterLabel filter={filter} valueLabel={valueLabel} />
+      </span>
     </EuiBadge>
   );
 };