From 2c3026fd57ba3bbc6d842a2024991ff900173467 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Mon, 20 Feb 2023 13:10:53 +0000
Subject: [PATCH] Add explanation text to the action editor (#28406)
* Add explanation text to the action editor
* Replace link
---
.../FormCreator/FormCreator.styled.tsx | 11 +++--
.../ActionCreator/FormCreator/FormCreator.tsx | 47 +++++++++++++------
2 files changed, 41 insertions(+), 17 deletions(-)
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 60a6589c438..9826399e9ce 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 7bdb9afa39a..c7ffd40022e 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>
);
}
--
GitLab