[Platform Onboarding] Elastic cloud migration assistant page (elastic…

…#145523)

docs/developer/plugin-list.asciidoc

@@ -440,6 +440,10 @@ The plugin exposes the static DefaultEditorController class to consume.
 |Integrates with DriftChat in order to provide live support to our Elastic Cloud users. This plugin should only run on Elastic Cloud.
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/cloud_integrations/cloud_data_migration/README.md[cloudDataMigration]
+|Static migration page where self-managed users can see text/copy about migrating to Elastic Cloud
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/cloud_integrations/cloud_experiments/README.mdx[cloudExperiments]
 |The Cloud Experiments Service provides the necessary APIs to implement A/B testing scenarios, fetching the variations in configuration and reporting back metrics to track conversion rates of the experiments.
 

packages/kbn-optimizer/limits.yml

@@ -11,6 +11,7 @@ pageLoadAssetSize:
   charts: 55000
   cloud: 21076
   cloudChat: 19894
+  cloudDataMigration: 19170
   cloudExperiments: 59358
   cloudFullStory: 18493
   cloudGainsight: 18710

src/plugins/home/public/application/components/add_data/add_data.tsx

@@ -6,13 +6,15 @@
  * Side Public License, v 1.
  */
 
+import { i18n } from '@kbn/i18n';
 import React, { FC, MouseEvent } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiImage,
+  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -138,18 +140,76 @@ export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode, isClo
             </EuiFlexGroup>
           </EuiFlexItem>
 
-          <EuiFlexItem>
-            <EuiImage
-              alt="Illustration of Elastic data integrations"
-              className="homDataAdd__illustration"
-              src={
-                addBasePath('/plugins/kibanaReact/assets/') +
-                (isDarkMode
-                  ? 'illustration_integrations_darkmode.svg'
-                  : 'illustration_integrations_lightmode.svg')
-              }
-            />
-          </EuiFlexItem>
+          {!isCloudEnabled ? (
+            <EuiFlexItem>
+              <EuiPanel paddingSize="l">
+                <EuiFlexGroup alignItems="center" gutterSize="xl">
+                  <EuiFlexItem>
+                    <EuiImage
+                      alt={i18n.translate('home.moveData.illustration.alt.text', {
+                        defaultMessage: 'Illustration for cloud data migration',
+                      })}
+                      src={
+                        addBasePath('/plugins/kibanaReact/assets/') +
+                        'illustration_cloud_migration.png'
+                      }
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiTitle size="xs">
+                      <h4>
+                        <FormattedMessage
+                          id="home.addData.moveYourDataTitle"
+                          defaultMessage="Considering Elastic Cloud?"
+                        />
+                      </h4>
+                    </EuiTitle>
+
+                    <EuiSpacer size="s" />
+
+                    <EuiText size="s">
+                      <FormattedMessage
+                        id="home.addData.moveYourDataToElasticCloud"
+                        defaultMessage="Moving your data to Elastic Cloud is easy and can save you time and money."
+                      />
+                    </EuiText>
+
+                    <EuiSpacer size="m" />
+
+                    {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+                    <EuiButton
+                      color="primary"
+                      href={addBasePath('/app/management/data/migrate_data')}
+                      onClick={(event: MouseEvent) => {
+                        trackUiMetric(METRIC_TYPE.CLICK, 'migrate_data_to_cloud');
+                        createAppNavigationHandler('/app/management/data/migrate_data')(event);
+                      }}
+                    >
+                      <FormattedMessage
+                        id="home.addData.moveYourDataButtonLabel"
+                        defaultMessage="Explore the benefits"
+                      />
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPanel>
+            </EuiFlexItem>
+          ) : (
+            <EuiFlexItem>
+              <EuiImage
+                alt={i18n.translate('home.addData.illustration.alt.text', {
+                  defaultMessage: 'Illustration of Elastic data integrations',
+                })}
+                className="homDataAdd__illustration"
+                src={
+                  addBasePath('/plugins/kibanaReact/assets/') +
+                  (isDarkMode
+                    ? 'illustration_integrations_darkmode.svg'
+                    : 'illustration_integrations_lightmode.svg')
+                }
+              />
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
       </KibanaPageTemplate.Section>
     );

tsconfig.base.json

@@ -1070,6 +1070,8 @@
       "@kbn/cases-plugin/*": ["x-pack/plugins/cases/*"],
       "@kbn/cloud-chat-plugin": ["x-pack/plugins/cloud_integrations/cloud_chat"],
       "@kbn/cloud-chat-plugin/*": ["x-pack/plugins/cloud_integrations/cloud_chat/*"],
+      "@kbn/cloud-data-migration-plugin": ["x-pack/plugins/cloud_integrations/cloud_data_migration"],
+      "@kbn/cloud-data-migration-plugin/*": ["x-pack/plugins/cloud_integrations/cloud_data_migration/*"],
       "@kbn/cloud-experiments-plugin": ["x-pack/plugins/cloud_integrations/cloud_experiments"],
       "@kbn/cloud-experiments-plugin/*": ["x-pack/plugins/cloud_integrations/cloud_experiments/*"],
       "@kbn/cloud-full-story-plugin": ["x-pack/plugins/cloud_integrations/cloud_full_story"],

x-pack/.i18nrc.json

@@ -12,6 +12,7 @@
     "xpack.cloud": "plugins/cloud",
     "xpack.cloudChat": "plugins/cloud_integrations/cloud_chat",
     "xpack.cloudLinks": "plugins/cloud_integrations/cloud_links",
+    "xpack.cloudDataMigration": "plugins/cloud_integrations/cloud_data_migration",
     "xpack.csp": "plugins/cloud_security_posture",
     "xpack.customBranding": "plugins/custom_branding",
     "xpack.dashboard": "plugins/dashboard_enhanced",

x-pack/plugins/cloud_integrations/cloud_data_migration/README.md

@@ -0,0 +1,3 @@
+# Cloud Data Migration
+
+Static migration page where self-managed users can see text/copy about migrating to Elastic Cloud

x-pack/plugins/cloud_integrations/cloud_data_migration/common/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const PLUGIN_ID = 'migrate_data';
+export const PLUGIN_NAME = i18n.translate('xpack.cloudDataMigration.name', {
+  defaultMessage: 'Migrate',
+});

x-pack/plugins/cloud_integrations/cloud_data_migration/i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "cloudDataMigration",
+  "paths": {
+    "cloudDataMigration": "."
+  },
+  "translations": []
+}

x-pack/plugins/cloud_integrations/cloud_data_migration/jest.config.js

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../',
+  roots: ['<rootDir>/x-pack/plugins/cloud_integrations/cloud_data_migration'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/cloud_integrations/cloud_data_migration',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/plugins/cloud_integrations/cloud_data_migration/{common,public}/**/*.{ts,tsx}',
+  ],
+};

x-pack/plugins/cloud_integrations/cloud_data_migration/kibana.json

@@ -0,0 +1,15 @@
+{
+  "id": "cloudDataMigration",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "owner": {
+    "name": "Platform Onboarding",
+    "githubTeam": "platform-onboarding"
+  },
+  "description": "Static migration page where self-managed users can see text/copy about migrating to Elastic Cloud",
+  "server": true,
+  "ui": true,
+  "configPath": ["xpack", "cloud_integrations", "data_migration"],
+  "requiredPlugins": ["cloud", "management", "kibanaReact", "features"],
+  "requiredBundles": [ "kibanaReact" ]
+}

x-pack/plugins/cloud_integrations/cloud_data_migration/public/app.styles.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { EuiThemeComputed } from '@elastic/eui';
+
+export const getAppStyles = (euiTheme: EuiThemeComputed) => {
+  return {
+    listItemCss: css`
+      font-weight: ${euiTheme.font.weight.light};
+    `,
+    panelCss: css`
+      padding: calc(${euiTheme.size.xxxl});
+      margin: ${euiTheme.size.l} auto;
+      width: 100%;
+      max-width: 875px;
+    `,
+    illustrationCss: css`
+      max-width: 75%;
+    `,
+    layoutCss: css`
+      max-width: 500px;
+      margin: 0 auto;
+    `,
+  };
+};