[Security Solution] [Cases] Small UI bugfixes (elastic#96511)

stephmilovic · Apr 9, 2021 · d63a246 · d63a246
1 parent 5071192
commit d63a246
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 29 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/columns.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/columns.tsx
@@ -14,6 +14,8 @@ import {
   EuiTableActionsColumnType,
   EuiTableComputedColumnType,
   EuiTableFieldDataColumnType,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
 import styled from 'styled-components';
@@ -73,12 +75,12 @@ export const getCasesColumns = (
           return theCase.status !== CaseStatuses.closed ? (
             caseDetailsLinkComponent
           ) : (
-            <>
-              {caseDetailsLinkComponent}
-              <Spacer>
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem>{caseDetailsLinkComponent}</EuiFlexItem>
+              <EuiFlexItem>
                 <MediumShadeText>{i18n.CLOSED}</MediumShadeText>
-              </Spacer>
-            </>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           );
         }
         return getEmptyTagValue();
@@ -132,7 +134,6 @@ export const getCasesColumns = (
       align: RIGHT_ALIGNMENT,
       field: 'totalAlerts',
       name: ALERTS,
-      sortable: true,
       render: (totalAlerts: Case['totalAlerts']) =>
         totalAlerts != null
           ? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
@@ -142,37 +143,36 @@ export const getCasesColumns = (
       align: RIGHT_ALIGNMENT,
       field: 'totalComment',
       name: i18n.COMMENTS,
-      sortable: true,
       render: (totalComment: Case['totalComment']) =>
         totalComment != null
           ? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
           : getEmptyTagValue(),
     },
-    filterStatus === CaseStatuses.open
+    filterStatus === CaseStatuses.closed
       ? {
-          field: 'createdAt',
-          name: i18n.OPENED_ON,
+          field: 'closedAt',
+          name: i18n.CLOSED_ON,
           sortable: true,
-          render: (createdAt: Case['createdAt']) => {
-            if (createdAt != null) {
+          render: (closedAt: Case['closedAt']) => {
+            if (closedAt != null) {
               return (
-                <span data-test-subj={`case-table-column-createdAt`}>
-                  <FormattedRelativePreferenceDate value={createdAt} />
+                <span data-test-subj={`case-table-column-closedAt`}>
+                  <FormattedRelativePreferenceDate value={closedAt} />
                 </span>
               );
             }
             return getEmptyTagValue();
           },
         }
       : {
-          field: 'closedAt',
-          name: i18n.CLOSED_ON,
+          field: 'createdAt',
+          name: i18n.OPENED_ON,
           sortable: true,
-          render: (closedAt: Case['closedAt']) => {
-            if (closedAt != null) {
+          render: (createdAt: Case['createdAt']) => {
+            if (createdAt != null) {
               return (
-                <span data-test-subj={`case-table-column-closedAt`}>
-                  <FormattedRelativePreferenceDate value={closedAt} />
+                <span data-test-subj={`case-table-column-createdAt`}>
+                  <FormattedRelativePreferenceDate value={createdAt} />
                 </span>
               );
             }

diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
@@ -816,7 +816,7 @@ describe('AllCases', () => {
       wrapper.find('button[data-test-subj="case-status-filter"]').simulate('click');
       wrapper.find('button[data-test-subj="case-status-filter-in-progress"]').simulate('click');
       expect(setQueryParams).toBeCalledWith({
-        sortField: 'updatedAt',
+        sortField: 'createdAt',
       });
     });
   });

diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx
@@ -342,7 +342,7 @@ export const AllCases = React.memo<AllCasesProps>(
           newFilterOptions.status &&
           newFilterOptions.status === CaseStatuses['in-progress']
         ) {
-          setQueryParams({ sortField: SortFieldCase.updatedAt });
+          setQueryParams({ sortField: SortFieldCase.createdAt });
         }
         setFilters(newFilterOptions);
         refreshCases(false);

diff --git a/...ns/security_solution/public/cases/components/configure_cases/connectors_dropdown.test.tsx b/...ns/security_solution/public/cases/components/configure_cases/connectors_dropdown.test.tsx
@@ -41,6 +41,7 @@ describe('ConnectorsDropdown', () => {
           "inputDisplay": <EuiFlexGroup
             alignItems="center"
             gutterSize="none"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}
@@ -65,6 +66,7 @@ describe('ConnectorsDropdown', () => {
           "inputDisplay": <EuiFlexGroup
             alignItems="center"
             gutterSize="none"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}
@@ -87,6 +89,7 @@ describe('ConnectorsDropdown', () => {
           "inputDisplay": <EuiFlexGroup
             alignItems="center"
             gutterSize="none"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}
@@ -109,6 +112,7 @@ describe('ConnectorsDropdown', () => {
           "inputDisplay": <EuiFlexGroup
             alignItems="center"
             gutterSize="none"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}
@@ -131,6 +135,7 @@ describe('ConnectorsDropdown', () => {
           "inputDisplay": <EuiFlexGroup
             alignItems="center"
             gutterSize="none"
+            responsive={false}
           >
             <EuiFlexItem
               grow={false}

diff --git a/...plugins/security_solution/public/cases/components/configure_cases/connectors_dropdown.tsx b/...plugins/security_solution/public/cases/components/configure_cases/connectors_dropdown.tsx
@@ -34,7 +34,7 @@ const EuiIconExtended = styled(EuiIcon)`
 const noConnectorOption = {
   value: 'none',
   inputDisplay: (
-    <EuiFlexGroup gutterSize="none" alignItems="center">
+    <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
       <EuiFlexItem grow={false}>
         <EuiIconExtended type="minusInCircle" size={ICON_SIZE} />
       </EuiFlexItem>
@@ -77,7 +77,7 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
           {
             value: connector.id,
             inputDisplay: (
-              <EuiFlexGroup gutterSize="none" alignItems="center">
+              <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiIconExtended
                     type={connectorsConfiguration[connector.actionTypeId]?.logo ?? ''}

diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/field_mapping.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/field_mapping.tsx
@@ -39,7 +39,7 @@ const FieldMappingComponent: React.FC<FieldMappingProps> = ({
     <EuiFlexGroup direction="column" gutterSize="none">
       <EuiFlexItem>
         {' '}
-        <EuiFlexGroup>
+        <EuiFlexGroup responsive={false}>
           <EuiFlexItem>
             <span className="euiFormLabel">{i18n.FIELD_MAPPING_FIRST_COL}</span>
           </EuiFlexItem>

diff --git a/...ns/security_solution/public/cases/components/configure_cases/field_mapping_row_static.tsx b/...ns/security_solution/public/cases/components/configure_cases/field_mapping_row_static.tsx
@@ -28,9 +28,9 @@ const FieldMappingRowComponent: React.FC<RowProps> = ({
     selectedActionType,
   ]);
   return (
-    <EuiFlexGroup data-test-subj="static-mappings" alignItems="center">
+    <EuiFlexGroup data-test-subj="static-mappings" alignItems="center" responsive={false}>
       <EuiFlexItem>
-        <EuiFlexGroup component="span" justifyContent="spaceBetween">
+        <EuiFlexGroup component="span" justifyContent="spaceBetween" responsive={false}>
           <EuiFlexItem component="span" grow={false}>
             <EuiCode data-test-subj="field-mapping-source">{securitySolutionField}</EuiCode>
           </EuiFlexItem>
@@ -40,7 +40,7 @@ const FieldMappingRowComponent: React.FC<RowProps> = ({
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup component="span" justifyContent="spaceBetween">
+        <EuiFlexGroup component="span" justifyContent="spaceBetween" responsive={false}>
           <EuiFlexItem component="span" grow={false}>
             {isLoading ? (
               <EuiLoadingSpinner size="m" />

diff --git a/x-pack/plugins/security_solution/public/cases/containers/types.ts b/x-pack/plugins/security_solution/public/cases/containers/types.ts
@@ -117,7 +117,6 @@ export interface AllCases extends CasesStatus {
 export enum SortFieldCase {
   createdAt = 'createdAt',
   closedAt = 'closedAt',
-  updatedAt = 'updatedAt',
 }
 
 export interface ElasticUser {