@trops/dash-core 0.1.223 → 0.1.226
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +448 -513
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +448 -512
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
2
|
import * as DashReact from '@trops/dash-react';
|
|
3
|
-
import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, Sidebar, Paragraph, Modal, Panel, Stepper, Tag2,
|
|
3
|
+
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';
|
|
4
4
|
export * from '@trops/dash-react';
|
|
5
5
|
export { ThemeContext } from '@trops/dash-react';
|
|
6
6
|
import _typeof from '@babel/runtime/helpers/typeof';
|
|
@@ -5879,6 +5879,29 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
|
|
|
5879
5879
|
payload: prov
|
|
5880
5880
|
});
|
|
5881
5881
|
}, [dispatch]);
|
|
5882
|
+
|
|
5883
|
+
// Tab state (DASH-185)
|
|
5884
|
+
var _useState = useState("dashboards"),
|
|
5885
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
5886
|
+
activeTab = _useState2[0],
|
|
5887
|
+
setActiveTab = _useState2[1];
|
|
5888
|
+
|
|
5889
|
+
// Clear selection handler (DASH-186)
|
|
5890
|
+
var hasSelection = state.selectedDashboard !== null || state.selectedWidgets.length > 0;
|
|
5891
|
+
var handleClearSelection = useCallback(function () {
|
|
5892
|
+
dispatch({
|
|
5893
|
+
type: "SET_SELECTED_DASHBOARD",
|
|
5894
|
+
payload: null
|
|
5895
|
+
});
|
|
5896
|
+
dispatch({
|
|
5897
|
+
type: "SET_SELECTED_WIDGETS",
|
|
5898
|
+
payload: []
|
|
5899
|
+
});
|
|
5900
|
+
dispatch({
|
|
5901
|
+
type: "SET_PATH",
|
|
5902
|
+
payload: null
|
|
5903
|
+
});
|
|
5904
|
+
}, [dispatch]);
|
|
5882
5905
|
var hasResults = filteredDashboards.length > 0 || filteredWidgets.length > 0;
|
|
5883
5906
|
var hasActiveFilters = filters.categories.length > 0 || filters.providers.length > 0;
|
|
5884
5907
|
return /*#__PURE__*/jsxs("div", {
|
|
@@ -5924,8 +5947,43 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
|
|
|
5924
5947
|
})
|
|
5925
5948
|
})]
|
|
5926
5949
|
})]
|
|
5950
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
5951
|
+
className: "flex items-center justify-between",
|
|
5952
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
5953
|
+
className: "flex gap-1",
|
|
5954
|
+
children: [/*#__PURE__*/jsxs("button", {
|
|
5955
|
+
type: "button",
|
|
5956
|
+
className: "px-4 py-2 text-sm font-medium rounded-t transition-colors ".concat(activeTab === "dashboards" ? "bg-gray-800 text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-gray-200"),
|
|
5957
|
+
onClick: function onClick() {
|
|
5958
|
+
return setActiveTab("dashboards");
|
|
5959
|
+
},
|
|
5960
|
+
children: ["Dashboards (", filteredDashboards.length, ")"]
|
|
5961
|
+
}), /*#__PURE__*/jsxs("button", {
|
|
5962
|
+
type: "button",
|
|
5963
|
+
className: "px-4 py-2 text-sm font-medium rounded-t transition-colors ".concat(activeTab === "widgets" ? "bg-gray-800 text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-gray-200"),
|
|
5964
|
+
onClick: function onClick() {
|
|
5965
|
+
return setActiveTab("widgets");
|
|
5966
|
+
},
|
|
5967
|
+
children: ["Widgets (", filteredWidgets.length, ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsx("span", {
|
|
5968
|
+
className: "ml-1.5",
|
|
5969
|
+
children: /*#__PURE__*/jsx(Tag3, {
|
|
5970
|
+
text: "".concat(state.selectedWidgets.length, " selected")
|
|
5971
|
+
})
|
|
5972
|
+
})]
|
|
5973
|
+
})]
|
|
5974
|
+
}), hasSelection && /*#__PURE__*/jsx(Button, {
|
|
5975
|
+
onClick: handleClearSelection,
|
|
5976
|
+
title: "Clear Selection",
|
|
5977
|
+
textSize: "text-xs",
|
|
5978
|
+
padding: "py-1 px-3",
|
|
5979
|
+
backgroundColor: "bg-gray-700",
|
|
5980
|
+
textColor: "text-gray-400",
|
|
5981
|
+
hoverTextColor: "hover:text-white",
|
|
5982
|
+
hoverBackgroundColor: "hover:bg-gray-600",
|
|
5983
|
+
icon: "xmark"
|
|
5984
|
+
})]
|
|
5927
5985
|
}), /*#__PURE__*/jsx("div", {
|
|
5928
|
-
className: "flex flex-col gap-6
|
|
5986
|
+
className: "flex flex-col gap-6",
|
|
5929
5987
|
children: isLoading ? /*#__PURE__*/jsxs("div", {
|
|
5930
5988
|
className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
|
|
5931
5989
|
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
@@ -5955,12 +6013,9 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
|
|
|
5955
6013
|
children: "Try removing some filters to see more results."
|
|
5956
6014
|
})]
|
|
5957
6015
|
}) : /*#__PURE__*/jsxs(Fragment, {
|
|
5958
|
-
children: [filteredDashboards.length > 0 && /*#__PURE__*/
|
|
6016
|
+
children: [activeTab === "dashboards" && filteredDashboards.length > 0 && /*#__PURE__*/jsx("div", {
|
|
5959
6017
|
className: "flex flex-col gap-3",
|
|
5960
|
-
children:
|
|
5961
|
-
className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
|
|
5962
|
-
children: ["Dashboards (", filteredDashboards.length, " result", filteredDashboards.length !== 1 ? "s" : "", ")"]
|
|
5963
|
-
}), /*#__PURE__*/jsx("div", {
|
|
6018
|
+
children: /*#__PURE__*/jsx("div", {
|
|
5964
6019
|
className: "grid grid-cols-3 gap-3",
|
|
5965
6020
|
children: filteredDashboards.map(function (dash) {
|
|
5966
6021
|
var isSelected = state.selectedDashboard && state.selectedDashboard.name === dash.name;
|
|
@@ -6016,15 +6071,18 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
|
|
|
6016
6071
|
})]
|
|
6017
6072
|
}, dash.name);
|
|
6018
6073
|
})
|
|
6074
|
+
})
|
|
6075
|
+
}), activeTab === "dashboards" && filteredDashboards.length === 0 && /*#__PURE__*/jsxs("div", {
|
|
6076
|
+
className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
|
|
6077
|
+
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6078
|
+
icon: "grid-2",
|
|
6079
|
+
fixedWidth: true
|
|
6080
|
+
}), /*#__PURE__*/jsx("p", {
|
|
6081
|
+
children: "No dashboards match your search."
|
|
6019
6082
|
})]
|
|
6020
|
-
}), filteredWidgets.length > 0 && /*#__PURE__*/
|
|
6083
|
+
}), activeTab === "widgets" && filteredWidgets.length > 0 && /*#__PURE__*/jsx("div", {
|
|
6021
6084
|
className: "flex flex-col gap-3",
|
|
6022
|
-
children:
|
|
6023
|
-
className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
|
|
6024
|
-
children: ["Widgets (", filteredWidgets.length, " result", filteredWidgets.length !== 1 ? "s" : "", ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsx(Tag3, {
|
|
6025
|
-
text: "".concat(state.selectedWidgets.length, " selected")
|
|
6026
|
-
})]
|
|
6027
|
-
}), /*#__PURE__*/jsx("div", {
|
|
6085
|
+
children: /*#__PURE__*/jsx("div", {
|
|
6028
6086
|
className: "grid grid-cols-3 gap-3",
|
|
6029
6087
|
children: filteredWidgets.map(function (widget) {
|
|
6030
6088
|
var checked = isWidgetSelected(widget);
|
|
@@ -6063,6 +6121,14 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
|
|
|
6063
6121
|
})]
|
|
6064
6122
|
}, widget.key);
|
|
6065
6123
|
})
|
|
6124
|
+
})
|
|
6125
|
+
}), activeTab === "widgets" && filteredWidgets.length === 0 && /*#__PURE__*/jsxs("div", {
|
|
6126
|
+
className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
|
|
6127
|
+
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6128
|
+
icon: "puzzle-piece",
|
|
6129
|
+
fixedWidth: true
|
|
6130
|
+
}), /*#__PURE__*/jsx("p", {
|
|
6131
|
+
children: "No widgets match your search."
|
|
6066
6132
|
})]
|
|
6067
6133
|
})]
|
|
6068
6134
|
})
|
|
@@ -6100,442 +6166,6 @@ function applyFilters(items, filters, mode) {
|
|
|
6100
6166
|
|
|
6101
6167
|
function ownKeys$B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6102
6168
|
function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6103
|
-
var TOTAL_STEPS = 3; // Steps 0-2: Discover, Layout, Customize
|
|
6104
|
-
|
|
6105
|
-
var initialState = {
|
|
6106
|
-
step: 0,
|
|
6107
|
-
filters: {
|
|
6108
|
-
categories: [],
|
|
6109
|
-
providers: [],
|
|
6110
|
-
query: ""
|
|
6111
|
-
},
|
|
6112
|
-
selectedWidgets: [],
|
|
6113
|
-
selectedDashboard: null,
|
|
6114
|
-
layout: {
|
|
6115
|
-
templateKey: null,
|
|
6116
|
-
widgetOrder: []
|
|
6117
|
-
},
|
|
6118
|
-
customization: {
|
|
6119
|
-
name: "",
|
|
6120
|
-
menuId: null,
|
|
6121
|
-
theme: null
|
|
6122
|
-
},
|
|
6123
|
-
path: null
|
|
6124
|
-
};
|
|
6125
|
-
function wizardReducer(state, action) {
|
|
6126
|
-
switch (action.type) {
|
|
6127
|
-
case "SET_STEP":
|
|
6128
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6129
|
-
step: action.payload
|
|
6130
|
-
});
|
|
6131
|
-
case "SET_FILTERS":
|
|
6132
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6133
|
-
filters: _objectSpread$B(_objectSpread$B({}, state.filters), action.payload)
|
|
6134
|
-
});
|
|
6135
|
-
case "TOGGLE_FILTER_CATEGORY":
|
|
6136
|
-
{
|
|
6137
|
-
var categories = state.filters.categories.includes(action.payload) ? state.filters.categories.filter(function (c) {
|
|
6138
|
-
return c !== action.payload;
|
|
6139
|
-
}) : [].concat(_toConsumableArray(state.filters.categories), [action.payload]);
|
|
6140
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6141
|
-
filters: _objectSpread$B(_objectSpread$B({}, state.filters), {}, {
|
|
6142
|
-
categories: categories
|
|
6143
|
-
})
|
|
6144
|
-
});
|
|
6145
|
-
}
|
|
6146
|
-
case "TOGGLE_FILTER_PROVIDER":
|
|
6147
|
-
{
|
|
6148
|
-
var providers = state.filters.providers.includes(action.payload) ? state.filters.providers.filter(function (p) {
|
|
6149
|
-
return p !== action.payload;
|
|
6150
|
-
}) : [].concat(_toConsumableArray(state.filters.providers), [action.payload]);
|
|
6151
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6152
|
-
filters: _objectSpread$B(_objectSpread$B({}, state.filters), {}, {
|
|
6153
|
-
providers: providers
|
|
6154
|
-
})
|
|
6155
|
-
});
|
|
6156
|
-
}
|
|
6157
|
-
case "SET_SEARCH_QUERY":
|
|
6158
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6159
|
-
filters: _objectSpread$B(_objectSpread$B({}, state.filters), {}, {
|
|
6160
|
-
query: action.payload
|
|
6161
|
-
})
|
|
6162
|
-
});
|
|
6163
|
-
case "SET_SELECTED_WIDGETS":
|
|
6164
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6165
|
-
selectedWidgets: action.payload
|
|
6166
|
-
});
|
|
6167
|
-
case "TOGGLE_WIDGET":
|
|
6168
|
-
{
|
|
6169
|
-
var exists = state.selectedWidgets.some(function (w) {
|
|
6170
|
-
return w.name === action.payload.name;
|
|
6171
|
-
});
|
|
6172
|
-
var selectedWidgets = exists ? state.selectedWidgets.filter(function (w) {
|
|
6173
|
-
return w.name !== action.payload.name;
|
|
6174
|
-
}) : [].concat(_toConsumableArray(state.selectedWidgets), [action.payload]);
|
|
6175
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6176
|
-
selectedWidgets: selectedWidgets
|
|
6177
|
-
});
|
|
6178
|
-
}
|
|
6179
|
-
case "SET_SELECTED_DASHBOARD":
|
|
6180
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6181
|
-
selectedDashboard: action.payload
|
|
6182
|
-
});
|
|
6183
|
-
case "SET_PATH":
|
|
6184
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6185
|
-
path: action.payload
|
|
6186
|
-
});
|
|
6187
|
-
case "SET_LAYOUT":
|
|
6188
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6189
|
-
layout: action.payload
|
|
6190
|
-
});
|
|
6191
|
-
case "REORDER_WIDGETS":
|
|
6192
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6193
|
-
layout: _objectSpread$B(_objectSpread$B({}, state.layout), {}, {
|
|
6194
|
-
widgetOrder: action.payload
|
|
6195
|
-
})
|
|
6196
|
-
});
|
|
6197
|
-
case "SET_CUSTOMIZATION":
|
|
6198
|
-
return _objectSpread$B(_objectSpread$B({}, state), {}, {
|
|
6199
|
-
customization: _objectSpread$B(_objectSpread$B({}, state.customization), action.payload)
|
|
6200
|
-
});
|
|
6201
|
-
case "RESET":
|
|
6202
|
-
return _objectSpread$B({}, initialState);
|
|
6203
|
-
default:
|
|
6204
|
-
return state;
|
|
6205
|
-
}
|
|
6206
|
-
}
|
|
6207
|
-
function widgetCountToTemplate(count) {
|
|
6208
|
-
if (count <= 1) return "single";
|
|
6209
|
-
if (count === 2) return "two-columns";
|
|
6210
|
-
if (count === 3) return "three-columns";
|
|
6211
|
-
if (count === 4) return "two-by-two";
|
|
6212
|
-
if (count <= 6) return "two-by-three";
|
|
6213
|
-
return "three-by-three";
|
|
6214
|
-
}
|
|
6215
|
-
function getCanProceed(state) {
|
|
6216
|
-
switch (state.step) {
|
|
6217
|
-
case 0:
|
|
6218
|
-
return state.selectedDashboard !== null || state.selectedWidgets.length > 0;
|
|
6219
|
-
case 1:
|
|
6220
|
-
return state.layout.templateKey !== null;
|
|
6221
|
-
case 2:
|
|
6222
|
-
return state.customization.name.trim().length > 0;
|
|
6223
|
-
default:
|
|
6224
|
-
return false;
|
|
6225
|
-
}
|
|
6226
|
-
}
|
|
6227
|
-
var useWizardState = function useWizardState() {
|
|
6228
|
-
var _useReducer = useReducer(wizardReducer, initialState),
|
|
6229
|
-
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
6230
|
-
state = _useReducer2[0],
|
|
6231
|
-
dispatch = _useReducer2[1];
|
|
6232
|
-
var canProceed = useMemo(function () {
|
|
6233
|
-
return getCanProceed(state);
|
|
6234
|
-
}, [state]);
|
|
6235
|
-
var selectedCount = useMemo(function () {
|
|
6236
|
-
return state.selectedWidgets.length;
|
|
6237
|
-
}, [state.selectedWidgets]);
|
|
6238
|
-
var isPrebuiltPath = state.path === "prebuilt";
|
|
6239
|
-
var isCustomPath = state.path === "custom";
|
|
6240
|
-
var nextStep = useCallback(function () {
|
|
6241
|
-
if (getCanProceed(state) && state.step < TOTAL_STEPS - 1) {
|
|
6242
|
-
dispatch({
|
|
6243
|
-
type: "SET_STEP",
|
|
6244
|
-
payload: state.step + 1
|
|
6245
|
-
});
|
|
6246
|
-
}
|
|
6247
|
-
}, [state]);
|
|
6248
|
-
var prevStep = useCallback(function () {
|
|
6249
|
-
if (state.step > 0) {
|
|
6250
|
-
dispatch({
|
|
6251
|
-
type: "SET_STEP",
|
|
6252
|
-
payload: state.step - 1
|
|
6253
|
-
});
|
|
6254
|
-
}
|
|
6255
|
-
}, [state.step]);
|
|
6256
|
-
var goToStep = useCallback(function (n) {
|
|
6257
|
-
if (n >= 0 && n < TOTAL_STEPS) {
|
|
6258
|
-
dispatch({
|
|
6259
|
-
type: "SET_STEP",
|
|
6260
|
-
payload: n
|
|
6261
|
-
});
|
|
6262
|
-
}
|
|
6263
|
-
}, []);
|
|
6264
|
-
return {
|
|
6265
|
-
state: state,
|
|
6266
|
-
dispatch: dispatch,
|
|
6267
|
-
nextStep: nextStep,
|
|
6268
|
-
prevStep: prevStep,
|
|
6269
|
-
goToStep: goToStep,
|
|
6270
|
-
canProceed: canProceed,
|
|
6271
|
-
selectedCount: selectedCount,
|
|
6272
|
-
isPrebuiltPath: isPrebuiltPath,
|
|
6273
|
-
isCustomPath: isCustomPath,
|
|
6274
|
-
widgetCountToTemplate: widgetCountToTemplate
|
|
6275
|
-
};
|
|
6276
|
-
};
|
|
6277
|
-
|
|
6278
|
-
var WizardLayoutPreviewStep = function WizardLayoutPreviewStep(_ref) {
|
|
6279
|
-
var state = _ref.state,
|
|
6280
|
-
dispatch = _ref.dispatch;
|
|
6281
|
-
var isPrebuilt = state.path === "prebuilt";
|
|
6282
|
-
|
|
6283
|
-
// Auto-select template and populate widget order on mount / widget change
|
|
6284
|
-
useEffect(function () {
|
|
6285
|
-
if (isPrebuilt) return;
|
|
6286
|
-
var templateKey = widgetCountToTemplate(state.selectedWidgets.length);
|
|
6287
|
-
var template = layoutTemplates.find(function (t) {
|
|
6288
|
-
return t.id === templateKey;
|
|
6289
|
-
});
|
|
6290
|
-
if (!template) return;
|
|
6291
|
-
|
|
6292
|
-
// Only update if template changed or widget order is empty
|
|
6293
|
-
if (state.layout.templateKey !== templateKey || state.layout.widgetOrder.length === 0) {
|
|
6294
|
-
var widgetOrder = state.selectedWidgets.map(function (w) {
|
|
6295
|
-
return w.name || w.key;
|
|
6296
|
-
});
|
|
6297
|
-
dispatch({
|
|
6298
|
-
type: "SET_LAYOUT",
|
|
6299
|
-
payload: {
|
|
6300
|
-
templateKey: templateKey,
|
|
6301
|
-
widgetOrder: widgetOrder
|
|
6302
|
-
}
|
|
6303
|
-
});
|
|
6304
|
-
}
|
|
6305
|
-
}, [isPrebuilt, state.selectedWidgets, state.layout.templateKey, state.layout.widgetOrder.length, dispatch]);
|
|
6306
|
-
if (isPrebuilt) {
|
|
6307
|
-
return /*#__PURE__*/jsx(PrebuiltPreview, {
|
|
6308
|
-
dashboard: state.selectedDashboard
|
|
6309
|
-
});
|
|
6310
|
-
}
|
|
6311
|
-
var template = layoutTemplates.find(function (t) {
|
|
6312
|
-
return t.id === state.layout.templateKey;
|
|
6313
|
-
});
|
|
6314
|
-
return /*#__PURE__*/jsxs("div", {
|
|
6315
|
-
className: "flex flex-col gap-4",
|
|
6316
|
-
children: [/*#__PURE__*/jsx("h3", {
|
|
6317
|
-
className: "text-lg font-semibold text-gray-200",
|
|
6318
|
-
children: "Preview your layout"
|
|
6319
|
-
}), /*#__PURE__*/jsx("p", {
|
|
6320
|
-
className: "text-sm text-gray-400",
|
|
6321
|
-
children: "Drag widgets to rearrange their placement in the grid."
|
|
6322
|
-
}), template ? /*#__PURE__*/jsx(LayoutGrid, {
|
|
6323
|
-
template: template,
|
|
6324
|
-
widgetOrder: state.layout.widgetOrder,
|
|
6325
|
-
widgets: state.selectedWidgets,
|
|
6326
|
-
dispatch: dispatch
|
|
6327
|
-
}) : /*#__PURE__*/jsxs("div", {
|
|
6328
|
-
className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
|
|
6329
|
-
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6330
|
-
icon: "grid-2",
|
|
6331
|
-
fixedWidth: true
|
|
6332
|
-
}), /*#__PURE__*/jsx("p", {
|
|
6333
|
-
children: "No layout template available."
|
|
6334
|
-
})]
|
|
6335
|
-
})]
|
|
6336
|
-
});
|
|
6337
|
-
};
|
|
6338
|
-
|
|
6339
|
-
// --- Pre-built dashboard preview ---
|
|
6340
|
-
|
|
6341
|
-
var PrebuiltPreview = function PrebuiltPreview(_ref2) {
|
|
6342
|
-
var dashboard = _ref2.dashboard;
|
|
6343
|
-
if (!dashboard) {
|
|
6344
|
-
return /*#__PURE__*/jsxs("div", {
|
|
6345
|
-
className: "flex flex-col gap-4",
|
|
6346
|
-
children: [/*#__PURE__*/jsx("h3", {
|
|
6347
|
-
className: "text-lg font-semibold text-gray-200",
|
|
6348
|
-
children: "Dashboard preview"
|
|
6349
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
6350
|
-
className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
|
|
6351
|
-
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6352
|
-
icon: "box-open",
|
|
6353
|
-
fixedWidth: true
|
|
6354
|
-
}), /*#__PURE__*/jsx("p", {
|
|
6355
|
-
children: "No dashboard selected."
|
|
6356
|
-
})]
|
|
6357
|
-
})]
|
|
6358
|
-
});
|
|
6359
|
-
}
|
|
6360
|
-
var widgets = dashboard.widgets || [];
|
|
6361
|
-
return /*#__PURE__*/jsxs("div", {
|
|
6362
|
-
className: "flex flex-col gap-4",
|
|
6363
|
-
children: [/*#__PURE__*/jsx("h3", {
|
|
6364
|
-
className: "text-lg font-semibold text-gray-200",
|
|
6365
|
-
children: "Dashboard preview"
|
|
6366
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
6367
|
-
className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-3",
|
|
6368
|
-
children: [/*#__PURE__*/jsxs("div", {
|
|
6369
|
-
className: "flex items-center gap-2",
|
|
6370
|
-
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6371
|
-
icon: resolveIcon(dashboard.icon || "grid-2"),
|
|
6372
|
-
fixedWidth: true,
|
|
6373
|
-
className: "text-blue-400"
|
|
6374
|
-
}), /*#__PURE__*/jsx("span", {
|
|
6375
|
-
className: "text-base font-semibold text-gray-200",
|
|
6376
|
-
children: dashboard.displayName || dashboard.name
|
|
6377
|
-
})]
|
|
6378
|
-
}), dashboard.description && /*#__PURE__*/jsx("p", {
|
|
6379
|
-
className: "text-sm text-gray-400",
|
|
6380
|
-
children: dashboard.description
|
|
6381
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
6382
|
-
className: "flex flex-col gap-1.5",
|
|
6383
|
-
children: [/*#__PURE__*/jsxs("span", {
|
|
6384
|
-
className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
|
|
6385
|
-
children: ["Includes ", widgets.length, " widget", widgets.length !== 1 ? "s" : "", ":"]
|
|
6386
|
-
}), /*#__PURE__*/jsx("ul", {
|
|
6387
|
-
className: "flex flex-col gap-1",
|
|
6388
|
-
children: widgets.map(function (w, i) {
|
|
6389
|
-
return /*#__PURE__*/jsxs("li", {
|
|
6390
|
-
className: "flex items-center gap-2 text-sm text-gray-300",
|
|
6391
|
-
children: [w.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6392
|
-
icon: resolveIcon(w.icon),
|
|
6393
|
-
fixedWidth: true,
|
|
6394
|
-
className: "text-gray-500 text-xs"
|
|
6395
|
-
}), /*#__PURE__*/jsx("span", {
|
|
6396
|
-
children: w.displayName || w.name
|
|
6397
|
-
})]
|
|
6398
|
-
}, w.name || i);
|
|
6399
|
-
})
|
|
6400
|
-
})]
|
|
6401
|
-
})]
|
|
6402
|
-
})]
|
|
6403
|
-
});
|
|
6404
|
-
};
|
|
6405
|
-
|
|
6406
|
-
// --- Drag-reorder grid ---
|
|
6407
|
-
|
|
6408
|
-
var LayoutGrid = function LayoutGrid(_ref3) {
|
|
6409
|
-
var template = _ref3.template,
|
|
6410
|
-
widgetOrder = _ref3.widgetOrder,
|
|
6411
|
-
widgets = _ref3.widgets,
|
|
6412
|
-
dispatch = _ref3.dispatch;
|
|
6413
|
-
var _useState = useState(null),
|
|
6414
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
6415
|
-
dragIndex = _useState2[0],
|
|
6416
|
-
setDragIndex = _useState2[1];
|
|
6417
|
-
var _useState3 = useState(null),
|
|
6418
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
6419
|
-
dragOverIndex = _useState4[0],
|
|
6420
|
-
setDragOverIndex = _useState4[1];
|
|
6421
|
-
var dragRef = useRef(null);
|
|
6422
|
-
var totalCells = template.previewCells.length;
|
|
6423
|
-
|
|
6424
|
-
// Build cell contents: widget names for filled cells, null for empty
|
|
6425
|
-
var cellContents = template.previewCells.map(function (_, i) {
|
|
6426
|
-
var widgetId = widgetOrder[i] || null;
|
|
6427
|
-
if (!widgetId) return null;
|
|
6428
|
-
var widget = widgets.find(function (w) {
|
|
6429
|
-
return (w.name || w.key) === widgetId;
|
|
6430
|
-
});
|
|
6431
|
-
return widget || {
|
|
6432
|
-
name: widgetId
|
|
6433
|
-
};
|
|
6434
|
-
});
|
|
6435
|
-
var handleDragStart = useCallback(function (e, index) {
|
|
6436
|
-
setDragIndex(index);
|
|
6437
|
-
dragRef.current = index;
|
|
6438
|
-
e.dataTransfer.effectAllowed = "move";
|
|
6439
|
-
e.dataTransfer.setData("text/plain", String(index));
|
|
6440
|
-
}, []);
|
|
6441
|
-
var handleDragOver = useCallback(function (e, index) {
|
|
6442
|
-
e.preventDefault();
|
|
6443
|
-
e.dataTransfer.dropEffect = "move";
|
|
6444
|
-
setDragOverIndex(index);
|
|
6445
|
-
}, []);
|
|
6446
|
-
var handleDragLeave = useCallback(function () {
|
|
6447
|
-
setDragOverIndex(null);
|
|
6448
|
-
}, []);
|
|
6449
|
-
var handleDrop = useCallback(function (e, dropIndex) {
|
|
6450
|
-
e.preventDefault();
|
|
6451
|
-
var fromIndex = dragRef.current;
|
|
6452
|
-
setDragIndex(null);
|
|
6453
|
-
setDragOverIndex(null);
|
|
6454
|
-
dragRef.current = null;
|
|
6455
|
-
if (fromIndex === null || fromIndex === dropIndex) return;
|
|
6456
|
-
|
|
6457
|
-
// Swap the two positions in widgetOrder
|
|
6458
|
-
var newOrder = _toConsumableArray(widgetOrder);
|
|
6459
|
-
// Pad array to cover all cells
|
|
6460
|
-
while (newOrder.length < totalCells) {
|
|
6461
|
-
newOrder.push(null);
|
|
6462
|
-
}
|
|
6463
|
-
var temp = newOrder[fromIndex];
|
|
6464
|
-
newOrder[fromIndex] = newOrder[dropIndex];
|
|
6465
|
-
newOrder[dropIndex] = temp;
|
|
6466
|
-
|
|
6467
|
-
// Trim trailing nulls
|
|
6468
|
-
while (newOrder.length > 0 && newOrder[newOrder.length - 1] === null) {
|
|
6469
|
-
newOrder.pop();
|
|
6470
|
-
}
|
|
6471
|
-
dispatch({
|
|
6472
|
-
type: "REORDER_WIDGETS",
|
|
6473
|
-
payload: newOrder
|
|
6474
|
-
});
|
|
6475
|
-
}, [widgetOrder, totalCells, dispatch]);
|
|
6476
|
-
var handleDragEnd = useCallback(function () {
|
|
6477
|
-
setDragIndex(null);
|
|
6478
|
-
setDragOverIndex(null);
|
|
6479
|
-
dragRef.current = null;
|
|
6480
|
-
}, []);
|
|
6481
|
-
return /*#__PURE__*/jsx("div", {
|
|
6482
|
-
className: "gap-3 p-4",
|
|
6483
|
-
style: {
|
|
6484
|
-
display: "grid",
|
|
6485
|
-
gridTemplateRows: "repeat(".concat(template.rows, ", 1fr)"),
|
|
6486
|
-
gridTemplateColumns: "repeat(".concat(template.cols, ", 1fr)")
|
|
6487
|
-
},
|
|
6488
|
-
children: template.previewCells.map(function (cell, i) {
|
|
6489
|
-
var content = cellContents[i];
|
|
6490
|
-
var isDragging = dragIndex === i;
|
|
6491
|
-
var isDragOver = dragOverIndex === i;
|
|
6492
|
-
var hasWidget = content !== null;
|
|
6493
|
-
var cellStyle = {};
|
|
6494
|
-
if (cell.rowSpan) cellStyle.gridRow = "span ".concat(cell.rowSpan);
|
|
6495
|
-
if (cell.colSpan) cellStyle.gridColumn = "span ".concat(cell.colSpan);
|
|
6496
|
-
var cellClasses = ["rounded-lg border transition-all flex items-center justify-center min-h-[60px]", hasWidget ? "border-gray-600 bg-gray-800/80 cursor-grab" : "border-dashed border-gray-700 bg-gray-800/30", isDragging ? "opacity-50 scale-95" : "", isDragOver ? "ring-2 ring-blue-400 border-blue-400" : ""].filter(Boolean).join(" ");
|
|
6497
|
-
return /*#__PURE__*/jsx("div", {
|
|
6498
|
-
className: cellClasses,
|
|
6499
|
-
style: cellStyle,
|
|
6500
|
-
draggable: hasWidget,
|
|
6501
|
-
onDragStart: hasWidget ? function (e) {
|
|
6502
|
-
return handleDragStart(e, i);
|
|
6503
|
-
} : undefined,
|
|
6504
|
-
onDragOver: function onDragOver(e) {
|
|
6505
|
-
return handleDragOver(e, i);
|
|
6506
|
-
},
|
|
6507
|
-
onDragLeave: handleDragLeave,
|
|
6508
|
-
onDrop: function onDrop(e) {
|
|
6509
|
-
return handleDrop(e, i);
|
|
6510
|
-
},
|
|
6511
|
-
onDragEnd: handleDragEnd,
|
|
6512
|
-
children: hasWidget ? /*#__PURE__*/jsxs("div", {
|
|
6513
|
-
className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-300",
|
|
6514
|
-
children: [content.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6515
|
-
icon: resolveIcon(content.icon),
|
|
6516
|
-
fixedWidth: true,
|
|
6517
|
-
className: "text-gray-400 text-xs"
|
|
6518
|
-
}), /*#__PURE__*/jsx("span", {
|
|
6519
|
-
className: "truncate",
|
|
6520
|
-
children: content.displayName || content.name || content.key
|
|
6521
|
-
}), /*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6522
|
-
icon: "grip-vertical",
|
|
6523
|
-
className: "text-gray-600 ml-auto"
|
|
6524
|
-
})]
|
|
6525
|
-
}) : /*#__PURE__*/jsx("div", {
|
|
6526
|
-
className: "text-gray-600",
|
|
6527
|
-
children: /*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6528
|
-
icon: "plus",
|
|
6529
|
-
fixedWidth: true
|
|
6530
|
-
})
|
|
6531
|
-
})
|
|
6532
|
-
}, "".concat(cell.row, "-").concat(cell.col));
|
|
6533
|
-
})
|
|
6534
|
-
});
|
|
6535
|
-
};
|
|
6536
|
-
|
|
6537
|
-
function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6538
|
-
function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6539
6169
|
var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
6540
6170
|
var _state$selectedDashbo, _state$selectedDashbo2;
|
|
6541
6171
|
var state = _ref.state,
|
|
@@ -6550,7 +6180,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6550
6180
|
onInstallDashboard = _ref$onInstallDashboa === void 0 ? null : _ref$onInstallDashboa,
|
|
6551
6181
|
_ref$onOpenDashboard = _ref.onOpenDashboard,
|
|
6552
6182
|
onOpenDashboard = _ref$onOpenDashboard === void 0 ? null : _ref$onOpenDashboard,
|
|
6553
|
-
appId = _ref.appId
|
|
6183
|
+
appId = _ref.appId,
|
|
6184
|
+
_ref$createHandlerRef = _ref.createHandlerRef,
|
|
6185
|
+
createHandlerRef = _ref$createHandlerRef === void 0 ? null : _ref$createHandlerRef;
|
|
6554
6186
|
var _useContext = useContext(ThemeContext),
|
|
6555
6187
|
themes = _useContext.themes,
|
|
6556
6188
|
appThemeKey = _useContext.themeKey;
|
|
@@ -6575,9 +6207,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6575
6207
|
|
|
6576
6208
|
// Creation state
|
|
6577
6209
|
var _useState9 = useState(false),
|
|
6578
|
-
_useState0 = _slicedToArray(_useState9, 2)
|
|
6579
|
-
_useState0[0]
|
|
6580
|
-
|
|
6210
|
+
_useState0 = _slicedToArray(_useState9, 2),
|
|
6211
|
+
creating = _useState0[0],
|
|
6212
|
+
setCreating = _useState0[1];
|
|
6581
6213
|
var _useState1 = useState(null),
|
|
6582
6214
|
_useState10 = _slicedToArray(_useState1, 2),
|
|
6583
6215
|
error = _useState10[0],
|
|
@@ -6586,9 +6218,15 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6586
6218
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
6587
6219
|
createdDashboard = _useState12[0],
|
|
6588
6220
|
setCreatedDashboard = _useState12[1];
|
|
6221
|
+
|
|
6222
|
+
// Sub-step state (DASH-188): 0 = Name, 1 = Folder, 2 = Theme
|
|
6223
|
+
var _useState13 = useState(0),
|
|
6224
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
6225
|
+
subStep = _useState14[0],
|
|
6226
|
+
setSubStep = _useState14[1];
|
|
6589
6227
|
var isPrebuilt = state.path === "prebuilt";
|
|
6590
6228
|
|
|
6591
|
-
// Initialize customization defaults
|
|
6229
|
+
// Initialize customization defaults when stepping into this step
|
|
6592
6230
|
useEffect(function () {
|
|
6593
6231
|
setLocalMenuItems(menuItems);
|
|
6594
6232
|
var updates = {};
|
|
@@ -6606,6 +6244,10 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6606
6244
|
})[0]) === null || _Object$entries$sort$ === void 0 ? void 0 : _Object$entries$sort$[0];
|
|
6607
6245
|
updates.theme = appThemeKey || fallback || null;
|
|
6608
6246
|
}
|
|
6247
|
+
// Auto-populate name from selected dashboard (DASH-184)
|
|
6248
|
+
if (!state.customization.name && state.selectedDashboard) {
|
|
6249
|
+
updates.name = state.selectedDashboard.displayName || state.selectedDashboard.name || "";
|
|
6250
|
+
}
|
|
6609
6251
|
if (Object.keys(updates).length > 0) {
|
|
6610
6252
|
dispatch({
|
|
6611
6253
|
type: "SET_CUSTOMIZATION",
|
|
@@ -6613,7 +6255,17 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6613
6255
|
});
|
|
6614
6256
|
}
|
|
6615
6257
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6616
|
-
}, []);
|
|
6258
|
+
}, [state.step, state.selectedDashboard]);
|
|
6259
|
+
|
|
6260
|
+
// Expose handleCreate and creating state to parent via ref (DASH-183)
|
|
6261
|
+
useEffect(function () {
|
|
6262
|
+
if (createHandlerRef) {
|
|
6263
|
+
createHandlerRef.current = {
|
|
6264
|
+
handleCreate: handleCreate,
|
|
6265
|
+
creating: creating
|
|
6266
|
+
};
|
|
6267
|
+
}
|
|
6268
|
+
}, [createHandlerRef, handleCreate, creating]);
|
|
6617
6269
|
var handleNameChange = useCallback(function (val) {
|
|
6618
6270
|
dispatch({
|
|
6619
6271
|
type: "SET_CUSTOMIZATION",
|
|
@@ -6632,6 +6284,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6632
6284
|
setIsCreatingFolder(false);
|
|
6633
6285
|
setNewFolderName("");
|
|
6634
6286
|
setNewFolderIcon(null);
|
|
6287
|
+
setSubStep(2); // Auto-advance to Theme
|
|
6635
6288
|
}, [dispatch]);
|
|
6636
6289
|
var handleThemeSelect = useCallback(function (key) {
|
|
6637
6290
|
dispatch({
|
|
@@ -6671,7 +6324,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6671
6324
|
}
|
|
6672
6325
|
|
|
6673
6326
|
// --- Create logic ---
|
|
6674
|
-
useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
6327
|
+
var handleCreate = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
6675
6328
|
var _state$customization, name, menuId, theme, result, _window$mainApi, installResult, updatedWorkspace, _window$mainApi2, template, layoutObj, widgetOrder, cells, _loop, i, workspace, _t;
|
|
6676
6329
|
return _regeneratorRuntime.wrap(function (_context2) {
|
|
6677
6330
|
while (1) switch (_context2.prev = _context2.next) {
|
|
@@ -6713,7 +6366,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6713
6366
|
_context2.next = 6;
|
|
6714
6367
|
break;
|
|
6715
6368
|
}
|
|
6716
|
-
updatedWorkspace = _objectSpread$
|
|
6369
|
+
updatedWorkspace = _objectSpread$B(_objectSpread$B({}, installResult.workspace), {}, {
|
|
6717
6370
|
name: name.trim(),
|
|
6718
6371
|
menuId: menuId || 1,
|
|
6719
6372
|
themeKey: theme
|
|
@@ -6876,18 +6529,44 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6876
6529
|
return item.id === state.customization.menuId;
|
|
6877
6530
|
});
|
|
6878
6531
|
var selectedTheme = themes && state.customization.theme ? themes[state.customization.theme] : null;
|
|
6532
|
+
var SUB_STEPS = [{
|
|
6533
|
+
label: "Name",
|
|
6534
|
+
icon: "input-text"
|
|
6535
|
+
}, {
|
|
6536
|
+
label: "Folder",
|
|
6537
|
+
icon: "folder"
|
|
6538
|
+
}, {
|
|
6539
|
+
label: "Theme",
|
|
6540
|
+
icon: "palette"
|
|
6541
|
+
}];
|
|
6879
6542
|
return /*#__PURE__*/jsxs("div", {
|
|
6880
6543
|
className: "flex flex-col gap-4",
|
|
6881
6544
|
children: [/*#__PURE__*/jsx("h3", {
|
|
6882
6545
|
className: "text-lg font-semibold text-gray-200",
|
|
6883
6546
|
children: "Customize your dashboard"
|
|
6884
|
-
}), /*#__PURE__*/jsx("
|
|
6885
|
-
className: "
|
|
6886
|
-
children:
|
|
6547
|
+
}), /*#__PURE__*/jsx("div", {
|
|
6548
|
+
className: "flex items-center gap-2 mb-2",
|
|
6549
|
+
children: SUB_STEPS.map(function (s, i) {
|
|
6550
|
+
return /*#__PURE__*/jsxs(React__default.Fragment, {
|
|
6551
|
+
children: [i > 0 && /*#__PURE__*/jsx("div", {
|
|
6552
|
+
className: "flex-1 h-px ".concat(i <= subStep ? "bg-blue-500" : "bg-gray-700")
|
|
6553
|
+
}), /*#__PURE__*/jsxs("button", {
|
|
6554
|
+
type: "button",
|
|
6555
|
+
className: "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ".concat(i === subStep ? "bg-blue-600 text-white" : i < subStep ? "bg-blue-900/50 text-blue-300 cursor-pointer" : "bg-gray-800 text-gray-500"),
|
|
6556
|
+
onClick: function onClick() {
|
|
6557
|
+
return setSubStep(i);
|
|
6558
|
+
},
|
|
6559
|
+
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
6560
|
+
icon: s.icon,
|
|
6561
|
+
fixedWidth: true
|
|
6562
|
+
}), s.label]
|
|
6563
|
+
})]
|
|
6564
|
+
}, s.label);
|
|
6565
|
+
})
|
|
6887
6566
|
}), /*#__PURE__*/jsxs("div", {
|
|
6888
6567
|
className: "flex flex-col gap-6",
|
|
6889
|
-
children: [/*#__PURE__*/jsxs("div", {
|
|
6890
|
-
className: "flex flex-col gap-
|
|
6568
|
+
children: [subStep === 0 && /*#__PURE__*/jsxs("div", {
|
|
6569
|
+
className: "flex flex-col gap-3",
|
|
6891
6570
|
children: [/*#__PURE__*/jsxs("label", {
|
|
6892
6571
|
className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
|
|
6893
6572
|
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
@@ -6899,9 +6578,25 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6899
6578
|
onChange: handleNameChange,
|
|
6900
6579
|
placeholder: "My Dashboard",
|
|
6901
6580
|
autoFocus: true
|
|
6581
|
+
}), /*#__PURE__*/jsx("div", {
|
|
6582
|
+
className: "flex justify-end mt-2",
|
|
6583
|
+
children: /*#__PURE__*/jsx(Button, {
|
|
6584
|
+
onClick: function onClick() {
|
|
6585
|
+
return setSubStep(1);
|
|
6586
|
+
},
|
|
6587
|
+
title: "Next",
|
|
6588
|
+
textSize: "text-sm",
|
|
6589
|
+
padding: "py-1.5 px-4",
|
|
6590
|
+
backgroundColor: state.customization.name.trim() ? "bg-blue-600" : "bg-gray-700",
|
|
6591
|
+
textColor: state.customization.name.trim() ? "text-white" : "text-gray-500",
|
|
6592
|
+
hoverTextColor: state.customization.name.trim() ? "hover:text-white" : "hover:text-gray-500",
|
|
6593
|
+
hoverBackgroundColor: state.customization.name.trim() ? "hover:bg-blue-500" : "hover:bg-gray-700",
|
|
6594
|
+
disabled: !state.customization.name.trim(),
|
|
6595
|
+
icon: "arrow-right"
|
|
6596
|
+
})
|
|
6902
6597
|
})]
|
|
6903
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
6904
|
-
className: "flex flex-col gap-
|
|
6598
|
+
}), subStep === 1 && /*#__PURE__*/jsxs("div", {
|
|
6599
|
+
className: "flex flex-col gap-3",
|
|
6905
6600
|
children: [/*#__PURE__*/jsxs("label", {
|
|
6906
6601
|
className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
|
|
6907
6602
|
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
@@ -6993,8 +6688,8 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
6993
6688
|
}, item.id);
|
|
6994
6689
|
})]
|
|
6995
6690
|
})]
|
|
6996
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
6997
|
-
className: "flex flex-col gap-
|
|
6691
|
+
}), subStep === 2 && /*#__PURE__*/jsxs("div", {
|
|
6692
|
+
className: "flex flex-col gap-3",
|
|
6998
6693
|
children: [/*#__PURE__*/jsxs("label", {
|
|
6999
6694
|
className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
|
|
7000
6695
|
children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
@@ -7141,12 +6836,202 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
|
|
|
7141
6836
|
});
|
|
7142
6837
|
};
|
|
7143
6838
|
|
|
6839
|
+
function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6840
|
+
function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6841
|
+
var TOTAL_STEPS = 2; // Steps 0-1: Discover, Customize
|
|
6842
|
+
|
|
6843
|
+
var initialState = {
|
|
6844
|
+
step: 0,
|
|
6845
|
+
filters: {
|
|
6846
|
+
categories: [],
|
|
6847
|
+
providers: [],
|
|
6848
|
+
query: ""
|
|
6849
|
+
},
|
|
6850
|
+
selectedWidgets: [],
|
|
6851
|
+
selectedDashboard: null,
|
|
6852
|
+
layout: {
|
|
6853
|
+
templateKey: null,
|
|
6854
|
+
widgetOrder: []
|
|
6855
|
+
},
|
|
6856
|
+
customization: {
|
|
6857
|
+
name: "",
|
|
6858
|
+
menuId: null,
|
|
6859
|
+
theme: null
|
|
6860
|
+
},
|
|
6861
|
+
path: null
|
|
6862
|
+
};
|
|
6863
|
+
function wizardReducer(state, action) {
|
|
6864
|
+
switch (action.type) {
|
|
6865
|
+
case "SET_STEP":
|
|
6866
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6867
|
+
step: action.payload
|
|
6868
|
+
});
|
|
6869
|
+
case "SET_FILTERS":
|
|
6870
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6871
|
+
filters: _objectSpread$A(_objectSpread$A({}, state.filters), action.payload)
|
|
6872
|
+
});
|
|
6873
|
+
case "TOGGLE_FILTER_CATEGORY":
|
|
6874
|
+
{
|
|
6875
|
+
var categories = state.filters.categories.includes(action.payload) ? state.filters.categories.filter(function (c) {
|
|
6876
|
+
return c !== action.payload;
|
|
6877
|
+
}) : [].concat(_toConsumableArray(state.filters.categories), [action.payload]);
|
|
6878
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6879
|
+
filters: _objectSpread$A(_objectSpread$A({}, state.filters), {}, {
|
|
6880
|
+
categories: categories
|
|
6881
|
+
})
|
|
6882
|
+
});
|
|
6883
|
+
}
|
|
6884
|
+
case "TOGGLE_FILTER_PROVIDER":
|
|
6885
|
+
{
|
|
6886
|
+
var providers = state.filters.providers.includes(action.payload) ? state.filters.providers.filter(function (p) {
|
|
6887
|
+
return p !== action.payload;
|
|
6888
|
+
}) : [].concat(_toConsumableArray(state.filters.providers), [action.payload]);
|
|
6889
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6890
|
+
filters: _objectSpread$A(_objectSpread$A({}, state.filters), {}, {
|
|
6891
|
+
providers: providers
|
|
6892
|
+
})
|
|
6893
|
+
});
|
|
6894
|
+
}
|
|
6895
|
+
case "SET_SEARCH_QUERY":
|
|
6896
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6897
|
+
filters: _objectSpread$A(_objectSpread$A({}, state.filters), {}, {
|
|
6898
|
+
query: action.payload
|
|
6899
|
+
})
|
|
6900
|
+
});
|
|
6901
|
+
case "SET_SELECTED_WIDGETS":
|
|
6902
|
+
{
|
|
6903
|
+
var templateKey = widgetCountToTemplate(action.payload.length);
|
|
6904
|
+
var widgetOrder = action.payload.map(function (w) {
|
|
6905
|
+
return w.name || w.key;
|
|
6906
|
+
});
|
|
6907
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6908
|
+
selectedWidgets: action.payload,
|
|
6909
|
+
layout: {
|
|
6910
|
+
templateKey: templateKey,
|
|
6911
|
+
widgetOrder: widgetOrder
|
|
6912
|
+
}
|
|
6913
|
+
});
|
|
6914
|
+
}
|
|
6915
|
+
case "TOGGLE_WIDGET":
|
|
6916
|
+
{
|
|
6917
|
+
var exists = state.selectedWidgets.some(function (w) {
|
|
6918
|
+
return w.name === action.payload.name;
|
|
6919
|
+
});
|
|
6920
|
+
var selectedWidgets = exists ? state.selectedWidgets.filter(function (w) {
|
|
6921
|
+
return w.name !== action.payload.name;
|
|
6922
|
+
}) : [].concat(_toConsumableArray(state.selectedWidgets), [action.payload]);
|
|
6923
|
+
var toggleTemplateKey = widgetCountToTemplate(selectedWidgets.length);
|
|
6924
|
+
var toggleWidgetOrder = selectedWidgets.map(function (w) {
|
|
6925
|
+
return w.name || w.key;
|
|
6926
|
+
});
|
|
6927
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6928
|
+
selectedWidgets: selectedWidgets,
|
|
6929
|
+
layout: {
|
|
6930
|
+
templateKey: toggleTemplateKey,
|
|
6931
|
+
widgetOrder: toggleWidgetOrder
|
|
6932
|
+
}
|
|
6933
|
+
});
|
|
6934
|
+
}
|
|
6935
|
+
case "SET_SELECTED_DASHBOARD":
|
|
6936
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6937
|
+
selectedDashboard: action.payload
|
|
6938
|
+
});
|
|
6939
|
+
case "SET_PATH":
|
|
6940
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6941
|
+
path: action.payload
|
|
6942
|
+
});
|
|
6943
|
+
case "SET_LAYOUT":
|
|
6944
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6945
|
+
layout: action.payload
|
|
6946
|
+
});
|
|
6947
|
+
case "REORDER_WIDGETS":
|
|
6948
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6949
|
+
layout: _objectSpread$A(_objectSpread$A({}, state.layout), {}, {
|
|
6950
|
+
widgetOrder: action.payload
|
|
6951
|
+
})
|
|
6952
|
+
});
|
|
6953
|
+
case "SET_CUSTOMIZATION":
|
|
6954
|
+
return _objectSpread$A(_objectSpread$A({}, state), {}, {
|
|
6955
|
+
customization: _objectSpread$A(_objectSpread$A({}, state.customization), action.payload)
|
|
6956
|
+
});
|
|
6957
|
+
case "RESET":
|
|
6958
|
+
return _objectSpread$A({}, initialState);
|
|
6959
|
+
default:
|
|
6960
|
+
return state;
|
|
6961
|
+
}
|
|
6962
|
+
}
|
|
6963
|
+
function widgetCountToTemplate(count) {
|
|
6964
|
+
if (count <= 1) return "single";
|
|
6965
|
+
if (count === 2) return "two-columns";
|
|
6966
|
+
if (count === 3) return "three-columns";
|
|
6967
|
+
if (count === 4) return "two-by-two";
|
|
6968
|
+
if (count <= 6) return "two-by-three";
|
|
6969
|
+
return "three-by-three";
|
|
6970
|
+
}
|
|
6971
|
+
function getCanProceed(state) {
|
|
6972
|
+
switch (state.step) {
|
|
6973
|
+
case 0:
|
|
6974
|
+
return state.selectedDashboard !== null || state.selectedWidgets.length > 0;
|
|
6975
|
+
case 1:
|
|
6976
|
+
return state.customization.name.trim().length > 0;
|
|
6977
|
+
default:
|
|
6978
|
+
return false;
|
|
6979
|
+
}
|
|
6980
|
+
}
|
|
6981
|
+
var useWizardState = function useWizardState() {
|
|
6982
|
+
var _useReducer = useReducer(wizardReducer, initialState),
|
|
6983
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
6984
|
+
state = _useReducer2[0],
|
|
6985
|
+
dispatch = _useReducer2[1];
|
|
6986
|
+
var canProceed = useMemo(function () {
|
|
6987
|
+
return getCanProceed(state);
|
|
6988
|
+
}, [state]);
|
|
6989
|
+
var selectedCount = useMemo(function () {
|
|
6990
|
+
return state.selectedWidgets.length;
|
|
6991
|
+
}, [state.selectedWidgets]);
|
|
6992
|
+
var isPrebuiltPath = state.path === "prebuilt";
|
|
6993
|
+
var isCustomPath = state.path === "custom";
|
|
6994
|
+
var nextStep = useCallback(function () {
|
|
6995
|
+
if (getCanProceed(state) && state.step < TOTAL_STEPS - 1) {
|
|
6996
|
+
dispatch({
|
|
6997
|
+
type: "SET_STEP",
|
|
6998
|
+
payload: state.step + 1
|
|
6999
|
+
});
|
|
7000
|
+
}
|
|
7001
|
+
}, [state]);
|
|
7002
|
+
var prevStep = useCallback(function () {
|
|
7003
|
+
if (state.step > 0) {
|
|
7004
|
+
dispatch({
|
|
7005
|
+
type: "SET_STEP",
|
|
7006
|
+
payload: state.step - 1
|
|
7007
|
+
});
|
|
7008
|
+
}
|
|
7009
|
+
}, [state.step]);
|
|
7010
|
+
var goToStep = useCallback(function (n) {
|
|
7011
|
+
if (n >= 0 && n < TOTAL_STEPS) {
|
|
7012
|
+
dispatch({
|
|
7013
|
+
type: "SET_STEP",
|
|
7014
|
+
payload: n
|
|
7015
|
+
});
|
|
7016
|
+
}
|
|
7017
|
+
}, []);
|
|
7018
|
+
return {
|
|
7019
|
+
state: state,
|
|
7020
|
+
dispatch: dispatch,
|
|
7021
|
+
nextStep: nextStep,
|
|
7022
|
+
prevStep: prevStep,
|
|
7023
|
+
goToStep: goToStep,
|
|
7024
|
+
canProceed: canProceed,
|
|
7025
|
+
selectedCount: selectedCount,
|
|
7026
|
+
isPrebuiltPath: isPrebuiltPath,
|
|
7027
|
+
isCustomPath: isCustomPath,
|
|
7028
|
+
widgetCountToTemplate: widgetCountToTemplate
|
|
7029
|
+
};
|
|
7030
|
+
};
|
|
7031
|
+
|
|
7144
7032
|
var STEP_LABELS = [{
|
|
7145
7033
|
label: "Discover",
|
|
7146
7034
|
description: "Search & select"
|
|
7147
|
-
}, {
|
|
7148
|
-
label: "Layout",
|
|
7149
|
-
description: "Arrange your widgets"
|
|
7150
7035
|
}, {
|
|
7151
7036
|
label: "Customize",
|
|
7152
7037
|
description: "Name, folder & theme"
|
|
@@ -7160,6 +7045,7 @@ var STEP_LABELS = [{
|
|
|
7160
7045
|
* Resets wizard state cleanly on close.
|
|
7161
7046
|
*/
|
|
7162
7047
|
var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
7048
|
+
var _createHandlerRef$cur, _createHandlerRef$cur2;
|
|
7163
7049
|
var open = _ref.open,
|
|
7164
7050
|
setIsOpen = _ref.setIsOpen,
|
|
7165
7051
|
_ref$menuItems = _ref.menuItems,
|
|
@@ -7175,14 +7061,13 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
|
7175
7061
|
_ref$onReloadWorkspac = _ref.onReloadWorkspaces,
|
|
7176
7062
|
onReloadWorkspaces = _ref$onReloadWorkspac === void 0 ? null : _ref$onReloadWorkspac,
|
|
7177
7063
|
appId = _ref.appId;
|
|
7064
|
+
var createHandlerRef = useRef(null);
|
|
7178
7065
|
var _useWizardState = useWizardState(),
|
|
7179
7066
|
state = _useWizardState.state,
|
|
7180
7067
|
dispatch = _useWizardState.dispatch,
|
|
7181
7068
|
nextStep = _useWizardState.nextStep,
|
|
7182
7069
|
prevStep = _useWizardState.prevStep,
|
|
7183
|
-
|
|
7184
|
-
canProceed = _useWizardState.canProceed,
|
|
7185
|
-
isPrebuiltPath = _useWizardState.isPrebuiltPath;
|
|
7070
|
+
canProceed = _useWizardState.canProceed;
|
|
7186
7071
|
|
|
7187
7072
|
// Reset wizard state when modal opens
|
|
7188
7073
|
useEffect(function () {
|
|
@@ -7198,30 +7083,16 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
|
7198
7083
|
var handleStepChange = useCallback(function (newStep) {
|
|
7199
7084
|
// Stepper only allows going backwards; forward is via Next button
|
|
7200
7085
|
if (newStep < state.step) {
|
|
7201
|
-
|
|
7086
|
+
prevStep();
|
|
7202
7087
|
}
|
|
7203
|
-
}, [state.step,
|
|
7204
|
-
|
|
7205
|
-
// Skip layout step for prebuilt path
|
|
7088
|
+
}, [state.step, prevStep]);
|
|
7206
7089
|
var handleNext = useCallback(function () {
|
|
7207
7090
|
if (!canProceed) return;
|
|
7208
|
-
|
|
7209
|
-
|
|
7210
|
-
|
|
7211
|
-
|
|
7212
|
-
|
|
7213
|
-
}
|
|
7214
|
-
}, [canProceed, state.step, isPrebuiltPath, goToStep, nextStep]);
|
|
7215
|
-
var handleBack = useCallback(function () {
|
|
7216
|
-
if (state.step === 2 && isPrebuiltPath) {
|
|
7217
|
-
// Skip back over layout step (1), go to discover (0)
|
|
7218
|
-
goToStep(0);
|
|
7219
|
-
} else {
|
|
7220
|
-
prevStep();
|
|
7221
|
-
}
|
|
7222
|
-
}, [state.step, isPrebuiltPath, goToStep, prevStep]);
|
|
7223
|
-
var isLastStep = state.step === 2;
|
|
7224
|
-
state.step === 2 && state._created;
|
|
7091
|
+
nextStep();
|
|
7092
|
+
}, [canProceed, nextStep]);
|
|
7093
|
+
var isLastStep = state.step === 1;
|
|
7094
|
+
var isCreating = (_createHandlerRef$cur = (_createHandlerRef$cur2 = createHandlerRef.current) === null || _createHandlerRef$cur2 === void 0 ? void 0 : _createHandlerRef$cur2.creating) !== null && _createHandlerRef$cur !== void 0 ? _createHandlerRef$cur : false;
|
|
7095
|
+
var canCreate = canProceed && !isCreating;
|
|
7225
7096
|
return /*#__PURE__*/jsx(Modal, {
|
|
7226
7097
|
isOpen: open,
|
|
7227
7098
|
setIsOpen: setIsOpen,
|
|
@@ -7271,16 +7142,6 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
|
7271
7142
|
}), /*#__PURE__*/jsx(Stepper.Step, {
|
|
7272
7143
|
label: STEP_LABELS[1].label,
|
|
7273
7144
|
description: STEP_LABELS[1].description,
|
|
7274
|
-
children: /*#__PURE__*/jsx("div", {
|
|
7275
|
-
className: "flex-1 min-h-0 overflow-y-auto",
|
|
7276
|
-
children: /*#__PURE__*/jsx(WizardLayoutPreviewStep, {
|
|
7277
|
-
state: state,
|
|
7278
|
-
dispatch: dispatch
|
|
7279
|
-
})
|
|
7280
|
-
})
|
|
7281
|
-
}), /*#__PURE__*/jsx(Stepper.Step, {
|
|
7282
|
-
label: STEP_LABELS[2].label,
|
|
7283
|
-
description: STEP_LABELS[2].description,
|
|
7284
7145
|
children: /*#__PURE__*/jsx("div", {
|
|
7285
7146
|
className: "flex-1 min-h-0 overflow-y-auto",
|
|
7286
7147
|
children: /*#__PURE__*/jsx(WizardCustomizeStep, {
|
|
@@ -7295,14 +7156,15 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
|
7295
7156
|
if (_onOpenDashboard) _onOpenDashboard(ws);
|
|
7296
7157
|
if (onReloadWorkspaces) onReloadWorkspaces();
|
|
7297
7158
|
},
|
|
7298
|
-
appId: appId
|
|
7159
|
+
appId: appId,
|
|
7160
|
+
createHandlerRef: createHandlerRef
|
|
7299
7161
|
})
|
|
7300
7162
|
})
|
|
7301
7163
|
})]
|
|
7302
7164
|
}), /*#__PURE__*/jsxs("div", {
|
|
7303
7165
|
className: "flex flex-row justify-between items-center pt-4 mt-4 border-t border-gray-700/50",
|
|
7304
7166
|
children: [/*#__PURE__*/jsx(Button, {
|
|
7305
|
-
onClick: state.step === 0 ? handleClose :
|
|
7167
|
+
onClick: state.step === 0 ? handleClose : prevStep,
|
|
7306
7168
|
title: state.step === 0 ? "Cancel" : "Back",
|
|
7307
7169
|
textSize: "text-sm",
|
|
7308
7170
|
padding: "py-2 px-4",
|
|
@@ -7313,7 +7175,21 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
|
7313
7175
|
}), /*#__PURE__*/jsxs("span", {
|
|
7314
7176
|
className: "text-xs text-gray-500",
|
|
7315
7177
|
children: ["Step ", state.step + 1, " of ", STEP_LABELS.length]
|
|
7316
|
-
}),
|
|
7178
|
+
}), isLastStep ? /*#__PURE__*/jsx(Button, {
|
|
7179
|
+
onClick: function onClick() {
|
|
7180
|
+
var _createHandlerRef$cur3, _createHandlerRef$cur4;
|
|
7181
|
+
return (_createHandlerRef$cur3 = createHandlerRef.current) === null || _createHandlerRef$cur3 === void 0 || (_createHandlerRef$cur4 = _createHandlerRef$cur3.handleCreate) === null || _createHandlerRef$cur4 === void 0 ? void 0 : _createHandlerRef$cur4.call(_createHandlerRef$cur3);
|
|
7182
|
+
},
|
|
7183
|
+
title: isCreating ? "Creating..." : "Create Dashboard",
|
|
7184
|
+
textSize: "text-sm",
|
|
7185
|
+
padding: "py-2 px-4",
|
|
7186
|
+
backgroundColor: canCreate ? "bg-green-600" : "bg-gray-700",
|
|
7187
|
+
textColor: canCreate ? "text-white" : "text-gray-500",
|
|
7188
|
+
hoverTextColor: canCreate ? "hover:text-white" : "hover:text-gray-500",
|
|
7189
|
+
hoverBackgroundColor: canCreate ? "hover:bg-green-500" : "hover:bg-gray-700",
|
|
7190
|
+
disabled: !canCreate,
|
|
7191
|
+
icon: isCreating ? "spinner" : "plus"
|
|
7192
|
+
}) : /*#__PURE__*/jsx(Button, {
|
|
7317
7193
|
onClick: handleNext,
|
|
7318
7194
|
title: "Next",
|
|
7319
7195
|
textSize: "text-sm",
|
|
@@ -7324,7 +7200,7 @@ var DashboardWizardModal = function DashboardWizardModal(_ref) {
|
|
|
7324
7200
|
hoverBackgroundColor: canProceed ? "hover:bg-blue-500" : "hover:bg-gray-700",
|
|
7325
7201
|
disabled: !canProceed,
|
|
7326
7202
|
icon: "arrow-right"
|
|
7327
|
-
})
|
|
7203
|
+
})]
|
|
7328
7204
|
})]
|
|
7329
7205
|
})]
|
|
7330
7206
|
})
|
|
@@ -47703,6 +47579,55 @@ var WidgetSidebar = function WidgetSidebar(_ref4) {
|
|
|
47703
47579
|
});
|
|
47704
47580
|
};
|
|
47705
47581
|
|
|
47582
|
+
var WELCOME_STORAGE_KEY = "dash:welcome-prompted";
|
|
47583
|
+
function markPrompted() {
|
|
47584
|
+
localStorage.setItem(WELCOME_STORAGE_KEY, "true");
|
|
47585
|
+
}
|
|
47586
|
+
var WelcomePrompt = function WelcomePrompt(_ref) {
|
|
47587
|
+
var isOpen = _ref.isOpen,
|
|
47588
|
+
onAccept = _ref.onAccept,
|
|
47589
|
+
onDismiss = _ref.onDismiss;
|
|
47590
|
+
var handleAccept = function handleAccept() {
|
|
47591
|
+
markPrompted();
|
|
47592
|
+
if (onAccept) onAccept();
|
|
47593
|
+
};
|
|
47594
|
+
var handleDismiss = function handleDismiss() {
|
|
47595
|
+
markPrompted();
|
|
47596
|
+
if (onDismiss) onDismiss();
|
|
47597
|
+
};
|
|
47598
|
+
return /*#__PURE__*/jsxs(Modal, {
|
|
47599
|
+
isOpen: isOpen,
|
|
47600
|
+
setIsOpen: handleDismiss,
|
|
47601
|
+
width: "w-[520px]",
|
|
47602
|
+
height: "h-auto",
|
|
47603
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
47604
|
+
className: "px-8 pt-8 pb-4 flex flex-col items-center text-center gap-4",
|
|
47605
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
47606
|
+
className: "text-4xl opacity-60",
|
|
47607
|
+
children: /*#__PURE__*/jsx(FontAwesomeIcon, {
|
|
47608
|
+
icon: "table-cells-large"
|
|
47609
|
+
})
|
|
47610
|
+
}), /*#__PURE__*/jsx(SubHeading2, {
|
|
47611
|
+
children: "Welcome to Dash!"
|
|
47612
|
+
}), /*#__PURE__*/jsx(Paragraph2, {
|
|
47613
|
+
className: "max-w-sm",
|
|
47614
|
+
children: "Get started with a sample dashboard that showcases widgets for AI chat, notes, GitHub, Slack, Gmail, Calendar, and more \u2014 all in a ready-made 4x3 grid."
|
|
47615
|
+
})]
|
|
47616
|
+
}), /*#__PURE__*/jsx(Modal.Footer, {
|
|
47617
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
47618
|
+
className: "flex flex-row gap-3 w-full justify-end",
|
|
47619
|
+
children: [/*#__PURE__*/jsx(Button2, {
|
|
47620
|
+
title: "Start Fresh",
|
|
47621
|
+
onClick: handleDismiss
|
|
47622
|
+
}), /*#__PURE__*/jsx(Button, {
|
|
47623
|
+
title: "Load Sample Dashboard",
|
|
47624
|
+
onClick: handleAccept
|
|
47625
|
+
})]
|
|
47626
|
+
})
|
|
47627
|
+
})]
|
|
47628
|
+
});
|
|
47629
|
+
};
|
|
47630
|
+
|
|
47706
47631
|
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
47707
47632
|
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
47708
47633
|
var DashboardStage = function DashboardStage(_ref) {
|
|
@@ -47717,15 +47642,21 @@ var DashboardStage = function DashboardStage(_ref) {
|
|
|
47717
47642
|
_ref$popout = _ref.popout,
|
|
47718
47643
|
popout = _ref$popout === void 0 ? false : _ref$popout,
|
|
47719
47644
|
_ref$popoutWorkspaceI = _ref.popoutWorkspaceId,
|
|
47720
|
-
popoutWorkspaceId = _ref$popoutWorkspaceI === void 0 ? null : _ref$popoutWorkspaceI
|
|
47645
|
+
popoutWorkspaceId = _ref$popoutWorkspaceI === void 0 ? null : _ref$popoutWorkspaceI,
|
|
47646
|
+
_ref$showWelcomePromp = _ref.showWelcomePrompt,
|
|
47647
|
+
showWelcomePrompt = _ref$showWelcomePromp === void 0 ? false : _ref$showWelcomePromp,
|
|
47648
|
+
_ref$onAcceptWelcome = _ref.onAcceptWelcome,
|
|
47649
|
+
onAcceptWelcome = _ref$onAcceptWelcome === void 0 ? null : _ref$onAcceptWelcome,
|
|
47650
|
+
_ref$onDismissWelcome = _ref.onDismissWelcome,
|
|
47651
|
+
onDismissWelcome = _ref$onDismissWelcome === void 0 ? null : _ref$onDismissWelcome;
|
|
47721
47652
|
return /*#__PURE__*/jsx(Profiler, {
|
|
47722
47653
|
id: "myapp",
|
|
47723
47654
|
onRender: function onRender() {},
|
|
47724
|
-
children: /*#__PURE__*/
|
|
47655
|
+
children: /*#__PURE__*/jsxs(DashboardWrapper, {
|
|
47725
47656
|
dashApi: dashApi,
|
|
47726
47657
|
credentials: credentials,
|
|
47727
47658
|
backgroundColor: backgroundColor,
|
|
47728
|
-
children: /*#__PURE__*/jsx(DashboardStageInner, {
|
|
47659
|
+
children: [/*#__PURE__*/jsx(DashboardStageInner, {
|
|
47729
47660
|
dashApi: dashApi,
|
|
47730
47661
|
credentials: credentials,
|
|
47731
47662
|
workspace: workspace,
|
|
@@ -47733,7 +47664,11 @@ var DashboardStage = function DashboardStage(_ref) {
|
|
|
47733
47664
|
backgroundColor: backgroundColor,
|
|
47734
47665
|
popout: popout,
|
|
47735
47666
|
popoutWorkspaceId: popoutWorkspaceId
|
|
47736
|
-
})
|
|
47667
|
+
}), /*#__PURE__*/jsx(WelcomePrompt, {
|
|
47668
|
+
isOpen: showWelcomePrompt,
|
|
47669
|
+
onAccept: onAcceptWelcome,
|
|
47670
|
+
onDismiss: onDismissWelcome
|
|
47671
|
+
})]
|
|
47737
47672
|
})
|
|
47738
47673
|
});
|
|
47739
47674
|
};
|
|
@@ -50168,5 +50103,5 @@ var WorkspaceMenu = function WorkspaceMenu(_ref) {
|
|
|
50168
50103
|
|
|
50169
50104
|
ComponentManager.registerContainerTypes(LayoutContainer, LayoutGridContainer);
|
|
50170
50105
|
|
|
50171
|
-
export { ALGOLIA_ANALYTICS_FOR_QUERY, ALGOLIA_ANALYTICS_FOR_QUERY_COMPLETE, ALGOLIA_ANALYTICS_FOR_QUERY_ERROR, ALGOLIA_LIST_INDICES, ALGOLIA_LIST_INDICES_COMPLETE, ALGOLIA_LIST_INDICES_ERROR, AVAILABLE_COLORS, AddMenuItemModal, AdvancedMcpConfig, AppContext, AppSettingsModal, AppThemeScope, AppWrapper, CHOOSE_FILE, CHOOSE_FILE_COMPLETE, CHOOSE_FILE_ERROR, ColorModel, ComponentConfigModel, ComponentManager, ContextModel, DATA_JSON_TO_CSV_FILE, DATA_JSON_TO_CSV_FILE_COMPLETE, DATA_JSON_TO_CSV_FILE_ERROR, DATA_JSON_TO_CSV_STRING, DATA_JSON_TO_CSV_STRING_COMPLETE, DATA_JSON_TO_CSV_STRING_ERROR, DATA_READ_FROM_FILE, DATA_READ_FROM_FILE_COMPLETE, DATA_READ_FROM_FILE_ERROR, DATA_SAVE_TO_FILE, DATA_SAVE_TO_FILE_COMPLETE, DATA_SAVE_TO_FILE_ERROR, DashCommandPalette, DashNavbar, DashSidebar, DashTabBar, DashboardStage as Dashboard, DashboardApi, DashboardContext, DashboardFooter, DashboardHeader, DashboardMenuItem, DashboardModel, DashboardMonitor, DashboardPublisher, DashboardStage, DashboardThemeProvider, DashboardWizardModal, DashboardWrapper, ElectronDashboardApi, ErrorBoundary, ExternalWidget, GRID_CELL_WIDGET_TYPE, HARMONY_STRATEGIES, LAYOUT_LIST, LAYOUT_LIST_COMPLETE, LAYOUT_LIST_ERROR, LAYOUT_SAVE, LAYOUT_SAVE_COMPLETE, LAYOUT_SAVE_ERROR, Layout, LayoutBuilder, LayoutBuilderAddItemModal, LayoutBuilderConfigContainerMenuItem, LayoutBuilderConfigMenuItem, LayoutBuilderConfigModal, LayoutBuilderEditItemModal, LayoutBuilderEventModal, LayoutBuilderGridItem, LayoutContainer, LayoutDragBuilder, LayoutDragBuilderEdit, LayoutGridContainer, LayoutManagerModal, LayoutModel, LayoutQuickAddMenu, MCP_CALL_TOOL_COMPLETE, MCP_CALL_TOOL_ERROR, MCP_GET_CATALOG_COMPLETE, MCP_GET_CATALOG_ERROR, MCP_LIST_RESOURCES_COMPLETE, MCP_LIST_RESOURCES_ERROR, MCP_LIST_TOOLS_COMPLETE, MCP_LIST_TOOLS_ERROR, MCP_READ_RESOURCE_COMPLETE, MCP_READ_RESOURCE_ERROR, MCP_RUN_AUTH_COMPLETE, MCP_RUN_AUTH_ERROR, MCP_SERVER_STATUS_COMPLETE, MCP_SERVER_STATUS_ERROR, MCP_START_SERVER_COMPLETE, MCP_START_SERVER_ERROR, MCP_STOP_SERVER_COMPLETE, MCP_STOP_SERVER_ERROR, MENU_ITEMS_DELETE, MENU_ITEMS_DELETE_COMPLETE, MENU_ITEMS_DELETE_ERROR, MENU_ITEMS_LIST, MENU_ITEMS_LIST_COMPLETE, MENU_ITEMS_LIST_ERROR, MENU_ITEMS_SAVE, MENU_ITEMS_SAVE_COMPLETE, MENU_ITEMS_SAVE_ERROR, MainMenu, MainMenuItem, MainMenuSection, McpServerPicker, MenuItemModel, MenuSlideOverlay, MergeCellsModal, MissingProviderPrompt, MockDashboardApi, PROVIDER_DELETE_COMPLETE, PROVIDER_DELETE_ERROR, PROVIDER_GET_COMPLETE, PROVIDER_GET_ERROR, PROVIDER_LIST_COMPLETE, PROVIDER_LIST_ERROR, PROVIDER_SAVE_COMPLETE, PROVIDER_SAVE_ERROR, PanelCode, PanelEditItem, PanelEditItemHandlers, PanelEditItemNotifications, ProviderContext, ProviderErrorBoundary, ProviderForm, ProviderSelector, SECURE_STORAGE_ENCRYPT_STRING, SECURE_STORAGE_ENCRYPT_STRING_COMPLETE, SECURE_STORAGE_ENCRYPT_STRING_ERROR, SECURE_STORE_ENCRYPTION_CHECK, SECURE_STORE_ENCRYPTION_CHECK_COMPLETE, SECURE_STORE_ENCRYPTION_CHECK_ERROR, SECURE_STORE_GET_DATA, SECURE_STORE_GET_DATA_COMPLETE, SECURE_STORE_GET_DATA_ERROR, SECURE_STORE_SET_DATA, SECURE_STORE_SET_DATA_COMPLETE, SECURE_STORE_SET_DATA_ERROR, SETTINGS_GET, SETTINGS_GET_COMPLETE, SETTINGS_GET_ERROR, SETTINGS_SAVE, SETTINGS_SAVE_COMPLETE, SETTINGS_SAVE_ERROR, SIDEBAR_WIDGET_TYPE, SettingsModel, SideMenu, SplitCellModal, THEME_DELETE, THEME_DELETE_COMPLETE, THEME_DELETE_ERROR, THEME_EXTRACT_FROM_URL, THEME_EXTRACT_FROM_URL_COMPLETE, THEME_EXTRACT_FROM_URL_ERROR, THEME_LIST, THEME_LIST_COMPLETE, THEME_LIST_ERROR, THEME_MAP_PALETTE, THEME_MAP_PALETTE_COMPLETE, THEME_MAP_PALETTE_ERROR, THEME_SAVE, THEME_SAVE_COMPLETE, THEME_SAVE_ERROR, ThemeApi, ThemeColorDots, ThemeManagerModal, ThemeModel, ThemeWrapper, WORKSPACE_DELETE, WORKSPACE_DELETE_COMPLETE, WORKSPACE_DELETE_ERROR, WORKSPACE_LIST, WORKSPACE_LIST_COMPLETE, WORKSPACE_LIST_ERROR, WORKSPACE_SAVE, WORKSPACE_SAVE_COMPLETE, WORKSPACE_SAVE_ERROR, WebDashboardApi, Widget, WidgetApi, WidgetConfigPanel, WidgetContext, WidgetFactory, WidgetPopoutStage, WidgetProviderWrapper, WidgetSidebar, WizardCustomizeStep, WizardDiscoverStep,
|
|
50106
|
+
export { ALGOLIA_ANALYTICS_FOR_QUERY, ALGOLIA_ANALYTICS_FOR_QUERY_COMPLETE, ALGOLIA_ANALYTICS_FOR_QUERY_ERROR, ALGOLIA_LIST_INDICES, ALGOLIA_LIST_INDICES_COMPLETE, ALGOLIA_LIST_INDICES_ERROR, AVAILABLE_COLORS, AddMenuItemModal, AdvancedMcpConfig, AppContext, AppSettingsModal, AppThemeScope, AppWrapper, CHOOSE_FILE, CHOOSE_FILE_COMPLETE, CHOOSE_FILE_ERROR, ColorModel, ComponentConfigModel, ComponentManager, ContextModel, DATA_JSON_TO_CSV_FILE, DATA_JSON_TO_CSV_FILE_COMPLETE, DATA_JSON_TO_CSV_FILE_ERROR, DATA_JSON_TO_CSV_STRING, DATA_JSON_TO_CSV_STRING_COMPLETE, DATA_JSON_TO_CSV_STRING_ERROR, DATA_READ_FROM_FILE, DATA_READ_FROM_FILE_COMPLETE, DATA_READ_FROM_FILE_ERROR, DATA_SAVE_TO_FILE, DATA_SAVE_TO_FILE_COMPLETE, DATA_SAVE_TO_FILE_ERROR, DashCommandPalette, DashNavbar, DashSidebar, DashTabBar, DashboardStage as Dashboard, DashboardApi, DashboardContext, DashboardFooter, DashboardHeader, DashboardMenuItem, DashboardModel, DashboardMonitor, DashboardPublisher, DashboardStage, DashboardThemeProvider, DashboardWizardModal, DashboardWrapper, ElectronDashboardApi, ErrorBoundary, ExternalWidget, GRID_CELL_WIDGET_TYPE, HARMONY_STRATEGIES, LAYOUT_LIST, LAYOUT_LIST_COMPLETE, LAYOUT_LIST_ERROR, LAYOUT_SAVE, LAYOUT_SAVE_COMPLETE, LAYOUT_SAVE_ERROR, Layout, LayoutBuilder, LayoutBuilderAddItemModal, LayoutBuilderConfigContainerMenuItem, LayoutBuilderConfigMenuItem, LayoutBuilderConfigModal, LayoutBuilderEditItemModal, LayoutBuilderEventModal, LayoutBuilderGridItem, LayoutContainer, LayoutDragBuilder, LayoutDragBuilderEdit, LayoutGridContainer, LayoutManagerModal, LayoutModel, LayoutQuickAddMenu, MCP_CALL_TOOL_COMPLETE, MCP_CALL_TOOL_ERROR, MCP_GET_CATALOG_COMPLETE, MCP_GET_CATALOG_ERROR, MCP_LIST_RESOURCES_COMPLETE, MCP_LIST_RESOURCES_ERROR, MCP_LIST_TOOLS_COMPLETE, MCP_LIST_TOOLS_ERROR, MCP_READ_RESOURCE_COMPLETE, MCP_READ_RESOURCE_ERROR, MCP_RUN_AUTH_COMPLETE, MCP_RUN_AUTH_ERROR, MCP_SERVER_STATUS_COMPLETE, MCP_SERVER_STATUS_ERROR, MCP_START_SERVER_COMPLETE, MCP_START_SERVER_ERROR, MCP_STOP_SERVER_COMPLETE, MCP_STOP_SERVER_ERROR, MENU_ITEMS_DELETE, MENU_ITEMS_DELETE_COMPLETE, MENU_ITEMS_DELETE_ERROR, MENU_ITEMS_LIST, MENU_ITEMS_LIST_COMPLETE, MENU_ITEMS_LIST_ERROR, MENU_ITEMS_SAVE, MENU_ITEMS_SAVE_COMPLETE, MENU_ITEMS_SAVE_ERROR, MainMenu, MainMenuItem, MainMenuSection, McpServerPicker, MenuItemModel, MenuSlideOverlay, MergeCellsModal, MissingProviderPrompt, MockDashboardApi, PROVIDER_DELETE_COMPLETE, PROVIDER_DELETE_ERROR, PROVIDER_GET_COMPLETE, PROVIDER_GET_ERROR, PROVIDER_LIST_COMPLETE, PROVIDER_LIST_ERROR, PROVIDER_SAVE_COMPLETE, PROVIDER_SAVE_ERROR, PanelCode, PanelEditItem, PanelEditItemHandlers, PanelEditItemNotifications, ProviderContext, ProviderErrorBoundary, ProviderForm, ProviderSelector, SECURE_STORAGE_ENCRYPT_STRING, SECURE_STORAGE_ENCRYPT_STRING_COMPLETE, SECURE_STORAGE_ENCRYPT_STRING_ERROR, SECURE_STORE_ENCRYPTION_CHECK, SECURE_STORE_ENCRYPTION_CHECK_COMPLETE, SECURE_STORE_ENCRYPTION_CHECK_ERROR, SECURE_STORE_GET_DATA, SECURE_STORE_GET_DATA_COMPLETE, SECURE_STORE_GET_DATA_ERROR, SECURE_STORE_SET_DATA, SECURE_STORE_SET_DATA_COMPLETE, SECURE_STORE_SET_DATA_ERROR, SETTINGS_GET, SETTINGS_GET_COMPLETE, SETTINGS_GET_ERROR, SETTINGS_SAVE, SETTINGS_SAVE_COMPLETE, SETTINGS_SAVE_ERROR, SIDEBAR_WIDGET_TYPE, SettingsModel, SideMenu, SplitCellModal, THEME_DELETE, THEME_DELETE_COMPLETE, THEME_DELETE_ERROR, THEME_EXTRACT_FROM_URL, THEME_EXTRACT_FROM_URL_COMPLETE, THEME_EXTRACT_FROM_URL_ERROR, THEME_LIST, THEME_LIST_COMPLETE, THEME_LIST_ERROR, THEME_MAP_PALETTE, THEME_MAP_PALETTE_COMPLETE, THEME_MAP_PALETTE_ERROR, THEME_SAVE, THEME_SAVE_COMPLETE, THEME_SAVE_ERROR, ThemeApi, ThemeColorDots, ThemeManagerModal, ThemeModel, ThemeWrapper, WELCOME_STORAGE_KEY, WORKSPACE_DELETE, WORKSPACE_DELETE_COMPLETE, WORKSPACE_DELETE_ERROR, WORKSPACE_LIST, WORKSPACE_LIST_COMPLETE, WORKSPACE_LIST_ERROR, WORKSPACE_SAVE, WORKSPACE_SAVE_COMPLETE, WORKSPACE_SAVE_ERROR, WebDashboardApi, WelcomePrompt, Widget, WidgetApi, WidgetConfigPanel, WidgetContext, WidgetFactory, WidgetPopoutStage, WidgetProviderWrapper, WidgetSidebar, WizardCustomizeStep, WizardDiscoverStep, Workspace, WorkspaceContext, WorkspaceFooter, WorkspaceMenu, WorkspaceModel, addChildToLayoutItem, addItemToItemLayout, buildMcpConfigFromOverrides, canHaveChildren, changeDirectionForLayoutItem, createProviderRegistry, deriveFormFields, envMappingToRows, evaluateBundle, extractWidgetConfigs, formStateToMcpJson, formatFieldName, generateCustomTheme, generateHarmonyTheme, generateRandomTheme, generateThemeName, getBorderStyle, getChildrenForLayoutItem, getComponentInLayout, getContainerBorderColor, getContainerColor, getIndexOfLayoutChildrenForItem, getIndexOfLayoutItem, getLayoutItemById, getLayoutItemForWorkspace, getNearestParentWorkspace, getNextHighestId, getNextHighestItemInLayout, getNextHighestOrder, getNextHighestParentId, getNextLowestItemInLayout, getParentForLayoutItem, getParentWorkspaceForItem, getThemePresets, getUserConfigurableProviders, getWidgetsForWorkspace, getWorkspacesForWorkspace, headerTemplateToRows, isContainer, isLikelySecret, isMaxOrderForItem, isMinOrderForItem, isWidget, isWidgetResolvable, isWorkspace, layoutItemHasWorkspaceAsChild, loadWidgetBundle, mcpJsonToFormState, numChildrenForLayout, removeItemFromLayout, renderComponent, renderGridLayout, renderGridLayoutFlow, _renderLayout as renderLayout, renderLayoutMenu, replaceItemInLayout, resolveIcon, setHostModules, traverseParentTree, updateLayoutItem, updateParentForItem, useDashboard, useMcpDashServer, useMcpProvider, useNotifications, useProvider, useProviderClient, useScheduler, useWebSocketProvider, useWidgetEvents, useWidgetProviders, useWidgetSchedulerStatus, useWizardState, validateCellMerge, validateGridCell, validateGridPlacement, validateWidgetPlacement, widgetCountToTemplate, withProviderDetection };
|
|
50172
50107
|
//# sourceMappingURL=index.esm.js.map
|