@perses-dev/dashboards 0.50.3 → 0.51.0-beta.1

package/dist/cjs/components/Variables/VariableList.js

@@ -50,14 +50,12 @@ function VariableList() {
     });
 }
 function VariableListItem({ spec, source }) {
-    var _ctx_state, _spec_display;
     const ctx = (0, _context.useVariableDefinitionAndState)(spec.name, source);
-    if ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) {
+    if (ctx.state?.overridden) {
         return null;
     }
-    var _ref, _ref1;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        display: ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
+        display: spec.display?.hidden ? 'none' : undefined,
         minWidth: `${_constants.MIN_VARIABLE_WIDTH}px`,
         maxWidth: `${_constants.MAX_VARIABLE_WIDTH}px`,
         flexShrink: 0,
@@ -65,6 +63,6 @@ function VariableListItem({ spec, source }) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variable.Variable, {
             name: spec.name,
             source: source
-        }, (_ref = spec.name + source) !== null && _ref !== void 0 ? _ref : '')
-    }, (_ref1 = spec.name + source) !== null && _ref1 !== void 0 ? _ref1 : '');
+        }, (spec.name + source) ?? '')
+    }, (spec.name + source) ?? '');
 }

package/dist/cjs/constants/styles.js

@@ -21,6 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    HEADER_ACTIONS_CONTAINER_NAME: function() {
+        return HEADER_ACTIONS_CONTAINER_NAME;
+    },
+    HEADER_MEDIUM_WIDTH: function() {
+        return HEADER_MEDIUM_WIDTH;
+    },
+    HEADER_SMALL_WIDTH: function() {
+        return HEADER_SMALL_WIDTH;
+    },
     MAX_VARIABLE_WIDTH: function() {
         return MAX_VARIABLE_WIDTH;
     },
@@ -40,3 +49,6 @@ const editButtonStyle = {
 };
 const MIN_VARIABLE_WIDTH = 120;
 const MAX_VARIABLE_WIDTH = 500;
+const HEADER_SMALL_WIDTH = 170;
+const HEADER_MEDIUM_WIDTH = 220;
+const HEADER_ACTIONS_CONTAINER_NAME = 'header-actions-container';

package/dist/cjs/constants/user-interface-text.js

@@ -64,5 +64,6 @@ const ARIA_LABEL_TEXT = {
     editPanel: (panelName)=>`edit panel ${panelName}`,
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
+    showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
     movePanel: (panelName)=>`move panel ${panelName}`
 };

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -66,13 +66,12 @@ function DashboardProvider(props) {
     ]);
     // load plugin to retrieve initial spec if default panel kind is defined
     const { defaultPluginKinds } = (0, _pluginsystem.usePluginRegistry)();
