@trops/dash-core 0.1.245 → 0.1.247

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, Sidebar, Paragraph, Modal, Panel, Stepper, Tag2, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorInline, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, DropdownPanel, MenuItem2, ButtonIcon2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, Button2, Button3, MenuItem, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, Icon2, AlgoliaSearchBox, CommandPalette, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, Modal, Sidebar, Paragraph, Panel, Stepper, Tag2, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorInline, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, DropdownPanel, MenuItem2, ButtonIcon2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, Button2, Button3, MenuItem, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, Icon2, AlgoliaSearchBox, CommandPalette, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { ThemeContext } from '@trops/dash-react';
 import _typeof from '@babel/runtime/helpers/typeof';
@@ -3556,6 +3556,102 @@ var StarRating = function StarRating(_ref) {
   });
 };
 
+var InstallProgressModal = function InstallProgressModal(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    _ref$widgets = _ref.widgets,
+    widgets = _ref$widgets === void 0 ? [] : _ref$widgets,
+    _ref$isComplete = _ref.isComplete,
+    isComplete = _ref$isComplete === void 0 ? false : _ref$isComplete,
+    onDone = _ref.onDone;
+  var _useContext = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+
+  // Prevent dismissal while installation is in progress
+  var guardedSetIsOpen = function guardedSetIsOpen(val) {
+    if (isComplete) setIsOpen(val);
+  };
+  var doneCount = widgets.filter(function (w) {
+    return w.status === "installed" || w.status === "already-installed" || w.status === "failed";
+  }).length;
+  function statusIcon(status) {
+    switch (status) {
+      case "downloading":
+        return /*#__PURE__*/jsx("div", {
+          className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-400 flex-shrink-0"
+        });
+      case "installed":
+      case "already-installed":
+        return /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-check",
+          className: "h-4 w-4 text-green-400 flex-shrink-0"
+        });
+      case "failed":
+        return /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-4 w-4 text-red-400 flex-shrink-0"
+        });
+      default:
+        // pending
+        return /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "clock",
+          className: "h-4 w-4 opacity-30 flex-shrink-0"
+        });
+    }
+  }
+  return /*#__PURE__*/jsx(Modal, {
+    isOpen: isOpen,
+    setIsOpen: guardedSetIsOpen,
+    width: "w-[440px]",
+    height: "auto",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col rounded-lg overflow-hidden ".concat(panelStyles.backgroundColor || "bg-gray-900", " ").concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsx("div", {
+        className: "px-5 pt-5 pb-3",
+        children: /*#__PURE__*/jsx("h3", {
+          className: "text-sm font-semibold",
+          children: isComplete ? "Installation Complete" : "Installing widget ".concat(doneCount + 1, " of ").concat(widgets.length, "...")
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "px-5 pb-3 space-y-1.5 max-h-64 overflow-y-auto",
+        children: widgets.map(function (w, idx) {
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-2.5 p-2 rounded ".concat(currentTheme["bg-primary-medium"] || "bg-white/5"),
+              children: [statusIcon(w.status), /*#__PURE__*/jsx("span", {
+                className: "text-sm flex-1 truncate",
+                children: w.displayName
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-[10px] opacity-40",
+                children: w.status === "already-installed" ? "Already installed" : w.status === "downloading" ? "Downloading..." : w.status === "installed" ? "Installed" : w.status === "failed" ? "Failed" : "Pending"
+              })]
+            }), w.status === "failed" && w.error && /*#__PURE__*/jsx("p", {
+              className: "text-[10px] text-red-400/80 mt-0.5 ml-7 truncate",
+              children: w.error
+            })]
+          }, idx);
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex items-center justify-end px-5 py-3 border-t ".concat(currentTheme["border-primary-medium"] || "border-white/10"),
+        children: /*#__PURE__*/jsx(Button, {
+          title: "Done",
+          bgColor: isComplete ? "bg-blue-600" : "bg-gray-700",
+          hoverBackgroundColor: isComplete ? "hover:bg-blue-700" : "",
+          textSize: "text-sm",
+          padding: "py-1.5 px-4",
+          onClick: function onClick() {
+            if (isComplete && onDone) onDone();
+          },
+          disabled: !isComplete
+        })
+      })]
+    })
+  });
+};
+
 function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$g(r, a) : void 0; } }
 function _arrayLikeToArray$g(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -3598,15 +3694,30 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     authError = _useState12[0],
     setAuthError = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showProgressModal = _useState14[0],
+    setShowProgressModal = _useState14[1];
+  var _useState15 = useState([]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    progressWidgets = _useState16[0],
+    setProgressWidgets = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    progressComplete = _useState18[0],
+    setProgressComplete = _useState18[1];
+  var progressResultRef = useRef(null);
   var pollIntervalRef = useRef(null);
+  var cleanupProgressRef = useRef(null);
   var pkg = dashboardPackage;
   if (!pkg) return null;
 
-  // Clean up polling on unmount
+  // Clean up polling and progress listener on unmount
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(function () {
     return function () {
       if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+      if (cleanupProgressRef.current) cleanupProgressRef.current();
     };
   }, []);
 
@@ -3635,10 +3746,10 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
   }, [pkg.name]);
   function handleInstall() {
     return _handleInstall.apply(this, arguments);
-  }
+  } // eslint-disable-next-line react-hooks/rules-of-hooks
   function _handleInstall() {
     _handleInstall = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _result$workspace, result, _t;
+      var deps, _window$mainApi2, _window$mainApi2$onIn, result, _result$workspace2, _t;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -3652,6 +3763,35 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
             setInstallResult(null);
             setAuthFlow(null);
             setAuthError(null);
+
+            // Initialize progress modal from widget deps
+            deps = widgetDeps.length > 0 ? widgetDeps : [];
+            if (deps.length > 0) {
+              setProgressWidgets(deps.map(function (w) {
+                return {
+                  packageName: w["package"] || w.name,
+                  displayName: w.displayName || w.name || w["package"],
+                  status: "pending"
+                };
+              }));
+              setProgressComplete(false);
+              setShowProgressModal(true);
+
+              // Register progress listener
+              if (cleanupProgressRef.current) cleanupProgressRef.current();
+              cleanupProgressRef.current = (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.dashboardConfig) === null || _window$mainApi2 === void 0 || (_window$mainApi2$onIn = _window$mainApi2.onInstallProgress) === null || _window$mainApi2$onIn === void 0 ? void 0 : _window$mainApi2$onIn.call(_window$mainApi2, function (data) {
+                setProgressWidgets(function (prev) {
+                  var next = _toConsumableArray(prev);
+                  if (data.index >= 0 && data.index < next.length) {
+                    next[data.index] = _objectSpread$D(_objectSpread$D({}, next[data.index]), {}, {
+                      status: data.status,
+                      error: data.error || null
+                    });
+                  }
+                  return next;
+                });
+              });
+            }
             _context.prev = 2;
             _context.next = 3;
             return window.mainApi.dashboardConfig.installDashboardFromRegistry(appId, pkg.name);
@@ -3661,33 +3801,52 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
               _context.next = 4;
               break;
             }
