diff --git a/frontend/src/metabase/writeback/components/ActionViz/Action.tsx b/frontend/src/metabase/writeback/components/ActionViz/Action.tsx index 5505522e2f49b42683f24675c0b62197bf15a9a1..4e55b8f09ed0bb2d922f3f71d65458f1f63b62f5 100644 --- a/frontend/src/metabase/writeback/components/ActionViz/Action.tsx +++ b/frontend/src/metabase/writeback/components/ActionViz/Action.tsx @@ -26,6 +26,7 @@ import { StyledButton } from "./ActionButton.styled"; import DefaultActionButton from "./DefaultActionButton"; import ImplicitActionButton from "./ImplicitActionButton"; +import ActionForm from "./ActionForm"; interface ActionProps extends VisualizationProps { dashcard: ActionDashboardCard; @@ -44,6 +45,11 @@ function ActionComponent({ onVisualizationClick, parameterValues, }: ActionProps) { + const dashcardSettings = dashcard.visualization_settings; + const actionSettings = dashcard.action?.visualization_settings; + const actionDisplayType = + dashcardSettings?.actionDisplayType ?? actionSettings?.type ?? "modal"; + const dashcardParamValues = useMemo( () => getDashcardParamValues(dashcard, parameterValues), [dashcard, parameterValues], @@ -59,6 +65,9 @@ function ActionComponent({ ); }, [dashcard, dashcardParamValues]); + const shouldDisplayButton = + actionDisplayType !== "inline" || !missingParameters.length; + const onSubmit = useCallback( (extra_parameters: ArbitraryParameterForActionExecution[]) => executeRowAction({ @@ -67,23 +76,33 @@ function ActionComponent({ parameters: dashcardParamValues, extra_parameters, dispatch, - shouldToast: true, + shouldToast: shouldDisplayButton, }), - [dashboard, dashcard, dashcardParamValues, dispatch], + [dashboard, dashcard, dashcardParamValues, dispatch, shouldDisplayButton], ); if (isImplicitActionButton(dashcard)) { return <ImplicitActionButton isSettings={isSettings} settings={settings} />; } + if (shouldDisplayButton) { + return ( + <DefaultActionButton + onSubmit={onSubmit} + missingParameters={missingParameters} + isSettings={isSettings} + settings={settings} + getExtraDataForClick={getExtraDataForClick} + onVisualizationClick={onVisualizationClick} + /> + ); + } + return ( - <DefaultActionButton + <ActionForm onSubmit={onSubmit} missingParameters={missingParameters} - isSettings={isSettings} - settings={settings} - getExtraDataForClick={getExtraDataForClick} - onVisualizationClick={onVisualizationClick} + action={dashcard.action as WritebackQueryAction} /> ); } diff --git a/frontend/src/metabase/writeback/components/ActionViz/ActionForm.styled.tsx b/frontend/src/metabase/writeback/components/ActionViz/ActionForm.styled.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a508448c6318d9a89e7a1ef0cad8a38a0770752b --- /dev/null +++ b/frontend/src/metabase/writeback/components/ActionViz/ActionForm.styled.tsx @@ -0,0 +1,15 @@ +import styled from "@emotion/styled"; +import { space } from "metabase/styled-components/theme"; +import { color } from "metabase/lib/colors"; + +export const DataAppPageFormWrapper = styled.div` + padding: 1.5rem; + background-color: ${color("white")}; + border-radius: ${space(1)}; + border: 1px solid ${color("border")}; + overflow-y: auto; +`; + +export const DataAppPageFormTitle = styled.h4` + margin-bottom: 1.5rem; +`; diff --git a/frontend/src/metabase/writeback/components/ActionViz/ActionForm.tsx b/frontend/src/metabase/writeback/components/ActionViz/ActionForm.tsx new file mode 100644 index 0000000000000000000000000000000000000000..7fa68765389cede68ad7b74ffbf1235cfa6e0199 --- /dev/null +++ b/frontend/src/metabase/writeback/components/ActionViz/ActionForm.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +import type { + ArbitraryParameterForActionExecution, + WritebackQueryAction, + WritebackParameter, + OnSubmitActionForm, +} from "metabase-types/api"; + +import ActionParametersInputForm from "../../containers/ActionParametersInputForm"; +import { + DataAppPageFormWrapper, + DataAppPageFormTitle, +} from "./ActionForm.styled"; + +interface ActionFormProps { + onSubmit: OnSubmitActionForm; + missingParameters: WritebackParameter[]; + action: WritebackQueryAction; +} + +function ActionForm({ onSubmit, missingParameters, action }: ActionFormProps) { + return ( + <DataAppPageFormWrapper> + <DataAppPageFormTitle>{action.name}</DataAppPageFormTitle> + <ActionParametersInputForm + onSubmit={onSubmit} + missingParameters={missingParameters} + action={action} + /> + </DataAppPageFormWrapper> + ); +} + +export default ActionForm; diff --git a/frontend/src/metabase/writeback/components/ActionViz/ActionViz.tsx b/frontend/src/metabase/writeback/components/ActionViz/ActionViz.tsx index 50ea1c9ebcc91353a1562ae139d250945c234102..8aa822b100fa9416174834a7cb112fa7d463f722 100644 --- a/frontend/src/metabase/writeback/components/ActionViz/ActionViz.tsx +++ b/frontend/src/metabase/writeback/components/ActionViz/ActionViz.tsx @@ -11,7 +11,7 @@ export default Object.assign(Action, { hidden: true, supportPreviewing: false, - minSize: { width: 2, height: 1 }, + minSize: { width: 1, height: 1 }, checkRenderable: () => true, isSensible: () => false, @@ -25,9 +25,8 @@ export default Object.assign(Action, { }, actionDisplayType: { section: t`Display`, - title: t`Action Display`, + title: t`Action Form Display`, widget: "radio", - default: "inline", props: { options: [ { name: t`Inline`, value: "inline" },