[Security Solution][Endpoint] Event filters ux adjustments for 8.1 (#123853)

* Don't show a default value '-' for emoty descriptions on artifacts list. Also removes empty spaces

* Update copy to say 'event filters' instead of 'exceptions'

* Decrease spacing between avatar and comments textbox

* Adds extra spacing between last exception builder field and the buttons group

* Reduces effect scope togle width to by dynamic depending on translations

* Makes effected policy button group persistent across different artifact forms

* Removes unused import

* Center button group for small devices

x-pack/plugins/lists/public/exceptions/components/builder/exception_items_renderer.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useEffect, useReducer } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import styled from 'styled-components';
 import { HttpStart } from 'kibana/public';
 import { addIdToItem } from '@kbn/securitysolution-utils';
@@ -425,6 +425,8 @@ export const ExceptionBuilderComponent = ({
         </EuiFlexItem>
       ))}
 
+      <EuiSpacer size="m" />
+
       <MyButtonsContainer data-test-subj={`andOrOperatorButtons`}>
         <EuiFlexGroup gutterSize="s">
           {andLogicIncluded && (

x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_comments.tsx

@@ -32,7 +32,7 @@ const COMMENT_ACCORDION_BUTTON_CLASS_NAME = 'exceptionCommentAccordionButton';
 
 const MyAvatar = styled(EuiAvatar)`
   ${({ theme }) => css`
-    margin-right: ${theme.eui.paddingSizes.m};
+    margin-right: ${theme.eui.paddingSizes.s};
   `}
 `;
 

x-pack/plugins/security_solution/public/management/components/effected_policy_select/effected_policy_select.tsx

@@ -46,6 +46,20 @@ const StyledEuiSelectable = styled.div`
   }
 `;
 
+const StyledEuiFlexItemButtonGroup = styled(EuiFlexItem)`
+  @media only screen and (max-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
+    align-items: center;
+  }
+`;
+
+const StyledButtonGroup = styled(EuiButtonGroup)`
+  display: flex;
+  justify-content: right;
+  .euiButtonGroupButton {
+    padding-right: ${(props) => props.theme.eui.paddingSizes.l};
+  }
+`;
+
 const EffectivePolicyFormContainer = styled.div`
   .policy-name .euiSelectableListItem__text {
     text-decoration: none !important;
@@ -99,7 +113,7 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
           label: i18n.translate('xpack.securitySolution.endpoint.effectedPolicySelect.global', {
             defaultMessage: 'Global',
           }),
-          iconType: isGlobal ? 'checkInCircleFilled' : '',
+          iconType: isGlobal ? 'checkInCircleFilled' : 'empty',
           'data-test-subj': getTestId('global'),
         },
         {
@@ -107,7 +121,7 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
           label: i18n.translate('xpack.securitySolution.endpoint.effectedPolicySelect.perPolicy', {
             defaultMessage: 'Per Policy',
           }),
-          iconType: !isGlobal ? 'checkInCircleFilled' : '',
+          iconType: !isGlobal ? 'checkInCircleFilled' : 'empty',
           'data-test-subj': getTestId('perPolicy'),
         },
       ],
@@ -208,19 +222,18 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
               </p>
             </EuiText>
           </EuiFlexItem>
-          <EuiFlexItem grow={1}>
+          <StyledEuiFlexItemButtonGroup grow={1}>
             <EuiFormRow fullWidth>
-              <EuiButtonGroup
+              <StyledButtonGroup
                 legend="Global Policy Toggle"
                 options={toggleGlobal}
                 idSelected={isGlobal ? 'globalPolicy' : 'perPolicy'}
                 onChange={handleGlobalButtonChange}
                 color="primary"
-                isFullWidth
                 data-test-subj={getTestId('byPolicyGlobalButtonGroup')}
               />
             </EuiFormRow>
-          </EuiFlexItem>
+          </StyledEuiFlexItemButtonGroup>
         </EuiFlexGroup>
         <EuiSpacer />
         {!isGlobal &&

x-pack/plugins/security_solution/public/management/pages/event_filters/view/event_filters_list_page.tsx

@@ -230,6 +230,8 @@ export const EventFiltersListPage = memo(() => {
             children: DELETE_EVENT_FILTER_ACTION_LABEL,
           },
         ],
+        hideDescription: !eventFilter.description,
+        hideComments: !eventFilter.comments.length,
       };
     }
 

x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/view/host_isolation_exceptions_list.tsx

@@ -157,6 +157,8 @@ export const HostIsolationExceptionsList = () => {
       'data-test-subj': `hostIsolationExceptionsCard`,
       actions: privileges.canIsolateHost ? [editAction, deleteAction] : [deleteAction],
       policies: artifactCardPolicies,
+      hideDescription: !element.description,
+      hideComments: !element.comments.length,
     };
   }
 

x-pack/plugins/security_solution/public/management/pages/policy/view/event_filters/list/policy_event_filters_list.test.tsx

@@ -66,7 +66,7 @@ describe('Policy details event filters list', () => {
     );
     await render();
     expect(renderResult.getByTestId('policyDetailsEventFiltersSearchCount')).toHaveTextContent(
-      'Showing 0 exceptions'
+      'Showing 0 event filters'
     );
     expect(renderResult.getByTestId('searchField')).toBeTruthy();
   });

x-pack/plugins/security_solution/public/management/pages/policy/view/event_filters/list/policy_event_filters_list.tsx

@@ -96,7 +96,8 @@ export const PolicyEventFiltersList = React.memo<PolicyEventFiltersListProps>(({
     return i18n.translate(
       'xpack.securitySolution.endpoint.policy.eventFilters.list.totalItemCount',
       {
-        defaultMessage: 'Showing {totalItemsCount, plural, one {# exception} other {# exceptions}}',
+        defaultMessage:
+          'Showing {totalItemsCount, plural, one {# event filter} other {# event filters}}',
         values: { totalItemsCount: eventFilters?.data.length || 0 },
       }
     );

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.tsx

@@ -177,6 +177,7 @@ export const TrustedAppsGrid = memo(() => {
             children: DELETE_TRUSTED_APP_ACTION_LABEL,
           },
         ],
+        hideDescription: !trustedApp.description,
       };
     }