[ILM] Minor copy and link additions to cloud CTA for cold phase (#80512)

* Add CTA for warm phase too

- add/updated component integration tests for checking callouts
- sharing deployment url from cloud plugin

* update comment

* fix i18n

* scope changes to cold phase only

Co-authored-by: Kibana Machine <[email protected]>

Author: jloleysens

x-pack/plugins/cloud/public/plugin.ts

@@ -22,6 +22,7 @@ interface CloudSetupDependencies {
 
 export interface CloudSetup {
   cloudId?: string;
+  cloudDeploymentUrl?: string;
   isCloudEnabled: boolean;
 }
 
@@ -33,7 +34,7 @@ export class CloudPlugin implements Plugin<CloudSetup> {
   }
 
   public async setup(core: CoreSetup, { home }: CloudSetupDependencies) {
-    const { id, resetPasswordUrl } = this.config;
+    const { id, resetPasswordUrl, deploymentUrl } = this.config;
     const isCloudEnabled = getIsCloudEnabled(id);
 
     if (home) {
@@ -45,6 +46,7 @@ export class CloudPlugin implements Plugin<CloudSetup> {
 
     return {
       cloudId: id,
+      cloudDeploymentUrl: deploymentUrl,
       isCloudEnabled,
     };
   }

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx

@@ -738,7 +738,7 @@ describe('edit policy', () => {
       httpRequestsMockHelpers.setPoliciesResponse(policies);
     });
 
-    describe('with legacy data role config', () => {
+    describe('with deprecated data role config', () => {
       test('should hide data tier option on cloud using legacy node role configuration', async () => {
         http.setupNodeListResponse({
           nodesByAttributes: { test: ['123'] },
@@ -776,6 +776,8 @@ describe('edit policy', () => {
         expect(findTestSubject(rendered, 'defaultDataAllocationOption').exists()).toBeTruthy();
         expect(findTestSubject(rendered, 'customDataAllocationOption').exists()).toBeTruthy();
         expect(findTestSubject(rendered, 'noneDataAllocationOption').exists()).toBeTruthy();
+        // We should not be showing the call-to-action for users to activate data tiers in cloud
+        expect(findTestSubject(rendered, 'cloudDataTierCallout').exists()).toBeFalsy();
       });
 
       test('should show cloud notice when cold tier nodes do not exist', async () => {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/data_tier_allocation/cloud_data_tier_callout.tsx

@@ -5,22 +5,50 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FunctionComponent } from 'react';
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+
+import { useKibana } from '../../../../../shared_imports';
+
+const deployment = i18n.translate(
+  'xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.body.elasticDeploymentLink',
+  {
+    defaultMessage: 'deployment',
+  }
+);
 
 const i18nTexts = {
-  title: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.title', {
+  title: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.coldTierTitle', {
     defaultMessage: 'Create a cold tier',
   }),
-  body: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.body', {
-    defaultMessage: 'Edit your Elastic Cloud deployment to set up a cold tier.',
-  }),
+  body: (deploymentUrl?: string) => {
+    return (
+      <FormattedMessage
+        id="xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.coldTierBody"
+        defaultMessage="No cold nodes are available. Edit your Elastic {deployment} to set up a cold tier."
+        values={{
+          deployment: deploymentUrl ? (
+            <EuiLink external href={deploymentUrl} target="_blank">
+              {deployment}
+            </EuiLink>
+          ) : (
+            deployment
+          ),
+        }}
+      />
+    );
+  },
 };
 
 export const CloudDataTierCallout: FunctionComponent = () => {
+  const {
+    services: { cloud },
+  } = useKibana();
+
   return (
     <EuiCallOut title={i18nTexts.title} data-test-subj="cloudDataTierCallout">
-      {i18nTexts.body}
+      {i18nTexts.body(cloud?.cloudDeploymentUrl)}
     </EuiCallOut>
   );
 };

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/shared/data_tier_allocation_field.tsx

@@ -61,20 +61,19 @@ export const DataTierAllocationField: FunctionComponent<Props> = ({
           switch (phaseData.dataTierAllocationType) {
             case 'default':
               const isCloudEnabled = cloud?.isCloudEnabled ?? false;
-              const isUsingNodeRoles = !isUsingDeprecatedDataRoleConfig;
-              if (
-                isCloudEnabled &&
-                isUsingNodeRoles &&
-                phase === 'cold' &&
-                !nodesByRoles.data_cold?.length
-              ) {
-                // Tell cloud users they can deploy cold tier nodes.
-                return (
-                  <>
-                    <EuiSpacer size="s" />
-                    <CloudDataTierCallout />
-                  </>
-                );
+              if (isCloudEnabled && phase === 'cold') {
+                const isUsingNodeRolesAllocation = !isUsingDeprecatedDataRoleConfig;
+                const hasNoNodesWithNodeRole = !nodesByRoles.data_cold?.length;
+
+                if (isUsingNodeRolesAllocation && hasNoNodesWithNodeRole) {
+                  // Tell cloud users they can deploy nodes on cloud.
+                  return (
+                    <>
+                      <EuiSpacer size="s" />
+                      <CloudDataTierCallout />
+                    </>
+                  );
+                }
               }
 
               const allocationNodeRole = getAvailableNodeRoleForPhase(phase, nodesByRoles);