E2C: Modify EmptyState page on cloud (#89935)

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

@@ -0,0 +1,20 @@
+import { Box } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
+
+import { InfoItem } from '../../shared/InfoItem';
+import { MigrationTokenPane } from '../MigrationTokenPane/MigrationTokenPane';
+
+export const InfoPane = () => {
+  return (
+    <Box alignItems="flex-start" display="flex" direction="column" gap={2}>
+      <InfoItem title={t('migrate-to-cloud.migrate-to-this-stack.title', 'Let us help you migrate to this stack')}>
+        <Trans i18nKey="migrate-to-cloud.migrate-to-this-stack.body">
+          You can migrate some resources from your self-managed Grafana installation to this cloud stack. To do this
+          securely, you&apos;ll need to generate a migration token. Your self-managed instance will use the token to
+          authenticate with this cloud stack.
+        </Trans>
+      </InfoItem>
+      <MigrationTokenPane />
+    </Box>
+  );
+};

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

@@ -4,24 +4,15 @@ 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';
+import { InfoItem } from '../../shared/InfoItem';
 
-export const InfoPane = () => {
+export const MigrationStepsPane = () => {
   const styles = useStyles2(getStyles);
 
   return (
-    <Box alignItems="flex-start" display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
+    <Box alignItems="flex-start" display="flex" direction="column" gap={2}>
       <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')}
+        title={t('migrate-to-cloud.get-started.title', 'Performing a migration')}
         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"
       >
@@ -63,6 +54,9 @@ export const InfoPane = () => {
       <TextLink href="/connections/private-data-source-connections">
         {t('migrate-to-cloud.get-started.configure-pdc-link', 'Configure PDC for this stack')}
       </TextLink>
+      <TextLink href="https://grafana.com/docs/grafana-cloud/account-management/migration-guide">
+        {t('migrate-to-cloud.migrate-to-this-stack.link-title', 'View the full migration guide')}
+      </TextLink>
     </Box>
   );
 };

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

@@ -4,7 +4,6 @@ import { Box, Button, Text } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { useCreateCloudMigrationTokenMutation } from '../../api';
-import { InfoItem } from '../../shared/InfoItem';
 import { TokenErrorAlert } from '../TokenErrorAlert';
 
 import { MigrationTokenModal } from './MigrationTokenModal';
@@ -28,14 +27,12 @@ export const MigrationTokenPane = () => {
 
   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>
-
+      <Box display="flex" alignItems="flex-start" direction="column" gap={2}>
+        <Button disabled={isLoading || hasToken} onClick={handleGenerateToken}>
+          {createTokenResponse.isLoading
+            ? t('migrate-to-cloud.migration-token.generate-button-loading', 'Generating a migration token...')
+            : t('migrate-to-cloud.migration-token.generate-button', 'Generate a migration token')}
+        </Button>
         {createTokenResponse?.isError ? (
           <TokenErrorAlert />
         ) : (
@@ -45,12 +42,6 @@ export const MigrationTokenPane = () => {
             </Trans>
           </Text>
         )}
-
-        <Button disabled={isLoading || hasToken} onClick={handleGenerateToken}>
-          {createTokenResponse.isLoading
-            ? t('migrate-to-cloud.migration-token.generate-button-loading', 'Generating a migration token...')
-            : t('migrate-to-cloud.migration-token.generate-button', 'Generate a migration token')}
-        </Button>
       </Box>
 
       <MigrationTokenModal

public/app/features/migrate-to-cloud/cloud/Page.tsx

@@ -1,33 +1,15 @@
-import { css } from '@emotion/css';
+import { Box } from '@grafana/ui';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Grid, useStyles2 } from '@grafana/ui';
-
-import { InfoPane } from './InfoPane';
-import { MigrationTokenPane } from './MigrationTokenPane/MigrationTokenPane';
+import { InfoPane } from './EmptyState/InfoPane';
+import { MigrationStepsPane } from './EmptyState/MigrationStepsPane';
 
 export const Page = () => {
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.container}>
-      <Grid
-        alignItems="flex-start"
-        gap={1}
-        columns={{
-          xs: 1,
-          lg: 2,
-        }}
-      >
+    <Box backgroundColor="secondary" display="flex" alignItems="center" direction="column">
+      <Box maxWidth={90} paddingY={6} paddingX={2} gap={6} direction="column" display="flex">
         <InfoPane />
-        <MigrationTokenPane />
-      </Grid>
-    </div>
+        <MigrationStepsPane />
+      </Box>
+    </Box>
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css({
-    maxWidth: theme.breakpoints.values.xl,
-  }),
-});

public/locales/en-US/grafana.json

@@ -922,7 +922,7 @@
       "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"
+      "title": "Performing a migration"
     },
     "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.",
@@ -930,12 +930,11 @@
       "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.",
+      "body": "You can migrate some resources from your self-managed Grafana installation to this cloud stack. To do this securely, you'll need to generate a migration token. Your self-managed instance will use the token to authenticate with this cloud stack.",
       "link-title": "View the full migration guide",
-      "title": "Migrate configuration to this stack"
+      "title": "Let us help you migrate to this stack"
     },
     "migration-token": {
-      "body": "Your self-managed Grafana instance will require a special authentication token to securely connect to this cloud stack.",
       "delete-modal-body": "If you've already used this token with a self-managed installation, that installation will no longer be able to upload content.",
       "delete-modal-cancel": "Cancel",
       "delete-modal-confirm": "Delete",
@@ -951,8 +950,7 @@
       "modal-field-description": "Copy the token now as you will not be able to see it again. Losing a token requires creating a new one.",
       "modal-field-label": "Token",
       "modal-title": "Migration token created",
-      "status": "Current status: <1></1>",
-      "title": "Migration token"
+      "status": "Current status: <1></1>"
     },
     "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.",

