Fix database docs card style, add in-out animation (#16302)

frontend/src/metabase/components/AddDatabaseHelpCard.jsx

 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
-import { Flex } from "grid-styled";
 
 import { t, jt } from "ttag";
 
@@ -10,6 +8,12 @@ import MetabaseSettings from "metabase/lib/settings";
 import ExternalLink from "metabase/components/ExternalLink";
 import Icon from "metabase/components/Icon";
 
+import {
+  CardContent,
+  HelpCardContainer,
+  IconContainer,
+} from "./AddDatabaseHelpCard.styled";
+
 export const ENGINE_DOCS = {
   bigquery: MetabaseSettings.docsUrl("administration-guide/databases/bigquery"),
   mongo: MetabaseSettings.docsUrl("administration-guide/databases/mongodb"),
@@ -30,15 +34,9 @@ export const CLOUD_HELP_URL = "https://www.metabase.com/help/cloud";
 const propTypes = {
   engine: PropTypes.string.isRequired,
   hasCircle: PropTypes.bool,
-  style: PropTypes.object,
-};
-
-const defaultProps = {
-  hasCircle: true,
-  style: {},
 };
 
-function AddDatabaseHelpCard({ engine, hasCircle, style, ...props }) {
+function AddDatabaseHelpCard({ engine, hasCircle = true, ...props }) {
   const displayName = useMemo(() => {
     const hasEngineDoc = !!ENGINE_DOCS[engine];
     if (!hasEngineDoc) {
@@ -92,22 +90,5 @@ function AddDatabaseHelpCard({ engine, hasCircle, style, ...props }) {
 }
 
 AddDatabaseHelpCard.propTypes = propTypes;
-AddDatabaseHelpCard.defaultProps = defaultProps;
-
-const HelpCardContainer = styled(Flex)`
-  background-color: #f9fbfb;
-  border-radius: 10px;
-  min-width: 300px;
-`;
-
-const IconContainer = styled(Flex)`
-  width: ${props => (props.hasCircle ? "52px" : "32px")};
-  height: ${props => (props.hasCircle ? "52px" : "32px")};
-  background-color: ${props => (props.hasCircle ? "#EEF2F5" : "transparent")};
-`;
-
-const CardContent = styled(Flex)`
-  margin-top: ${props => (props.shouldDisplayHelpLink ? "8px" : 0)};
-`;
 
 export default AddDatabaseHelpCard;

frontend/src/metabase/components/AddDatabaseHelpCard.styled.js

+import styled from "styled-components";
+import { Flex } from "grid-styled";
+
+export const CardContent = styled(Flex)`
+  margin-top: ${props => (props.shouldDisplayHelpLink ? "8px" : 0)};
+`;
+
+export const HelpCardContainer = styled(Flex)`
+  background-color: #f9fbfb;
+  border-radius: 10px;
+  min-width: 300px;
+`;
+
+export const IconContainer = styled(Flex)`
+  width: ${props => (props.hasCircle ? "52px" : "32px")};
+  height: ${props => (props.hasCircle ? "52px" : "32px")};
+  background-color: ${props => (props.hasCircle ? "#EEF2F5" : "transparent")};
+`;

frontend/src/metabase/setup/components/Setup.jsx

@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
+import { color } from "metabase/lib/colors";
 import MetabaseAnalytics from "metabase/lib/analytics";
 import MetabaseSettings from "metabase/lib/settings";
 
@@ -11,11 +12,13 @@ import ExternalLink from "metabase/components/ExternalLink";
 import LogoIcon from "metabase/components/LogoIcon";
 import NewsletterForm from "metabase/components/NewsletterForm";
 
+import DatabaseSchedulingStep from "metabase/setup/components/DatabaseSchedulingStep";
+
 import LanguageStep from "./LanguageStep";
 import UserStep from "./UserStep";
 import DatabaseConnectionStep from "./DatabaseConnectionStep";
 import PreferencesStep from "./PreferencesStep";
-import DatabaseSchedulingStep from "metabase/setup/components/DatabaseSchedulingStep";
+import { AddDatabaseHelpCardHolder } from "./Setup.styled";
 
 const WELCOME_STEP_NUMBER = 0;
 const LANGUAGE_STEP_NUMBER = 1;
@@ -109,6 +112,9 @@ export default class Setup extends Component {
       userDetails,
     } = this.props;
 
+    const isDatabaseHelpCardVisible =
+      selectedDatabaseEngine && activeStep === DATABASE_CONNECTION_STEP_NUMBER;
+
     if (activeStep === WELCOME_STEP_NUMBER) {
       return (
         <div className="relative full-height flex flex-full layout-centered">
@@ -196,26 +202,17 @@ export default class Setup extends Component {
             </div>
           </div>
 
-          {selectedDatabaseEngine &&
-            activeStep === DATABASE_CONNECTION_STEP_NUMBER && (
-              <div
-                style={{
-                  position: "fixed",
-                  left: "1em",
-                  bottom: "1em",
-                }}
-              >
-                <AddDatabaseHelpCard
-                  engine={selectedDatabaseEngine}
-                  hasCircle={false}
-                  data-testid="database-setup-help-card"
-                  style={{
-                    border: "1px solid #F0F0F0",
-                    backgroundColor: "#FFF",
-                  }}
-                />
-              </div>
-            )}
+          <AddDatabaseHelpCardHolder isVisible={isDatabaseHelpCardVisible}>
+            <AddDatabaseHelpCard
+              engine={selectedDatabaseEngine}
+              hasCircle={false}
+              data-testid="database-setup-help-card"
+              style={{
+                border: `1px solid ${color("border")}`,
+                backgroundColor: color("white"),
+              }}
+            />
+          </AddDatabaseHelpCardHolder>
         </div>
       );
     }

frontend/src/metabase/setup/components/Setup.styled.js

+import styled from "styled-components";
+
+export const AddDatabaseHelpCardHolder = styled.div`
+  position: fixed;
+  left: 1em;
+  bottom: 1em;
+  transform: translateY(200%);
+  transition: all 0.4s;
+  ${props => (props.isVisible ? "transform: translateY(0);" : "")}
+`;

frontend/test/metabase/scenarios/onboarding/setup/setup.cy.spec.js

@@ -91,14 +91,14 @@ describe("scenarios > setup", () => {
       });
 
       // test database setup help card is NOT displayed before DB is selected
-      cy.findByTestId("database-setup-help-card").should("not.exist");
+      cy.findByTestId("database-setup-help-card").should("not.be.visible");
 
       // test that you can return to user settings if you want
       cy.findByText("Hi, Testy. Nice to meet you!").click();
       cy.findByLabelText("Email").should("have.value", "testy@metabase.com");
 
       // test database setup help card is NOT displayed on other steps
-      cy.findByTestId("database-setup-help-card").should("not.exist");
+      cy.findByTestId("database-setup-help-card").should("not.be.visible");
 
       // now back to database setting
       cy.findByText("Next").click();
@@ -151,6 +151,9 @@ describe("scenarios > setup", () => {
       cy.findByText("Never, I'll do this manually if I need to").click();
       cy.findByText("Next").click();
 
+      // test database setup help card is hidden on the next step
+      cy.findByTestId("database-setup-help-card").should("not.be.visible");
+
       // ================
       // Data Preferences
       // ================