diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.styled.tsx index 1228c42488c369a229d9b590db2a7bc8679e92e5..3078b242b970eb0151f3eacdd3bb97c929fc6e52 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 46b16369f4a31a0316d0e70555539e9bfc507326..5372c3c9ebc1c5055c13d404a8eb41d5cfb78f63 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 8297773d62f692fbeab2f0c8e89a45ee2b50967f..d42a9064f37bf40849ab8d6f24e741592df74552 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 23d93aa3b46758a92e4823ae219219b1b7fa8f07..dc7747d9d73a6c4b891fc26259ce4d0a8ea4a6a4 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 10e4085fdd5ef08bf1178e6f6aab2fd020ecd070..8051feb0174890b6c55943cf843cbeea7cfb003e 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> ); };