Fix warning text doesn't get displayed on filters with custom filter name (#78617)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`alias 1`] = `
-<Fragment>
-  geo.coordinates in US
-</Fragment>
-`;
-
-exports[`negated alias 1`] = `
-<Fragment>
-  <EuiTextColor
-    color="danger"
-  >
-     NOT 
-  </EuiTextColor>
-  geo.coordinates in US
-</Fragment>
-`;

src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js

@@ -1,48 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { phraseFilter } from '../../../../stubs';
-
-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/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx

@@ -0,0 +1,156 @@
+/*
+ * 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 { render, cleanup } from '@testing-library/react/pure';
+import { phraseFilter } from '../../../../stubs';
+
+afterEach(cleanup);
+
+test('alias', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+    },
+  };
+  const { container } = render(<FilterLabel filter={filter} />);
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      
+      geo.coordinates in US
+    </div>
+  `);
+});
+
+test('negated alias', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+      negate: true,
+    },
+  };
+  const { container } = render(<FilterLabel filter={filter} />);
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <span
+        class="euiTextColor euiTextColor--danger"
+      >
+         NOT 
+      </span>
+      geo.coordinates in US
+    </div>
+  `);
+});
+
+test('alias with warning status', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+      negate: true,
+    },
+  };
+  const { container } = render(
+    <FilterLabel filter={filter} valueLabel={'Warning'} filterLabelStatus={'warn'} />
+  );
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <span
+        class="euiTextColor euiTextColor--danger"
+      >
+         NOT 
+      </span>
+      geo.coordinates in US
+      : 
+      <span
+        class="globalFilterLabel__value"
+      >
+        Warning
+      </span>
+    </div>
+  `);
+});
+
+test('alias with error status', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+      negate: true,
+    },
+  };
+  const { container } = render(
+    <FilterLabel filter={filter} valueLabel={'Error'} filterLabelStatus={'error'} />
+  );
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <span
+        class="euiTextColor euiTextColor--danger"
+      >
+         NOT 
+      </span>
+      geo.coordinates in US
+      : 
+      <span
+        class="globalFilterLabel__value"
+      >
+        Error
+      </span>
+    </div>
+  `);
+});
+
+test('warning', () => {
+  const { container } = render(<FilterLabel filter={phraseFilter} valueLabel={'Warning'} />);
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      
+      machine.os
+      : 
+      <span
+        class="globalFilterLabel__value"
+      >
+        Warning
+      </span>
+    </div>
+  `);
+});
+
+test('error', () => {
+  const { container } = render(<FilterLabel filter={phraseFilter} valueLabel={'Error'} />);
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      
+      machine.os
+      : 
+      <span
+        class="globalFilterLabel__value"
+      >
+        Error
+      </span>
+    </div>
+  `);
+});

src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx

@@ -22,13 +22,15 @@ import { EuiTextColor } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { existsOperator, isOneOfOperator } from './filter_operators';
 import { Filter, FILTERS } from '../../../../../common';
+import type { FilterLabelStatus } from '../../filter_item';
 
 interface Props {
   filter: Filter;
   valueLabel?: string;
+  filterLabelStatus?: FilterLabelStatus;
 }
 
-export function FilterLabel({ filter, valueLabel }: Props) {
+export function FilterLabel({ filter, valueLabel, filterLabelStatus }: Props) {
   const prefixText = filter.meta.negate
     ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
         defaultMessage: 'NOT ',
@@ -50,6 +52,7 @@ export function FilterLabel({ filter, valueLabel }: Props) {
       <Fragment>
         {prefix}
         {filter.meta.alias}
+        {filterLabelStatus && <>: {getValue(valueLabel)}</>}
       </Fragment>
     );
   }

src/plugins/data/public/ui/filter_bar/filter_item.tsx

@@ -49,7 +49,7 @@ interface Props {
 
 interface LabelOptions {
   title: string;
-  status: string;
+  status: FilterLabelStatus;
   message?: string;
 }
 
@@ -57,6 +57,11 @@ const FILTER_ITEM_OK = '';
 const FILTER_ITEM_WARNING = 'warn';
 const FILTER_ITEM_ERROR = 'error';
 
+export type FilterLabelStatus =
+  | typeof FILTER_ITEM_OK
+  | typeof FILTER_ITEM_WARNING
+  | typeof FILTER_ITEM_ERROR;
+
 export function FilterItem(props: Props) {
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   const [indexPatternExists, setIndexPatternExists] = useState<boolean | undefined>(undefined);
@@ -260,7 +265,7 @@ export function FilterItem(props: Props) {
   }
 
   function getValueLabel(): LabelOptions {
-    const label = {
+    const label: LabelOptions = {
       title: '',
       message: '',
       status: FILTER_ITEM_OK,
@@ -326,6 +331,7 @@ export function FilterItem(props: Props) {
     <FilterView
       filter={filter}
       valueLabel={valueLabelConfig.title}
+      filterLabelStatus={valueLabelConfig.status}
       errorMessage={valueLabelConfig.message}
       className={getClasses(filter.meta.negate, valueLabelConfig)}
       iconOnClick={() => props.onRemove()}

src/plugins/data/public/ui/filter_bar/filter_view/index.tsx

@@ -22,10 +22,12 @@ import { i18n } from '@kbn/i18n';
 import React, { FC } from 'react';
 import { FilterLabel } from '../filter_editor/lib/filter_label';
 import { Filter, isFilterPinned } from '../../../../common';
+import type { FilterLabelStatus } from '../filter_item';
 
 interface Props {
   filter: Filter;
   valueLabel: string;
+  filterLabelStatus: FilterLabelStatus;
   errorMessage?: string;
   [propName: string]: any;
 }
@@ -36,6 +38,7 @@ export const FilterView: FC<Props> = ({
   onClick,
   valueLabel,
   errorMessage,
+  filterLabelStatus,
   ...rest
 }: Props) => {
   const [ref, innerText] = useInnerText();
@@ -65,7 +68,7 @@ export const FilterView: FC<Props> = ({
       iconType="cross"
       iconSide="right"
       closeButtonProps={{
-        // Removing tab focus on close button because the same option can be optained through the context menu
+        // Removing tab focus on close button because the same option can be obtained through the context menu
         // Also, we may want to add a `DEL` keyboard press functionality
         tabIndex: -1,
       }}
@@ -80,7 +83,11 @@ export const FilterView: FC<Props> = ({
       {...rest}
     >
       <span ref={ref}>
-        <FilterLabel filter={filter} valueLabel={valueLabel} />
+        <FilterLabel
+          filter={filter}
+          valueLabel={valueLabel}
+          filterLabelStatus={filterLabelStatus}
+        />
       </span>
     </EuiBadge>
   );