@perses-dev/dashboards 0.41.1 → 0.42.1

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -19,6 +19,7 @@ import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
 import { TimeRangeControls } from '../TimeRangeControls';
 import { EditVariablesButton } from '../Variables';
+import { EditDatasourcesButton } from '../Datasources';
 import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
 import { SaveDashboardButton } from '../SaveDashboardButton';
@@ -39,7 +40,8 @@ export const DashboardToolbar = (props)=>{
             "data-testid": testId,
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
-                    p: 2,
+                    px: 2,
+                    py: 1.5,
                     display: "flex",
                     sx: {
                         backgroundColor: (theme)=>theme.palette.primary.main + '30'
@@ -48,8 +50,8 @@ export const DashboardToolbar = (props)=>{
                         dashboardTitle,
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
+                            gap: 1,
+                            ml: "auto",
                             children: [
                                 isReadonly && /*#__PURE__*/ _jsx(Alert, {
                                     severity: 'warning',
@@ -77,7 +79,7 @@ export const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2)
+                        padding: (theme)=>theme.spacing(1, 2, 0, 2)
                     },
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
@@ -99,10 +101,10 @@ export const DashboardToolbar = (props)=>{
                                     direction: "row",
                                     spacing: 1,
                                     ml: 1,
-                                    mb: 1,
                                     whiteSpace: "nowrap",
                                     children: [
                                         /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
                                         /*#__PURE__*/ _jsx(AddPanelButton, {}),
                                         /*#__PURE__*/ _jsx(AddGroupButton, {})
                                     ]
@@ -111,7 +113,6 @@ export const DashboardToolbar = (props)=>{
                                     direction: "row",
                                     spacing: 1,
                                     ml: 1,
-                                    mb: 1,
                                     children: [
                                         /*#__PURE__*/ _jsx(TimeRangeControls, {}),
                                         /*#__PURE__*/ _jsx(DownloadButton, {}),
@@ -124,8 +125,9 @@ export const DashboardToolbar = (props)=>{
                 })
             ]
         }) : /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 1,
-            padding: 2,
+            gap: 1,
+            mx: 2,
+            mt: 1.5,
             "data-testid": testId,
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
@@ -150,7 +152,7 @@ export const DashboardToolbar = (props)=>{
                     ]
                 }),
                 /*#__PURE__*/ _jsx(Box, {
-                    paddingY: 2,
+                    mt: 1,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
                         children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            <Stack ml=\"auto\" direction=\"row\" flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'} justifyContent=\"end\">\n              <Stack direction=\"row\" spacing={1} ml={1} mb={1} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <Stack direction=\"row\" spacing={1} ml={1} mb={1}>\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanLg","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","ml","flexWrap","justifyContent","mb","whiteSpace","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box px={2} py={1.5} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 0, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            <Stack ml=\"auto\" direction=\"row\" flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'} justifyContent=\"end\">\n              <Stack direction=\"row\" spacing={1} ml={1} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <EditDatasourcesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <Stack direction=\"row\" spacing={1} ml={1}>\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack gap={1} mx={2} mt={1.5} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box mt={1}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanLg","dashboardTitle","variant","testId","spacing","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","flexWrap","justifyContent","whiteSpace","mx","mt","marginLeft"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DatasourceSpec } from '@perses-dev/core';
+export declare function DatasourceEditor(props: {
+    datasources: Record<string, DatasourceSpec>;
+    onChange: (datasources: Record<string, DatasourceSpec>) => void;
+    onCancel: () => void;
+}): JSX.Element;
+//# sourceMappingURL=DatasourceEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAM1D,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,eAyJA"}

package/dist/components/Datasources/DatasourceEditor.js

@@ -0,0 +1,223 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, IconButton, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+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 { useState } from 'react';
+import { useImmer } from 'use-immer';
+import { useDiscardChangesConfirmationDialog } from '../../context';
+export function DatasourceEditor(props) {
+    const [datasources, setDatasources] = useImmer(props.datasources);
+    const [datasourceFormAction, setDatasourceFormAction] = useState('update');
+    const [datasourceEdit, setDatasourceEdit] = useState(null);
+    const defaultSpec = {
+        default: false,
+        plugin: {
+            // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed
+            kind: 'PrometheusDatasource',
+            spec: {}
+        }
+    };
+    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
+    const handleCancel = ()=>{
+        if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    props.onCancel();
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            props.onCancel();
+        }
+    };
+    const removeDatasource = (name)=>{
+        setDatasources((draft)=>{
+            delete draft[name];
+        });
+    };
+    const addDatasource = ()=>{
+        setDatasourceFormAction('create');
+        setDatasourceEdit({
+            name: 'NewDatasource',
+            spec: defaultSpec
+        });
+    };
+    const editDatasource = (name)=>{
+        setDatasourceFormAction('update');
+        var _datasources_name;
+        setDatasourceEdit({
+            name: name,
+            spec: (_datasources_name = datasources[name]) !== null && _datasources_name !== void 0 ? _datasources_name : defaultSpec
+        });
+    };
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: datasourceEdit ? /*#__PURE__*/ _jsx(DatasourceEditorForm, {
+            initialName: datasourceEdit.name,
+            initialSpec: datasourceEdit.spec,
+            initialAction: datasourceFormAction,
+            isDraft: true,
+            onSave: (name, spec)=>{
+                setDatasources((draft)=>{
+                    draft[name] = spec;
+                    setDatasourceEdit(null);
+                });
+            },
+            onClose: ()=>{
+                setDatasourceEdit(null);
+            }
+        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: "Edit Dashboard Datasources"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    disabled: props.datasources === datasources,
+                                    variant: "contained",
+                                    onClick: ()=>{
+                                        props.onChange(datasources);
+                                    },
+                                    children: "Apply"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: 2,
+                    sx: {
+                        overflowY: 'scroll'
+                    },
+                    children: /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 2,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsx(TableContainer, {
+                                    children: /*#__PURE__*/ _jsxs(Table, {
+                                        sx: {
+                                            minWidth: 650
+                                        },
+                                        "aria-label": "table of datasources",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Description"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: "Actions"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableBody, {
+                                                children: Object.entries(datasources).map(([name, spec])=>{
+                                                    var _spec_display;
+                                                    var _spec_display_description;
+                                                    return /*#__PURE__*/ _jsxs(TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: name
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: spec.plugin.kind
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: (_spec_display_description = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    whiteSpace: 'nowrap'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>editDatasource(name),
+                                                                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>removeDatasource(name),
+                                                                        children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }, name);
+                                                })
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addDatasource,
+                                        children: "Add Datasource"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=DatasourceEditor.js.map

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

@@ -0,0 +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, 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<{ name: string; spec: DatasourceSpec } | 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          initialName={datasourceEdit.name}\n          initialSpec={datasourceEdit.spec}\n          initialAction={datasourceFormAction}\n          isDraft={true}\n          onSave={(name: string, spec: DatasourceSpec) => {\n            setDatasources((draft) => {\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","initialName","initialSpec","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":"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,SACEA,GAAG,EACHC,MAAM,EACNC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,aAAa,uBAAuB;AAC3C,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,eAAe,2BAA2B;AAEjD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,mCAAmC,QAAQ,gBAAgB;AAEpE,OAAO,SAASC,iBAAiBC,KAIhC;IACC,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAASG,MAAMC;IACrD,MAAM,CAACE,sBAAsBC,wBAAwB,GAAGR,SAAiB;IACzE,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGV,SAAwD;IACpG,MAAMW,cAA8B;QAClCC,SAAS;QACTC,QAAQ;YACN,uFAAuF;YACvFC,MAAM;YACNC,MAAM,CAAC;QACT;IACF;IAEA,MAAM,EAAEC,qCAAoC,EAAEC,sCAAqC,EAAE,GACnFf;IAEF,MAAMgB,eAAe;QACnB,IAAIC,KAAKC,UAAUhB,MAAMC,iBAAiBc,KAAKC,UAAUf,cAAc;YACrEW,qCAAqC;gBACnCK,kBAAkB;oBAChBJ;oBACAb,MAAMkB;gBACR;gBACAA,UAAU;oBACRL;gBACF;gBACAM,aACE;YACJ;QACF,OAAO;YACLnB,MAAMkB;QACR;IACF;IAEA,MAAME,mBAAmB,CAACC;QACxBnB,eAAe,CAACoB;YACd,OAAOA,KAAK,CAACD,KAAK;QACpB;IACF;IAEA,MAAME,gBAAgB;QACpBnB,wBAAwB;QACxBE,kBAAkB;YAChBe,MAAM;YACNV,MAAMJ;QACR;IACF;IAEA,MAAMiB,iBAAiB,CAACH;QACtBjB,wBAAwB;YAGhBH;QAFRK,kBAAkB;YAChBe,MAAMA;YACNV,MAAMV,CAAAA,oBAAAA,WAAW,CAACoB,KAAK,cAAjBpB,+BAAAA,oBAAqBM;QAC7B;IACF;IAEA,qBACE;kBACGF,+BACC,KAACV;YACC8B,aAAapB,eAAegB;YAC5BK,aAAarB,eAAeM;YAC5BgB,eAAexB;YACfyB,SAAS;YACTC,QAAQ,CAACR,MAAcV;gBACrBT,eAAe,CAACoB;oBACdA,KAAK,CAACD,KAAK,GAAGV;oBACdL,kBAAkB;gBACpB;YACF;YACAwB,SAAS;gBACPxB,kBAAkB;YACpB;2BAGF;;8BACE,MAACzB;oBACCkD,IAAI;wBACFC,SAAS;wBACTC,YAAY;wBACZC,SAAS,CAACC,QAAUA,MAAMC,QAAQ,GAAG;wBACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,QAAQC,QAAQ,CAAC;oBAC/D;;sCAEA,KAAChD;4BAAWiD,SAAQ;sCAAK;;sCACzB,MAACxD;4BAAMyD,WAAU;4BAAML,SAAS;4BAAGM,YAAW;;8CAC5C,KAAC5D;oCACC6D,UAAU3C,MAAMC,gBAAgBA;oCAChCuC,SAAQ;oCACRI,SAAS;wCACP5C,MAAM6C,SAAS5C;oCACjB;8CACD;;8CAGD,KAACnB;oCAAOgE,OAAM;oCAAYN,SAAQ;oCAAWI,SAAS9B;8CAAc;;;;;;8BAKxE,KAACjC;oBAAIqD,SAAS;oBAAGH,IAAI;wBAAEgB,WAAW;oBAAS;8BACzC,cAAA,KAAC/D;wBAAMoD,SAAS;kCACd,cAAA,MAACpD;4BAAMoD,SAAS;;8CACd,KAAChD;8CACC,cAAA,MAACH;wCAAM8C,IAAI;4CAAEiB,UAAU;wCAAI;wCAAGC,cAAW;;0DACvC,KAAC5D;0DACC,cAAA,MAACC;;sEACC,KAACH;sEAAU;;sEACX,KAACA;sEAAU;;sEACX,KAACA;sEAAU;;sEACX,KAACA;4DAAU+D,OAAM;sEAAQ;;;;;0DAG7B,KAAChE;0DACEiE,OAAOC,QAAQnD,aAAaoD,IAAI,CAAC,CAAChC,MAAMV,KAAK;wDAO5BA;wDAAAA;oDANhB,qBACE,MAACrB;;0EACC,KAACH;gEAAUmE,WAAU;gEAAKC,OAAM;gEAAMxB,IAAI;oEAAEyB,YAAY;gEAAO;0EAC5DnC;;0EAEH,KAAClC;0EAAWwB,KAAKF,OAAOC;;0EACxB,KAACvB;0EAAWwB,CAAAA,4BAAAA,CAAAA,gBAAAA,KAAKqB,qBAALrB,2BAAAA,KAAAA,IAAAA,cAAcQ,yBAAdR,uCAAAA,4BAA6B;;0EACzC,MAACxB;gEAAU+D,OAAM;gEAAQnB,IAAI;oEAAE0B,YAAY;gEAAS;;kFAClD,KAAC1E;wEAAW6D,SAAS,IAAMpB,eAAeH;kFACxC,cAAA,KAAC5B;;kFAEH,KAACV;wEAAW6D,SAAS,IAAMxB,iBAAiBC;kFAC1C,cAAA,KAAC3B;;;;;uDAXQ2B;gDAgBnB;;;;;8CAIN,KAACxC;oCAAImD,SAAQ;8CACX,cAAA,KAAClD;wCACC0D,SAAQ;wCACRkB,yBAAW,KAAClE;wCACZuC,IAAI;4CAAEW,YAAY;wCAAO;wCACzBE,SAASrB;kDACV;;;;;;;;;;AAWnB"}

package/dist/components/Datasources/EditDatasourcesButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function EditDatasourcesButton(): JSX.Element;
+//# sourceMappingURL=EditDatasourcesButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditDatasourcesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"names":[],"mappings":";AAuBA,wBAAgB,qBAAqB,gBA2EpC"}

package/dist/components/Datasources/EditDatasourcesButton.js

@@ -0,0 +1,96 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import { Drawer, InfoTooltip } from '@perses-dev/components';
+import { useDatasourceStore } from '@perses-dev/plugin-system';
+import { TOOLTIP_TEXT } from '../../constants';
+import { useDashboard } from '../../context';
+import { DatasourceEditor } from './DatasourceEditor';
+export function EditDatasourcesButton() {
+    const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);
+    const { getLocalDatasources , setLocalDatasources , getSavedDatasources , setSavedDatasources  } = useDatasourceStore();
+    const localDatasources = getLocalDatasources();
+    const savedDatasources = getSavedDatasources();
+    const { dashboard , setDashboard  } = useDashboard();
+    const openDatasourceEditor = ()=>{
+        setIsDatasourceEditorOpen(true);
+    };
+    const closeDatasourceEditor = ()=>{
+        setIsDatasourceEditorOpen(false);
+    };
+    const handleChangeDatasources = (datasources)=>{
+        // Calculates the new list of datasources that are allowed to be used.
+        const newSavedDatasources = Object.keys(datasources).filter((key)=>{
+            var _datasources_key, _datasources_key_plugin, _savedDatasources_key, _savedDatasources_key_plugin, _datasources_key1, _datasources_key_plugin1, _datasources_key_plugin_spec, _savedDatasources_key1, _savedDatasources_key_plugin1, _savedDatasources_key_plugin_spec;
+            var _datasources_key_plugin_spec1;
+            // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their
+            // proxy is the same as what we have saved.
+            const isDirect = 'directUrl' in ((_datasources_key_plugin_spec1 = (_datasources_key = datasources[key]) === null || _datasources_key === void 0 ? void 0 : (_datasources_key_plugin = _datasources_key.plugin) === null || _datasources_key_plugin === void 0 ? void 0 : _datasources_key_plugin.spec) !== null && _datasources_key_plugin_spec1 !== void 0 ? _datasources_key_plugin_spec1 : {});
+            var _savedDatasources_key_plugin_spec1;
+            const isSavedProxy = !isDirect && !('directUrl' in ((_savedDatasources_key_plugin_spec1 = (_savedDatasources_key = savedDatasources[key]) === null || _savedDatasources_key === void 0 ? void 0 : (_savedDatasources_key_plugin = _savedDatasources_key.plugin) === null || _savedDatasources_key_plugin === void 0 ? void 0 : _savedDatasources_key_plugin.spec) !== null && _savedDatasources_key_plugin_spec1 !== void 0 ? _savedDatasources_key_plugin_spec1 : {})) && ((_datasources_key1 = datasources[key]) === null || _datasources_key1 === void 0 ? void 0 : (_datasources_key_plugin1 = _datasources_key1.plugin) === null || _datasources_key_plugin1 === void 0 ? void 0 : (_datasources_key_plugin_spec = _datasources_key_plugin1.spec) === null || _datasources_key_plugin_spec === void 0 ? void 0 : _datasources_key_plugin_spec.proxy) === ((_savedDatasources_key1 = savedDatasources[key]) === null || _savedDatasources_key1 === void 0 ? void 0 : (_savedDatasources_key_plugin1 = _savedDatasources_key1.plugin) === null || _savedDatasources_key_plugin1 === void 0 ? void 0 : (_savedDatasources_key_plugin_spec = _savedDatasources_key_plugin1.spec) === null || _savedDatasources_key_plugin_spec === void 0 ? void 0 : _savedDatasources_key_plugin_spec.proxy);
+            return isDirect || isSavedProxy;
+        }).reduce((obj, key)=>{
+            obj[key] = datasources[key];
+            return obj;
+        }, {});
+        setDashboard({
+            ...dashboard,
+            spec: {
+                ...dashboard.spec,
+                datasources: datasources
+            }
+        });
+        setSavedDatasources(newSavedDatasources);
+        setLocalDatasources(datasources);
+        setIsDatasourceEditorOpen(false);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.editDatasources,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                    onClick: openDatasourceEditor,
+                    "aria-label": TOOLTIP_TEXT.editDatasources,
+                    variant: "text",
+                    color: "primary",
+                    sx: {
+                        whiteSpace: 'nowrap',
+                        minWidth: 'auto'
+                    },
+                    children: "Datasources"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                isOpen: isDatasourceEditorOpen,
+                onClose: closeDatasourceEditor,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
+                "data-testid": "datasource-editor",
+                children: /*#__PURE__*/ _jsx(DatasourceEditor, {
+                    datasources: localDatasources,
+                    onCancel: closeDatasourceEditor,
+                    onChange: handleChangeDatasources
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=EditDatasourcesButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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 { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton() {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>) => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce((obj, key) => {\n        obj[key] = datasources[key] as DatasourceSpec;\n\n        return obj;\n      }, {} as Record<string, DatasourceSpec>);\n\n    setDashboard({\n      ...dashboard,\n      spec: {\n        ...dashboard.spec,\n        datasources: datasources,\n      },\n    });\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"mappings":"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"}

package/dist/components/Datasources/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EditDatasourcesButton';
+export * from './DatasourceEditor';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/index.ts"],"names":[],"mappings":"AAaA,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC"}

package/dist/components/Datasources/index.js

@@ -0,0 +1,16 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './EditDatasourcesButton';
+export * from './DatasourceEditor';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Datasources/index.ts"],"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\nexport * from './EditDatasourcesButton';\nexport * from './DatasourceEditor';\n"],"names":[],"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,cAAc,0BAA0B;AACxC,cAAc,qBAAqB"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Alert, FormControl } from '@mui/material';
 import { Dialog, JSONEditor } from '@perses-dev/components';
-import { useTimeRange } from '@perses-dev/plugin-system';
+import { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';
 import { useEditJsonDialog } from '../../context/DashboardProvider';
 import { useDashboard } from '../../context/useDashboard';
 export const EditJsonDialog = (props)=>{
@@ -41,6 +41,7 @@ const EditJsonDialogForm = (props)=>{
     const { closeEditJsonDialog  } = useEditJsonDialog();
     const { setTimeRange , setRefreshInterval  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
+    const { setLocalDatasources  } = useDatasourceStore();
     const [draftDashboard, setDraftDashboard] = useState(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
@@ -50,8 +51,18 @@ const EditJsonDialogForm = (props)=>{
         });
         var _draftDashboard_spec_refreshInterval;
         setRefreshInterval((_draftDashboard_spec_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _draftDashboard_spec_refreshInterval !== void 0 ? _draftDashboard_spec_refreshInterval : '0s');
+        var _draftDashboard_spec_datasources;
+        setLocalDatasources((_draftDashboard_spec_datasources = draftDashboard.spec.datasources) !== null && _draftDashboard_spec_datasources !== void 0 ? _draftDashboard_spec_datasources : {});
         closeEditJsonDialog();
     };
+    const completeDraftDashboard = (dashboard)=>{
+        try {
+            const json = JSON.parse(dashboard !== null && dashboard !== void 0 ? dashboard : '{}');
+            setDraftDashboard(json);
+        } catch (e) {
+        // do nothing
+        }
+    };
     return /*#__PURE__*/ _jsxs(Dialog.Form, {
         onSubmit: handleApply,
         children: [
@@ -73,7 +84,7 @@ const EditJsonDialogForm = (props)=>{
                             minHeight: "300px",
                             maxHeight: "70vh",
                             value: draftDashboard,
-                            onChange: (value)=>setDraftDashboard(value)
+                            onChange: (value)=>completeDraftDashboard(value)
                         })
                     })
                 ]