Update no migration page UI

yugabyted-ui/ui/src/features/clusters/details/migration/MigrationGetStarted.tsx

@@ -1,59 +1,87 @@
 import React, { FC } from "react";
-import { Box, Paper, Typography } from "@material-ui/core";
+import { Box, Link, Paper, Typography, useTheme } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-
-import { YBButton } from "@app/components";
-
-import WelcomeCloudImage from "@app/assets/welcome-cloud-image.svg";
-
+import MigrateIcon from "@app/assets/migration48.svg";
+import BookIcon from "@app/assets/book.svg";
 import { makeStyles } from "@material-ui/core";
+import { YBButton } from "@app/components";
+import RefreshIcon from "@app/assets/refresh.svg";
 
 const MIGRATIONS_DOCS = "https://docs.yugabyte.com/preview/yugabyte-voyager/migrate-steps/";
 
 export const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    maxWidth: 1200,
-    width: "100%",
-    minHeight: 325,
-    padding: theme.spacing(0, 4),
-    margin: theme.spacing(0, "auto"),
-    borderRadius: theme.shape.borderRadius,
-    border: "none",
+  paper: {
+    border: "1px dashed",
+    borderColor: theme.palette.primary[300],
+    backgroundColor: theme.palette.primary[100],
+    textAlign: "center",
+  },
+  icon: {
+    marginTop: theme.spacing(1),
+    flexShrink: 0,
   },
+  message: {
+    color: theme.palette.grey[700],
+  },
+  refreshButton: {
+    marginLeft: "auto",
+    width: "fit-content",
+    marginBottom: theme.spacing(2),
+  }
 }));
 
-export const MigrationsGetStarted: FC = () => {
+type MigrationsGetStartedProps = {
+  onRefresh?: () => void;
+};
+
+export const MigrationsGetStarted: FC<MigrationsGetStartedProps> = ({ onRefresh }) => {
   const classes = useStyles();
+  const theme = useTheme();
   const { t } = useTranslation();
 
   return (
-    <Paper className={classes.root}>
-      <Box display="flex" maxWidth={1000}>
-        <WelcomeCloudImage />
-        <Box pt={1} pl={5} flex={1}>
-          <Box mb={1.5}>
-            <Typography variant="h3">{t("clusterDetail.voyager.noMigrations")}</Typography>
-          </Box>
-          <Box mb={3}>
-            <Typography variant="body2" style={{ lineHeight: 1.5 }}>
-              {t("clusterDetail.voyager.getStarted")}
+    <Box>
+      <Box className={classes.refreshButton}>
+        <YBButton variant="ghost" startIcon={<RefreshIcon />} onClick={onRefresh}>
+          {t("clusterDetail.performance.actions.refresh")}
+        </YBButton>
+      </Box>
+      <Paper className={classes.paper}>
+        <Box
+          p={3}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          gridGap={theme.spacing(3)}
+        >
+          <MigrateIcon className={classes.icon} />
+          <Box
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            gridGap={theme.spacing(2.5)}
+          >
+            <Typography variant="h5">
+              {t("clusterDetail.voyager.gettingStarted.noMigrations")}
             </Typography>
+            <Typography variant="body2" className={classes.message}>
+              {t("clusterDetail.voyager.gettingStarted.noMigrationsDesc")}
+            </Typography>
+            <Box display="flex" gridGap={theme.spacing(1.5)} alignItems="center">
+              <BookIcon />
+              <Link href={MIGRATIONS_DOCS} target="_blank">
+                {t("clusterDetail.voyager.gettingStarted.learnMore")}
+              </Link>
+            </Box>
+            <Box display="flex" gridGap={theme.spacing(0.5)} alignItems="center" mt={1.5}>
+              <Typography variant="body1">Note!</Typography>
+              <Typography variant="body2" className={classes.message}>
+                {t("clusterDetail.voyager.gettingStarted.refreshNote")}
+              </Typography>
+            </Box>
           </Box>
-          <YBButton
-            variant="gradient"
-            size="large"
-            component={Link}
-            to={{ pathname: MIGRATIONS_DOCS }}
-            target="_blank"
-          >
-            {t("clusterDetail.voyager.learnMore")}
-          </YBButton>
         </Box>
-      </Box>
-    </Paper>
+      </Paper>
+    </Box>
   );
 };

yugabyted-ui/ui/src/features/clusters/details/migration/MigrationList.tsx

@@ -434,7 +434,7 @@ export const MigrationList: FC<MigrationListProps> = ({
   );
 
   if (!migrationDataProp?.length && !hasError) {
-    return <MigrationsGetStarted />;
+    return <MigrationsGetStarted onRefresh={onRefresh} />;
   }
 
   const completedCount = 1;

yugabyted-ui/ui/src/translations/en.json

@@ -895,6 +895,12 @@
         "refreshing": "Refreshing",
         "getStarted": "Use YugabyteDB Voyager to manage end-to-end database migration, including cluster preparation, schema migration, and data migration. Voyager safely migrates data from PostgreSQL, MySQL, and Oracle databases to YugabyteDB Managed, YugabyteDB Anywhere, and the core open source database, YugabyteDB.",
         "learnMore": "Learn more",
+        "gettingStarted": {
+          "noMigrations": "You don't have any migrations",
+          "noMigrationsDesc": "Prepare your migrations by installing Voyager and preparing your source and target database.",
+          "learnMore": "Learn how to prepare your migration",
+          "refreshNote": "Refresh the page after connecting to your Voyager instance to see your migrations."
+        },  
         "sourceDBSidePanel": {
           "sourceDatabase": "Source Database",
           "hostname": "Hostname",