[Discover][ES|QL] Hides the filtering actions from doc viewer actions (…

…#175087)

## Summary

In this PR #171083 I added the
actions in ES|QL doc viewer but all the filter related ones were
disabled. The design team prefers them to be hidden instead.

<img width="1009" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/2e085a44-b42d-4972-a29c-edcfead9a92e">


### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/legacy/table_cell_actions.tsx

@@ -35,24 +35,30 @@ export const TableActions = ({
 }: TableActionsProps) => {
   return (
     <div className="kbnDocViewer__buttons">
-      <DocViewTableRowBtnFilterAdd
-        disabled={!fieldMapping || !fieldMapping.filterable || ignoredValue || !onFilter}
-        onClick={() => onFilter(fieldMapping, flattenedField, '+')}
-      />
-      <DocViewTableRowBtnFilterRemove
-        disabled={!fieldMapping || !fieldMapping.filterable || ignoredValue || !onFilter}
-        onClick={() => onFilter(fieldMapping, flattenedField, '-')}
-      />
+      {onFilter && (
+        <DocViewTableRowBtnFilterAdd
+          disabled={!fieldMapping || !fieldMapping.filterable || ignoredValue}
+          onClick={() => onFilter(fieldMapping, flattenedField, '+')}
+        />
+      )}
+      {onFilter && (
+        <DocViewTableRowBtnFilterRemove
+          disabled={!fieldMapping || !fieldMapping.filterable || ignoredValue}
+          onClick={() => onFilter(fieldMapping, flattenedField, '-')}
+        />
+      )}
       <DocViewTableRowBtnToggleColumn
         active={isActive}
         fieldname={field}
         onClick={() => onToggleColumn(field)}
       />
-      <DocViewTableRowBtnFilterExists
-        disabled={!fieldMapping || !fieldMapping.filterable || !onFilter}
-        onClick={() => onFilter('_exists_', field, '+')}
-        scripted={fieldMapping && fieldMapping.scripted}
-      />
+      {onFilter && (
+        <DocViewTableRowBtnFilterExists
+          disabled={!fieldMapping || !fieldMapping.filterable}
+          onClick={() => onFilter('_exists_', field, '+')}
+          scripted={fieldMapping && fieldMapping.scripted}
+        />
+      )}
     </div>
   );
 };

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx

@@ -287,7 +287,7 @@ export const DocViewerTable = ({
       <EuiTableHeaderCell
         key="header-cell-actions"
         align="left"
-        width={showActionsInsideTableCell ? 150 : 62}
+        width={showActionsInsideTableCell && filter ? 150 : 62}
         isSorted={false}
       >
         <EuiText size="xs">

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table_cell_actions.test.tsx

@@ -25,9 +25,9 @@ describe('TableActions', () => {
         onTogglePinned={jest.fn()}
       />
     );
-    expect(screen.getByTestId('addFilterForValueButton-message')).toBeDisabled();
-    expect(screen.getByTestId('addFilterOutValueButton-message')).toBeDisabled();
-    expect(screen.getByTestId('addExistsFilterButton-message')).toBeDisabled();
+    expect(screen.queryByTestId('addFilterForValueButton-message')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('addFilterOutValueButton-message')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('addExistsFilterButton-message')).not.toBeInTheDocument();
     expect(screen.getByTestId('toggleColumnButton-message')).not.toBeDisabled();
     expect(screen.getByTestId('togglePinFilterButton-message')).not.toBeDisabled();
   });

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table_cell_actions.tsx

@@ -31,6 +31,16 @@ interface TableActionsProps {
   onTogglePinned: (field: string) => void;
 }
 
+interface PanelItem {
+  name: string;
+  'aria-label': string;
+  toolTipContent?: string;
+  disabled?: boolean;
+  'data-test-subj': string;
+  icon: string;
+  onClick: () => void;
+}
+
 export const TableActions = ({
   mode = 'as_popover',
   pinned,
@@ -51,8 +61,7 @@ export const TableActions = ({
   });
 
   // Filters pair
-  const filtersPairDisabled =
-    !fieldMapping || !fieldMapping.filterable || ignoredValue || !onFilter;
+  const filtersPairDisabled = !fieldMapping || !fieldMapping.filterable || ignoredValue;
   const filterAddLabel = i18n.translate(
     'unifiedDocViewer.docViews.table.filterForValueButtonTooltip',
     {
@@ -89,7 +98,7 @@ export const TableActions = ({
     'unifiedDocViewer.docViews.table.filterForFieldPresentButtonAriaLabel',
     { defaultMessage: 'Filter for field present' }
   );
-  const filtersExistsDisabled = !fieldMapping || !fieldMapping.filterable || !onFilter;
+  const filtersExistsDisabled = !fieldMapping || !fieldMapping.filterable;
   const filtersExistsToolTip =
     (filtersExistsDisabled &&
       (fieldMapping && fieldMapping.scripted
@@ -145,57 +154,61 @@ export const TableActions = ({
     [closePopover]
   );
 
+  let panelItems: PanelItem[] = [
+    {
+      name: toggleColumnsLabel,
+      'aria-label': toggleColumnsAriaLabel,
+      'data-test-subj': `toggleColumnButton-${field}`,
+      icon: 'listAdd',
+      onClick: onClickAction(onToggleColumn.bind({}, field)),
+    },
+    {
+      name: pinnedLabel,
+      'aria-label': pinnedAriaLabel,
+      icon: pinnedIconType,
+      'data-test-subj': `togglePinFilterButton-${field}`,
+      onClick: onClickAction(togglePinned),
+    },
+  ];
+
+  if (onFilter) {
+    panelItems = [
+      {
+        name: filterAddLabel,
+        'aria-label': filterAddAriaLabel,
+        toolTipContent: filtersPairToolTip,
+        icon: 'plusInCircle',
+        disabled: filtersPairDisabled,
+        'data-test-subj': `addFilterForValueButton-${field}`,
+        onClick: onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '+')),
+      },
+      {
+        name: filterOutLabel,
+        'aria-label': filterOutAriaLabel,
+        toolTipContent: filtersPairToolTip,
+        icon: 'minusInCircle',
+        disabled: filtersPairDisabled,
+        'data-test-subj': `addFilterOutValueButton-${field}`,
+        onClick: onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '-')),
+      },
+      {
+        name: filterExistsLabel,
+        'aria-label': filterExistsAriaLabel,
+        toolTipContent: filtersExistsToolTip,
+        icon: 'filter',
+        disabled: filtersExistsDisabled,
+        'data-test-subj': `addExistsFilterButton-${field}`,
+        onClick: onClickAction(onFilter.bind({}, '_exists_', field, '+')),
+      },
+      ...panelItems,
+    ];
+  }
+
   const panels = [
     {
       id: 0,
       title: actionsLabel,
-      items: [
-        {
-          name: filterAddLabel,
-          'aria-label': filterAddAriaLabel,
-          toolTipContent: filtersPairToolTip,
-          icon: 'plusInCircle',
-          disabled: filtersPairDisabled,
-          'data-test-subj': `addFilterForValueButton-${field}`,
-          onClick: onFilter
-            ? onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '+'))
-            : undefined,
-        },
-        {
-          name: filterOutLabel,
-          'aria-label': filterOutAriaLabel,
-          toolTipContent: filtersPairToolTip,
-          icon: 'minusInCircle',
-          disabled: filtersPairDisabled,
-          'data-test-subj': `addFilterOutValueButton-${field}`,
-          onClick: onFilter
-            ? onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '-'))
-            : undefined,
-        },
-        {
-          name: filterExistsLabel,
-          'aria-label': filterExistsAriaLabel,
-          toolTipContent: filtersExistsToolTip,
-          icon: 'filter',
-          disabled: filtersExistsDisabled,
-          'data-test-subj': `addExistsFilterButton-${field}`,
-          onClick: onFilter ? onClickAction(onFilter.bind({}, '_exists_', field, '+')) : undefined,
-        },
-        {
-          name: toggleColumnsLabel,
-          'aria-label': toggleColumnsAriaLabel,
-          'data-test-subj': `toggleColumnButton-${field}`,
-          icon: 'listAdd',
-          onClick: onClickAction(onToggleColumn.bind({}, field)),
-        },
-        {
-          name: pinnedLabel,
-          'aria-label': pinnedAriaLabel,
-          icon: pinnedIconType,
-          'data-test-subj': `togglePinFilterButton-${field}`,
-          onClick: onClickAction(togglePinned),
-        },
-      ],
+      items: panelItems,
     },
   ];