diff --git a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx index 60a6589c438cd154badf4f96896921f3f3c456ad..9826399e9ced2edffcdf41410cc6a7fcccba82e7 100644 --- a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.styled.tsx +++ b/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` diff --git a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx index 7bdb9afa39aa5f68c782490911d37822714ff188..c7ffd40022ed0ec4cc591e28e988ed48fda27c67 100644 --- a/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx +++ b/frontend/src/metabase/actions/containers/ActionCreator/FormCreator/FormCreator.tsx @@ -1,7 +1,12 @@ 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> ); }