From cb5fe52ec6cce6382ebc37ad5d096e5e89afbf25 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 22 Sep 2021 12:03:16 +1000
Subject: [PATCH] add Run on Google Cloud button to settings, setup

---
 .../Settings/ProjectSettings/RowyRun.tsx      | 45 ++++++++++++-------
 src/components/Setup/Step1RowyRun.tsx         | 19 +++++---
 src/constants/externalLinks.ts                |  2 +
 src/pages/Deploy.tsx                          |  4 +-
 4 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/components/Settings/ProjectSettings/RowyRun.tsx b/src/components/Settings/ProjectSettings/RowyRun.tsx
index 1619a1f5..49dc7d23 100644
--- a/src/components/Settings/ProjectSettings/RowyRun.tsx
+++ b/src/components/Settings/ProjectSettings/RowyRun.tsx
@@ -121,21 +121,36 @@ export default function RowyRun({
       setLatestUpdate(null);
   }, [latestUpdate, setLatestUpdate, version]);
 
-  const deployButton = window.location.hostname.includes("rowy.app") ? (
-    <LoadingButton
-      href={EXTERNAL_LINKS.rowyRunDeploy}
-      target="_blank"
-      rel="noopener noreferrer"
-      loading={
-        settings.rowyRunDeployStatus === "BUILDING" ||
-        settings.rowyRunDeployStatus === "COMPLETE"
-      }
-      loadingIndicator={
-        settings.rowyRunDeployStatus === "COMPLETE" ? "Deployed" : undefined
-      }
-    >
-      One-Click Deploy
-    </LoadingButton>
+  const deployButton = window.location.hostname.includes(
+    EXTERNAL_LINKS.rowyAppHostName
+  ) ? (
+    settings.rowyRunDeployStatus === "BUILDING" ||
+    settings.rowyRunDeployStatus === "COMPLETE" ? (
+      <LoadingButton
+        variant="contained"
+        loading
+        loadingIndicator={
+          settings.rowyRunDeployStatus === "COMPLETE" ? "Deployed" : undefined
+        }
+        style={{ width: 183, borderRadius: 12 }}
+      >
+        Run on Google Cloud
+      </LoadingButton>
+    ) : (
+      <a
+        href={EXTERNAL_LINKS.rowyRunDeploy}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          src="https://deploy.cloud.run/button.svg"
+          alt="Run on Google Cloud"
+          width={183}
+          height={32}
+          style={{ display: "block" }}
+        />
+      </a>
+    )
   ) : (
     <Button
       href={EXTERNAL_LINKS.rowyRunDocs}
diff --git a/src/components/Setup/Step1RowyRun.tsx b/src/components/Setup/Step1RowyRun.tsx
index 712f11db..a7ac3964 100644
--- a/src/components/Setup/Step1RowyRun.tsx
+++ b/src/components/Setup/Step1RowyRun.tsx
@@ -62,15 +62,22 @@ export default function Step1RowyRun({
     if (!isValidRowyRunUrl && paramsRowyRunUrl) console.log(paramsRowyRunUrl);
   }, [paramsRowyRunUrl, isValidRowyRunUrl]);
 
-  const deployButton = window.location.hostname.includes("rowy.app") ? (
-    <Button
+  const deployButton = !window.location.hostname.includes(
+    EXTERNAL_LINKS.rowyAppHostName
+  ) ? (
+    <a
       href={EXTERNAL_LINKS.rowyRunDeploy}
       target="_blank"
       rel="noopener noreferrer"
-      endIcon={<OpenInNewIcon />}
     >
-      One-Click Deploy
-    </Button>
+      <img
+        src="https://deploy.cloud.run/button.svg"
+        alt="Run on Google Cloud"
+        width={183}
+        height={32}
+        style={{ display: "block" }}
+      />
+    </a>
   ) : (
     <Button
       href={EXTERNAL_LINKS.rowyRunDocs}
@@ -95,7 +102,7 @@ export default function Step1RowyRun({
         title={
           isValidRowyRunUrl
             ? `Rowy Run is set up at: ${rowyRunUrl}`
-            : "Deploy Rowy Run to your GCP project."
+            : "Deploy Rowy Run to your Google Cloud Platform project."
         }
       >
         {!isValidRowyRunUrl && (
diff --git a/src/constants/externalLinks.ts b/src/constants/externalLinks.ts
index d307a00a..1b52d470 100644
--- a/src/constants/externalLinks.ts
+++ b/src/constants/externalLinks.ts
@@ -31,4 +31,6 @@ export const EXTERNAL_LINKS = {
   // prettier-ignore
   rowyRunDeploy: `https://deploy.cloud.run/?git_repo=${meta.repository.url.replace(".git", "Run")}.git`,
   rowyRunDocs: meta.homepage.replace("//", "//docs.") + "/rowyRun",
+
+  rowyAppHostName: "rowy.app",
 };
diff --git a/src/pages/Deploy.tsx b/src/pages/Deploy.tsx
index 83eb9a3b..454ad60c 100644
--- a/src/pages/Deploy.tsx
+++ b/src/pages/Deploy.tsx
@@ -1,8 +1,7 @@
 import { useLocation } from "react-router-dom";
 import queryString from "query-string";
 
-import { useMediaQuery, Stack, Typography, Link, Button } from "@mui/material";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { useMediaQuery, Stack, Typography, Link } from "@mui/material";
 
 import MarketingBanner from "components/Auth/MarketingBanner";
 import AuthLayout from "components/Auth/AuthLayout";
@@ -45,6 +44,7 @@ export default function DeployPage() {
             <img
               src="https://deploy.cloud.run/button.svg"
               alt="Run on Google Cloud"
+              style={{ display: "block" }}
             />
           </a>