redirect to new action on create (#25122)

frontend/src/metabase-types/types/Card.ts

@@ -37,6 +37,7 @@ export type SavedCard<Query = DatasetQuery> = UnsavedCard<Query> & {
 
   // Only for native queries
   is_write?: boolean;
+  action_id?: number;
 };
 
 export type Card<Query = DatasetQuery> = SavedCard<Query> | UnsavedCard<Query>;

frontend/src/metabase/writeback/components/ActionCreator/ActionCreator.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { t } from "ttag";
 import _ from "underscore";
 import { connect } from "react-redux";
+import { push } from "react-router-redux";
 
 import Actions from "metabase/entities/actions";
 import { getMetadata } from "metabase/selectors/metadata";
@@ -36,6 +37,10 @@ const mapStateToProps = (
   actionId: action ? action.id : undefined,
 });
 
+const mapDispatchToProps = {
+  push,
+};
+
 interface ActionCreatorProps {
   metadata: Metadata;
   question?: Question;
@@ -47,6 +52,7 @@ function ActionCreatorComponent({
   metadata,
   question: passedQuestion,
   actionId,
+  push,
 }: ActionCreatorProps) {
   const [question, setQuestion] = useState(
     passedQuestion ?? newQuestion(metadata),
@@ -67,8 +73,9 @@ function ActionCreatorComponent({
   const afterSave = (action: SavedCard) => {
     setQuestion(question.setCard(action));
     setTimeout(() => setShowSaveModal(false), 1000);
-    // cannot redirect new action to /action/:id
-    // because the backend doesnt give us an action id yet
+    if (!actionId && action.action_id) {
+      setTimeout(() => push(`/action/${action.action_id}`), 1500);
+    }
   };
 
   const handleClose = () => setShowSaveModal(false);
@@ -113,5 +120,5 @@ export const ActionCreator = _.compose(
   Actions.load({
     id: (state: State, props: { actionId?: number }) => props.actionId,
   }),
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(ActionCreatorComponent);