-            // Auth needed — show inline auth prompt (DASH-135)
+            // Auth needed — close progress modal, show inline auth prompt
+            setShowProgressModal(false);
             setIsInstalling(false);
             setInstallResult({
               status: "auth",
               message: result.error || "Sign in to install this dashboard."
             });
+            if (cleanupProgressRef.current) {
+              cleanupProgressRef.current();
+              cleanupProgressRef.current = null;
+            }
             return _context.abrupt("return");
           case 4:
-            setInstallResult({
-              status: result !== null && result !== void 0 && result.success ? "success" : "error",
-              message: result !== null && result !== void 0 && result.success ? "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
-            });
-            if (result !== null && result !== void 0 && result.success && onInstallComplete) {
-              onInstallComplete(result);
+            // Store result for use when modal closes
+            progressResultRef.current = result;
+            setProgressComplete(true);
+
+            // If no progress modal was shown, apply result directly
+            if (deps.length === 0) {
+              setInstallResult({
+                status: result !== null && result !== void 0 && result.success ? "success" : "error",
+                message: result !== null && result !== void 0 && result.success ? "Dashboard \"".concat(((_result$workspace2 = result.workspace) === null || _result$workspace2 === void 0 ? void 0 : _result$workspace2.name) || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
+              });
+              if (result !== null && result !== void 0 && result.success && onInstallComplete) {
+                onInstallComplete(result);
+              }
             }
             _context.next = 6;
             break;
           case 5:
             _context.prev = 5;
             _t = _context["catch"](2);
-            setInstallResult({
-              status: "error",
-              message: _t.message || "Failed to install dashboard."
-            });
+            setProgressComplete(true);
+            if (deps.length === 0) {
+              setInstallResult({
+                status: "error",
+                message: _t.message || "Failed to install dashboard."
+              });
+            }
           case 6:
             _context.prev = 6;
             setIsInstalling(false);
+            if (cleanupProgressRef.current) {
+              cleanupProgressRef.current();
+              cleanupProgressRef.current = null;
+            }
             return _context.finish(6);
           case 7:
           case "end":
@@ -3697,6 +3856,20 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
     }));
     return _handleInstall.apply(this, arguments);
   }
+  var handleProgressDone = useCallback(function () {
+    setShowProgressModal(false);
+    var result = progressResultRef.current;
+    if (result) {
+      var _result$workspace;
+      setInstallResult({
+        status: result.success ? "success" : "error",
+        message: result.success ? "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || pkg.name, "\" installed successfully.") : result.error || "Installation failed."
+      });
+      if (result.success && onInstallComplete) {
+        onInstallComplete(result);
+      }
+    }
+  }, [pkg.name, onInstallComplete]);
   function handleSignIn() {
     return _handleSignIn.apply(this, arguments);
   }
@@ -4078,6 +4251,12 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
         onClick: handleInstall,
         disabled: isInstalling
       })
+    }), /*#__PURE__*/jsx(InstallProgressModal, {
+      isOpen: showProgressModal,
+      setIsOpen: setShowProgressModal,
+      widgets: progressWidgets,
+      isComplete: progressComplete,
+      onDone: handleProgressDone
     })]
   });
 };
@@ -38290,7 +38469,10 @@ var DashboardsSection = function DashboardsSection(_ref) {
         setInstallMode(null);
         setViewMode("grouped");
       },
-      appId: appId
+      appId: appId,
+      onInstallComplete: function onInstallComplete() {
+        onReloadWorkspaces && onReloadWorkspaces();
+      }
     });
   } else if (selectedWorkspace) {
     detailContent = /*#__PURE__*/jsx(DashboardDetail, {