[EDR Workflows] Policy Settings - view mode

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/cards/behaviour_protection_card.test.tsx

@@ -109,27 +109,38 @@ describe('Policy Behaviour Protection Card', () => {
         prebuiltRules: false,
       };
       const config = { ...defaults, ...args };
-      return [
+
+      const baseText = [
         'Type',
         'Malicious behavior',
         'Operating system',
         'Windows, Mac, Linux ',
         `Malicious behavior protections ${config.enabled ? 'enabled' : 'disabled'}`,
-        'Protection level',
-        'Prevent',
-        ...(config.reputationServices
-          ? ['Reputation serviceInfo', "Don't use reputation service"]
-          : []),
-        'User notification',
-        'Agent version 7.15+',
-        ...(config.notifyUser ? ['Notify user', 'Notification message', '—'] : ['Notify user']),
-        ...(config.prebuiltRules
+      ];
+
+      return (
+        config.enabled
           ? [
-              'View related detection rules. ',
-              'Prebuilt rules are tagged “Elastic” on the Detection Rules page.',
+              ...baseText,
+              'Protection level',
+              'Prevent',
+              ...(config.reputationServices
+                ? ['Reputation serviceInfo', "Don't use reputation service"]
+                : []),
+              'User notification',
+              'Agent version 7.15+',
+              ...(config.notifyUser
+                ? ['Notify user', 'Notification message', '—']
+                : ['Notify user']),
+              ...(config.prebuiltRules
+                ? [
+                    'View related detection rules. ',
+                    'Prebuilt rules are tagged “Elastic” on the Detection Rules page.',
+                  ]
+                : ['View related detection rules.']),
             ]
-          : ['View related detection rules.']),
-      ].join('');
+          : baseText
+      ).join('');
     };
 
     beforeEach(() => {

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/cards/malware_protections_card.test.tsx

@@ -147,17 +147,7 @@ describe('Policy Malware Protections Card', () => {
             'Malware' +
             'Operating system' +
             'Windows, Mac, Linux ' +
-            'Malware protections disabled' +
-            'Protection level' +
-            'Prevent' +
-            'Blocklist enabled' +
-            'Info' +
-            'User notification' +
-            'Agent version 7.11+' +
-            'Notify user' +
-            'Notification message' +
-            '—' +
-            'View related detection rules. Prebuilt rules are tagged “Elastic” on the Detection Rules page.'
+            'Malware protections disabled'
         )
       );
     });

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/cards/malware_protections_card.tsx

@@ -17,7 +17,10 @@ import { NotifyUserOption } from '../notify_user_option';
 import { SettingCard } from '../setting_card';
 import type { PolicyFormComponentCommonProps } from '../../types';
 import type { Immutable } from '../../../../../../../../common/endpoint/types';
-import { PolicyOperatingSystem } from '../../../../../../../../common/endpoint/types';
+import {
+  PolicyOperatingSystem,
+  ProtectionModes,
+} from '../../../../../../../../common/endpoint/types';
 import type { MalwareProtectionOSes } from '../../../../types';
 import type { ProtectionSettingCardSwitchProps } from '../protection_setting_card_switch';
 import { ProtectionSettingCardSwitch } from '../protection_setting_card_switch';
