@perses-dev/dashboards 0.46.0 → 0.47.0-rc0

package/dist/cjs/context/{TemplateVariableProvider/TemplateVariableProvider.js → VariableProvider/VariableProvider.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -21,32 +21,29 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TemplateVariableProvider: function() {
-        return TemplateVariableProvider;
+    VariableProvider: function() {
+        return VariableProvider;
     },
-    TemplateVariableProviderWithQueryParams: function() {
-        return TemplateVariableProviderWithQueryParams;
+    VariableProviderWithQueryParams: function() {
+        return VariableProviderWithQueryParams;
     },
-    useTemplateExternalVariableDefinitions: function() {
-        return useTemplateExternalVariableDefinitions;
+    useExternalVariableDefinitions: function() {
+        return useExternalVariableDefinitions;
     },
-    useTemplateVariable: function() {
-        return useTemplateVariable;
+    useVariableDefinitionActions: function() {
+        return useVariableDefinitionActions;
     },
-    useTemplateVariableActions: function() {
-        return useTemplateVariableActions;
+    useVariableDefinitionAndState: function() {
+        return useVariableDefinitionAndState;
     },
-    useTemplateVariableDefinitions: function() {
-        return useTemplateVariableDefinitions;
+    useVariableDefinitionStates: function() {
+        return useVariableDefinitionStates;
     },
-    useTemplateVariableStore: function() {
-        return useTemplateVariableStore;
+    useVariableDefinitionStoreCtx: function() {
+        return useVariableDefinitionStoreCtx;
     },
-    useTemplateVariableStoreCtx: function() {
-        return useTemplateVariableStoreCtx;
-    },
-    useTemplateVariableValues: function() {
-        return useTemplateVariableValues;
+    useVariableDefinitions: function() {
+        return useVariableDefinitions;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -66,18 +63,20 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TemplateVariableStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
-function useTemplateVariableStoreCtx() {
-    const context = (0, _react.useContext)(TemplateVariableStoreContext);
+/**
+ * Context object for {@link VariableDefinitionStore}.
+ */ const VariableDefinitionStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useVariableDefinitionStoreCtx() {
+    const context = (0, _react.useContext)(VariableDefinitionStoreContext);
     if (!context) {
-        throw new Error('TemplateVariableStoreContext not initialized');
+        throw new Error('VariableStoreContext not initialized');
     }
     return context;
 }
-function useTemplateVariableValues(variableNames) {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitionStates(variableNames) {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
-        const vars = {};
+        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);
         names.forEach((name)=>{
@@ -87,7 +86,7 @@ function useTemplateVariableValues(variableNames) {
             if (!varState || varState.overridden) {
                 return;
             }
-            vars[name] = varState;
+            varStates[name] = varState;
         });
         // Collect values of external variables, from the variable state
         s.externalVariableDefinitions.forEach((d)=>{
@@ -101,16 +100,16 @@ function useTemplateVariableValues(variableNames) {
                 if (!varState || varState.overridden) {
                     return;
                 }
-                vars[name] = varState;
+                varStates[name] = varState;
             });
         });
-        return vars;
+        return varStates;
     }, (left, right)=>{
         return JSON.stringify(left) === JSON.stringify(right);
     });
 }
-function useTemplateVariable(name, source) {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitionAndState(name, source) {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
         var _s_externalVariableDefinitions_find;
         const state = s.variableState.get({
@@ -125,8 +124,8 @@ function useTemplateVariable(name, source) {
         };
     });
 }
-function useTemplateVariableActions() {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitionActions() {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
         return {
             setVariableValue: s.setVariableValue,
@@ -138,22 +137,18 @@ function useTemplateVariableActions() {
         };
     });
 }
-function useTemplateVariableDefinitions() {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitions() {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>s.variableDefinitions);
 }
-function useTemplateExternalVariableDefinitions() {
-    const store = useTemplateVariableStoreCtx();
+function useExternalVariableDefinitions() {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>s.externalVariableDefinitions);
 }
-function useTemplateVariableStore() {
-    const store = useTemplateVariableStoreCtx();
-    return (0, _zustand.useStore)(store);
-}
 function PluginProvider({ children, builtinVariables }) {
-    const originalValues = useTemplateVariableValues();
-    const definitions = useTemplateVariableDefinitions();
-    const externalDefinitions = useTemplateExternalVariableDefinitions();
+    const originalValues = useVariableDefinitionStates();
+    const definitions = useVariableDefinitions();
+    const externalDefinitions = useExternalVariableDefinitions();
     const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
@@ -261,7 +256,7 @@ function PluginProvider({ children, builtinVariables }) {
         value: {
             variables: allBuiltinVariables
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TemplateVariableContext.Provider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
             value: {
                 state: values
             },
@@ -269,16 +264,16 @@ function PluginProvider({ children, builtinVariables }) {
         })
     });
 }
-function createTemplateVariableSrvStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
+function createVariableDefinitionStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
     const initialParams = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>({
-            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
+            variableState: (0, _hydrationUtils.hydrateVariableDefinitionStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
             externalVariableDefinitions: externalVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
-                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams, externalVariableDefinitions);
+                    state.variableState = (0, _hydrationUtils.hydrateVariableDefinitionStates)(definitions, initialParams, externalVariableDefinitions);
                 }, false, '[Variables] setVariableDefinitions' // Used for action name in Redux devtools
                 );
             },
@@ -376,28 +371,28 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions = [], exter
         }))));
     return store;
 }
-function TemplateVariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariables = [] }) {
-    const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
+function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
+    const [store] = (0, _react.useState)(createVariableDefinitionStore({
         initialVariableDefinitions,
         externalVariableDefinitions
     }));
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
-            builtinVariables: builtinVariables,
+            builtinVariables: builtinVariableDefinitions,
             children: children
         })
     });
 }
