From 93a6a87c419ad98140d1589191e0c86f2b41e237 Mon Sep 17 00:00:00 2001
From: Alexander Lesnenko <alxnddr@users.noreply.github.com>
Date: Tue, 10 May 2022 14:56:58 +0400
Subject: [PATCH] Show cloud migration help tooltip when setup is finished
 (#22550)

* show cloud migration help tooltip when setup is finished

* update link
---
 .../DatabaseHelpCard/DatabaseHelpCard.tsx     | 41 ++++++----------
 .../components/HelpCard/HelpCard.stories.tsx  | 20 ++++++++
 .../HelpCard.styled.tsx}                      | 18 ++++---
 .../metabase/components/HelpCard/HelpCard.tsx | 47 +++++++++++++++++++
 .../src/metabase/components/HelpCard/index.ts |  1 +
 frontend/src/metabase/lib/settings.ts         |  4 ++
 .../components/DatabaseHelp/DatabaseHelp.tsx  |  6 +--
 .../components/SettingsPage/SettingsPage.tsx  |  2 +
 .../SetupCardContainer.styled.tsx}            |  4 +-
 .../components/SetupCardContainer/index.ts    |  1 +
 .../CloudMigrationHelp/CloudMigrationHelp.tsx | 37 +++++++++++++++
 .../containers/CloudMigrationHelp/index.ts    |  1 +
 12 files changed, 144 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/metabase/components/HelpCard/HelpCard.stories.tsx
 rename frontend/src/metabase/components/{DatabaseHelpCard/DatabaseHelpCard.styled.tsx => HelpCard/HelpCard.styled.tsx} (87%)
 create mode 100644 frontend/src/metabase/components/HelpCard/HelpCard.tsx
 create mode 100644 frontend/src/metabase/components/HelpCard/index.ts
 rename frontend/src/metabase/setup/components/{DatabaseHelp/DatabaseHelp.styled.tsx => SetupCardContainer/SetupCardContainer.styled.tsx} (81%)
 create mode 100644 frontend/src/metabase/setup/components/SetupCardContainer/index.ts
 create mode 100644 frontend/src/metabase/setup/containers/CloudMigrationHelp/CloudMigrationHelp.tsx
 create mode 100644 frontend/src/metabase/setup/containers/CloudMigrationHelp/index.ts

diff --git a/frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.tsx b/frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.tsx
index 39e76cdfa2b..5b048fa3604 100644
--- a/frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.tsx
+++ b/frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.tsx
@@ -1,16 +1,9 @@
 import React from "react";
 import { jt, t } from "ttag";
 import Settings from "metabase/lib/settings";
