From 6826b2ad17fac70282473de1aac16260b0b23554 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Wed, 2 Jun 2021 14:48:24 +0300
Subject: [PATCH] Fix database docs card style, add in-out animation (#16302)
---
.../components/AddDatabaseHelpCard.jsx | 33 ++++------------
.../components/AddDatabaseHelpCard.styled.js | 18 +++++++++
.../src/metabase/setup/components/Setup.jsx | 39 +++++++++----------
.../metabase/setup/components/Setup.styled.js | 10 +++++
.../onboarding/setup/setup.cy.spec.js | 7 +++-
5 files changed, 58 insertions(+), 49 deletions(-)
create mode 100644 frontend/src/metabase/components/AddDatabaseHelpCard.styled.js
create mode 100644 frontend/src/metabase/setup/components/Setup.styled.js
diff --git a/frontend/src/metabase/components/AddDatabaseHelpCard.jsx b/frontend/src/metabase/components/AddDatabaseHelpCard.jsx
index 4fbb076683c..3e6ba5ff378 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 00000000000..1a39a52d677
--- /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 0f1eaa1ed44..18ec4319a8e 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 00000000000..137367a1351
--- /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 e89d038f32f..04064aff27d 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
// ================
--
GitLab