[Security Solution][Case] Fix case status dropdown on modals (elastic…

…#86243)
cnasikas · Dec 23, 2020 · e452af9 · e452af9
1 parent ce0c66a
commit e452af9
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 18 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.test.tsx
@@ -8,11 +8,11 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import { CaseStatuses } from '../../../../../case/common/api';
-import { CasesTableFilters } from './table_filters';
 import { TestProviders } from '../../../common/mock';
 import { useGetTags } from '../../containers/use_get_tags';
 import { useGetReporters } from '../../containers/use_get_reporters';
 import { DEFAULT_FILTER_OPTIONS } from '../../containers/use_get_cases';
+import { CasesTableFilters } from './table_filters';
 
 jest.mock('../../containers/use_get_reporters');
 jest.mock('../../containers/use_get_tags');
@@ -151,4 +151,20 @@ describe('CasesTableFilters ', () => {
     );
     expect(onFilterChanged).toHaveBeenCalledWith({ reporters: [{ username: 'casetester' }] });
   });
+
+  it('StatusFilterWrapper should have a fixed width of 180px', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <CasesTableFilters {...props} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="status-filter-wrapper"]').first()).toHaveStyleRule(
+      'flex-basis',
+      '180px',
+      {
+        modifier: '&&',
+      }
+    );
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.tsx
@@ -6,6 +6,7 @@
 
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { isEqual } from 'lodash/fp';
+import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiFilterGroup } from '@elastic/eui';
 
 import { CaseStatuses } from '../../../../../case/common/api';
@@ -25,6 +26,13 @@ interface CasesTableFiltersProps {
   setFilterRefetch: (val: () => void) => void;
 }
 
+// Fix the width of the status dropdown to prevent hiding long text items
+const StatusFilterWrapper = styled(EuiFlexItem)`
+  && {
+    flex-basis: 180px;
+  }
+`;
+
 /**
  * Collection of filters for filtering data within the CasesTable. Contains search bar,
  * and tag selection
@@ -131,23 +139,27 @@ const CasesTableFiltersComponent = ({
   );
 
   return (
-    <EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
-      <EuiFlexItem grow={8}>
-        <EuiFieldSearch
-          aria-label={i18n.SEARCH_CASES}
-          data-test-subj="search-cases"
-          fullWidth
-          incremental={false}
-          placeholder={i18n.SEARCH_PLACEHOLDER}
-          onSearch={handleOnSearch}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={2}>
-        <StatusFilter
-          selectedStatus={initial.status}
-          onStatusChanged={onStatusChanged}
-          stats={stats}
-        />
+    <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+      <EuiFlexItem>
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem>
+            <EuiFieldSearch
+              aria-label={i18n.SEARCH_CASES}
+              data-test-subj="search-cases"
+              fullWidth
+              incremental={false}
+              placeholder={i18n.SEARCH_PLACEHOLDER}
+              onSearch={handleOnSearch}
+            />
+          </EuiFlexItem>
+          <StatusFilterWrapper grow={false} data-test-subj="status-filter-wrapper">
+            <StatusFilter
+              selectedStatus={initial.status}
+              onStatusChanged={onStatusChanged}
+              stats={stats}
+            />
+          </StatusFilterWrapper>
+        </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiFilterGroup>