[Security Solution][Endpoint][Admin] Locked ransomware card (#90210)

* [Security Solution][Endpoint][Admin] Locked card for ransomware policy

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx

@@ -336,6 +336,11 @@ describe('Policy Details', () => {
         const ransomware = policyView.find('EuiPanel[data-test-subj="ransomwareProtectionsForm"]');
         expect(ransomware).toHaveLength(0);
       });
+
+      it('shows the locked card in place of 1 paid feature', () => {
+        const lockedCard = policyView.find('EuiCard[data-test-subj="lockedPolicyCard"]');
+        expect(lockedCard).toHaveLength(1);
+      });
     });
   });
 });

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details_form.tsx

@@ -13,6 +13,7 @@ import { LinuxEvents, MacEvents, WindowsEvents } from './policy_forms/events';
 import { AdvancedPolicyForms } from './policy_advanced';
 import { AntivirusRegistrationForm } from './components/antivirus_registration_form';
 import { Ransomware } from './policy_forms/protections/ransomware';
+import { LockedPolicyCard } from './policy_forms/locked_card';
 import { useLicense } from '../../../../common/hooks/use_license';
 
 export const PolicyDetailsForm = memo(() => {
@@ -36,7 +37,7 @@ export const PolicyDetailsForm = memo(() => {
       <EuiSpacer size="xs" />
       <MalwareProtections />
       <EuiSpacer size="m" />
-      {isPlatinumPlus && <Ransomware />}
+      {isPlatinumPlus ? <Ransomware /> : <LockedPolicyCard />}
       <EuiSpacer size="l" />
 
       <EuiText size="xs" color="subdued">

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/locked_card.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { EuiCard, EuiIcon, EuiTextColor, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import styled from 'styled-components';
+import { i18n } from '@kbn/i18n';
+
+const LockedPolicyDiv = styled.div`
+  .euiCard__betaBadgeWrapper {
+    .euiCard__betaBadge {
+      width: auto;
+    }
+  }
+  .lockedCardDescription {
+    padding: 0 ${(props) => props.theme.eui.fractions.thirds.percentage};
+  }
+`;
+
+export const LockedPolicyCard = memo(() => {
+  return (
+    <LockedPolicyDiv>
+      <EuiCard
+        data-test-subj="lockedPolicyCard"
+        betaBadgeLabel={i18n.translate('xpack.securitySolution.endpoint.policy.details.platinum', {
+          defaultMessage: 'Platinum',
+        })}
+        isDisabled={true}
+        icon={<EuiIcon size="xl" type="lock" />}
+        title={
+          <h3>
+            <strong>
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.policy.details.ransomware"
+                defaultMessage="Ransomware"
+              />
+            </strong>
+          </h3>
+        }
+        description={
+          <EuiFlexGroup className="lockedCardDescription" direction="column" gutterSize="none">
+            <EuiFlexItem>
+              <h4>
+                <EuiTextColor color="subdued">
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.policy.details.upgradeToPlatinum"
+                    defaultMessage="Upgrade to Elastic Platinum"
+                  />
+                </EuiTextColor>
+              </h4>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <p>
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.policy.details.lockedCard"
+                  defaultMessage="To turn on Ransomware protection, you must upgrade your license to Platinum, start a
+            free 30-day trial, or spin up a {cloudDeploymentLink} on AWS, GCP, or Azure."
+                  values={{
+                    cloudDeploymentLink: (
+                      <EuiLink href="https://www.elastic.co/cloud/" target="_blank">
+                        <FormattedMessage
+                          id="xpack.securitySolution.endpoint.policy.details.cloudDeploymentLInk"
+                          defaultMessage="cloud deployment"
+                        />
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </p>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
+      />
+    </LockedPolicyDiv>
+  );
+});
+LockedPolicyCard.displayName = 'LockedPolicyCard';