[8.12] [Cases] Filter Overflow When To Much Filters Active (#172860) (#…

…173045) # Backport This will backport the following commits from `main` to `8.12`: - [[Cases] Filter Overflow When To Much Filters Active (#172860)](#172860)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Julian Gernun <[email protected]>
elastic · Dec 11, 2023 · 6333a72 · 6333a72
1 parent cd879cb
commit 6333a72
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 122 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
@@ -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
@@ -18,6 +18,8 @@ import {
   EuiTextColor,
   EuiSpacer,
   useEuiTheme,
+  EuiFilterGroup,
+  EuiText,
 } from '@elastic/eui';
 import { isEqual } from 'lodash/fp';
 import * as i18n from './translations';
@@ -63,16 +65,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 +88,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 +122,85 @@ 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>
+            <EuiText size="s" className="eui-textTruncate">
+              {buttonLabel}
+            </EuiText>
+          </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/...plugins/cases/public/components/all_cases/table_filter_config/more_filters_selectable.tsx b/...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.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
@@ -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,12 @@ const CasesTableFiltersComponent = ({
   }, [onCreateCasePressed]);
 
   return (
-    <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+    <EuiFlexGroup
+      gutterSize="s"
+      justifyContent="flexStart"
+      wrap={true}
+      data-test-subj="cases-table-filters"
+    >
       {isSelectorView && onCreateCasePressed ? (
         <EuiFlexItem grow={false}>
           <EuiButton
@@ -149,20 +154,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>
   );
 };