diff --git a/frontend/src/metabase/components/AddDatabaseHelpCard.jsx b/frontend/src/metabase/components/AddDatabaseHelpCard.jsx
index 4fbb076683c22669171dd1a0c4a74918615b74c3..3e6ba5ff378e2be6cec34f79d257ee541bf60735 100644
--- a/frontend/src/metabase/components/AddDatabaseHelpCard.jsx
+++ b/frontend/src/metabase/components/AddDatabaseHelpCard.jsx
@@ -1,7 +1,5 @@
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;
diff --git a/frontend/src/metabase/components/AddDatabaseHelpCard.styled.js b/frontend/src/metabase/components/AddDatabaseHelpCard.styled.js
new file mode 100644
index 0000000000000000000000000000000000000000..1a39a52d677f47b53b57d32138f3eecdcc0902f7
--- /dev/null
+++ b/frontend/src/metabase/components/AddDatabaseHelpCard.styled.js
@@ -0,0 +1,18 @@
+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")};
+`;
diff --git a/frontend/src/metabase/setup/components/Setup.jsx b/frontend/src/metabase/setup/components/Setup.jsx
index 0f1eaa1ed44f2ddf81369ecfb1d607147f1bc339..18ec4319a8e901a8c568e9ed537d7dd47cd2cc52 100644
--- a/frontend/src/metabase/setup/components/Setup.jsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/setup/components/Setup.styled.js b/frontend/src/metabase/setup/components/Setup.styled.js
new file mode 100644
index 0000000000000000000000000000000000000000..137367a135167a2c938c0c0395c0a5c5ffcfab1f
--- /dev/null
+++ b/frontend/src/metabase/setup/components/Setup.styled.js
@@ -0,0 +1,10 @@
+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);" : "")}
+`;
diff --git a/frontend/test/metabase/scenarios/onboarding/setup/setup.cy.spec.js b/frontend/test/metabase/scenarios/onboarding/setup/setup.cy.spec.js
index e89d038f32f02c861a91d4770a36d038349b1f00..04064aff27dbf3679fedea74f909dd0d06850399 100644
--- a/frontend/test/metabase/scenarios/onboarding/setup/setup.cy.spec.js
+++ b/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
// ================