Action Creator 9: Inline Forms (#25567)

* add inline forms for actions

* better style names

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}
     />
   );
 }

frontend/src/metabase/writeback/components/ActionViz/ActionForm.styled.tsx

+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;
+`;

frontend/src/metabase/writeback/components/ActionViz/ActionForm.tsx

+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;

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" },