E2C: Add cloud landing page (#83316)

* restructure and create cloud empty state

* use new Grid prop and run i18n:extract

public/app/features/admin/migrate-to-cloud/MigrateToCloud.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Page } from 'app/core/components/Page/Page';
 
-import { EmptyState } from './EmptyState/EmptyState';
+import { EmptyState } from './onprem/EmptyState/EmptyState';
 
 export default function MigrateToCloud() {
   return (

public/app/features/admin/migrate-to-cloud/cloud/EmptyState/EmptyState.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Grid, useStyles2 } from '@grafana/ui';
+
+import { InfoPane } from './InfoPane';
+import { MigrationTokenPane } from './MigrationTokenPane';
+
+export const EmptyState = () => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.container}>
+      <Grid
+        alignItems="flex-start"
+        gap={1}
+        columns={{
+          xs: 1,
+          lg: 2,
+        }}
+      >
+        <InfoPane />
+        <MigrationTokenPane />
+      </Grid>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    maxWidth: theme.breakpoints.values.xl,
+  }),
+});

public/app/features/admin/migrate-to-cloud/cloud/EmptyState/InfoPane.tsx

@@ -0,0 +1,75 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Box, Stack, TextLink, useStyles2 } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
+
+import { InfoItem } from '../../shared/InfoItem';
+
+export const InfoPane = () => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Box alignItems="flex-start" display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
+      <InfoItem
+        title={t('migrate-to-cloud.migrate-to-this-stack.title', 'Migrate configuration to this stack')}
+        linkTitle={t('migrate-to-cloud.migrate-to-this-stack.link-title', 'View the full migration guide')}
+        linkHref="https://grafana.com/docs/grafana-cloud/account-management/migration-guide"
+      >
+        <Trans i18nKey="migrate-to-cloud.migrate-to-this-stack.body">
+          Some configuration from your self-managed Grafana instance can be automatically copied to this cloud stack.
+        </Trans>
+      </InfoItem>
+      <InfoItem
+        title={t('migrate-to-cloud.get-started.title', 'How to get started')}
+        linkTitle={t('migrate-to-cloud.get-started.link-title', 'Learn more about Private Data Source Connect')}
+        linkHref="https://grafana.com/docs/grafana-cloud/connect-externally-hosted/private-data-source-connect"
+      >
+        <Stack direction="column" gap={2}>
+          <Trans i18nKey="migrate-to-cloud.get-started.body">
+            The migration process must be started from your self-managed Grafana instance.
+          </Trans>
+          <ol className={styles.list}>
+            <li>
+              <Trans i18nKey="migrate-to-cloud.get-started.step-1">
+                Log in to your self-managed instance and navigate to Administration, General, Migrate to Grafana Cloud.
+              </Trans>
+            </li>
+            <li>
+              <Trans i18nKey="migrate-to-cloud.get-started.step-2">
+                Select &quot;Migrate this instance to Cloud&quot;.
+              </Trans>
+            </li>
+            <li>
+              <Trans i18nKey="migrate-to-cloud.get-started.step-3">
+                You&apos;ll be prompted for a migration token. Generate one from this screen.
+              </Trans>
+            </li>
+            <li>
+              <Trans i18nKey="migrate-to-cloud.get-started.step-4">
+                In your self-managed instance, select &quot;Upload everything&quot; to upload data sources and
+                dashboards to this cloud stack.
+              </Trans>
+            </li>
+            <li>
+              <Trans i18nKey="migrate-to-cloud.get-started.step-5">
+                If some of your data sources will not work over the public internet, you’ll need to install Private Data
+                Source Connect in your self-managed environment.
+              </Trans>
+            </li>
+          </ol>
+        </Stack>
+      </InfoItem>
+      <TextLink href="/TODO">
+        {t('migrate-to-cloud.get-started.configure-pdc-link', 'Configure PDC for this stack')}
+      </TextLink>
+    </Box>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  list: css({
+    padding: 'revert',
+  }),
+});

public/app/features/admin/migrate-to-cloud/cloud/EmptyState/MigrationTokenPane.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Box, Button, Text } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
+
+import { InfoItem } from '../../shared/InfoItem';
+
+export const MigrationTokenPane = () => {
+  const onGenerateToken = () => {
+    console.log('TODO: generate token!');
+  };
+  const tokenStatus = 'TODO';
+
+  return (
+    <Box display="flex" alignItems="flex-start" padding={2} gap={2} direction="column" backgroundColor="secondary">
+      <InfoItem title={t('migrate-to-cloud.migration-token.title', 'Migration token')}>
+        <Trans i18nKey="migrate-to-cloud.migration-token.body">
+          Your self-managed Grafana instance will require a special authentication token to securely connect to this
+          cloud stack.
+        </Trans>
+      </InfoItem>
+      <Text color="secondary">
+        <Trans i18nKey="migrate-to-cloud.migration-token.status">Current status: {{ tokenStatus }}</Trans>
+      </Text>
+      <Button onClick={onGenerateToken}>
+        <Trans i18nKey="migrate-to-cloud.migration-token.generate-button">Generate a migration token</Trans>
+      </Button>
+    </Box>
+  );
+};

