Show cloud migration help tooltip when setup is finished (#22550)

* show cloud migration help tooltip when setup is finished

* update link

frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.tsx

 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>
   );
 };
 

frontend/src/metabase/components/HelpCard/HelpCard.stories.tsx

+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.",
+};

frontend/src/metabase/components/DatabaseHelpCard/DatabaseHelpCard.styled.tsx → 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;
+  }
 `;

frontend/src/metabase/components/HelpCard/HelpCard.tsx

+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,
+});

frontend/src/metabase/components/HelpCard/index.ts

+export { default } from "./HelpCard";

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(),

frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.tsx

 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>
   );
 };
 

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>

frontend/src/metabase/setup/components/DatabaseHelp/DatabaseHelp.styled.tsx → frontend/src/metabase/setup/components/SetupCardContainer/SetupCardContainer.styled.tsx

 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;
 

frontend/src/metabase/setup/components/SetupCardContainer/index.ts

+export * from "./SetupCardContainer.styled";

frontend/src/metabase/setup/containers/CloudMigrationHelp/CloudMigrationHelp.tsx

+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);

frontend/src/metabase/setup/containers/CloudMigrationHelp/index.ts

+export { default } from "./CloudMigrationHelp";