@perses-dev/dashboards 0.50.1 → 0.51.0-beta.0

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

@@ -51,8 +51,7 @@ function _interop_require_default(obj) {
     };
 }
 function getVariableLabelByKind(kind) {
-    var _VARIABLE_TYPES_find;
-    return (_VARIABLE_TYPES_find = _pluginsystem.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || _VARIABLE_TYPES_find === void 0 ? void 0 : _VARIABLE_TYPES_find.label;
+    return _pluginsystem.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)?.label;
 }
 function getValidation(variableDefinitions) {
     const errors = [];
@@ -268,16 +267,13 @@ function VariableEditor(props) {
                                                         })
                                                     }),
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                                        children: variableDefinitions.map((v, idx)=>{
-                                                            var _v_spec_display, _v_spec_display1;
-                                                            var _getVariableLabelByKind, _v_spec_display_description;
-                                                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                        children: variableDefinitions.map((v, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                         component: "th",
                                                                         scope: "row",
                                                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                                                            checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                            checked: v.spec.display?.hidden !== true,
                                                                             onChange: (e)=>{
                                                                                 toggleVariableVisibility(idx, e.target.checked);
                                                                             }
@@ -297,10 +293,10 @@ function VariableEditor(props) {
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
-                                                                        children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
+                                                                        children: getVariableLabelByKind(v.kind) ?? v.kind
                                                                     }),
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
-                                                                        children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                                        children: v.spec.display?.description ?? ''
                                                                     }),
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
                                                                         align: "right",
@@ -329,8 +325,7 @@ function VariableEditor(props) {
                                                                         ]
                                                                     })
                                                                 ]
-                                                            }, v.spec.name);
-                                                        })
+                                                            }, v.spec.name))
                                                     })
                                                 ]
                                             })
@@ -430,16 +425,13 @@ function VariableEditor(props) {
                                                                 })
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                                                children: extVar.definitions.map((v)=>{
-                                                                    var _v_spec_display, _v_spec_display1;
-                                                                    var _getVariableLabelByKind, _v_spec_display_description;
-                                                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                                children: extVar.definitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                         children: [
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                                 component: "th",
                                                                                 scope: "row",
                                                                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                                                                    checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                                    checked: v.spec.display?.hidden !== true,
                                                                                     disabled: true
                                                                                 })
                                                                             }),
@@ -458,10 +450,10 @@ function VariableEditor(props) {
                                                                                 })
                                                                             }),
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
-                                                                                children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
+                                                                                children: getVariableLabelByKind(v.kind) ?? v.kind
                                                                             }),
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
-                                                                                children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                                                children: v.spec.display?.description ?? ''
                                                                             }),
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
                                                                                 align: "right",
@@ -495,8 +487,7 @@ function VariableEditor(props) {
                                                                                 ]
                                                                             })
                                                                         ]
-                                                                    }, v.spec.name);
-                                                                })
+                                                                    }, v.spec.name))
                                                             })
                                                         ]
                                                     })
@@ -522,13 +513,13 @@ function VariableName(props) {
     const { name, state } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,
-            !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            !state?.overridden && `${name} `,
+            !state?.overridden && state?.overriding && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 fontWeight: "normal",
                 color: (theme)=>theme.palette.primary.main,
                 children: "(overriding)"
             }),
-            (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            state?.overridden && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         color: (theme)=>theme.palette.grey[500],

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

@@ -32,7 +32,6 @@ const TOOLTIP_TEXT = {
     // Toolbar buttons
     addPanel: 'Add panel',
     addGroup: 'Add panel group',
-    downloadDashboard: 'Download JSON',
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',
@@ -65,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

@@ -78,7 +78,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
@@ -111,12 +111,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,
@@ -162,12 +161,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;
@@ -246,7 +243,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,
@@ -336,7 +333,7 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                             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)=>{
@@ -348,8 +345,8 @@ 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)=>{

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/stories/decorators/WithDashboard.js

@@ -30,7 +30,7 @@ function isWithDashboardParameter(parameter) {
 const WithDashboard = (Story, context)=>{
     const initParameter = context.parameters.withDashboard;
     const parameter = isWithDashboardParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DashboardProvider, {
         initialState: {
             dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE

package/dist/cjs/stories/decorators/WithDatasourceStore.js

@@ -30,7 +30,7 @@ function isWithDatasourceStoreParameter(parameter) {
 const WithDatasourceStore = (Story, context)=>{
     const initParameter = context.parameters.withDatasourceStore;
     const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DatasourceStoreProvider, {
         ..._test.defaultDatasourceProps,
         ...props,

package/dist/cjs/stories/decorators/WithVariables.js

@@ -29,7 +29,7 @@ function isWithVariableParameter(parameter) {
 const WithVariables = (Story, context)=>{
     const initParameter = context.parameters.withVariables;
     const parameter = isWithVariableParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.VariableProvider, {
         ...props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})