From c014f32ae8ebdf9f7df29e674ce00c6f619b4ed4 Mon Sep 17 00:00:00 2001
From: Julian Gernun <17549662+jcger@users.noreply.github.com>
Date: Thu, 7 Dec 2023 18:38:54 +0100
Subject: [PATCH 1/4] first commit

---
 .../components/all_cases/assignees_filter.tsx |  80 +++++-----
 .../all_cases/multi_select_filter.tsx         | 144 ++++++++++--------
 .../more_filters_selectable.tsx               |   1 +
 .../components/all_cases/table_filters.tsx    |  33 ++--
 4 files changed, 142 insertions(+), 116 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx
index 8e88eec447e6c..7e556ee46eeab 100644
--- a/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/assignees_filter.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFilterButton } from '@elastic/eui';
+import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
 import { UserProfilesPopover } from '@kbn/user-profile-components';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -91,44 +91,46 @@ const AssigneesFilterPopoverComponent: React.FC<AssigneesFilterPopoverProps> = (
   const isLoadingData = isLoading || isLoadingSuggest;
 
   return (
-    <UserProfilesPopover
-      isOpen={isPopoverOpen}
-      closePopover={togglePopover}
-      panelStyle={{
-        minWidth: 520,
-      }}
-      button={
-        <EuiFilterButton
-          data-test-subj="options-filter-popover-button-assignees"
-          iconType="arrowDown"
-          onClick={togglePopover}
-          isLoading={isLoadingData}
-          isSelected={isPopoverOpen}
-          hasActiveFilters={selectedAssignees.length > 0}
-          numActiveFilters={selectedAssignees.length}
-          aria-label={i18n.FILTER_ASSIGNEES_ARIA_LABEL}
-        >
-          {i18n.ASSIGNEES}
-        </EuiFilterButton>
-      }
-      selectableProps={{
-        onChange,
-        onSearchChange,
-        selectedStatusMessage,
-        options: searchResultProfiles,
-        selectedOptions: selectedAssignees,
-        isLoading: isLoadingData || isUserTyping,
-        height: 'full',
-        searchPlaceholder: i18n.SEARCH_USERS,
-        clearButtonLabel: i18n.CLEAR_FILTERS,
-        emptyMessage: <EmptyMessage />,
-        noMatchesMessage: !isUserTyping && !isLoadingData ? <NoMatches /> : <EmptyMessage />,
-        limit: MAX_ASSIGNEES_FILTER_LENGTH,
-        limitReachedMessage,
-        singleSelection: false,
-        nullOptionLabel: i18n.NO_ASSIGNEES,
-      }}
-    />
+    <EuiFilterGroup>
+      <UserProfilesPopover
+        isOpen={isPopoverOpen}
+        closePopover={togglePopover}
+        panelStyle={{
+          minWidth: 520,
+        }}
+        button={
+          <EuiFilterButton
+            data-test-subj="options-filter-popover-button-assignees"
+            iconType="arrowDown"
+            onClick={togglePopover}
+            isLoading={isLoadingData}
+            isSelected={isPopoverOpen}
+            hasActiveFilters={selectedAssignees.length > 0}
+            numActiveFilters={selectedAssignees.length}
+            aria-label={i18n.FILTER_ASSIGNEES_ARIA_LABEL}
+          >
+            {i18n.ASSIGNEES}
+          </EuiFilterButton>
+        }
+        selectableProps={{
+          onChange,
+          onSearchChange,
+          selectedStatusMessage,
+          options: searchResultProfiles,
+          selectedOptions: selectedAssignees,
+          isLoading: isLoadingData || isUserTyping,
+          height: 'full',
+          searchPlaceholder: i18n.SEARCH_USERS,
+          clearButtonLabel: i18n.CLEAR_FILTERS,
+          emptyMessage: <EmptyMessage />,
+          noMatchesMessage: !isUserTyping && !isLoadingData ? <NoMatches /> : <EmptyMessage />,
+          limit: MAX_ASSIGNEES_FILTER_LENGTH,
+          limitReachedMessage,
+          singleSelection: false,
+          nullOptionLabel: i18n.NO_ASSIGNEES,
+        }}
+      />
+    </EuiFilterGroup>
   );
 };
 AssigneesFilterPopoverComponent.displayName = 'AssigneesFilterPopover';
