From 091dafcbc802eb247d13f2f1382356db41fe72f5 Mon Sep 17 00:00:00 2001
From: Brandon Martel <brandonmartel@gmail.com>
Date: Fri, 8 Mar 2024 12:53:05 -0600
Subject: [PATCH] feat: HUMSIG-37: Enhancing ML backend connection experience

---
 .../DataManager/Toolbar/ActionsButton.js        | 17 ++++++++++-------
 src/stores/Action.js                            |  3 ++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/DataManager/Toolbar/ActionsButton.js b/src/components/DataManager/Toolbar/ActionsButton.js
index 7ed54f0e..2b597a89 100644
--- a/src/components/DataManager/Toolbar/ActionsButton.js
+++ b/src/components/DataManager/Toolbar/ActionsButton.js
@@ -1,6 +1,12 @@
 import { inject, observer } from "mobx-react";
-import { useRef } from "react";
-import { FaAngleDown, FaChevronDown, FaChevronUp, FaTrash } from "react-icons/fa";
+import { useCallback, useRef, useState } from "react";
+import {
+  FaAngleDown,
+  FaChevronDown,
+  FaChevronRight,
+  FaChevronUp,
+  FaTrash
+} from "react-icons/fa";
 import { Block, Elem } from "../../../utils/bem";
 import { FF_LOPS_E_10, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
 import { Button } from "../../Common/Button/Button";
@@ -8,10 +14,7 @@ import { Dropdown } from "../../Common/Dropdown/DropdownComponent";
 import Form from "../../Common/Form/Form";
 import { Menu } from "../../Common/Menu/Menu";
 import { Modal } from "../../Common/Modal/ModalPopup";
-import { useState } from "react";
-import { FaChevronRight } from "react-icons/fa";
 import "./ActionsButton.styl";
-import { useCallback } from "react";
 
 const isFFLOPSE3 = isFF(FF_LOPS_E_3);
 const isNewUI = isFF(FF_LOPS_E_10);
@@ -48,11 +51,11 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
 
   const invokeAction = (action, destructive) => {
     if (action.dialog) {
-      const { type: dialogType, text, form } = action.dialog;
+      const { type: dialogType, text, form, title } = action.dialog;
       const dialog = Modal[dialogType] ?? Modal.confirm;
 
       dialog({
-        title: destructive ? "Destructive action." : "Confirm action.",
+        title: title ? title : destructive ? "Destructive action" : "Confirm action",
         body: buildDialogContent(text, form, formRef),
         buttonLook: destructive ? "destructive" : "primary",
         onOk() {
diff --git a/src/stores/Action.js b/src/stores/Action.js
index ad8f1c61..93692eaf 100644
--- a/src/stores/Action.js
+++ b/src/stores/Action.js
@@ -2,7 +2,7 @@ import { types } from "mobx-state-tree";
 import { FF_LOPS_E_3, isFF } from "../utils/feature-flags";
 import { CustomCalback, HtmlOrReact, StringOrNumberID } from "./types";
 
-const SelectOptions = types.model('SelectOptions', {
+const SelectOptions = types.model("SelectOptions", {
   label: types.string,
   value: types.string,
 });
@@ -41,6 +41,7 @@ const ActionFormRow = types.model('ActionFormRow', {
 });
 
 const ActionDialog = types.model("ActionDialog", {
+  title: types.maybeNull(types.string),
   text: types.string,
   type: types.enumeration(["confirm", "prompt"]),
   form: types.maybeNull(types.array(ActionFormRow)),