Data apps: faster action adding (#25846)

* [Apps] Model Actions

WIP Adding migration and endpoints for model_action.

* WIP model action execution

Changing the execution endpoints again, still working on implicit action
execution tests. Need to also test the parameters fetch.

* Re-add execution route for dashcard action_id until Front End catches up

* Add name to model_action GET

* Hydrate model-action on dashcards

* Rename and combine hydration of model_action to action

* Implicit action execution support. Use slug columns as parameter ids

* Go through model-action when using GET /action

* FE integration fixes

* Move action execution to use new parameter shape

Now, parameters should be a map of parameter-id to value
Parameter-id should be mapped on the FE. So the action parameter-id not the unmapped
dashboard parameter-id.

* Bring ModelAction into copy code

* Generate target of implicit actions to match http actions

* Update action test to place action on model

* Add unique constraint to model_action for (card_id, slug)

* Add missing require

* model_action.slug needs to be varchar for mysql constraint

* Fix test from unique constraint

* Consistent ordering for tests

* Addressing Code Reviews and Scaffold changes

* Add type: implicit to implicit model actions

* Update src/metabase/api/model_action.clj

Co-authored-by: metamben <103100869+metamben@users.noreply.github.com>

* Allow changing card_id with PUT to dashcard for model-actions

* Update tests after merge

* Fix implicit delete and add better test coverage

* Addressing review changes

Add PUT test
Add schema for dashboard-id and dashcard-id params
Fix select ordering in test

* save actions in models

* list model actions on detail page (#25648)

* Link Dashcards to model-based actions (#25770)

* Link dashcards to model-based actions

* address review comments

* Data apps model actions implicit creator (#25807)

* Link dashcards to model-based actions

* address review comments

* Link dashcards to model-based actions

* Allow implicit actions to be used like explicit ones

* address review comments

* update action types

* add action sidebar

* remove action selection from click behavior sidebar

* rework action picker

* add shortcut to create an action for a model

* update tests

* address review comments

Co-authored-by: Case Nelson <case@metabase.com>
Co-authored-by: metamben <103100869+metamben@users.noreply.github.com>
Co-authored-by: Anton Kulyk <kuliks.anton@gmail.com>

frontend/src/metabase-types/api/dashboard.ts

@@ -4,7 +4,9 @@ import type {
   ParameterId,
   Parameter,
 } from "metabase-types/types/Parameter";
+
 import type { CardId, SavedCard } from "metabase-types/types/Card";
+import type { WritebackAction } from "./writeback";
 
 import type { Dataset } from "./dataset";
 
@@ -41,6 +43,7 @@ export type DashboardOrderedCard = BaseDashboardOrderedCard & {
   card: SavedCard;
   parameter_mappings?: DashboardParameterMapping[] | null;
   series?: SavedCard[];
+  action?: WritebackAction;
 };
 
 export type DashboardParameterMapping = {

frontend/src/metabase-types/api/data-app.ts

@@ -6,7 +6,8 @@ import {
   DashboardParameterMapping,
 } from "./dashboard";
 import { WritebackAction } from "./writeback";
-import { FormType } from "./writeback-form-settings";
+import { ActionDisplayType } from "./writeback-form-settings";
+import { Card } from "./card";
 
 export type DataAppId = number;
 export type DataAppPage = Dashboard;
@@ -45,7 +46,6 @@ export type ActionParametersMapping = Pick<
 
 export interface ActionDashboardCard
   extends Omit<BaseDashboardOrderedCard, "parameter_mappings"> {
-  action_id: number | null;
   action?: WritebackAction;
   card_id?: number; // model card id for the associated action
 
@@ -54,6 +54,6 @@ export interface ActionDashboardCard
     [key: string]: unknown;
     "button.label"?: string;
     click_behavior?: ClickBehavior;
-    actionDisplayType?: FormType;
+    actionDisplayType?: ActionDisplayType;
   };
 }

frontend/src/metabase-types/api/mocks/data-app.ts

@@ -30,7 +30,6 @@ export const createMockDashboardActionButton = ({
   ...opts
 }: Partial<ActionDashboardCard> = {}): ActionDashboardCard => ({
   id: 1,
-  action_id: null,
   parameter_mappings: null,
   visualization_settings: merge(
     {

frontend/src/metabase-types/api/mocks/writeback.ts

@@ -2,6 +2,7 @@ import {
   Card,
   QueryAction,
   WritebackAction,
+  WritebackQueryAction,
   QueryActionCard,
 } from "metabase-types/api";
 import { createMockCard } from "./card";
@@ -25,7 +26,7 @@ export const createMockQueryAction = ({
   ...opts
 }: Partial<WritebackAction & QueryAction> = {}): WritebackAction => {
   return {
-    id: 1,
+    action_id: 1,
     type: "query",
     card_id: card.id,
     card,
@@ -37,3 +38,30 @@ export const createMockQueryAction = ({
     ...opts,
   };
 };
+
+export const createMockImplictQueryAction = (
+  options: Partial<WritebackQueryAction>,
+): WritebackQueryAction => ({
+  card_id: 1,
+  name: "",
+  description: "",
+  "updated-at": new Date().toISOString(),
+  "created-at": new Date().toISOString(),
+  slug: "",
+  parameters: [
+    {
+      id: "id",
+      target: ["variable", ["template-tag", "id"]],
+      type: "type/Integer",
+    },
+    {
+      id: "name",
+      target: ["variable", ["template-tag", "name"]],
+      type: "type/Text",
+    },
+  ] as WritebackAction["parameters"],
+  type: "implicit",
+  visualization_settings: undefined,
+  card: createMockQueryActionCard(),
+  ...options,
+});

frontend/src/metabase-types/api/writeback-form-settings.ts

 import type { ParameterId } from "./parameters";
 
-export type FormType = "inline" | "modal";
+export type ActionDisplayType = "form" | "button";
 export type FieldType = "string" | "number" | "date" | "category";
 
 export type DateInputType = "date" | "datetime" | "monthyear" | "quarteryear";
@@ -38,7 +38,7 @@ export interface FieldSettings {
 export type FieldSettingsMap = Record<ParameterId, FieldSettings>;
 export interface ActionFormSettings {
   name?: string;
-  type: FormType;
+  type: ActionDisplayType;
   description?: string;
   fields: FieldSettingsMap;
   submitButtonLabel?: string;

frontend/src/metabase-types/api/writeback.ts

@@ -8,7 +8,8 @@ export interface WritebackParameter extends Parameter {
 export type WritebackActionType = "http" | "query" | "implicit";
 
 export interface WritebackActionBase {
-  id: number;
+  id?: number;
+  action_id?: number;
   model_id?: number;
   slug?: string;
   name: string;

frontend/src/metabase/components/EmptyState.jsx

@@ -48,9 +48,10 @@ const EmptyState = ({
   link,
   illustrationElement,
   onActionClick,
+  className,
   ...rest
 }) => (
-  <div>
+  <div className={className}>
     <EmptyStateHeader>
       {illustrationElement && (
         <EmptyStateIllustration>{illustrationElement}</EmptyStateIllustration>

frontend/src/metabase/containers/ActionPicker/ActionPicker.styled.tsx

 import _ from "underscore";
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
+import { color, lighten } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
 
-import { SidebarItem } from "metabase/dashboard/components/ClickBehaviorSidebar/SidebarItem";
+import UnstyledEmptyState from "metabase/components/EmptyState";
 
-export const ActionSidebarItem = styled(SidebarItem.Selectable)<{
-  hasDescription?: boolean;
-}>`
-  align-items: ${props => (props.hasDescription ? "flex-start" : "center")};
-  margin-top: 2px;
+export const ModelActionList = styled.div`
+  margin-bottom: ${space(2)};
+  &:not(:last-child) {
+    border-bottom: 1px solid ${color("border")};
+  }
 `;
 
-export const ActionSidebarItemIcon = styled(SidebarItem.Icon)<{
-  isSelected?: boolean;
-}>`
-  .Icon {
-    color: ${props =>
-      props.isSelected ? color("text-white") : color("brand")};
-  }
+export const ModelTitle = styled.h4`
+  color: ${color("text-dark")};
+  margin-bottom: ${space(2)};
+  display: flex;
+  align-items: center;
 `;
 
-export const ActionDescription = styled.span<{ isSelected?: boolean }>`
-  width: 95%;
-  margin-top: 2px;
+export const ActionItem = styled.li`
+  padding-left: ${space(3)};
+  margin-bottom: ${space(2)};
+  color: ${color("brand")};
+  cursor: pointer;
+  font-weight: bold;
+  &:hover: {
+    color: ${lighten("brand", 0.1)};
+  }
+`;
 
-  color: ${props =>
-    props.isSelected ? color("text-white") : color("text-medium")};
+export const EmptyState = styled(UnstyledEmptyState)`
+  margin-bottom: ${space(2)};
 `;
 
-export const ClickMappingsContainer = styled.div`
-  margin-top: 1rem;
+export const EmptyModelStateContainer = styled.div`
+  padding-bottom: ${space(2)};
+  color: ${color("text-medium")};
+  text-align: center;
 `;

frontend/src/metabase/containers/ActionPicker/ActionPicker.tsx

-import React, { useState } from "react";
+import React from "react";
 import { t } from "ttag";
+import _ from "underscore";
 
-import Button from "metabase/core/components/Button";
-import EmptyState from "metabase/components/EmptyState";
+import Icon from "metabase/components/Icon";
 
 import Actions from "metabase/entities/actions";
-import type { WritebackAction } from "metabase-types/api";
+import Questions from "metabase/entities/questions";
+
+import type { Card, WritebackAction } from "metabase-types/api";
 import type { State } from "metabase-types/store";
 
-import ModelPicker from "../ModelPicker";
-import ActionOptionItem from "./ActionOptionItem";
+import Link from "metabase/core/components/Link";
+import Button from "metabase/core/components/Button";
+import {
+  ModelTitle,
+  ActionItem,
+  ModelActionList,
+  EmptyState,
+  EmptyModelStateContainer,
+} from "./ActionPicker.styled";
 
 export default function ActionPicker({
-  value,
-  onChange,
+  modelIds,
+  onClick,
 }: {
-  value: WritebackAction | undefined;
-  onChange: (value: WritebackAction) => void;
+  modelIds: number[];
+  onClick: (action: WritebackAction) => void;
 }) {
-  const [modelId, setModelId] = useState<number | undefined>(value?.model_id);
-
   return (
     <div className="scroll-y">
-      {!modelId ? (
-        <ModelPicker value={modelId} onChange={setModelId} />
-      ) : (
-        <>
-          <Button
-            icon="arrow_left"
-            borderless
-            onClick={() => setModelId(undefined)}
-          >
-            {t`Select Model`}
-          </Button>
-
-          <ConnectedModelActionPicker
-            modelId={modelId}
-            value={value}
-            onChange={onChange}
-          />
-        </>
+      {modelIds.map(modelId => (
+        <ConnectedModelActionPicker
+          key={modelId}
+          modelId={modelId}
+          onClick={onClick}
+        />
+      ))}
+      {!modelIds.length && (
+        <EmptyState
+          message={t`No models found`}
+          action={t`Create new model`}
+          link={"/model/new"}
+        />
       )}
     </div>
   );
 }
 
 function ModelActionPicker({
-  value,
-  onChange,
+  onClick,
+  model,
   actions,
 }: {
-  value: WritebackAction | undefined;
-  onChange: (newValue: WritebackAction) => void;
+  onClick: (newValue: WritebackAction) => void;
+  model: Card;
   actions: WritebackAction[];
 }) {
-  if (!actions?.length) {
-    return (
-      <EmptyState
-        message={t`There are no actions for this model`}
-        action={t`Create new action`}
-        link={"/action/create"}
-      />
-    );
-  }
-
   return (
-    <ul>
-      {actions?.map(action => (
-        <ActionOptionItem
-          name={action.name}
-          description={action.description}
-          isSelected={action.id === value?.id}
-          key={action.slug}
-          onClick={() => onChange(action)}
-        />
-      ))}
-    </ul>
+    <ModelActionList>
+      <ModelTitle>
+        <Icon name="model" size={16} className="mr2" />
+        {model.name}
+      </ModelTitle>
+      {actions?.length ? (
+        <ul>
+          {actions?.map(action => (
+            <ActionItem onClick={() => onClick(action)} key={action.id}>
+              {action.name}
+            </ActionItem>
+          ))}
+        </ul>
+      ) : (
+        <EmptyModelStateContainer>
+          <div>{t`There are no actions for this model`}</div>
+          <Button
+            as={Link}
+            to={`/action/create?model-id=${model.id}`}
+            borderless
+          >
+            {t`Create new action`}
+          </Button>
+        </EmptyModelStateContainer>
+      )}
+    </ModelActionList>
   );
 }
 
-const ConnectedModelActionPicker = Actions.loadList({
-  query: (state: State, props: { modelId?: number | null }) => ({
-    "model-id": props?.modelId,
+const ConnectedModelActionPicker = _.compose(
+  Questions.load({
+    id: (state: State, props: { modelId?: number | null }) => props?.modelId,
+    entityAlias: "model",
+  }),
+  Actions.loadList({
+    query: (state: State, props: { modelId?: number | null }) => ({
+      "model-id": props?.modelId,
+    }),
   }),
-})(ModelActionPicker);
+)(ModelActionPicker);

frontend/src/metabase/dashboard/actions/cards.js

 import _ from "underscore";
+import { t } from "ttag";
 
 import { createAction } from "metabase/lib/redux";
 
@@ -85,22 +86,74 @@ export const addTextDashCardToDashboard = function ({ dashId }) {
   });
 };
 
-export const addActionDashCardToDashboard = ({ dashId }) => {
-  const virtualActionsCard = {
-    ...createCard(),
-    display: "action",
-    archived: false,
-  };
-  const dashcardOverrides = {
-    card: virtualActionsCard,
-    size_x: 2,
-    size_y: 1,
-    visualization_settings: {
-      virtual_card: virtualActionsCard,
-    },
+const esitmateCardSize = (displayType, action) => {
+  const BASE_HEIGHT = 3;
+  const HEIGHT_PER_FIELD = 1.5;
+
+  if (displayType === "button") {
+    return { size_x: 2, size_y: 1 };
+  }
+
+  return {
+    size_x: 6,
+    size_y: Math.round(
+      BASE_HEIGHT + action.parameters.length * HEIGHT_PER_FIELD,
+    ),
   };
-  return addDashCardToDashboard({
-    dashId: dashId,
-    dashcardOverrides: dashcardOverrides,
-  });
 };
+
+export const addActionToDashboard =
+  async ({ dashId, action, displayType }) =>
+  dispatch => {
+    const virtualActionsCard = {
+      ...createCard(),
+      display: "action",
+      archived: false,
+    };
+
+    const dashcardOverrides = {
+      action,
+      card_id: action.model_id,
+      card: virtualActionsCard,
+      ...esitmateCardSize(displayType, action),
+      visualization_settings: {
+        actionDisplayType: displayType ?? "button",
+        virtual_card: virtualActionsCard,
+        "button.label": action.name ?? action.id,
+        action_slug: action.slug,
+      },
+    };
+    dispatch(
+      addDashCardToDashboard({
+        dashId: dashId,
+        dashcardOverrides: dashcardOverrides,
+      }),
+    );
+  };
+
+export const addLinkToDashboard =
+  async ({ dashId, clickBehavior }) =>
+  dispatch => {
+    const virtualActionsCard = {
+      ...createCard(),
+      display: "action",
+      archived: false,
+    };
+    const dashcardOverrides = {
+      card: virtualActionsCard,
+      size_x: 2,
+      size_y: 1,
+      visualization_settings: {
+        virtual_card: virtualActionsCard,
+        "button.label": t`Link`,
+        click_behavior: clickBehavior,
+        actionDisplayType: "button",
+      },
+    };
+    dispatch(
+      addDashCardToDashboard({
+        dashId: dashId,
+        dashcardOverrides: dashcardOverrides,
+      }),
+    );
+  };

frontend/src/metabase/dashboard/actions/save.js

@@ -77,7 +77,6 @@ export const saveDashboardAndCards = createThunkAction(
               // mark isAdded because addcard doesn't record the position
               return {
                 ...result,
-                action_id: dc.action_id,
                 col: dc.col,
                 row: dc.row,
                 size_x: dc.size_x,

frontend/src/metabase/dashboard/actions/ui.js

 import { createAction } from "metabase/lib/redux";
 import { SIDEBAR_NAME } from "metabase/dashboard/constants";
+import { getSidebar } from "../selectors";
 
 export const SET_SIDEBAR = "metabase/dashboard/SET_SIDEBAR";
 export const setSidebar = createAction(SET_SIDEBAR);
@@ -20,6 +21,15 @@ export const showClickBehaviorSidebar = dashcardId => dispatch => {
   }
 };
 
+export const toggleSidebar = name => (dispatch, getState) => {
+  const currentSidebarName = getSidebar(getState()).name;
+  if (currentSidebarName === name) {
+    dispatch(closeSidebar());
+  } else {
+    dispatch(setSidebar({ name }));
+  }
+};
+
 export const openAddQuestionSidebar = () => dispatch => {
   dispatch(
     setSidebar({

frontend/src/metabase/dashboard/components/AddActionSidebar/AddActionSidebar.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+
+export const Heading = styled.h4`
+  color: ${color("text-dark")};
+  font-size: 1.125rem;
+`;
+
+export const SidebarContent = styled.div`
+  padding: 1rem 2rem;
+`;
+
+export const BorderedSidebarContent = styled(SidebarContent)`
+  border-bottom: 1px solid ${color("border")};
+`;
+
+export const ClickBehaviorPickerText = styled.div`
+  color: ${color("text-medium")};
+  margin-bottom: ${space(2)};
+  margin-left: ${space(2)};
+`;
+
+export const BackButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: bold;
+
+  color: ${color("text-medium")};
+
+  &:hover {
+    color: ${color("brand")};
+  }
+`;
+
+export const BackButtonIconContainer = styled.div`
+  padding: 4px 6px;
+  margin-right: 8px;
+
+  border: 1px solid ${color("border")};
+  border-radius: 4px;
+`;

frontend/src/metabase/dashboard/components/AddActionSidebar/AddActionSidebar.tsx

+import React, { useState } from "react";
+import _ from "underscore";
+import { t } from "ttag";
+import { connect } from "react-redux";
+
+import type {
+  ActionDisplayType,
+  Dashboard,
+  WritebackAction,
+  Card,
+  CustomDestinationClickBehavior,
+} from "metabase-types/api";
+import type { State } from "metabase-types/store";
+
+import Search from "metabase/entities/search";
+
+import Sidebar from "metabase/dashboard/components/Sidebar";
+import ActionPicker from "metabase/containers/ActionPicker";
+import {
+  addActionToDashboard,
+  addLinkToDashboard,
+  closeSidebar,
+} from "metabase/dashboard/actions";
+
+import { ButtonOptions } from "./ButtonOptions";
+import {
+  Heading,
+  SidebarContent,
+  BorderedSidebarContent,
+} from "./AddActionSidebar.styled";
+
+const mapDispatchToProps = {
+  addAction: addActionToDashboard,
+  addLink: addLinkToDashboard,
+  closeSidebar,
+};
+
+interface ActionSidebarProps {
+  dashboard: Dashboard;
+  addAction: ({
+    dashId,
+    action,
+    displayType,
+  }: {
+    dashId: number;
+    action: WritebackAction;
+    displayType: ActionDisplayType;
+  }) => void;
+  addLink: ({
+    dashId,
+    clickBehavior,
+  }: {
+    dashId: number;
+    clickBehavior: CustomDestinationClickBehavior;
+  }) => void;
+  closeSidebar: () => void;
+  models: Card[];
+  displayType: ActionDisplayType;
+}
+
+function AddActionSidebarFn({
+  dashboard,
+  addAction,
+  addLink,
+  closeSidebar,
+  models,
+  displayType,
+}: ActionSidebarProps) {
+  const handleActionSelected = async (action: WritebackAction) => {
+    await addAction({ dashId: dashboard.id, action, displayType });
+  };
+  const modelIds = models?.map(model => model.id) ?? [];
+  const showButtonOptions = displayType === "button";
+  const showActionPicker = displayType === "form";
+
+  return (
+    <Sidebar>
+      <BorderedSidebarContent>
+        <Heading>
+          {t`Add a ${
+            displayType === "button" ? t`button` : t`form`
+          } to the page`}
+        </Heading>
+      </BorderedSidebarContent>
+
+      {showActionPicker && (
+        <SidebarContent>
+          <ActionPicker modelIds={modelIds} onClick={handleActionSelected} />
+        </SidebarContent>
+      )}
+
+      {showButtonOptions && (
+        <ButtonOptions
+          addLink={addLink}
+          closeSidebar={closeSidebar}
+          dashboard={dashboard}
+          ActionPicker={
+            <SidebarContent>
+              <ActionPicker
+                modelIds={modelIds}
+                onClick={handleActionSelected}
+              />
+            </SidebarContent>
+          }
+        />
+      )}
+    </Sidebar>
+  );
+}
+
+export const AddActionSidebar = _.compose(
+  Search.loadList({
+    query: (_state: State, props: any) => ({
+      models: ["dataset"],
+      collection: props.dashboard.collection_id,
+    }),
+    loadingAndErrorWrapper: false,
+    listName: "models",
+  }),
+  connect(null, mapDispatchToProps),
+)(AddActionSidebarFn);

frontend/src/metabase/dashboard/components/AddActionSidebar/ButtonOptions.tsx

+import React, { useState } from "react";
+import { t } from "ttag";
+
+import type {
+  Dashboard,
+  CustomDestinationClickBehavior,
+  DashboardOrderedCard,
+} from "metabase-types/api";
+import { clickBehaviorIsValid } from "metabase/lib/click-behavior";
+
+import { BehaviorOption } from "metabase/dashboard/components/ClickBehaviorSidebar/TypeSelector/TypeSelector";
+import LinkOptions from "metabase/dashboard/components/ClickBehaviorSidebar/LinkOptions";
+import Icon from "metabase/components/Icon";
+
+import {
+  ClickBehaviorPickerText,
+  SidebarContent,
+  BackButtonIconContainer,
+  BackButtonContainer,
+  BorderedSidebarContent,
+} from "./AddActionSidebar.styled";
+
+type ButtonType = "action" | "link" | null;
+
+// this type depends on no properties being null, but many of the components that use it expect nulls while
+// the object is buing constructed :(
+const emptyClickBehavior: any = {
+  type: "link",
+  linkType: null,
+  targetId: null,
+};
+
+export const ButtonOptions = ({
+  addLink,
+  closeSidebar,
+  dashboard,
+  ActionPicker,
+}: {
+  addLink: ({
+    dashId,
+    clickBehavior,
+  }: {
+    dashId: number;
+    clickBehavior: CustomDestinationClickBehavior;
+  }) => void;
+  closeSidebar: () => void;
+  dashboard: Dashboard;
+  ActionPicker: React.ReactNode;
+}) => {
+  const [buttonType, setButtonType] = useState<ButtonType>(null);
+  const [linkClickBehavior, setLinkClickBehavior] =
+    useState<CustomDestinationClickBehavior>(emptyClickBehavior);
+
+  const showLinkPicker = buttonType === "link";
+  const showActionPicker = buttonType === "action";
+
+  const handleClickBehaviorChange = (
+    newClickBehavior: CustomDestinationClickBehavior,
+  ) => {
+    if (newClickBehavior.type !== "link") {
+      return;
+    }
+    if (clickBehaviorIsValid(newClickBehavior)) {
+      addLink({ dashId: dashboard.id, clickBehavior: newClickBehavior });
+      closeSidebar();
+      return;
+    }
+    setLinkClickBehavior(newClickBehavior);
+  };
+
+  return (
+    <>
+      <ButtonTypePicker value={buttonType} onChange={setButtonType} />
+
+      {showLinkPicker && (
+        <LinkOptions
+          clickBehavior={linkClickBehavior}
+          dashcard={{ card: { display: "action" } } as DashboardOrderedCard} // necessary for LinkOptions to work
+          parameters={[]}
+          updateSettings={handleClickBehaviorChange as any}
+        />
+      )}
+      {showActionPicker && ActionPicker}
+    </>
+  );
+};
+
+const ButtonTypePicker = ({
+  value,
+  onChange,
+}: {
+  value: ButtonType;
+  onChange: (type: ButtonType) => void;
+}) => {
+  if (value) {
+    return (
+      <BorderedSidebarContent>
+        <BackButtonContainer onClick={() => onChange(null)}>
+          <BackButtonIconContainer>
+            <Icon name="chevronleft" size={16} />
+          </BackButtonIconContainer>
+          <div>{t`Change button type`}</div>
+        </BackButtonContainer>
+      </BorderedSidebarContent>
+    );
+  }
+
+  return (
+    <SidebarContent>
+      <ClickBehaviorPickerText>
+        {t`What type of button do you want to add?`}
+      </ClickBehaviorPickerText>
+      <BehaviorOption
+        option={t`Perform action`}
+        selected={false}
+        icon="play"
+        hasNextStep
+        onClick={() => onChange("action")}
+      />
+      <BehaviorOption
+        option={t`Go to a custom destination`}
+        selected={false}
+        icon="link"
+        hasNextStep
+        onClick={() => onChange("link")}
+      />
+    </SidebarContent>
+  );
+};

frontend/src/metabase/dashboard/components/AddActionSidebar/index.ts

+export * from "./AddActionSidebar";

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/ActionOptions/ActionOptions.styled.tsx

 import _ from "underscore";
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
-import { SidebarItem } from "../SidebarItem";
-
-export const ActionSidebarItem = styled(SidebarItem.Selectable)<{
-  hasDescription?: boolean;
-}>`
-  align-items: ${props => (props.hasDescription ? "flex-start" : "center")};
-  margin-top: 2px;
-`;
-
-export const ActionSidebarItemIcon = styled(SidebarItem.Icon)<{
-  isSelected?: boolean;
-}>`
-  .Icon {
-    color: ${props =>
-      props.isSelected ? color("text-white") : color("brand")};
-  }
-`;
-
-export const ActionDescription = styled.span<{ isSelected?: boolean }>`
-  width: 95%;
-  margin-top: 2px;
-
-  color: ${props =>
-    props.isSelected ? color("text-white") : color("text-medium")};
-`;
-
 export const ClickMappingsContainer = styled.div`
   margin-top: 1rem;
 `;

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/ActionOptions/ActionOptions.tsx

 import React, { useCallback } from "react";
-import { t } from "ttag";
 import { connect } from "react-redux";
 
 import { updateButtonActionMapping } from "metabase/dashboard/actions";
-import { updateSettings } from "metabase/visualizations/lib/settings";
 
 import ActionPicker from "metabase/containers/ActionPicker";
 
@@ -15,13 +13,10 @@ import type {
 import type { State } from "metabase-types/store";
 import type { UiParameter } from "metabase/parameters/types";
 
-import { Heading, SidebarContent } from "../ClickBehaviorSidebar.styled";
+import { SidebarContent } from "../ClickBehaviorSidebar.styled";
 
 import ActionClickMappings from "./ActionClickMappings";
-import {
-  ClickMappingsContainer,
-  ActionPickerWrapper,
-} from "./ActionOptions.styled";
+import { ClickMappingsContainer } from "./ActionOptions.styled";
 
 import { ensureParamsHaveNames } from "./utils";
 
@@ -55,26 +50,6 @@ function ActionOptions({
 }: ActionOptionsProps) {
   const selectedAction = dashcard.action;
 
-  const handleActionSelected = useCallback(
-    (action: WritebackAction) => {
-      onUpdateButtonActionMapping(dashcard.id, {
-        card_id: action.model_id,
-        action,
-        visualization_settings: updateSettings(
-          {
-            "button.label": action.name,
-            action_slug: action.slug, // :-( so hacky
-          },
-          dashcard.visualization_settings,
-        ),
-        // Clean mappings from previous action
-        // as they're most likely going to be irrelevant
-        parameter_mappings: null,
-      });
-    },
-    [dashcard, onUpdateButtonActionMapping],
-  );
-
   const handleParameterMappingChange = useCallback(
     (parameter_mappings: ActionParametersMapping[] | null) => {
       onUpdateButtonActionMapping(dashcard.id, {
@@ -84,36 +59,23 @@ function ActionOptions({
     [dashcard, onUpdateButtonActionMapping],
   );
 
-  return (
-    <ActionPickerWrapper>
-      <ActionPicker value={selectedAction} onChange={handleActionSelected} />
-
-      {!!selectedAction && (
-        <ClickMappingsContainer>
-          <ActionClickMappings
-            action={{
-              ...selectedAction,
-              parameters: ensureParamsHaveNames(selectedAction.parameters),
-            }}
-            dashcard={dashcard}
-            parameters={parameters}
-            onChange={handleParameterMappingChange}
-          />
-        </ClickMappingsContainer>
-      )}
-    </ActionPickerWrapper>
-  );
-}
+  if (!selectedAction) {
+    return null;
+  }
 
-function ActionOptionsContainer(props: ActionOptionsProps) {
   return (
     <SidebarContent>
-      <Heading className="text-medium">{t`Pick an action`}</Heading>
-      <ActionOptions
-        dashcard={props.dashcard}
-        parameters={props.parameters}
-        onUpdateButtonActionMapping={props.onUpdateButtonActionMapping}
-      />
+      <ClickMappingsContainer>
+        <ActionClickMappings
+          action={{
+            ...selectedAction,
+            parameters: ensureParamsHaveNames(selectedAction?.parameters ?? []),
+          }}
+          dashcard={dashcard}
+          parameters={parameters}
+          onChange={handleParameterMappingChange}
+        />
+      </ClickMappingsContainer>
     </SidebarContent>
   );
 }
@@ -126,4 +88,4 @@ export default connect<
 >(
   null,
   mapDispatchToProps,
-)(ActionOptionsContainer);
+)(ActionOptions);

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/ActionOptions/utils.ts

 import _ from "underscore";
+import { humanize } from "metabase/lib/formatting";
 
 import type {
   ActionDashboardCard,
@@ -78,6 +79,6 @@ export function ensureParamsHaveNames(
 ): WritebackParameter[] {
   return parameters.map(parameter => ({
     ...parameter,
-    name: parameter.name ?? parameter.id,
+    name: parameter.name ?? humanize(parameter.id),
   }));
 }

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/ActionOptions/utils.unit.spec.ts

@@ -63,7 +63,6 @@ describe("turnDashCardParameterMappingsIntoClickBehaviorMappings", () => {
     const action = createMockQueryAction({ parameters: actionParameters });
     const dashCard = createMockDashboardActionButton({
       action,
-      action_id: action.id,
       parameter_mappings: dashCardParameterMappings,
     });
     return { action, dashCard };