public/app/features/admin/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx

@@ -16,6 +16,7 @@ export const EmptyState = () => {
       <Stack direction="column">
         <CallToAction />
         <Grid
+          alignItems="flex-start"
           gap={1}
           columns={{
             xs: 1,

public/app/features/admin/migrate-to-cloud/onprem/EmptyState/InfoPaneLeft.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { Box } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
-import { InfoItem } from './InfoItem';
+import { InfoItem } from '../../shared/InfoItem';
 
 export const InfoPaneLeft = () => {
   return (
-    <Box display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
+    <Box alignItems="flex-start" display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
       <InfoItem
         title={t('migrate-to-cloud.what-is-cloud.title', 'What is Grafana Cloud?')}
         linkTitle={t('migrate-to-cloud.what-is-cloud.link-title', 'Learn about cloud features')}

public/app/features/admin/migrate-to-cloud/onprem/EmptyState/InfoPaneRight.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { Box } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
-import { InfoItem } from './InfoItem';
+import { InfoItem } from '../../shared/InfoItem';
 
 export const InfoPaneRight = () => {
   return (
-    <Box display="flex" direction="column" gap={2} padding={2} backgroundColor="secondary">
+    <Box alignItems="flex-start" display="flex" direction="column" gap={2} padding={2} backgroundColor="secondary">
       <InfoItem
         title={t('migrate-to-cloud.pdc.title', 'Not all my data sources are on the public internet')}
         linkTitle={t('migrate-to-cloud.pdc.link-title', 'Learn about PDC')}

public/app/features/admin/migrate-to-cloud/shared/InfoItem.tsx

@@ -13,9 +13,7 @@ export const InfoItem = ({ children, title, linkHref, linkTitle }: Props) => {
   return (
     <Stack gap={2} direction="column">
       <Text element="h4">{title}</Text>
-      <Text element="p" color="secondary">
-        {children}
-      </Text>
+      <Text color="secondary">{children}</Text>
       {linkHref && (
         <TextLink href={linkHref} external>
           {linkTitle ?? linkHref}

public/locales/en-US/grafana.json

@@ -701,11 +701,33 @@
       "button": "Migrate this instance to Cloud",
       "header": "Let us manage your Grafana stack"
     },
+    "get-started": {
+      "body": "The migration process must be started from your self-managed Grafana instance.",
+      "configure-pdc-link": "Configure PDC for this stack",
+      "link-title": "Learn more about Private Data Source Connect",
+      "step-1": "Log in to your self-managed instance and navigate to Administration, General, Migrate to Grafana Cloud.",
+      "step-2": "Select \"Migrate this instance to Cloud\".",
+      "step-3": "You'll be prompted for a migration token. Generate one from this screen.",
+      "step-4": "In your self-managed instance, select \"Upload everything\" to upload data sources and dashboards to this cloud stack.",
+      "step-5": "If some of your data sources will not work over the public internet, you’ll need to install Private Data Source Connect in your self-managed environment.",
+      "title": "How to get started"
+    },
     "is-it-secure": {
       "body": "Grafana Labs is committed to maintaining the highest standards of data privacy and security. By implementing industry-standard security technologies and procedures, we help protect our customers' data from unauthorized access, use, or disclosure.",
       "link-title": "Grafana Labs Trust Center",
       "title": "Is it secure?"
     },
+    "migrate-to-this-stack": {
+      "body": "Some configuration from your self-managed Grafana instance can be automatically copied to this cloud stack.",
+      "link-title": "View the full migration guide",
+      "title": "Migrate configuration to this stack"
+    },
+    "migration-token": {
+      "body": "Your self-managed Grafana instance will require a special authentication token to securely connect to this cloud stack.",
+      "generate-button": "Generate a migration token",
+      "status": "Current status: {{tokenStatus}}",
+      "title": "Migration token"
+    },
     "pdc": {
       "body": "Exposing your data sources to the internet can raise security concerns. Private data source connect (PDC) allows Grafana Cloud to access your existing data sources over a secure network tunnel.",
       "link-title": "Learn about PDC",

public/locales/pseudo-LOCALE/grafana.json

@@ -701,11 +701,33 @@
       "button": "Mįģřäŧę ŧĥįş įʼnşŧäʼnčę ŧő Cľőūđ",
       "header": "Ŀęŧ ūş mäʼnäģę yőūř Ğřäƒäʼnä şŧäčĸ"
     },
+    "get-started": {
+      "body": "Ŧĥę mįģřäŧįőʼn přőčęşş mūşŧ þę şŧäřŧęđ ƒřőm yőūř şęľƒ-mäʼnäģęđ Ğřäƒäʼnä įʼnşŧäʼnčę.",
+      "configure-pdc-link": "Cőʼnƒįģūřę PĐC ƒőř ŧĥįş şŧäčĸ",
+      "link-title": "Ŀęäřʼn mőřę äþőūŧ Přįväŧę Đäŧä Ŝőūřčę Cőʼnʼnęčŧ",
+      "step-1": "Ŀőģ įʼn ŧő yőūř şęľƒ-mäʼnäģęđ įʼnşŧäʼnčę äʼnđ ʼnävįģäŧę ŧő Åđmįʼnįşŧřäŧįőʼn, Ğęʼnęřäľ, Mįģřäŧę ŧő Ğřäƒäʼnä Cľőūđ.",
+      "step-2": "Ŝęľęčŧ \"Mįģřäŧę ŧĥįş įʼnşŧäʼnčę ŧő Cľőūđ\".",
+      "step-3": "Ÿőū'ľľ þę přőmpŧęđ ƒőř ä mįģřäŧįőʼn ŧőĸęʼn. Ğęʼnęřäŧę őʼnę ƒřőm ŧĥįş şčřęęʼn.",
+      "step-4": "Ĩʼn yőūř şęľƒ-mäʼnäģęđ įʼnşŧäʼnčę, şęľęčŧ \"Ůpľőäđ ęvęřyŧĥįʼnģ\" ŧő ūpľőäđ đäŧä şőūřčęş äʼnđ đäşĥþőäřđş ŧő ŧĥįş čľőūđ şŧäčĸ.",
+      "step-5": "Ĩƒ şőmę őƒ yőūř đäŧä şőūřčęş ŵįľľ ʼnőŧ ŵőřĸ ővęř ŧĥę pūþľįč įʼnŧęřʼnęŧ, yőū’ľľ ʼnęęđ ŧő įʼnşŧäľľ Přįväŧę Đäŧä Ŝőūřčę Cőʼnʼnęčŧ įʼn yőūř şęľƒ-mäʼnäģęđ ęʼnvįřőʼnmęʼnŧ.",
+      "title": "Ħőŵ ŧő ģęŧ şŧäřŧęđ"
+    },
     "is-it-secure": {
       "body": "Ğřäƒäʼnä Ŀäþş įş čőmmįŧŧęđ ŧő mäįʼnŧäįʼnįʼnģ ŧĥę ĥįģĥęşŧ şŧäʼnđäřđş őƒ đäŧä přįväčy äʼnđ şęčūřįŧy. ßy įmpľęmęʼnŧįʼnģ įʼnđūşŧřy-şŧäʼnđäřđ şęčūřįŧy ŧęčĥʼnőľőģįęş äʼnđ přőčęđūřęş, ŵę ĥęľp přőŧęčŧ őūř čūşŧőmęřş' đäŧä ƒřőm ūʼnäūŧĥőřįžęđ äččęşş, ūşę, őř đįşčľőşūřę.",
       "link-title": "Ğřäƒäʼnä Ŀäþş Ŧřūşŧ Cęʼnŧęř",
       "title": "Ĩş įŧ şęčūřę?"
     },
+    "migrate-to-this-stack": {
+      "body": "Ŝőmę čőʼnƒįģūřäŧįőʼn ƒřőm yőūř şęľƒ-mäʼnäģęđ Ğřäƒäʼnä įʼnşŧäʼnčę čäʼn þę äūŧőmäŧįčäľľy čőpįęđ ŧő ŧĥįş čľőūđ şŧäčĸ.",
+      "link-title": "Vįęŵ ŧĥę ƒūľľ mįģřäŧįőʼn ģūįđę",
+      "title": "Mįģřäŧę čőʼnƒįģūřäŧįőʼn ŧő ŧĥįş şŧäčĸ"
+    },
+    "migration-token": {
+      "body": "Ÿőūř şęľƒ-mäʼnäģęđ Ğřäƒäʼnä įʼnşŧäʼnčę ŵįľľ řęqūįřę ä şpęčįäľ äūŧĥęʼnŧįčäŧįőʼn ŧőĸęʼn ŧő şęčūřęľy čőʼnʼnęčŧ ŧő ŧĥįş čľőūđ şŧäčĸ.",
+      "generate-button": "Ğęʼnęřäŧę ä mįģřäŧįőʼn ŧőĸęʼn",
+      "status": "Cūřřęʼnŧ şŧäŧūş: {{tokenStatus}}",
+      "title": "Mįģřäŧįőʼn ŧőĸęʼn"
+    },
     "pdc": {
       "body": "Ēχpőşįʼnģ yőūř đäŧä şőūřčęş ŧő ŧĥę įʼnŧęřʼnęŧ čäʼn řäįşę şęčūřįŧy čőʼnčęřʼnş. Přįväŧę đäŧä şőūřčę čőʼnʼnęčŧ (PĐC) äľľőŵş Ğřäƒäʼnä Cľőūđ ŧő äččęşş yőūř ęχįşŧįʼnģ đäŧä şőūřčęş ővęř ä şęčūřę ʼnęŧŵőřĸ ŧūʼnʼnęľ.",
       "link-title": "Ŀęäřʼn äþőūŧ PĐC",