@@ -65,6 +68,8 @@ export const MalwareProtectionsCard = React.memo<MalwareProtectionsProps>(
     const getTestId = useTestIdGenerator(dataTestSubj);
     const isProtectionsAllowed = !useGetProtectionsUnavailableComponent();
     const protection = 'malware';
+    const selected = (policy && policy.windows[protection].mode) !== ProtectionModes.off;
+
     const protectionLabel = i18n.translate(
       'xpack.securitySolution.endpoint.policy.protections.malware',
       {
@@ -83,8 +88,11 @@ export const MalwareProtectionsCard = React.memo<MalwareProtectionsProps>(
         })}
         supportedOss={[OperatingSystem.WINDOWS, OperatingSystem.MAC, OperatingSystem.LINUX]}
         dataTestSubj={getTestId()}
+        selected={selected}
+        mode={mode}
         rightCorner={
           <ProtectionSettingCardSwitch
+            selected={selected}
             protection={protection}
             protectionLabel={protectionLabel}
             osList={MALWARE_OS_VALUES}

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/cards/memory_protection_card.tsx

@@ -16,7 +16,10 @@ import { DetectPreventProtectionLevel } from '../detect_prevent_protection_level
 import { ProtectionSettingCardSwitch } from '../protection_setting_card_switch';
 import { SettingLockedCard } from '../setting_locked_card';
 import type { Immutable } from '../../../../../../../../common/endpoint/types';
-import { PolicyOperatingSystem } from '../../../../../../../../common/endpoint/types';
+import {
+  PolicyOperatingSystem,
+  ProtectionModes,
+} from '../../../../../../../../common/endpoint/types';
 import type { MemoryProtectionOSes } from '../../../../types';
 import { useLicense } from '../../../../../../../common/hooks/use_license';
 import type { PolicyFormComponentCommonProps } from '../../types';
@@ -44,6 +47,8 @@ export const MemoryProtectionCard = memo<MemoryProtectionCardProps>(
     const getTestId = useTestIdGenerator(dataTestSubj);
     const isProtectionsAllowed = !useGetProtectionsUnavailableComponent();
     const protection = 'memory_protection';
+    const selected = (policy && policy.windows[protection].mode) !== ProtectionModes.off;
+
     const protectionLabel = i18n.translate(
       'xpack.securitySolution.endpoint.policy.protections.memory',
       {
@@ -68,8 +73,11 @@ export const MemoryProtectionCard = memo<MemoryProtectionCardProps>(
         })}
         supportedOss={[OperatingSystem.WINDOWS, OperatingSystem.MAC, OperatingSystem.LINUX]}
         dataTestSubj={getTestId()}
+        selected={selected}
+        mode={mode}
         rightCorner={
           <ProtectionSettingCardSwitch
+            selected={selected}
             policy={policy}
             onChange={onChange}
             mode={mode}

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/cards/protection_seetings_card/behaviour_protection_card.tsx

@@ -18,7 +18,10 @@ import { NotifyUserOption } from '../../notify_user_option';
 import { DetectPreventProtectionLevel } from '../../detect_prevent_protection_level';
 import { ProtectionSettingCardSwitch } from '../../protection_setting_card_switch';
 import type { Immutable } from '../../../../../../../../../common/endpoint/types';
-import { PolicyOperatingSystem } from '../../../../../../../../../common/endpoint/types';
+import {
+  PolicyOperatingSystem,
+  ProtectionModes,
+} from '../../../../../../../../../common/endpoint/types';
 import type { BehaviorProtectionOSes } from '../../../../../types';
 import { useLicense } from '../../../../../../../../common/hooks/use_license';
 import { SettingLockedCard } from '../../setting_locked_card';
@@ -51,6 +54,7 @@ export const BehaviourProtectionCard = memo<BehaviourProtectionCardProps>(
         defaultMessage: 'Malicious behavior protections',
       }
     );
+    const selected = (policy && policy.windows[protection].mode) !== ProtectionModes.off;
 
     if (!isProtectionsAllowed) {
       return null;
@@ -70,10 +74,13 @@ export const BehaviourProtectionCard = memo<BehaviourProtectionCardProps>(
         type={i18n.translate('xpack.securitySolution.endpoint.policy.details.behavior_protection', {
           defaultMessage: 'Malicious behavior',
         })}
+        selected={selected}
+        mode={mode}
         supportedOss={[OperatingSystem.WINDOWS, OperatingSystem.MAC, OperatingSystem.LINUX]}
         dataTestSubj={getTestId()}
         rightCorner={
           <ProtectionSettingCardSwitch
+            selected={selected}
             policy={policy}
             onChange={onChange}
             mode={mode}

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/cards/ransomware_protection_card.tsx

@@ -16,7 +16,10 @@ import { DetectPreventProtectionLevel } from '../detect_prevent_protection_level
 import { SettingCard } from '../setting_card';
 import type { PolicyFormComponentCommonProps } from '../../types';
 import type { Immutable } from '../../../../../../../../common/endpoint/types';
-import { PolicyOperatingSystem } from '../../../../../../../../common/endpoint/types';
+import {
+  PolicyOperatingSystem,
+  ProtectionModes,
+} from '../../../../../../../../common/endpoint/types';
 import type { RansomwareProtectionOSes } from '../../../../types';
 import { useLicense } from '../../../../../../../common/hooks/use_license';
 import { SettingLockedCard } from '../setting_locked_card';
@@ -42,6 +45,8 @@ export const RansomwareProtectionCard = React.memo<RansomwareProtectionCardProps
     const isProtectionsAllowed = !useGetProtectionsUnavailableComponent();
     const getTestId = useTestIdGenerator(dataTestSubj);
     const protection = 'ransomware';
+    const selected = (policy && policy.windows[protection].mode) !== ProtectionModes.off;
+
     const protectionLabel = i18n.translate(
       'xpack.securitySolution.endpoint.policy.protections.ransomware',
       {
@@ -69,8 +74,11 @@ export const RansomwareProtectionCard = React.memo<RansomwareProtectionCardProps
         })}
         supportedOss={[OperatingSystem.WINDOWS]}
         dataTestSubj={getTestId()}
+        selected={selected}
+        mode={mode}
         rightCorner={
           <ProtectionSettingCardSwitch
+            selected={selected}
             policy={policy}
             onChange={onChange}
             mode={mode}

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/event_collection_card.test.tsx

@@ -222,7 +222,7 @@ describe('Policy Event Collection Card common component', () => {
       expect(renderResult.getByTestId('test-selectedCount')).toHaveTextContent(
         exactMatchText('0 / 2 event collections enabled')
       );
-      expect(renderResult.getByTestId('test-options')).toHaveTextContent(exactMatchText('—'));
+      expect(renderResult.queryByTestId('test-options')).toBeNull();
     });
 
     describe('and supplemental options are used', () => {

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/event_collection_card.tsx

@@ -109,6 +109,8 @@ export const EventCollectionCard = memo(
           defaultMessage: 'Event collection',
         })}
         supportedOss={[os]}
+        mode={mode}
+        selected={selectedCount > 0}
         rightCorner={
           <EuiText size="s" color="subdued" data-test-subj={getTestId('selectedCount')}>
             {i18n.translate(

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/protection_setting_card_switch.test.tsx

@@ -38,12 +38,16 @@ describe('Policy form ProtectionSettingCardSwitch component', () => {
       mode: 'edit',
       'data-test-subj': 'test',
       protection: 'malware',
+      selected: true,
       protectionLabel: 'Malware',
       osList: ['windows', 'mac', 'linux'],
     };
 
     render = () => {
-      renderResult = mockedContext.render(<ProtectionSettingCardSwitch {...formProps} />);
+      const selected = formProps.policy.windows[formProps.protection].mode !== ProtectionModes.off;
+      renderResult = mockedContext.render(
+        <ProtectionSettingCardSwitch {...formProps} selected={selected} />
+      );
       return renderResult;
     };
   });

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/protection_setting_card_switch.tsx

@@ -22,6 +22,7 @@ import type { LinuxPolicyProtection, MacPolicyProtection, PolicyProtection } fro
 
 export interface ProtectionSettingCardSwitchProps extends PolicyFormComponentCommonProps {
   protection: PolicyProtection;
+  selected: boolean;
   protectionLabel?: string;
   osList: ImmutableArray<Partial<keyof UIPolicyConfig>>;
   additionalOnSwitchChange?: ({
@@ -44,12 +45,12 @@ export const ProtectionSettingCardSwitch = React.memo(
     onChange,
     policy,
     mode,
+    selected,
     'data-test-subj': dataTestSubj,
   }: ProtectionSettingCardSwitchProps) => {
     const getTestId = useTestIdGenerator(dataTestSubj);
     const isPlatinumPlus = useLicense().isPlatinumPlus();
     const isEditMode = mode === 'edit';
-    const selected = (policy && policy.windows[protection].mode) !== ProtectionModes.off;
 
     const switchLabel = useMemo(() => {
       return i18n.translate('xpack.securitySolution.endpoint.policy.details.protectionsEnabled', {

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_settings_form/components/setting_card.tsx

@@ -19,6 +19,7 @@ import {
   EuiPanel,
   EuiTextColor,
   EuiIconTip,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { ThemeContext } from 'styled-components';
@@ -57,10 +58,21 @@ export type SettingCardProps = React.PropsWithChildren<{
   dataTestSubj?: string;
   /** React Node to be put on the right corner of the card */
   rightCorner?: ReactNode;
+  mode?: 'edit' | 'view';
+  selected?: boolean;
 }>;
 
 export const SettingCard: FC<SettingCardProps> = memo(
-  ({ type, supportedOss, osRestriction, dataTestSubj, rightCorner, children }) => {
+  ({
+    type,
+    supportedOss,
+    osRestriction,
+    dataTestSubj,
+    rightCorner,
+    children,
+    selected = true,
+    mode = 'edit',
+  }) => {
     const paddingSize = useContext(ThemeContext).eui.euiPanelPaddingModifiers.paddingMedium;
     const getTestId = useTestIdGenerator(dataTestSubj);
 
@@ -131,9 +143,16 @@ export const SettingCard: FC<SettingCardProps> = memo(
           </EuiShowFor>
         </EuiFlexGroup>
 
-        <EuiHorizontalRule margin="m" />
-
-        <div style={{ padding: `0 ${paddingSize} ${paddingSize} ${paddingSize}` }}>{children}</div>
+        {mode === 'edit' || selected ? (
+          <>
+            <EuiHorizontalRule margin="m" />
+            <div style={{ padding: `0 ${paddingSize} ${paddingSize} ${paddingSize}` }}>
+              {children}
+            </div>
+          </>
+        ) : (
+          <EuiSpacer size="m" />
+        )}
       </EuiPanel>
     );
   }