-function TemplateVariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariables = [] }) {
+function VariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions: builtinVariables = [] }) {
     const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
     const queryParams = (0, _queryparams.useVariableQueryParams)(allVariableDefs);
-    const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
+    const [store] = (0, _react.useState)(createVariableDefinitionStore({
         initialVariableDefinitions,
         externalVariableDefinitions,
         queryParams
     }));
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
             builtinVariables: builtinVariables,

package/dist/cjs/context/{TemplateVariableProvider → VariableProvider}/hydrationUtils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,16 +14,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "hydrateTemplateVariableStates", {
+Object.defineProperty(exports, "hydrateVariableDefinitionStates", {
     enumerable: true,
     get: function() {
-        return hydrateTemplateVariableStates;
+        return hydrateVariableDefinitionStates;
     }
 });
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
-// TODO: move to TemplateVariableProvider/utils.ts
-function hydrateTemplateVariableState(variable, initialValue) {
+// TODO: move to VariableProvider/utils.ts
+function hydrateVariableState(variable, initialValue) {
     const varState = {
         value: null,
         loading: false,
@@ -63,7 +63,7 @@ function hydrateTemplateVariableState(variable, initialValue) {
     }
     return varState;
 }
-function hydrateTemplateVariableStates(localDefinitions, initialValues, externalDefinitions = []) {
+function hydrateVariableDefinitionStates(localDefinitions, initialValues, externalDefinitions = []) {
     const state = new _pluginsystem.VariableStoreStateMap();
     // Collect the names used by local definitions
     let overridingNames = {};
@@ -83,7 +83,7 @@ function hydrateTemplateVariableStates(localDefinitions, initialValues, external
                 source,
                 name
             }, {
-                ...hydrateTemplateVariableState(v, initialValue),
+                ...hydrateVariableState(v, initialValue),
                 overridden: !!overridingNames[name]
             });
             overridingNames[name] = true;
@@ -99,7 +99,7 @@ function hydrateTemplateVariableStates(localDefinitions, initialValues, external
         state.set({
             name
         }, {
-            ...hydrateTemplateVariableState(v, initialValue),
+            ...hydrateVariableState(v, initialValue),
             overriding: !!overriddenNames[name]
         });
     });

package/dist/cjs/{validation → context/VariableProvider}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./panel"), exports);
+_export_star(require("./VariableProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/context/{TemplateVariableProvider → VariableProvider}/query-params.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/context/{TemplateVariableProvider → VariableProvider}/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/context/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -16,7 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
-_export_star(require("./TemplateVariableProvider"), exports);
+_export_star(require("./VariableProvider"), exports);
 _export_star(require("./useDashboard"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/context/useDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -22,7 +22,7 @@ Object.defineProperty(exports, "useDashboard", {
 });
 const _core = require("@perses-dev/core");
 const _DashboardProvider = require("./DashboardProvider");
-const _TemplateVariableProvider = require("./TemplateVariableProvider");
+const _VariableProvider = require("./VariableProvider");
 function useDashboard() {
     const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, ttl })=>({
             panels,
@@ -37,8 +37,8 @@ function useDashboard() {
             datasources,
             ttl
         }));
-    const { setVariableDefinitions } = (0, _TemplateVariableProvider.useTemplateVariableActions)();
-    const variables = (0, _TemplateVariableProvider.useTemplateVariableDefinitions)();
+    const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const variables = (0, _VariableProvider.useVariableDefinitions)();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
     const dashboard = kind === 'Dashboard' ? {
         kind,

package/dist/cjs/stories/decorators/{WithTemplateVariables.js → WithVariables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,23 +14,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithTemplateVariables", {
+Object.defineProperty(exports, "WithVariables", {
     enumerable: true,
     get: function() {
-        return WithTemplateVariables;
+        return WithVariables;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _dashboards = require("@perses-dev/dashboards");
 // Type guard because storybook types parameters as `any`
-function isWithTemplateVariableParameter(parameter) {
+function isWithVariableParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const WithTemplateVariables = (Story, context)=>{
-    const initParameter = context.parameters.withTemplateVariables;
-    const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : undefined;
+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;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.VariableProvider, {
         ...props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./constants"), exports);
 _export_star(require("./WithDashboard"), exports);
 _export_star(require("./WithDatasourceStore"), exports);
-_export_star(require("./WithTemplateVariables"), exports);
+_export_star(require("./WithVariables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -88,10 +88,10 @@ function ViewDashboard(props) {
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
                 initialTimeRange: initialTimeRange,
                 initialRefreshInterval: initialRefreshInterval,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProviderWithQueryParams, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.VariableProviderWithQueryParams, {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
-                    builtinVariables: builtinVariables,
+                    builtinVariableDefinitions: builtinVariables,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -16,7 +16,7 @@ import { AppBar, Box, IconButton, Stack, useMediaQuery, useScrollTrigger, useThe
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
 import { TimeRangeControls } from '@perses-dev/plugin-system';
-import { TemplateVariableList } from '../Variables';
+import { VariableList } from '../Variables';
 export function DashboardStickyToolbar(props) {
     const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
     const scrollTrigger = useScrollTrigger({
@@ -69,7 +69,7 @@ export function DashboardStickyToolbar(props) {
                         },
                         gap: 1,
                         children: [
-                            /*#__PURE__*/ _jsx(TemplateVariableList, {}),
+                            /*#__PURE__*/ _jsx(VariableList, {}),
                             props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
                                 style: {
                                     width: 'fit-content',

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { TemplateVariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <TemplateVariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls></TimeRangeControls>\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","TemplateVariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,oBAAoB,QAAQ,eAAe;AAOpD,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACpC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACpC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}

package/dist/components/Datasources/DatasourceEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAgC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMhF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,2CAyJA"}
+{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAgC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMhF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,2CA2JA"}

package/dist/components/Datasources/DatasourceEditor.js

@@ -15,7 +15,7 @@ import { Box, Button, IconButton, Stack, Table, TableBody, TableCell, TableConta
 import AddIcon from 'mdi-material-ui/Plus';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import TrashIcon from 'mdi-material-ui/TrashCan';
-import { DatasourceEditorForm } from '@perses-dev/plugin-system';
+import { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import { useDiscardChangesConfirmationDialog } from '../../context';
@@ -69,20 +69,22 @@ export function DatasourceEditor(props) {
         });
     };
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: datasourceEdit ? /*#__PURE__*/ _jsx(DatasourceEditorForm, {
-            initialDatasourceDefinition: datasourceEdit,
-            initialAction: datasourceFormAction,
-            isDraft: true,
-            onSave: (name, spec)=>{
-                setDatasources((draft)=>{
-                    delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
-                    draft[name] = spec;
+        children: datasourceEdit ? /*#__PURE__*/ _jsx(ValidationProvider, {
+            children: /*#__PURE__*/ _jsx(DatasourceEditorForm, {
+                initialDatasourceDefinition: datasourceEdit,
+                initialAction: datasourceFormAction,
+                isDraft: true,
+                onSave: (def)=>{
+                    setDatasources((draft)=>{
+                        delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
+                        draft[def.name] = def.spec;
+                        setDatasourceEdit(null);
+                    });
+                },
+                onClose: ()=>{
                     setDatasourceEdit(null);
-                });
-            },
-            onClose: ()=>{
-                setDatasourceEdit(null);
-            }
+                }
+            })
         }) : /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsxs(Box, {

package/dist/components/Datasources/DatasourceEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm } from '@perses-dev/plugin-system';\nimport { useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}) {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = () => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string) => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = () => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string) => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <DatasourceEditorForm\n          initialDatasourceDefinition={datasourceEdit}\n          initialAction={datasourceFormAction}\n          isDraft={true}\n          onSave={(name: string, spec: DatasourceSpec) => {\n            setDatasources((draft) => {\n              delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n              draft[name] = spec;\n              setDatasourceEdit(null);\n            });\n          }}\n          onClose={() => {\n            setDatasourceEdit(null);\n          }}\n        />\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","initialAction","isDraft","onSave","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}) {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = () => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string) => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = () => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string) => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            initialAction={datasourceFormAction}\n            isDraft={true}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","initialAction","isDraft","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}

package/dist/components/EmptyDashboard/EmptyDashboard.js

@@ -22,7 +22,7 @@ const DEFAULT_DESCRIPTION = {
     view: 'This dashboard is currently empty. Get started by clicking the edit button.'
 };
 // Constants from specifics in designs to make the default messaging look good.
-const CONTAINER_WIDTH = '450px';
+const CONTAINER_WIDTH = '500px';
 const PRIMARY_CONTENT_WIDTH = '289px';
 const COMMON_BUTTON_PROPS = {
     variant: 'outlined',