@devtable/dashboard 1.26.0 → 1.27.0

package/dist/contexts/dashboard-action-context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface IDashboardActionContext {
+    addPanel: () => void;
+    duplidatePanel: (id: string) => void;
+    removePanelByID: (id: string) => void;
+}
+export declare const DashboardActionContext: React.Context<IDashboardActionContext>;

package/dist/contexts/panel-context.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { IVizConfig } from "../types/dashboard";
 export interface IPanelContext {
+    id: string;
     data: any[];
     loading: boolean;
     title: string;

package/dist/dashboard.es.js

@@ -33,15 +33,15 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import React from "react";
+import React, { createContext, useContext, useReducer } from "react";
 import _ from "lodash";
 import RGL, { WidthProvider } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Divider, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Container, Textarea } from "@mantine/core";
+import { Box, Group, Button, Modal, Popover, Tooltip, Text, ActionIcon, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Divider, Accordion, JsonInput, AppShell, Tabs, Menu, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Copy, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
 import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte";
-import { useInputState, useElementSize, randomId } from "@mantine/hooks";
+import { randomId, useInputState, useElementSize } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import * as echarts from "echarts/core";
 import { SunburstChart, BarChart, LineChart, ScatterChart, PieChart } from "echarts/charts";
@@ -58,7 +58,7 @@ var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Edit"] = "edit";
   return DashboardMode2;
 })(DashboardMode || {});