diff --git a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
index cbfdb30d122aa..992000921771e 100644
--- a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
@@ -18,6 +18,9 @@ import {
   EuiTextColor,
   EuiSpacer,
   useEuiTheme,
+  EuiFilterGroup,
+  EuiTextTruncate,
+  EuiText,
 } from '@elastic/eui';
 import { isEqual } from 'lodash/fp';
 import * as i18n from './translations';
@@ -63,16 +66,17 @@ const getEuiSelectableCheckedOptions = <T extends string, K extends string>(
 ) => options.filter((option) => option.checked === 'on') as Array<FilterOption<T, K>>;
 
 interface UseFilterParams<T extends string, K extends string = string> {
-  buttonLabel?: string;
   buttonIconType?: string;
+  buttonLabel?: string;
   hideActiveOptionsNumber?: boolean;
   id: string;
   limit?: number;
   limitReachedMessage?: string;
   onChange: (params: { filterId: string; selectedOptionKeys: string[] }) => void;
   options: Array<FilterOption<T, K>>;
-  selectedOptionKeys?: string[];
   renderOption?: (option: FilterOption<T, K>) => React.ReactNode;
+  selectedOptionKeys?: string[];
+  transparentBackground?: boolean;
 }
 export const MultiSelectFilter = <T extends string, K extends string = string>({
   buttonLabel,
@@ -85,6 +89,7 @@ export const MultiSelectFilter = <T extends string, K extends string = string>({
   options: rawOptions,
   selectedOptionKeys = [],
   renderOption,
+  transparentBackground,
 }: UseFilterParams<T, K>) => {
   const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -118,74 +123,91 @@ export const MultiSelectFilter = <T extends string, K extends string = string>({
   };
 
   return (
-    <EuiPopover
-      ownFocus
-      button={
-        <EuiFilterButton
-          data-test-subj={`options-filter-popover-button-${id}`}
-          iconType={buttonIconType || 'arrowDown'}
-          onClick={toggleIsPopoverOpen}
-          isSelected={isPopoverOpen}
-          numFilters={showActiveOptionsNumber ? options.length : undefined}
-          hasActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length > 0 : undefined}
-          numActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length : undefined}
-          aria-label={buttonLabel}
-        >
-          {buttonLabel}
-        </EuiFilterButton>
-      }
-      isOpen={isPopoverOpen}
-      closePopover={() => setIsPopoverOpen(false)}
-      panelPaddingSize="none"
-      repositionOnScroll
+    <EuiFilterGroup
+      css={css`
+        ${transparentBackground && 'background-color: transparent;'};
+      `}
     >
-      {isInvalid && (
-        <>
-          <EuiHorizontalRule margin="none" />
-          <EuiCallOut
-            title={limitReachedMessage}
-            color="warning"
-            size="s"
-            data-test-subj="maximum-length-warning"
-          />
-          <EuiHorizontalRule margin="none" />
-        </>
-      )}
-      <EuiSelectable<FilterOption<T, K>>
-        options={options}
-        searchable
-        searchProps={{
-          placeholder: buttonLabel,
-          compressed: false,
-          'data-test-subj': `${id}-search-input`,
-        }}
-        emptyMessage={i18n.EMPTY_FILTER_MESSAGE}
-        onChange={_onChange}
-        singleSelection={false}
-        renderOption={renderOption}
-      >
-        {(list, search) => (
-          <div
+      <EuiPopover
+        ownFocus
+        button={
+          <EuiFilterButton
             css={css`
-              width: 400px;
+              max-width: 186px;
             `}
+            data-test-subj={`options-filter-popover-button-${id}`}
+            iconType={buttonIconType || 'arrowDown'}
+            onClick={toggleIsPopoverOpen}
+            isSelected={isPopoverOpen}
+            numFilters={showActiveOptionsNumber ? options.length : undefined}
+            hasActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length > 0 : undefined}
+            numActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length : undefined}
+            aria-label={buttonLabel}
           >
-            <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
+            <EuiTextTruncate text={buttonLabel || ''} truncation={'end'} width={128}>
+              {(truncatedText: string) => (
+                <EuiText
+                  size="s"
+                  // Value returned from formatFieldValue is always sanitized
+                  dangerouslySetInnerHTML={{ __html: truncatedText }}
+                />
+              )}
+            </EuiTextTruncate>
+          </EuiFilterButton>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        panelPaddingSize="none"
+        repositionOnScroll
+      >
+        {isInvalid && (
+          <>
+            <EuiHorizontalRule margin="none" />
+            <EuiCallOut
+              title={limitReachedMessage}
+              color="warning"
+              size="s"
+              data-test-subj="maximum-length-warning"
+            />
+            <EuiHorizontalRule margin="none" />
+          </>
+        )}
+        <EuiSelectable<FilterOption<T, K>>
+          options={options}
+          searchable
+          searchProps={{
+            placeholder: buttonLabel,
+            compressed: false,
+            'data-test-subj': `${id}-search-input`,
+          }}
+          emptyMessage={i18n.EMPTY_FILTER_MESSAGE}
+          onChange={_onChange}
+          singleSelection={false}
+          renderOption={renderOption}
+        >
+          {(list, search) => (
             <div
               css={css`
-                line-height: ${euiTheme.size.xl};
-                padding-left: ${euiTheme.size.m};
-                border-bottom: ${euiTheme.border.thin};
+                width: 400px;
               `}
             >
-              <EuiTextColor color="subdued">{i18n.OPTIONS(options.length)}</EuiTextColor>
+              <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
+              <div
+                css={css`
+                  line-height: ${euiTheme.size.xl};
+                  padding-left: ${euiTheme.size.m};
+                  border-bottom: ${euiTheme.border.thin};
+                `}
+              >
+                <EuiTextColor color="subdued">{i18n.OPTIONS(options.length)}</EuiTextColor>
+              </div>
+              <EuiSpacer size="xs" />
+              {list}
             </div>
-            <EuiSpacer size="xs" />
-            {list}
-          </div>
-        )}
-      </EuiSelectable>
-    </EuiPopover>
+          )}
+        </EuiSelectable>
+      </EuiPopover>
+    </EuiFilterGroup>
   );
 };
 
diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/more_filters_selectable.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/more_filters_selectable.tsx
index e89ff2af07242..d191b339a05aa 100644
--- a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/more_filters_selectable.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/more_filters_selectable.tsx
@@ -27,6 +27,7 @@ export const MoreFiltersSelectable = ({
       onChange={onChange}
       options={options}
       selectedOptionKeys={activeFilters}
+      transparentBackground={true}
     />
   );
 };
diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
index 8d472402b4e77..2c9ec26de739b 100644
--- a/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiFilterGroup, EuiButton } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiButton } from '@elastic/eui';
 import { mergeWith, isEqual } from 'lodash';
 import { MoreFiltersSelectable } from './table_filter_config/more_filters_selectable';
 import type { CaseStatuses } from '../../../common/types/domain';
@@ -126,7 +126,7 @@ const CasesTableFiltersComponent = ({
   }, [onCreateCasePressed]);
 
   return (
-    <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+    <EuiFlexGroup gutterSize="s" justifyContent="flexStart" wrap={true}>
       {isSelectorView && onCreateCasePressed ? (
         <EuiFlexItem grow={false}>
           <EuiButton
@@ -149,20 +149,21 @@ const CasesTableFiltersComponent = ({
           onSearch={handleOnSearch}
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFilterGroup data-test-subj="cases-table-filters-group">
-          {activeFilters.map((filter) => (
-            <React.Fragment key={filter.key}>{filter.render({ filterOptions })}</React.Fragment>
-          ))}
-          {isSelectorView || (
-            <MoreFiltersSelectable
-              options={selectableOptions}
-              activeFilters={activeSelectableOptionKeys}
-              onChange={onFilterConfigChange}
-            />
-          )}
-        </EuiFilterGroup>
-      </EuiFlexItem>
+      {activeFilters.map((filter) => (
+        <EuiFlexItem grow={false} key={filter.key}>
+          {filter.render({ filterOptions })}
+        </EuiFlexItem>
+      ))}
+
+      {isSelectorView || (
+        <EuiFlexItem grow={false}>
+          <MoreFiltersSelectable
+            options={selectableOptions}
+            activeFilters={activeSelectableOptionKeys}
+            onChange={onFilterConfigChange}
+          />
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   );
 };

From 26b1affedb8ee0584c477363633ab6e3e0a426ee Mon Sep 17 00:00:00 2001
From: Julian Gernun <17549662+jcger@users.noreply.github.com>
Date: Thu, 7 Dec 2023 18:45:06 +0100
Subject: [PATCH 2/4] remove comment

---
 .../public/components/all_cases/multi_select_filter.tsx     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
index 992000921771e..64659b50a443e 100644
--- a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
@@ -146,11 +146,7 @@ export const MultiSelectFilter = <T extends string, K extends string = string>({
           >
             <EuiTextTruncate text={buttonLabel || ''} truncation={'end'} width={128}>
               {(truncatedText: string) => (
-                <EuiText
-                  size="s"
-                  // Value returned from formatFieldValue is always sanitized
-                  dangerouslySetInnerHTML={{ __html: truncatedText }}
-                />
+                <EuiText size="s" dangerouslySetInnerHTML={{ __html: truncatedText }} />
               )}
             </EuiTextTruncate>
           </EuiFilterButton>

From 0e9963634df37b3534b674c899d6e5275fed7f34 Mon Sep 17 00:00:00 2001
From: Julian Gernun <17549662+jcger@users.noreply.github.com>
Date: Mon, 11 Dec 2023 09:20:46 +0100
Subject: [PATCH 3/4] truncate by class and fix test

---
 .../components/all_cases/multi_select_filter.tsx     |  8 +++-----
 .../components/all_cases/table_filters.test.tsx      | 12 ++++++------
 .../public/components/all_cases/table_filters.tsx    |  7 ++++++-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
index 64659b50a443e..afb2d9930d9bb 100644
--- a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
@@ -144,11 +144,9 @@ export const MultiSelectFilter = <T extends string, K extends string = string>({
             numActiveFilters={showActiveOptionsNumber ? selectedOptionKeys.length : undefined}
             aria-label={buttonLabel}
           >
-            <EuiTextTruncate text={buttonLabel || ''} truncation={'end'} width={128}>
-              {(truncatedText: string) => (
-                <EuiText size="s" dangerouslySetInnerHTML={{ __html: truncatedText }} />
-              )}
-            </EuiTextTruncate>
+            <EuiText size="s" className="eui-textTruncate">
+              {buttonLabel}
+            </EuiText>
           </EuiFilterButton>
         }
         isOpen={isPopoverOpen}
diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx
index 17854c7c33547..ad8c63350e3ab 100644
--- a/x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx
@@ -534,7 +534,7 @@ describe('CasesTableFilters ', () => {
       userEvent.click(screen.getByRole('option', { name: 'Toggle' }));
       expect(screen.getByRole('button', { name: 'Toggle' })).toBeInTheDocument();
 
-      const filterBar = screen.getByTestId('cases-table-filters-group');
+      const filterBar = screen.getByTestId('cases-table-filters');
       const allFilters = within(filterBar).getAllByRole('button');
       const orderedFilterLabels = ['Severity', 'Status', 'Tags', 'Categories', 'Toggle', 'More'];
       orderedFilterLabels.forEach((label, index) => {
@@ -587,7 +587,7 @@ describe('CasesTableFilters ', () => {
       userEvent.click(screen.getByRole('option', { name: 'Status' }));
       expect(screen.queryByRole('button', { name: 'Status' })).not.toBeInTheDocument();
 
-      const filterBar = screen.getByTestId('cases-table-filters-group');
+      const filterBar = screen.getByTestId('cases-table-filters');
       const allFilters = within(filterBar).getAllByRole('button');
       const orderedFilterLabels = ['Severity', 'Tags', 'Categories', 'More'];
       orderedFilterLabels.forEach((label, index) => {
@@ -673,7 +673,7 @@ describe('CasesTableFilters ', () => {
 
       appMockRender.render(<CasesTableFilters {...props} />);
 
-      const filterBar = screen.getByTestId('cases-table-filters-group');
+      const filterBar = screen.getByTestId('cases-table-filters');
       let allFilters: HTMLElement[];
       await waitFor(() => {
         allFilters = within(filterBar).getAllByRole('button');
@@ -703,7 +703,7 @@ describe('CasesTableFilters ', () => {
 
       appMockRender.render(<CasesTableFilters {...props} />);
 
-      const filterBar = screen.getByTestId('cases-table-filters-group');
+      const filterBar = screen.getByTestId('cases-table-filters');
       let allFilters: HTMLElement[];
       await waitFor(() => {
         allFilters = within(filterBar).getAllByRole('button');
@@ -756,7 +756,7 @@ describe('CasesTableFilters ', () => {
     it('when a filter is active and isnt last in the list, it should move the filter to last position after deactivating and activating', async () => {
       appMockRender.render(<CasesTableFilters {...props} />);
 
-      const filterBar = screen.getByTestId('cases-table-filters-group');
+      const filterBar = screen.getByTestId('cases-table-filters');
       let allFilters = within(filterBar).getAllByRole('button');
       let orderedFilterLabels = ['Severity', 'Status', 'Tags', 'Categories', 'More'];
       orderedFilterLabels.forEach((label, index) => {
@@ -788,7 +788,7 @@ describe('CasesTableFilters ', () => {
       });
       appMockRender.render(<CasesTableFilters {...props} />);
 
-      const filterBar = screen.getByTestId('cases-table-filters-group');
+      const filterBar = screen.getByTestId('cases-table-filters');
       let allFilters: HTMLElement[];
       await waitFor(() => {
         allFilters = within(filterBar).getAllByRole('button');
diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
index 2c9ec26de739b..8672671bd8ab6 100644
--- a/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
@@ -126,7 +126,12 @@ const CasesTableFiltersComponent = ({
   }, [onCreateCasePressed]);
 
   return (
-    <EuiFlexGroup gutterSize="s" justifyContent="flexStart" wrap={true}>
+    <EuiFlexGroup
+      gutterSize="s"
+      justifyContent="flexStart"
+      wrap={true}
+      data-test-subj="cases-table-filters"
+    >
       {isSelectorView && onCreateCasePressed ? (
         <EuiFlexItem grow={false}>
           <EuiButton

From 6e6b2448af9bdd72ac5415bb96de8a4412bc4e79 Mon Sep 17 00:00:00 2001
From: Julian Gernun <17549662+jcger@users.noreply.github.com>
Date: Mon, 11 Dec 2023 09:31:01 +0100
Subject: [PATCH 4/4] remove truncate component

---
 .../cases/public/components/all_cases/multi_select_filter.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
index afb2d9930d9bb..b56c926bab965 100644
--- a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx
@@ -19,7 +19,6 @@ import {
   EuiSpacer,
   useEuiTheme,
   EuiFilterGroup,
-  EuiTextTruncate,
   EuiText,
 } from '@elastic/eui';
 import { isEqual } from 'lodash/fp';