public/locales/pseudo-LOCALE/grafana.json

@@ -922,7 +922,7 @@
       "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": "Ħőŵ ŧő ģęŧ şŧäřŧęđ"
+      "title": "Pęřƒőřmįʼnģ ä mįģřäŧįőʼn"
     },
     "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äūŧĥőřįžęđ äččęşş, ūşę, őř đįşčľőşūřę.",
@@ -930,12 +930,11 @@
       "title": "Ĩş įŧ şęčūřę?"
     },
     "migrate-to-this-stack": {
-      "body": "Ŝőmę čőʼnƒįģūřäŧįőʼn ƒřőm yőūř şęľƒ-mäʼnäģęđ Ğřäƒäʼnä įʼnşŧäʼnčę čäʼn þę äūŧőmäŧįčäľľy čőpįęđ ŧő ŧĥįş čľőūđ şŧäčĸ.",
+      "body": "Ÿőū čäʼn mįģřäŧę şőmę řęşőūřčęş ƒřőm yőūř şęľƒ-mäʼnäģęđ Ğřäƒäʼnä įʼnşŧäľľäŧįőʼn ŧő ŧĥįş čľőūđ şŧäčĸ. Ŧő đő ŧĥįş şęčūřęľy, yőū'ľľ ʼnęęđ ŧő ģęʼnęřäŧę ä mįģřäŧįőʼn ŧőĸęʼn. Ÿőūř şęľƒ-mäʼnäģęđ įʼnşŧäʼnčę ŵįľľ ūşę ŧĥę ŧőĸęʼn ŧő äūŧĥęʼnŧįčäŧę ŵįŧĥ ŧĥįş čľőūđ şŧäčĸ.",
       "link-title": "Vįęŵ ŧĥę ƒūľľ mįģřäŧįőʼn ģūįđę",
-      "title": "Mįģřäŧę čőʼnƒįģūřäŧįőʼn ŧő ŧĥįş şŧäčĸ"
+      "title": "Ŀęŧ ūş ĥęľp yőū mįģřäŧę ŧő ŧĥįş şŧäčĸ"
     },
     "migration-token": {
-      "body": "Ÿőūř şęľƒ-mäʼnäģęđ Ğřäƒäʼnä įʼnşŧäʼnčę ŵįľľ řęqūįřę ä şpęčįäľ äūŧĥęʼnŧįčäŧįőʼn ŧőĸęʼn ŧő şęčūřęľy čőʼnʼnęčŧ ŧő ŧĥįş čľőūđ şŧäčĸ.",
       "delete-modal-body": "Ĩƒ yőū'vę äľřęäđy ūşęđ ŧĥįş ŧőĸęʼn ŵįŧĥ ä şęľƒ-mäʼnäģęđ įʼnşŧäľľäŧįőʼn, ŧĥäŧ įʼnşŧäľľäŧįőʼn ŵįľľ ʼnő ľőʼnģęř þę äþľę ŧő ūpľőäđ čőʼnŧęʼnŧ.",
       "delete-modal-cancel": "Cäʼnčęľ",
       "delete-modal-confirm": "Đęľęŧę",
@@ -951,8 +950,7 @@
       "modal-field-description": "Cőpy ŧĥę ŧőĸęʼn ʼnőŵ äş yőū ŵįľľ ʼnőŧ þę äþľę ŧő şęę įŧ äģäįʼn. Ŀőşįʼnģ ä ŧőĸęʼn řęqūįřęş čřęäŧįʼnģ ä ʼnęŵ őʼnę.",
       "modal-field-label": "Ŧőĸęʼn",
       "modal-title": "Mįģřäŧįőʼn ŧőĸęʼn čřęäŧęđ",
-      "status": "Cūřřęʼnŧ şŧäŧūş: <1></1>",
-      "title": "Mįģřäŧįőʼn ŧőĸęʼn"
+      "status": "Cūřřęʼnŧ şŧäŧūş: <1></1>"
     },
     "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ęľ.",