-    var _defaultPluginKinds_Panel;
-    const defaultPanelKind = (_defaultPluginKinds_Panel = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['Panel']) !== null && _defaultPluginKinds_Panel !== void 0 ? _defaultPluginKinds_Panel : '';
+    const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';
     const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', defaultPanelKind);
     const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     (0, _react.useEffect)(()=>{
         if (plugin === undefined) return;
-        const defaultPanelSpec = plugin.createInitialOptions();
+        const defaultPanelSpec = plugin.createInitialOptions ? plugin.createInitialOptions() : {};
         // set default panel kind, spec, and queries for add panel editor
         store.setState({
             initialValues: {
@@ -95,8 +94,8 @@ function initStore(props) {
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
     let { spec: { layouts, panels } } = dashboardResource;
     // Set fallbacks in case the frontend is used with a non-Perses backend
-    layouts = layouts !== null && layouts !== void 0 ? layouts : [];
-    panels = panels !== null && panels !== void 0 ? panels : {};
+    layouts = layouts ?? [];
+    panels = panels ?? {};
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
         return {
@@ -132,7 +131,7 @@ function initStore(props) {
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
-                    state.refreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+                    state.refreshInterval = refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
                     state.datasources = datasources;
                 // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
                 });

package/dist/cjs/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -27,7 +27,7 @@ function DashboardProviderWithQueryParams({ children, initialState }) {
     const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.StringParam);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProvider.DashboardProvider, {
         initialState: {
-            viewPanelRef: viewPanelRef !== null && viewPanelRef !== void 0 ? viewPanelRef : undefined,
+            viewPanelRef: viewPanelRef ?? undefined,
             setViewPanelRef: setViewPanelRef,
             ...initialState
         },

package/dist/cjs/context/DashboardProvider/common.js

@@ -43,8 +43,8 @@ function createPanelDefinition(defaultPanelKind, defaultPanelSpec) {
                 description: undefined
             },
             plugin: {
-                kind: defaultPanelKind !== null && defaultPanelKind !== void 0 ? defaultPanelKind : '',
-                spec: defaultPanelSpec !== null && defaultPanelSpec !== void 0 ? defaultPanelSpec : {}
+                kind: defaultPanelKind ?? '',
+                spec: defaultPanelSpec ?? {}
             },
             queries: []
         }

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -71,6 +71,9 @@ _export(exports, {
     },
     useViewPanel: function() {
         return useViewPanel;
+    },
+    useViewPanelGroup: function() {
+        return useViewPanelGroup;
     }
 });
 const _react = require("react");
@@ -186,8 +189,7 @@ function useDeletePanelGroupDialog() {
 function usePanel(panelGroupItemId) {
     const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
     const panel = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
-        var _store_panelGroups_panelGroupId;
-        const panelKey = (_store_panelGroups_panelGroupId = store.panelGroups[panelGroupId]) === null || _store_panelGroups_panelGroupId === void 0 ? void 0 : _store_panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
+        const panelKey = store.panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];
         if (panelKey === undefined) return;
         return store.panels[panelKey];
     }, [
@@ -231,10 +233,18 @@ const selectDashboardDuration = (state)=>state.duration;
 function useDashboardDuration() {
     return (0, _DashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
-const selectViewPanel = (state)=>state.getViewPanel();
+const selectViewPanel = (state)=>({
+        setViewPanel: state.setViewPanel,
+        getViewPanel: state.getViewPanel,
+        viewPanelId: state.getViewPanel()
+    });
 function useViewPanel() {
     return (0, _DashboardProvider.useDashboardStore)(selectViewPanel);
 }
+const selectViewPanelGroup = (state)=>state.getViewPanel();
+function useViewPanelGroup() {
+    return (0, _DashboardProvider.useDashboardStore)(selectViewPanelGroup);
+}
 const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog, openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog })=>({
         saveChangesConfirmationDialog,
         openSaveChangesConfirmationDialog,

package/dist/cjs/context/DashboardProvider/delete-panel-slice.js

@@ -60,11 +60,10 @@ function createDeletePanelSlice() {
                     throw new Error(`Could not find panel ${panelKey}`);
                 }
                 set((state)=>{
-                    var _panelGroup_title;
                     state.deletePanelDialog = {
                         panelGroupItemId: panelGroupItemId,
                         panelName: panel.spec.display.name,
-                        panelGroupName: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : ''
+                        panelGroupName: panelGroup.title ?? ''
                     };
                 });
             },

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -28,11 +28,10 @@ function createPanelEditorSlice() {
     return (set, get)=>({
             panelEditor: undefined,
             openEditPanel (panelGroupItemId) {
-                var _panelGroups_panelGroupId;
                 const { panels, panelGroups } = get();
                 // Figure out the panel key at that location
                 const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
-                const panelKey = (_panelGroups_panelGroupId = panelGroups[panelGroupId]) === null || _panelGroups_panelGroupId === void 0 ? void 0 : _panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
+                const panelKey = panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];
                 if (panelKey === undefined) {
                     throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
                 }
@@ -95,21 +94,19 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                var _get_initialValues;
                 // If a panel group isn't supplied, add to the first group or create a group if there aren't any
                 let newGroup = undefined;
-                panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
+                panelGroupId ??= get().panelGroupOrder[0];
                 if (panelGroupId === undefined) {
                     newGroup = (0, _panelgroupslice.createEmptyPanelGroup)();
                     newGroup.title = 'Panel Group';
                     panelGroupId = newGroup.id;
                 }
-                var _get_initialValues_panelDefinition;
                 const editorState = {
                     mode: 'create',
                     initialValues: {
                         groupId: panelGroupId,
-                        panelDefinition: (_get_initialValues_panelDefinition = (_get_initialValues = get().initialValues) === null || _get_initialValues === void 0 ? void 0 : _get_initialValues.panelDefinition) !== null && _get_initialValues_panelDefinition !== void 0 ? _get_initialValues_panelDefinition : (0, _common.createPanelDefinition)()
+                        panelDefinition: get().initialValues?.panelDefinition ?? (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
                         const name = next.panelDefinition.spec.display.name;

package/dist/cjs/context/DashboardProvider/panel-group-editor-slice.js

@@ -55,12 +55,11 @@ const createPanelGroupEditorSlice = (set, get)=>({
             if (existingGroup === undefined) {
                 throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
             }
-            var _existingGroup_title;
             // Create the editor state
             const editor = {
                 mode: 'Edit',
                 initialValues: {
-                    title: (_existingGroup_title = existingGroup.title) !== null && _existingGroup_title !== void 0 ? _existingGroup_title : '',
+                    title: existingGroup.title ?? '',
                     isCollapsed: existingGroup.isCollapsed
                 },
                 applyChanges (next) {

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -40,7 +40,7 @@ _export(exports, {
 const _core = require("@perses-dev/core");
 const _common = require("./common");
 function isPanelGroupItemIdEqual(a, b) {
-    return (a === null || a === void 0 ? void 0 : a.panelGroupId) === (b === null || b === void 0 ? void 0 : b.panelGroupId) && (a === null || a === void 0 ? void 0 : a.panelGroupItemLayoutId) === (b === null || b === void 0 ? void 0 : b.panelGroupItemLayoutId);
+    return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
 }
 function createPanelGroupSlice(layouts) {
     const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);
@@ -81,7 +81,6 @@ function convertLayoutsToPanelGroups(layouts) {
     const panelGroups = {};
     const panelGroupIdOrder = [];
     for (const layout of layouts){
-        var _layout_spec_display_collapse, _layout_spec_display, _layout_spec_display1;
         const itemLayouts = [];
         const itemPanelKeys = {};
         // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
@@ -100,8 +99,8 @@ function convertLayoutsToPanelGroups(layouts) {
         const panelGroupId = (0, _common.generateId)();
         panelGroups[panelGroupId] = {
             id: panelGroupId,
-            isCollapsed: ((_layout_spec_display = layout.spec.display) === null || _layout_spec_display === void 0 ? void 0 : (_layout_spec_display_collapse = _layout_spec_display.collapse) === null || _layout_spec_display_collapse === void 0 ? void 0 : _layout_spec_display_collapse.open) === false,
-            title: (_layout_spec_display1 = layout.spec.display) === null || _layout_spec_display1 === void 0 ? void 0 : _layout_spec_display1.title,
+            isCollapsed: layout.spec.display?.collapse?.open === false,
+            title: layout.spec.display?.title,
             itemLayouts,
             itemPanelKeys
         };

package/dist/cjs/context/DashboardProvider/view-panel-slice.js

@@ -55,8 +55,7 @@ function getViewPanelGroupId(panelGroups, panelGroupItemId, panelRef) {
 // Find the PanelGroupItemId of a Panel from a PanelRef
 function findPanelGroupItemIdOfPanelRef(panelGroups, panelRef) {
     for (const panelGroup of Object.values(panelGroups)){
-        var _panelGroup_itemPanelKeys;
-        const itemPanel = Object.entries((_panelGroup_itemPanelKeys = panelGroup.itemPanelKeys) !== null && _panelGroup_itemPanelKeys !== void 0 ? _panelGroup_itemPanelKeys : []).find(([_, value])=>value === panelRef);
+        const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value])=>value === panelRef);
         if (itemPanel) {
             const [key] = itemPanel;
             return {

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -27,9 +27,8 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
     const { projectName, datasourceApi, onCreate, children } = props;
     const [dashboardResource, setDashboardResource] = (0, _react.useState)(props.dashboardResource);
-    var _props_savedDatasources;
-    const [savedDatasources, setSavedDatasources] = (0, _react.useState)((_props_savedDatasources = props.savedDatasources) !== null && _props_savedDatasources !== void 0 ? _props_savedDatasources : {});
-    const project = projectName !== null && projectName !== void 0 ? projectName : dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.metadata.project;
+    const [savedDatasources, setSavedDatasources] = (0, _react.useState)(props.savedDatasources ?? {});
+    const project = projectName ?? dashboardResource?.metadata.project;
     const { getPlugin, listPluginMetadata } = (0, _pluginsystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
@@ -99,26 +98,26 @@ function DatasourceStoreProvider(props) {
         getPlugin,
         onCreate
     ]);
-    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginKind)=>{
+    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginName)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
             listPluginMetadata([
                 'Datasource'
             ]),
-            project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
-            datasourceApi.listGlobalDatasources(datasourcePluginKind)
+            project ? datasourceApi.listDatasources(project, datasourcePluginName) : [],
+            datasourceApi.listGlobalDatasources(datasourcePluginName)
         ]);
         // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource
-        const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.kind === datasourcePluginKind);
+        const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.spec.name === datasourcePluginName);
         if (datasourcePluginMetadata === undefined) {
-            throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);
+            throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginName}'`);
         }
         // Get helper for computing results properly
-        const { results, addItem } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.display.name);
+        const { results, addItem } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.spec.display.name);
         // Start with dashboard datasources with the highest precedence
-        if (dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) {
+        if (dashboardResource?.spec.datasources) {
             for(const selectorName in dashboardResource.spec.datasources){
                 const spec = dashboardResource.spec.datasources[selectorName];
-                if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
+                if (spec === undefined || spec.plugin.kind !== datasourcePluginName) continue;
                 const saved = selectorName in savedDatasources;
                 addItem({
                     spec,
@@ -151,8 +150,7 @@ function DatasourceStoreProvider(props) {
         return results;
     });
     const getLocalDatasources = (0, _react.useCallback)(()=>{
-        var _dashboardResource_spec_datasources;
-        return (_dashboardResource_spec_datasources = dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) !== null && _dashboardResource_spec_datasources !== void 0 ? _dashboardResource_spec_datasources : {};
+        return dashboardResource?.spec.datasources ?? {};
     }, [
         dashboardResource
     ]);
@@ -238,8 +236,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     const groupIndices = {};
     let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.
     const addItem = ({ spec, selectorName, selectorGroup: group, editLink, saved })=>{
-        var _spec_display;
-        group = group !== null && group !== void 0 ? group : '';
+        group = group ?? '';
         // Ensure the default group is always present as soon as an item is added.
         if (isFirst) {
             results.push({
@@ -247,9 +244,8 @@ function findDashboardDatasource(dashboardDatasources, selector) {
                 items: []
             });
         }
-        var _groupIndices_group;
         // Create the group if necessary
-        let selectItemGroup = results[(_groupIndices_group = groupIndices[group]) !== null && _groupIndices_group !== void 0 ? _groupIndices_group : -1];
+        let selectItemGroup = results[groupIndices[group] ?? -1];
         if (!selectItemGroup) {
             groupIndices[group] = currentGroupIndex;
             selectItemGroup = {
@@ -262,9 +258,8 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         }
         // Add item to the group
         const isOverridden = usedNames.has(selectorName);
-        var _spec_display_name;
         selectItemGroup.items.push({
-            name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : selectorName,
+            name: spec.display?.name ?? selectorName,
             overridden: isOverridden,
             saved,
             selector: {
@@ -293,9 +288,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         // At the end, we make sure the overriding item(s) is well flagged so
         if (isOverridden) {
             for(let i = explicitDefaultAdded ? 1 : 0; i < currentGroupIndex; i++){
-                var _results_i;
-                var _results_i_items;
-                ((_results_i_items = (_results_i = results[i]) === null || _results_i === void 0 ? void 0 : _results_i.items) !== null && _results_i_items !== void 0 ? _results_i_items : []).filter((item)=>item.selector.name === selectorName).forEach((item)=>{
+                (results[i]?.items ?? []).filter((item)=>item.selector.name === selectorName).forEach((item)=>{
                     item.overriding = true;
                 });
             }

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -53,17 +53,12 @@ const _traditional = require("zustand/traditional");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
 const _shallow = require("zustand/shallow");
-const _immer1 = /*#__PURE__*/ _interop_require_default(require("immer"));
+const _immer1 = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryparams = require("./query-params");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 /**
  * Context object for {@link VariableDefinitionStore}.
  */ const VariableDefinitionStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
@@ -79,7 +74,7 @@ function useVariableDefinitionStates(variableNames) {
     return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
         const varStates = {};
         // Collect values of local variables, from the variable state
-        const names = variableNames !== null && variableNames !== void 0 ? variableNames : s.variableDefinitions.map((value)=>value.spec.name);
+        const names = variableNames ?? s.variableDefinitions.map((value)=>value.spec.name);
         names.forEach((name)=>{
             const varState = s.variableState.get({
                 name
@@ -112,12 +107,11 @@ function useVariableDefinitionStates(variableNames) {
 function useVariableDefinitionAndState(name, source) {
     const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
-        var _s_externalVariableDefinitions_find;
         const state = s.variableState.get({
             name,
             source
         });
-        const definitions = source ? (_s_externalVariableDefinitions_find = s.externalVariableDefinitions.find((v)=>v.source === source)) === null || _s_externalVariableDefinitions_find === void 0 ? void 0 : _s_externalVariableDefinitions_find.definitions : s.variableDefinitions;
+        const definitions = source ? s.externalVariableDefinitions.find((v)=>v.source === source)?.definitions : s.variableDefinitions;
         const definition = (definitions || []).find((v)=>v.spec.name === name);
         return {
             state,
@@ -163,12 +157,10 @@ function PluginProvider({ children, builtinVariables }) {
             if (v.value === _core.DEFAULT_ALL_VALUE) {
                 const definition = (0, _utils.findVariableDefinitionByName)(name, definitions, externalDefinitions);
                 // If the variable is a list variable and has a custom all value, then use that value instead
-                if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.customAllValue) {
+                if (definition?.kind === 'ListVariable' && definition.spec.customAllValue) {
                     v.value = definition.spec.customAllValue;
                 } else {
-                    var _v_options;
-                    var _v_options_map;
-                    v.value = (_v_options_map = (_v_options = v.options) === null || _v_options === void 0 ? void 0 : _v_options.map((o)=>o.value)) !== null && _v_options_map !== void 0 ? _v_options_map : null;
+                    v.value = v.options?.map((o)=>o.value) ?? null;
                 }
             }
             contextValues[name] = v;
@@ -247,7 +239,7 @@ function PluginProvider({ children, builtinVariables }) {
                 }
             }
         ];
-        builtinVariables === null || builtinVariables === void 0 ? void 0 : builtinVariables.forEach((def)=>result.push(def));
+        builtinVariables?.forEach((def)=>result.push(def));
         return result;
     }, [
         absoluteTimeRange,
@@ -330,17 +322,17 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
             setVariableDefaultValues: ()=>{
                 const variableDefinitions = get().variableDefinitions;
                 const variableState = get().variableState;
-                const updatedVariables = (0, _immer1.default)(variableDefinitions, (draft)=>{
+                const updatedVariables = (0, _immer1.produce)(variableDefinitions, (draft)=>{
                     draft.forEach((variable, index)=>{
                         const name = variable.spec.name;
                         if (variable.kind === 'ListVariable') {
                             const currentVariable = variableState.get({
                                 name
                             });
-                            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
+                            if (currentVariable?.value !== undefined) {
                                 draft[index] = {
                                     kind: 'ListVariable',
-                                    spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
+                                    spec: (0, _immer1.produce)(variable.spec, (specDraft)=>{
                                         specDraft.defaultValue = currentVariable.value;
                                     })
                                 };
@@ -349,11 +341,11 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                             const currentVariable = variableState.get({
                                 name
                             });
-                            const currentVariableValue = typeof (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) === 'string' ? currentVariable.value : '';
-                            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
+                            const currentVariableValue = typeof currentVariable?.value === 'string' ? currentVariable.value : '';
+                            if (currentVariable?.value !== undefined) {
                                 draft[index] = {
                                     kind: 'TextVariable',
-                                    spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
+                                    spec: (0, _immer1.produce)(variable.spec, (specDraft)=>{
                                         specDraft.value = currentVariableValue;
                                     })
                                 };

package/dist/cjs/context/VariableProvider/hydrationUtils.js

@@ -32,17 +32,14 @@ function hydrateVariableState(variable, initialValue) {
     };
     switch(variable.kind){
         case 'TextVariable':
-            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
+            varState.value = initialValue ?? variable.spec.value;
             break;
         case 'ListVariable':
             varState.options = [];
-            var _ref;
-            varState.value = (_ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.defaultValue) !== null && _ref !== void 0 ? _ref : null;
+            varState.value = initialValue ?? variable.spec.defaultValue ?? null;
             // TODO: smarter fallbacks for defaultValue when allowAllValue is true
             if (varState.options.length > 0 && !varState.value) {
-                var _varState_options_;
-                var _varState_options__value;
-                const firstOptionValue = (_varState_options__value = (_varState_options_ = varState.options[0]) === null || _varState_options_ === void 0 ? void 0 : _varState_options_.value) !== null && _varState_options__value !== void 0 ? _varState_options__value : null;
+                const firstOptionValue = varState.options[0]?.value ?? null;
                 if (firstOptionValue !== null) {
                     varState.value = variable.spec.allowMultiple ? [
                         firstOptionValue

package/dist/cjs/context/VariableProvider/utils.js

@@ -43,7 +43,7 @@ function checkSavedDefaultVariableStatus(definitions, varState) {
             const currentVariable = varState.get({
                 name
             });
-            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== null && (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== savedVariable.spec.defaultValue) {
+            if (currentVariable?.value !== null && currentVariable?.value !== savedVariable.spec.defaultValue) {
                 modifiedVariableNames.push(name);
                 isSavedVariableModified = true;
             }
@@ -51,7 +51,7 @@ function checkSavedDefaultVariableStatus(definitions, varState) {
             const currentVariable = varState.get({
                 name
             });
-            const currentVariableValue = typeof (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) === 'string' ? currentVariable.value : '';
+            const currentVariableValue = typeof currentVariable?.value === 'string' ? currentVariable.value : '';
             if (savedVariable.spec.value !== currentVariableValue) {
                 modifiedVariableNames.push(name);
                 isSavedVariableModified = true;

package/dist/cjs/test/datasource-provider.js

@@ -32,7 +32,7 @@ _export(exports, {
     }
 });
 const _dashboardprovider = require("./dashboard-provider");
-const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
+const prometheusDemoUrl = 'https://prometheus.demo.prometheus.io';
 const prometheusDemo = {
     kind: 'GlobalDatasource',
     metadata: {

package/dist/cjs/test/plugin-registry.js

@@ -38,11 +38,16 @@ const FakeTimeSeriesPlugin = {
             content: FakeTimeSeriesChartOptionEditor
         }
     ],
-    createInitialOptions: ()=>({})
+    createInitialOptions: ()=>({}),
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ]
 };
 const MOCK_TIME_SERIES_PANEL = {
-    pluginType: 'Panel',
-    kind: 'TimeSeriesChart',
+    kind: 'Panel',
+    spec: {
+        name: 'TimeSeriesChart'
+    },
     plugin: FakeTimeSeriesPlugin
 };
 const MOCK_PLUGINS = [

package/dist/cjs/test/render.js

@@ -21,15 +21,15 @@ Object.defineProperty(exports, "renderWithContext", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _react1 = require("@testing-library/react");
-const _reactrouterdom = require("react-router-dom");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reactquery = require("@tanstack/react-query");
+const _react = require("@testing-library/react");
 const _history = require("history");
+const _react1 = require("react");
+const _reactrouterdom = require("react-router-dom");
 const _usequeryparams = require("use-query-params");
 const _reactrouter6 = require("use-query-params/adapters/react-router-6");
-const _reactquery = require("@tanstack/react-query");
-const _components = require("@perses-dev/components");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../context");
 const _test = require("../test");
 const _pluginregistry = require("./plugin-registry");
@@ -37,11 +37,11 @@ const _pluginregistry = require("./plugin-registry");
  * Workaround for React router upgrade type errors.
  * More details: https://stackoverflow.com/a/69948457/17575201
  */ const CustomRouter = ({ history, children })=>{
-    const [state, setState] = (0, _react.useState)({
+    const [state, setState] = (0, _react1.useState)({
         action: history.action,
         location: history.location
     });
-    (0, _react.useLayoutEffect)(()=>history.listen(setState), [
+    (0, _react1.useLayoutEffect)(()=>history.listen(setState), [
         history
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.Router, {
@@ -61,7 +61,8 @@ function renderWithContext(ui, options, history) {
             }
         }
     });
-    const customHistory = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+    const customHistory = history ?? (0, _history.createMemoryHistory)();
+    const mockRegistry = (0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS);
     const BaseRender = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(CustomRouter, {
             history: customHistory,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
@@ -76,7 +77,8 @@ function renderWithContext(ui, options, history) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                             chartsTheme: _components.testChartsTheme,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
-                                ...(0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS),
+                                pluginLoader: mockRegistry.pluginLoader,
+                                defaultPluginKinds: mockRegistry.defaultPluginKinds,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
                                     ..._test.defaultDatasourceProps,
                                     children: ui
@@ -87,5 +89,5 @@ function renderWithContext(ui, options, history) {
                 })
             })
         });
-    return (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
 }

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -28,7 +28,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isCreating } = props;
+    const { dashboardResource, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isCreating } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -49,8 +49,7 @@ const DashboardApp = (props)=>{
     const onEditButtonClick = ()=>{
         setEditMode(true);
         setOriginalDashboard(dashboard);
-        var _dashboard_spec_datasources;
-        setSavedDatasources((_dashboard_spec_datasources = dashboard.spec.datasources) !== null && _dashboard_spec_datasources !== void 0 ? _dashboard_spec_datasources : {});
+        setSavedDatasources(dashboard.spec.datasources ?? {});
     };
     const onCancelButtonClick = ()=>{
         // check if dashboard has been modified
@@ -82,6 +81,8 @@ const DashboardApp = (props)=>{
                 initialVariableIsSticky: initialVariableIsSticky,
                 onSave: onSave,
                 isReadonly: isReadonly,
+                isVariableEnabled: isVariableEnabled,
+                isDatasourceEnabled: isDatasourceEnabled,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),