-const initialContext$3 = {
+const initialContext$4 = {
   layoutFrozen: false,
   freezeLayout: () => {
   },
@@ -67,7 +67,7 @@ const initialContext$3 = {
   inLayoutMode: false,
   inUseMode: true
 };
-const LayoutStateContext = React.createContext(initialContext$3);
+const LayoutStateContext = React.createContext(initialContext$4);
 function explainSQLSnippet(snippet, context) {
   const names = Object.keys(context);
   const vals = Object.values(context);
@@ -162,10 +162,11 @@ async function getQuerySources() {
     return {};
   }
 }
-const initialContext$2 = {};
-const initialContextInfoContext = initialContext$2;
-const ContextInfoContext = React.createContext(initialContext$2);
-const initialContext$1 = {
+const initialContext$3 = {};
+const initialContextInfoContext = initialContext$3;
+const ContextInfoContext = React.createContext(initialContext$3);
+const initialContext$2 = {
+  id: "",
   data: [],
   loading: false,
   title: "",
@@ -186,16 +187,96 @@ const initialContext$1 = {
   refreshData: () => {
   }
 };
-const PanelContext = React.createContext(initialContext$1);
-const initialContext = {
-  sqlSnippets: [],
-  setSQLSnippets: () => {
-  },
-  queries: [],
-  setQueries: () => {
+const PanelContext = React.createContext(initialContext$2);
+const ModalsContext = createContext(null);
+ModalsContext.displayName = "@mantine/modals/ModalsContext";
+function useModals() {
+  const ctx = useContext(ModalsContext);
+  if (!ctx) {
+    throw new Error("[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component");
   }
+  return ctx;
+}
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
 };
-const DefinitionContext = React.createContext(initialContext);
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+function ConfirmModal({
+  id,
+  cancelProps,
+  confirmProps,
+  labels = { cancel: "", confirm: "" },
+  closeOnConfirm = true,
+  closeOnCancel = true,
+  groupProps,
+  onCancel,
+  onConfirm,
+  children
+}) {
+  const { cancel: cancelLabel, confirm: confirmLabel } = labels;
+  const ctx = useModals();
+  const handleCancel = (event) => {
+    typeof (cancelProps == null ? void 0 : cancelProps.onClick) === "function" && (cancelProps == null ? void 0 : cancelProps.onClick(event));
+    typeof onCancel === "function" && onCancel();
+    closeOnCancel && ctx.closeModal(id);
+  };
+  const handleConfirm = (event) => {
+    typeof (confirmProps == null ? void 0 : confirmProps.onClick) === "function" && (confirmProps == null ? void 0 : confirmProps.onClick(event));
+    typeof onConfirm === "function" && onConfirm();
+    closeOnConfirm && ctx.closeModal(id);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children && /* @__PURE__ */ React.createElement(Box, {
+    mb: "md"
+  }, children), /* @__PURE__ */ React.createElement(Group, __spreadValues$1({
+    position: "right"
+  }, groupProps), /* @__PURE__ */ React.createElement(Button, __spreadProps$1(__spreadValues$1({
+    variant: "default"
+  }, cancelProps), {
+    onClick: handleCancel
+  }), (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React.createElement(Button, __spreadProps$1(__spreadValues$1({}, confirmProps), {
+    onClick: handleConfirm
+  }), (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel)));
+}
+function modalsReducer(state, action) {
+  switch (action.type) {
+    case "OPEN": {
+      return {
+        current: action.payload,
+        modals: [...state.modals, action.payload]
+      };
+    }
+    case "CLOSE": {
+      return {
+        current: state.modals[state.modals.length - 2] || null,
+        modals: state.modals.filter((m2) => m2.id !== action.payload)
+      };
+    }
+    case "CLOSE_ALL": {
+      return {
+        current: state.current,
+        modals: []
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -230,6 +311,240 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
+var __defProp2 = Object.defineProperty;
+var __defProps2 = Object.defineProperties;
+var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+var __objRest2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function separateConfirmModalProps(props) {
+  if (!props) {
+    return {
+      confirmProps: {},
+      modalProps: {}
+    };
+  }
+  const _a = props, {
+    id,
+    children,
+    onCancel,
+    onConfirm,
+    closeOnConfirm,
+    closeOnCancel,
+    cancelProps,
+    confirmProps,
+    groupProps,
+    labels
+  } = _a, others = __objRest2(_a, ["id", "children", "onCancel", "onConfirm", "closeOnConfirm", "closeOnCancel", "cancelProps", "confirmProps", "groupProps", "labels"]);
+  return {
+    confirmProps: {
+      id,
+      children,
+      onCancel,
+      onConfirm,
+      closeOnConfirm,
+      closeOnCancel,
+      cancelProps,
+      confirmProps,
+      groupProps,
+      labels
+    },
+    modalProps: __spreadValues2({
+      id
+    }, others)
+  };
+}
+function ModalsProvider({
+  children,
+  modalProps,
+  labels,
+  modals
+}) {
+  const [state, dispatch] = useReducer(modalsReducer, {
+    modals: [],
+    current: null
+  });
+  const closeAll = (canceled) => {
+    state.modals.forEach((modal) => {
+      var _a, _b, _c, _d;
+      if (modal.type === "confirm" && canceled) {
+        (_b = (_a = modal.props) == null ? void 0 : _a.onCancel) == null ? void 0 : _b.call(_a);
+      }
+      (_d = (_c = modal.props) == null ? void 0 : _c.onClose) == null ? void 0 : _d.call(_c);
+    });
+    dispatch({
+      type: "CLOSE_ALL"
+    });
+  };
+  const openModal = (props) => {
+    const id = props.id || randomId();
+    dispatch({
+      type: "OPEN",
+      payload: {
+        id,
+        type: "content",
+        props
+      }
+    });
+    return id;
+  };
+  const openConfirmModal = (props) => {
+    const id = props.id || randomId();
+    dispatch({
+      type: "OPEN",
+      payload: {
+        id,
+        type: "confirm",
+        props
+      }
+    });
+    return id;
+  };
+  const openContextModal = (modal, props) => {
+    const id = props.id || randomId();
+    dispatch({
+      type: "OPEN",
+      payload: {
+        id,
+        type: "context",
+        props,
+        ctx: modal
+      }
+    });
+    return id;
+  };
+  const closeModal = (id, canceled) => {
+    var _a, _b, _c, _d;
+    if (state.modals.length <= 1) {
+      closeAll(canceled);
+      return;
+    }
+    const modal = state.modals.find((item) => item.id === id);
+    if ((modal == null ? void 0 : modal.type) === "confirm" && canceled) {
+      (_b = (_a = modal.props) == null ? void 0 : _a.onCancel) == null ? void 0 : _b.call(_a);
+    }
+    (_d = (_c = modal == null ? void 0 : modal.props) == null ? void 0 : _c.onClose) == null ? void 0 : _d.call(_c);
+    dispatch({
+      type: "CLOSE",
+      payload: modal.id
+    });
+  };
+  const ctx = {
+    modals: state.modals,
+    openModal,
+    openConfirmModal,
+    openContextModal,
+    closeModal,
+    closeAll
+  };
+  const getCurrentModal = () => {
+    var _a;
+    switch ((_a = state.current) == null ? void 0 : _a.type) {
+      case "context": {
+        const _b = state.current.props, {
+          innerProps
+        } = _b, rest = __objRest2(_b, ["innerProps"]);
+        const ContextModal = modals[state.current.ctx];
+        return {
+          modalProps: rest,
+          content: /* @__PURE__ */ jsx(ContextModal, {
+            innerProps,
+            context: ctx,
+            id: state.current.id
+          })
+        };
+      }
+      case "confirm": {
+        const {
+          modalProps: separatedModalProps,
+          confirmProps: separatedConfirmProps
+        } = separateConfirmModalProps(state.current.props);
+        return {
+          modalProps: separatedModalProps,
+          content: /* @__PURE__ */ jsx(ConfirmModal, __spreadValues({}, __spreadProps2(__spreadValues2({}, separatedConfirmProps), {
+            id: state.current.id,
+            labels: state.current.props.labels || labels
+          })))
+        };
+      }
+      case "content": {
+        const _c = state.current.props, {
+          children: currentModalChildren
+        } = _c, rest = __objRest2(_c, ["children"]);
+        return {
+          modalProps: rest,
+          content: /* @__PURE__ */ jsx(Fragment, {
+            children: currentModalChildren
+          })
+        };
+      }
+      default: {
+        return {
+          modalProps: {},
+          content: null
+        };
+      }
+    }
+  };
+  const {
+    modalProps: currentModalProps,
+    content
+  } = getCurrentModal();
+  return /* @__PURE__ */ jsxs(ModalsContext.Provider, {
+    value: ctx,
+    children: [/* @__PURE__ */ jsx(Modal, __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2(__spreadValues2({}, modalProps), currentModalProps), {
+      opened: state.modals.length > 0,
+      onClose: () => closeModal(state.current.id)
+    })), {
+      children: content
+    })), children]
+  });
+}
+const initialContext$1 = {
+  addPanel: _.noop,
+  duplidatePanel: _.noop,
+  removePanelByID: _.noop
+};
+const DashboardActionContext = React.createContext(initialContext$1);
+const initialContext = {
+  sqlSnippets: [],
+  setSQLSnippets: () => {
+  },
+  queries: [],
+  setQueries: () => {
+  }
+};
+const DefinitionContext = React.createContext(initialContext);
 function DescriptionPopover({
   position = "bottom",
   trigger = "hover"
@@ -5744,16 +6059,34 @@ function PanelSettingsModal({
 }
 var titleBar = "";
 function PanelTitleBar({}) {
+  const modals = useModals();
   const [opened, setOpened] = React.useState(false);
   const open = () => setOpened(true);
   const close = () => setOpened(false);
   const {
+    id,
     title,
     refreshData
   } = React.useContext(PanelContext);
   const {
     inEditMode
   } = React.useContext(LayoutStateContext);
+  const {
+    duplidatePanel,
+    removePanelByID
+  } = React.useContext(DashboardActionContext);
+  const duplicate = React.useCallback(() => {
+    duplidatePanel(id);
+  }, [duplidatePanel, id]);
+  const remove = () => modals.openConfirmModal({
+    title: "Delete this panel?",
+    labels: {
+      confirm: "Confirm",
+      cancel: "Cancel"
+    },
+    onCancel: () => console.log("Cancel"),
+    onConfirm: () => removePanelByID(id)
+  });
   return /* @__PURE__ */ jsxs(Box, {
     sx: {
       position: "relative"
@@ -5794,8 +6127,14 @@ function PanelTitleBar({}) {
           }),
           children: "Settings"
         }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Menu.Item, {
+          onClick: duplicate,
+          icon: /* @__PURE__ */ jsx(Copy, {
+            size: 14
+          }),
+          children: "Duplicate"
+        }), /* @__PURE__ */ jsx(Menu.Item, {
           color: "red",
-          disabled: true,
+          onClick: remove,
           icon: /* @__PURE__ */ jsx(Trash, {
             size: 14
           }),
@@ -5855,6 +6194,7 @@ function Panel({
   const refreshData = refresh;
   return /* @__PURE__ */ jsx(PanelContext.Provider, {
     value: {
+      id,
       data,
       loading,
       title,
@@ -5884,7 +6224,6 @@ function DashboardLayout({
   setPanels,
   className = "layout",
   rowHeight = 10,
-  onRemoveItem,
   isDraggable,
   isResizable
 }) {
@@ -5920,7 +6259,6 @@ function DashboardLayout({
         children: /* @__PURE__ */ jsx(Panel, __spreadProps(__spreadValues({
           id
         }, rest), {
-          destroy: () => onRemoveItem(id),
           update: (panel) => {
             setPanels((prevs) => {
               prevs.splice(index2, 1, panel);
@@ -6664,9 +7002,12 @@ function DashboardActions({
   mode,
   setMode,
   hasChanges,
-  addPanel,
-  saveChanges
+  saveChanges,
+  revertChanges
 }) {
+  const {
+    addPanel
+  } = React.useContext(DashboardActionContext);
   const {
     inLayoutMode,
     inEditMode,
@@ -6716,6 +7057,7 @@ function DashboardActions({
         color: "red",
         size: "sm",
         disabled: !hasChanges,
+        onClick: revertChanges,
         leftIcon: /* @__PURE__ */ jsx(Recycle, {
           size: 20
         }),
@@ -6771,6 +7113,11 @@ function Dashboard({
     });
     await update(d);
   };
+  const revertDashboardChanges = () => {
+    setPanels(dashboard.panels);
+    setSQLSnippets(dashboard.definition.sqlSnippets);
+    setQueries(dashboard.definition.queries);
+  };
   const addPanel = () => {
     const id = randomId();
     const newItem = {
@@ -6791,6 +7138,24 @@ function Dashboard({
     };
     setPanels((prevs) => [...prevs, newItem]);
   };
+  const duplidatePanel = (id) => {
+    try {
+      const panel = panels.find((p2) => p2.id === id);
+      if (!panel) {
+        throw new Error(`[duplicate panel] Can't find a panel by id[${id}]`);
+      }
+      const newPanel = __spreadProps(__spreadValues({}, panel), {
+        id: randomId(),
+        layout: __spreadProps(__spreadValues({}, panel.layout), {
+          x: 0,
+          y: Infinity
+        })
+      });
+      setPanels((prevs) => [...prevs, newPanel]);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   const removePanelByID = (id) => {
     const index2 = panels.findIndex((p2) => p2.id === id);
     setPanels((prevs) => {
@@ -6807,34 +7172,42 @@ function Dashboard({
     queries,
     setQueries
   }), [sqlSnippets, setSQLSnippets, queries, setQueries]);
-  return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
-    value: context,
-    children: /* @__PURE__ */ jsx("div", {
-      className,
-      children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-        value: definitions,
-        children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
-          value: {
-            layoutFrozen,
-            freezeLayout,
-            mode,
-            inEditMode,
-            inLayoutMode,
-            inUseMode
-          },
-          children: [/* @__PURE__ */ jsx(DashboardActions, {
-            mode,
-            setMode,
-            hasChanges,
-            addPanel,
-            saveChanges: saveDashboardChanges
-          }), /* @__PURE__ */ jsx(DashboardLayout, {
-            panels,
-            setPanels,
-            isDraggable: inLayoutMode,
-            isResizable: inLayoutMode,
-            onRemoveItem: removePanelByID
-          })]
+  return /* @__PURE__ */ jsx(ModalsProvider, {
+    children: /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
+      value: context,
+      children: /* @__PURE__ */ jsx(DashboardActionContext.Provider, {
+        value: {
+          addPanel,
+          duplidatePanel,
+          removePanelByID
+        },
+        children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+          value: definitions,
+          children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+            value: {
+              layoutFrozen,
+              freezeLayout,
+              mode,
+              inEditMode,
+              inLayoutMode,
+              inUseMode
+            },
+            children: /* @__PURE__ */ jsxs("div", {
+              className,
+              children: [/* @__PURE__ */ jsx(DashboardActions, {
+                mode,
+                setMode,
+                hasChanges,
+                saveChanges: saveDashboardChanges,
+                revertChanges: revertDashboardChanges
+              }), /* @__PURE__ */ jsx(DashboardLayout, {
+                panels,
+                setPanels,
+                isDraggable: inLayoutMode,
+                isResizable: inLayoutMode
+              })]
+            })
+          })
         })
       })
     })
@@ -6881,24 +7254,26 @@ function ReadOnlyDashboard({
     setQueries: () => {
     }
   }), [dashboard]);
-  return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
-    value: context,
-    children: /* @__PURE__ */ jsx("div", {
-      className,
-      children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-        value: definition,
-        children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
-          value: {
-            layoutFrozen: true,
-            freezeLayout: () => {
+  return /* @__PURE__ */ jsx(ModalsProvider, {
+    children: /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
+      value: context,
+      children: /* @__PURE__ */ jsx("div", {
+        className,
+        children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+          value: definition,
+          children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+            value: {
+              layoutFrozen: true,
+              freezeLayout: () => {
+              },
+              mode: DashboardMode.Use,
+              inEditMode: false,
+              inLayoutMode: false,
+              inUseMode: true
             },
-            mode: DashboardMode.Use,
-            inEditMode: false,
-            inLayoutMode: false,
-            inUseMode: true
-          },
-          children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
-            panels: dashboard.panels
+            children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
+              panels: dashboard.panels
+            })
           })
         })
       })