From c1928e1f81cfdde01ea4f39d82aa2eeaa80ff8fd Mon Sep 17 00:00:00 2001
From: Ryan Laurie <30528226+iethree@users.noreply.github.com>
Date: Tue, 27 Sep 2022 12:24:57 -0600
Subject: [PATCH] Action Creator 9: Inline Forms (#25567)

* add inline forms for actions

* better style names
---
 .../writeback/components/ActionViz/Action.tsx | 33 +++++++++++++----
 .../ActionViz/ActionForm.styled.tsx           | 15 ++++++++
 .../components/ActionViz/ActionForm.tsx       | 35 +++++++++++++++++++
 .../components/ActionViz/ActionViz.tsx        |  5 ++-
 4 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/metabase/writeback/components/ActionViz/ActionForm.styled.tsx
 create mode 100644 frontend/src/metabase/writeback/components/ActionViz/ActionForm.tsx

diff --git a/frontend/src/metabase/writeback/components/ActionViz/Action.tsx b/frontend/src/metabase/writeback/components/ActionViz/Action.tsx
index 5505522e2f4..4e55b8f09ed 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 00000000000..a508448c631
--- /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 00000000000..7fa68765389
--- /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 50ea1c9ebcc..8aa822b100f 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" },
-- 
GitLab