From 6e8188bcc9681a394af36a634dd07df2730676a7 Mon Sep 17 00:00:00 2001
From: Ryan Laurie <30528226+iethree@users.noreply.github.com>
Date: Mon, 20 Feb 2023 16:07:00 -0700
Subject: [PATCH] Add action parameter mapping explainer text (#28391)
* add parameter mapping explainer text
* update link
* use styled component link
* update actiondashcardSettings tests
---
.../ActionDashcardSettings.styled.tsx | 16 ++++++++++++++++
.../ActionViz/ActionDashcardSettings.tsx | 18 +++++++++++++++++-
.../ActionDashcardSettings.unit.spec.tsx | 9 +++++----
.../ActionViz/ActionParameterMapper.styled.tsx | 5 -----
.../ActionViz/ActionParameterMapper.tsx | 5 ++---
5 files changed, 40 insertions(+), 13 deletions(-)
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.styled.tsx
index 1228c42488c..3078b242b97 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.styled.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.styled.tsx
@@ -3,6 +3,8 @@ import styled from "@emotion/styled";
import { space } from "metabase/styled-components/theme";
import { color } from "metabase/lib/colors";
+import Link from "metabase/core/components/Link";
+
export const ActionSettingsWrapper = styled.div`
display: flex;
height: 80vh;
@@ -14,6 +16,7 @@ export const ActionSettingsHeader = styled.h2`
font-size: 1.25rem;
padding-bottom: ${space(1)};
padding-left: ${space(3)};
+ padding-right: ${space(3)};
`;
// make strolling nicer by fading out the top and bottom of the column
@@ -51,6 +54,7 @@ export const ActionSettingsLeft = styled.div`
`;
export const ActionSettingsRight = styled.div`
+ max-width: 30rem;
display: flex;
flex: 1;
flex-direction: column;
@@ -77,3 +81,15 @@ export const ModalActions = styled.div`
padding: 1rem;
border-top: 1px solid ${color("border")};
`;
+
+export const ExplainerText = styled.p`
+ margin-left: ${space(3)};
+ margin-right: ${space(3)};
+
+ color: ${color("text-medium")};
+`;
+
+export const BrandLinkWithLeftMargin = styled(Link)`
+ margin-left: ${space(1)};
+ color: ${color("brand")};
+`;
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.tsx
index 46b16369f4a..5372c3c9ebc 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.tsx
@@ -22,6 +22,8 @@ import {
ActionSettingsLeft,
ActionSettingsRight,
ModalActions,
+ ExplainerText,
+ BrandLinkWithLeftMargin,
} from "./ActionDashcardSettings.styled";
const mapDispatchToProps = {
@@ -50,6 +52,8 @@ export function ActionDashcardSettings({
setActionForDashcard(dashcard, newAction);
};
+ const hasParameters = !!action?.parameters?.length;
+
return (
<ActionSettingsWrapper>
<ActionSettingsLeft>
@@ -59,7 +63,19 @@ export function ActionDashcardSettings({
<ActionSettingsRight>
{action ? (
<>
- <ActionSettingsHeader>{action.name}</ActionSettingsHeader>
+ {hasParameters && (
+ <>
+ <ActionSettingsHeader>
+ {t`Where should the values for '${action.name}' come from?`}
+ </ActionSettingsHeader>
+ <ExplainerText>
+ {t`You can either ask users to enter values, or use the value of a dashboard filter.`}
+ <BrandLinkWithLeftMargin to="https://www.metabase.com/docs/actions/custom">
+ {t`Learn more.`}
+ </BrandLinkWithLeftMargin>
+ </ExplainerText>
+ </>
+ )}
<ParameterMapperContainer>
<ConnectedActionParameterMappingForm
dashcard={dashcard}
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.unit.spec.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.unit.spec.tsx
index 8297773d62f..d42a9064f37 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.unit.spec.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.unit.spec.tsx
@@ -1,7 +1,7 @@
import React from "react";
import userEvent from "@testing-library/user-event";
import nock from "nock";
-import { renderWithProviders, screen, waitFor } from "__support__/ui";
+import { renderWithProviders, screen } from "__support__/ui";
import {
setupActionEndpoints,
@@ -149,9 +149,10 @@ describe("ActionViz > ActionDashcardSettings", () => {
});
// action name should be visible in library and parameter mapper
- await waitFor(() =>
- expect(screen.getAllByText("Action Trois")).toHaveLength(2),
- );
+ expect(await screen.findByText("Action Trois")).toBeInTheDocument();
+ expect(
+ await screen.findByText(/the values for 'Action Trois'/i),
+ ).toBeInTheDocument();
});
it("shows parameters for an action", async () => {
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.styled.tsx
index 23d93aa3b46..dc7747d9d73 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.styled.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.styled.tsx
@@ -3,11 +3,6 @@ import styled from "@emotion/styled";
import { space } from "metabase/styled-components/theme";
import { color } from "metabase/lib/colors";
-export const ParameterMapperContainer = styled.div`
- min-width: 15rem;
- max-width: 25rem;
-`;
-
export const ParameterFormSection = styled.div`
margin-top: ${space(2)};
`;
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.tsx
index 10e4085fdd5..8051feb0174 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionParameterMapper.tsx
@@ -23,7 +23,6 @@ import EmptyState from "metabase/components/EmptyState";
import type Question from "metabase-lib/Question";
import {
- ParameterMapperContainer,
ParameterFormSection,
ParameterFormLabel,
} from "./ActionParameterMapper.styled";
@@ -83,7 +82,7 @@ export const ActionParameterMappingForm = ({
);
return (
- <ParameterMapperContainer>
+ <div>
{actionParameters.map((actionParam: WritebackParameter) => (
<ParameterFormSection key={actionParam.id}>
<ParameterFormLabel>
@@ -108,7 +107,7 @@ export const ActionParameterMappingForm = ({
{actionParameters.length === 0 && (
<EmptyState message={t`This action has no parameters to map`} />
)}
- </ParameterMapperContainer>
+ </div>
);
};
--
GitLab