Add action parameter mapping explainer text (#28391)

* add parameter mapping explainer text

* update link

* use styled component link

* update actiondashcardSettings tests

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")};
+`;

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}

frontend/src/metabase/actions/components/ActionViz/ActionDashcardSettings.unit.spec.tsx

 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 () => {

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)};
 `;

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>
   );
 };