[Security Solution][Endpoint][Admin][Policy] Register as AV os restri…

…ctions tooltip note (#93306) (#93689)
elastic · Mar 4, 2021 · eeeabc7 · eeeabc7
1 parent 94e5c49
commit eeeabc7
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 10 deletions.
diff --git a/...tion/public/management/pages/policy/view/components/antivirus_registration_form/index.tsx b/...tion/public/management/pages/policy/view/components/antivirus_registration_form/index.tsx
@@ -54,7 +54,14 @@ export const AntivirusRegistrationForm = memo(() => {
   );
 
   return (
-    <ConfigForm type={TRANSLATIONS.title} supportedOss={[OperatingSystem.WINDOWS]}>
+    <ConfigForm
+      type={TRANSLATIONS.title}
+      supportedOss={[OperatingSystem.WINDOWS]}
+      osRestriction={i18n.translate(
+        'xpack.securitySolution.endpoint.policy.details.av.windowsServerNotSupported',
+        { defaultMessage: 'Windows Server operating systems unsupported' }
+      )}
+    >
       <EuiText size="s">{TRANSLATIONS.description}</EuiText>
       <EuiSpacer size="s" />
       <EuiSwitch

diff --git a/...ns/security_solution/public/management/pages/policy/view/components/config_form/index.tsx b/...ns/security_solution/public/management/pages/policy/view/components/config_form/index.tsx
@@ -7,6 +7,7 @@
 
 import React, { FC, ReactNode, memo } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -15,6 +16,8 @@ import {
   EuiText,
   EuiShowFor,
   EuiPanel,
+  EuiTextColor,
+  EuiIconTip,
 } from '@elastic/eui';
 
 import { OperatingSystem } from '../../../../../../../common/endpoint/types';
@@ -38,6 +41,7 @@ interface ConfigFormProps {
    * Types of supported operating systems.
    */
   supportedOss: OperatingSystem[];
+  osRestriction?: ReactNode;
   dataTestSubj?: string;
   /** React Node to be put on the right corner of the card */
   rightCorner?: ReactNode;
@@ -52,19 +56,40 @@ export const ConfigFormHeading: FC = memo(({ children }) => (
 ConfigFormHeading.displayName = 'ConfigFormHeading';
 
 export const ConfigForm: FC<ConfigFormProps> = memo(
-  ({ type, supportedOss, dataTestSubj, rightCorner, children }) => (
+  ({ type, supportedOss, osRestriction, dataTestSubj, rightCorner, children }) => (
     <EuiPanel data-test-subj={dataTestSubj}>
       <EuiFlexGroup direction="row" gutterSize="none" alignItems="center">
-        <EuiFlexItem>
+        <EuiFlexItem grow={2}>
           <ConfigFormHeading>{TITLES.type}</ConfigFormHeading>
           <EuiText size="m">{type}</EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={2}>
           <ConfigFormHeading>{TITLES.os}</ConfigFormHeading>
-          <EuiText>{supportedOss.map((os) => OS_TITLES[os]).join(', ')}</EuiText>
+          <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiText>{supportedOss.map((os) => OS_TITLES[os]).join(', ')} </EuiText>
+            </EuiFlexItem>
+            {osRestriction && (
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup direction="row" gutterSize="xs">
+                  <EuiFlexItem grow={false}>
+                    <EuiTextColor color="subdued">
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.policy.details.antivirusRegistration.osRestriction"
+                        defaultMessage="Restrictions"
+                      />
+                    </EuiTextColor>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiIconTip type="iInCircle" color="subdued" content={osRestriction} />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         </EuiFlexItem>
         <EuiShowFor sizes={['m', 'l', 'xl']}>
-          <EuiFlexItem grow={2}>
+          <EuiFlexItem grow={3}>
             <EuiFlexGroup direction="row" gutterSize="none" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>{rightCorner}</EuiFlexItem>
             </EuiFlexGroup>

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
@@ -326,7 +326,7 @@ describe('Policy Details', () => {
         const userNotificationCustomMessageTextArea = policyView.find(
           'EuiTextArea[data-test-subj="malwareUserNotificationCustomMessage"]'
         );
-        const tooltip = policyView.find('EuiIconTip');
+        const tooltip = policyView.find('EuiIconTip[data-test-subj="malwareTooltip"]');
         expect(userNotificationCheckbox).toHaveLength(0);
         expect(userNotificationCustomMessageTextArea).toHaveLength(0);
         expect(tooltip).toHaveLength(0);

diff --git a/...ecurity_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx b/...ecurity_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
@@ -211,14 +211,14 @@ export const MalwareProtections = React.memo(() => {
         </ConfigFormHeading>
         <EuiSpacer size="xs" />
         <RadioFlexGroup>
-          <EuiFlexItem className="no-right-margin-radio" grow={1}>
+          <EuiFlexItem className="no-right-margin-radio" grow={2}>
             <ProtectionRadio
               protectionMode={radios[0].id}
               key={radios[0].protection + radios[0].id}
               label={radios[0].label}
             />
           </EuiFlexItem>
-          <EuiFlexItem className="no-horizontal-margin-radio" grow={4}>
+          <EuiFlexItem className="no-horizontal-margin-radio" grow={5}>
             <ProtectionRadio
               protectionMode={radios[1].id}
               key={radios[1].protection + radios[1].id}

diff --git a/...rity_solution/public/management/pages/policy/view/policy_forms/protections/ransomware.tsx b/...rity_solution/public/management/pages/policy/view/policy_forms/protections/ransomware.tsx
@@ -194,14 +194,14 @@ export const Ransomware = React.memo(() => {
         </ConfigFormHeading>
         <EuiSpacer size="xs" />
         <RadioFlexGroup>
-          <EuiFlexItem className="no-right-margin-radio" grow={1}>
+          <EuiFlexItem className="no-right-margin-radio" grow={2}>
             <ProtectionRadio
               protectionMode={radios[0].id}
               key={radios[0].protection + radios[0].id}
               label={radios[0].label}
             />
           </EuiFlexItem>
-          <EuiFlexItem className="no-horizontal-margin-radio" grow={4}>
+          <EuiFlexItem className="no-horizontal-margin-radio" grow={5}>
             <ProtectionRadio
               protectionMode={radios[1].id}
               key={radios[1].protection + radios[1].id}