-import {
-  CardHeaderLink,
-  CardHeaderStatic,
-  CardIcon,
-  CardLink,
-  CardMessage,
-  CardRootLink,
-  CardRootStatic,
-  CardTitle,
-} from "./DatabaseHelpCard.styled";
+
+import HelpCard from "../HelpCard";
+import ExternalLink from "metabase/core/components/ExternalLink";
 
 export interface DatabaseHelpCardProps {
   className?: string;
@@ -24,29 +17,25 @@ const DatabaseHelpCard = ({
   const docsUrl = Settings.docsUrl(
     "administration-guide/01-managing-databases",
   );
-  const CardRoot = isHosted ? CardRootStatic : CardRootLink;
-  const CardHeader = isHosted ? CardHeaderLink : CardHeaderStatic;
 
   return (
-    <CardRoot className={className} href={isHosted ? undefined : docsUrl}>
-      <CardHeader href={isHosted ? docsUrl : undefined}>
-        <CardIcon name="info" />
-        <CardTitle>{t`Need help connecting?`}</CardTitle>
-        <CardIcon name="external" />
-      </CardHeader>
-      <CardMessage>
-        {t`See our docs for step-by-step directions on how to connect your database.`}
-      </CardMessage>
+    <HelpCard
+      title={t`Need help connecting?`}
+      className={className}
+      isFullyClickable={!isHosted}
+      helpUrl={docsUrl}
+    >
+      <p>{t`See our docs for step-by-step directions on how to connect your database.`}</p>
       {isHosted && (
-        <CardMessage>
+        <p>
           {jt`Docs weren't enough? ${(
-            <CardLink key="link" href="https://www.metabase.com/help/cloud">
+            <ExternalLink key="link" href="https://www.metabase.com/help/cloud">
               {t`Write us.`}
-            </CardLink>
+            </ExternalLink>
           )}`}
-        </CardMessage>
+        </p>
       )}
-    </CardRoot>
+    </HelpCard>
   );
 };
 
diff --git a/frontend/src/metabase/components/HelpCard/HelpCard.stories.tsx b/frontend/src/metabase/components/HelpCard/HelpCard.stories.tsx
new file mode 100644
index 00000000000..889bdaf388a
--- /dev/null
+++ b/frontend/src/metabase/components/HelpCard/HelpCard.stories.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+import HelpCard from "./HelpCard";
+
+export default {
+  title: "Components/HelpCard",
+  component: HelpCard,
+};
+
+const Template: ComponentStory<typeof HelpCard> = args => {
+  return <HelpCard {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Need help with anything?",
+  helpUrl: "https://metabase.com",
+  children:
+    "See our docs for step-by-step directions on how to do what you need.",
+};
diff --git a/frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.styled.tsx b/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
similarity index 87%
rename from frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.styled.tsx
rename to frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
index 6dc3d8a7826..167867f24de 100644
--- a/frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.styled.tsx
+++ b/frontend/src/metabase/components/HelpCard/HelpCard.styled.tsx
@@ -53,18 +53,22 @@ export const CardIcon = styled(Icon)`
   color: ${color("brand")};
 `;
 
-export const CardMessage = styled.span`
+export const CardMessage = styled.div`
   display: block;
   color: ${color("text-medium")};
   line-height: 1.25rem;
 
-  &:not(:last-child) {
+  p {
+    margin: 0;
+  }
+
+  p:not(:last-child) {
     margin-bottom: 1.25rem;
   }
-`;
 
-export const CardLink = styled(ExternalLink)`
-  color: ${color("brand")};
-  cursor: pointer;
-  font-weight: bold;
+  a {
+    color: ${color("brand")};
+    cursor: pointer;
+    font-weight: bold;
+  }
 `;
diff --git a/frontend/src/metabase/components/HelpCard/HelpCard.tsx b/frontend/src/metabase/components/HelpCard/HelpCard.tsx
new file mode 100644
index 00000000000..139f7c23621
--- /dev/null
+++ b/frontend/src/metabase/components/HelpCard/HelpCard.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  CardHeaderLink,
+  CardHeaderStatic,
+  CardIcon,
+  CardMessage,
+  CardRootLink,
+  CardRootStatic,
+  CardTitle,
+} from "./HelpCard.styled";
+
+export interface HelpCardProps {
+  title: string;
+  helpUrl: string;
+  className?: string;
+  isFullyClickable?: boolean;
+  children: React.ReactNode;
+}
+
+const HelpCard = ({
+  title,
+  helpUrl,
+  isFullyClickable = true,
+  className,
+  children,
+}: HelpCardProps): JSX.Element => {
+  const CardRoot = isFullyClickable ? CardRootLink : CardRootStatic;
+  const CardHeader = isFullyClickable ? CardHeaderStatic : CardHeaderLink;
+
+  return (
+    <CardRoot
+      className={className}
+      href={isFullyClickable ? helpUrl : undefined}
+    >
+      <CardHeader href={isFullyClickable ? undefined : helpUrl}>
+        <CardIcon name="info" />
+        <CardTitle>{title}</CardTitle>
+        <CardIcon name="external" />
+      </CardHeader>
+      <CardMessage>{children}</CardMessage>
+    </CardRoot>
+  );
+};
+
+export default Object.assign(HelpCard, {
+  Section: CardMessage,
+});
diff --git a/frontend/src/metabase/components/HelpCard/index.ts b/frontend/src/metabase/components/HelpCard/index.ts
new file mode 100644
index 00000000000..a3c338318e0
--- /dev/null
+++ b/frontend/src/metabase/components/HelpCard/index.ts
@@ -0,0 +1 @@
+export { default } from "./HelpCard";
diff --git a/frontend/src/metabase/lib/settings.ts b/frontend/src/metabase/lib/settings.ts
index 3fb72303e7f..e5f098f3b89 100644
--- a/frontend/src/metabase/lib/settings.ts
+++ b/frontend/src/metabase/lib/settings.ts
@@ -271,6 +271,10 @@ class Settings {
     return "https://www.metabase.com/upgrade/";
   }
 
+  migrateToCloudGuideUrl() {
+    return "https://www.metabase.com/cloud/docs/migrate/guide";
+  }
+
   newVersionAvailable() {
     const result = MetabaseUtils.compareVersions(
       this.currentVersion(),
diff --git a/frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.tsx b/frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.tsx
index e5678695a28..2ff3bf0c571 100644
--- a/frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.tsx
+++ b/frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import DatabaseHelpCard from "metabase/containers/DatabaseHelpCard";
-import { DatabaseHelpRoot } from "./DatabaseHelp.styled";
+import { SetupCardContainer } from "../SetupCardContainer";
 
 export interface DatabaseHelpProps {
   engine?: string;
@@ -14,9 +14,9 @@ const DatabaseHelp = ({
   const isVisible = isStepActive && engine != null;
 
   return (
-    <DatabaseHelpRoot isVisible={isVisible}>
+    <SetupCardContainer isVisible={isVisible}>
       <DatabaseHelpCard />
-    </DatabaseHelpRoot>
+    </SetupCardContainer>
   );
 };
 
diff --git a/frontend/src/metabase/setup/components/SettingsPage/SettingsPage.tsx b/frontend/src/metabase/setup/components/SettingsPage/SettingsPage.tsx
index 9e43aba4081..b73b796949b 100644
--- a/frontend/src/metabase/setup/components/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/metabase/setup/components/SettingsPage/SettingsPage.tsx
@@ -8,6 +8,7 @@ import DatabaseHelp from "../../containers/DatabaseHelp";
 import PreferencesStep from "../../containers/PreferencesStep";
 import CompletedStep from "../../containers/CompletedStep";
 import SetupHelp from "../SetupHelp";
+import MigrationHelp from "metabase/setup/containers/CloudMigrationHelp";
 
 export interface SettingsPageProps {
   step: number;
@@ -35,6 +36,7 @@ const SettingsPage = ({
         <DatabaseHelp {...props} />
         <PreferencesStep {...props} />
         <CompletedStep {...props} />
+        <MigrationHelp {...props} />
         <SetupHelp {...props} />
       </PageBody>
     </div>
diff --git a/frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.styled.tsx b/frontend/src/metabase/setup/components/SetupCardContainer/SetupCardContainer.styled.tsx
similarity index 81%
rename from frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.styled.tsx
rename to frontend/src/metabase/setup/components/SetupCardContainer/SetupCardContainer.styled.tsx
index cb213eb6ca5..f68f86834ab 100644
--- a/frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.styled.tsx
+++ b/frontend/src/metabase/setup/components/SetupCardContainer/SetupCardContainer.styled.tsx
@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import { breakpointMinLarge } from "metabase/styled-components/theme";
 
-interface DatabaseHelpRootProps {
+interface SetupCardContainerProps {
   isVisible: boolean;
 }
 
-export const DatabaseHelpRoot = styled.div<DatabaseHelpRootProps>`
+export const SetupCardContainer = styled.div<SetupCardContainerProps>`
   display: ${props => (props.isVisible ? "block" : "none")};
   margin-bottom: 1.75rem;
 
diff --git a/frontend/src/metabase/setup/components/SetupCardContainer/index.ts b/frontend/src/metabase/setup/components/SetupCardContainer/index.ts
new file mode 100644
index 00000000000..c3347c7d65f
--- /dev/null
+++ b/frontend/src/metabase/setup/components/SetupCardContainer/index.ts
@@ -0,0 +1 @@
+export * from "./SetupCardContainer.styled";
diff --git a/frontend/src/metabase/setup/containers/CloudMigrationHelp/CloudMigrationHelp.tsx b/frontend/src/metabase/setup/containers/CloudMigrationHelp/CloudMigrationHelp.tsx
new file mode 100644
index 00000000000..5531f4de392
--- /dev/null
+++ b/frontend/src/metabase/setup/containers/CloudMigrationHelp/CloudMigrationHelp.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { connect } from "react-redux";
+import { t } from "ttag";
+import { State } from "metabase-types/store";
+import HelpCard from "metabase/components/HelpCard";
+import { SetupCardContainer } from "metabase/setup/components/SetupCardContainer";
+import MetabaseSettings from "metabase/lib/settings";
+import { COMPLETED_STEP } from "../../constants";
+import { isStepActive } from "../../selectors";
+
+const mapStateToProps = (state: State) => ({
+  isHosted: state.settings.values["is-hosted?"],
+  isStepActive: isStepActive(state, COMPLETED_STEP),
+});
+
+interface CloudMigrationHelpProps {
+  isHosted: boolean;
+  isStepActive: boolean;
+}
+
+const CloudMigrationHelp = ({
+  isHosted,
+  isStepActive,
+}: CloudMigrationHelpProps) => {
+  const isVisible = isHosted && isStepActive;
+
+  return (
+    <SetupCardContainer isVisible={isVisible}>
+      <HelpCard
+        title={t`Migrating from self-hosted?`}
+        helpUrl={MetabaseSettings.migrateToCloudGuideUrl()}
+      >{t`Check out our docs for how to migrate your self-hosted instance to Cloud.`}</HelpCard>
+    </SetupCardContainer>
+  );
+};
+
+export default connect(mapStateToProps)(CloudMigrationHelp);
diff --git a/frontend/src/metabase/setup/containers/CloudMigrationHelp/index.ts b/frontend/src/metabase/setup/containers/CloudMigrationHelp/index.ts
new file mode 100644
index 00000000000..30d344f5084
--- /dev/null
+++ b/frontend/src/metabase/setup/containers/CloudMigrationHelp/index.ts
@@ -0,0 +1 @@
+export { default } from "./CloudMigrationHelp";
-- 
GitLab