Add explanation text to the action editor (#28406)

* Add explanation text to the action editor

* Replace link

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx

@@ -4,12 +4,17 @@ import Icon from "metabase/components/Icon";
 import { color, lighten } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
-export const FormCreatorWrapper = styled.div`
+export const FormContainer = styled.div`
   flex: 1 1 0;
+  margin: 1rem 1.5rem;
   transition: flex 500ms ease-in-out;
-  padding: ${space(3)};
   background-color: ${color("white")};
-  overflow-y: auto;
+`;
+
+export const InfoText = styled.span`
+  display: block;
+  color: ${color("text-medium")};
+  margin-bottom: 2rem;
 `;
 
 export const FieldSettingsButtonsContainer = styled.div`

frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx

 import React, { useState, useEffect, useMemo } from "react";
+import { jt, t } from "ttag";
 import _ from "underscore";
 
+import ExternalLink from "metabase/core/components/ExternalLink";
 import { ActionForm } from "metabase/actions/components/ActionForm";
+import SidebarContent from "metabase/query_builder/components/SidebarContent";
+
+import MetabaseSettings from "metabase/lib/settings";
 
 import type { ActionFormSettings, Parameter } from "metabase-types/api";
 
@@ -10,7 +15,7 @@ import { addMissingSettings } from "../utils";
 import { hasNewParams } from "./utils";
 
 import { EmptyFormPlaceholder } from "./EmptyFormPlaceholder";
-import { FormCreatorWrapper } from "./FormCreator.styled";
+import { FormContainer, InfoText } from "./FormCreator.styled";
 
 function FormCreator({
   params,
@@ -47,23 +52,37 @@ function FormCreator({
 
   if (!sortedParams.length) {
     return (
-      <FormCreatorWrapper>
-        <EmptyFormPlaceholder onExampleClick={onExampleClick} />
-      </FormCreatorWrapper>
+      <SidebarContent title={t`Action parameters`}>
+        <FormContainer>
+          <EmptyFormPlaceholder onExampleClick={onExampleClick} />
+        </FormContainer>
+      </SidebarContent>
     );
   }
 
+  const docsLink = (
+    <ExternalLink
+      key="learn-more"
+      href={MetabaseSettings.docsUrl("actions/custom")}
+    >{t`Learn more`}</ExternalLink>
+  );
+
   return (
-    <FormCreatorWrapper>
-      <ActionForm
-        parameters={sortedParams}
-        isEditable={isEditable}
-        onClose={_.noop}
-        onSubmit={_.noop}
-        formSettings={formSettings}
-        setFormSettings={setFormSettings}
-      />
-    </FormCreatorWrapper>
+    <SidebarContent title={t`Action parameters`}>
+      <FormContainer>
+        <InfoText>
+          {jt`Configure your parameters' types and properties here. The values for these parameters can come from user input, or from a dashboard filter. ${docsLink}`}
+        </InfoText>
+        <ActionForm
+          parameters={sortedParams}
+          isEditable={isEditable}
+          onClose={_.noop}
+          onSubmit={_.noop}
+          formSettings={formSettings}
+          setFormSettings={setFormSettings}
+        />
+      </FormContainer>
+    </SidebarContent>
   );
 }