@perses-dev/plugin-system 0.49.0 → 0.50.0-rc.0

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -22,17 +22,57 @@ Object.defineProperty(exports, "DatasourceEditorForm", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _PluginEditor = require("../PluginEditor");
 const _utils = require("../../utils");
 const _context = require("../../context");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function DatasourceEditorForm(props) {
-    const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
+    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
-    const [action, setAction] = (0, _react.useState)(initialAction);
     const titleAction = (0, _utils.getTitleAction)(action, isDraft);
     const submitText = (0, _utils.getSubmitText)(action, isDraft);
     const { datasourceEditorSchema } = (0, _context.useValidationSchemas)();
@@ -85,61 +125,15 @@ function DatasourceEditorForm(props) {
                             " Datasource"
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: action === 'read' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    disabled: isReadonly,
-                                    variant: "contained",
-                                    onClick: ()=>setAction('update'),
-                                    children: "Edit"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "error",
-                                    disabled: isReadonly,
-                                    variant: "outlined",
-                                    onClick: onDelete,
-                                    children: "Delete"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                                    orientation: "vertical",
-                                    flexItem: true,
-                                    sx: (theme)=>({
-                                            borderColor: theme.palette.grey['500'],
-                                            '&.MuiDivider-root': {
-                                                marginLeft: 2,
-                                                marginRight: 1
-                                            }
-                                        })
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: onClose,
-                                    children: "Close"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: form.handleSubmit(processForm),
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
                     })
                 ]
             }),

package/dist/cjs/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -49,7 +49,7 @@ const VALUE_OPTIONS = Object.entries(_model.LEGEND_VALUE_CONFIG).map(([id, confi
         ...config
     };
 });
-function LegendOptionsEditor({ value, onChange }) {
+function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
         const legendValue = checked === true ? {
@@ -161,7 +161,7 @@ function LegendOptionsEditor({ value, onChange }) {
                     disableClearable: true
                 })
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+            showValuesEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: "Values",
                 control: // For some reason, the inferred option type doesn't always seem to work
                 // quite right when `multiple` is true. Explicitly setting the generics

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -96,7 +96,7 @@ function PanelSpecEditor(props) {
                     maxHeight: "80vh",
                     value: panelDefinition,
                     onChange: (json)=>{
-                        field.onChange(json);
+                        field.onChange(JSON.parse(json));
                         onJSONChange(json);
                     }
                 })

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

@@ -431,10 +431,8 @@ function ListVariableEditorForm({ action, control }) {
         ]
     });
 }
-function VariableEditorForm(props) {
-    const { initialVariableDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
+function VariableEditorForm({ initialVariableDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete }) {
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
-    const [action, setAction] = (0, _react.useState)(initialAction);
     const titleAction = (0, _utils.getTitleAction)(action, isDraft);
     const submitText = (0, _utils.getSubmitText)(action, isDraft);
     const { variableEditorSchema } = (0, _context.useValidationSchemas)();
@@ -490,62 +488,15 @@ function VariableEditorForm(props) {
                             " Variable"
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: action === 'read' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    disabled: isReadonly,
-                                    variant: "contained",
-                                    onClick: ()=>setAction('update'),
-                                    children: "Edit"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "error",
-                                    disabled: isReadonly,
-                                    variant: "outlined",
-                                    onClick: onDelete,
-                                    children: "Delete"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                                    orientation: "vertical",
-                                    flexItem: true,
-                                    sx: (theme)=>({
-                                            borderColor: theme.palette.grey['500'],
-                                            '&.MuiDivider-root': {
-                                                marginLeft: 2,
-                                                marginRight: 1
-                                            }
-                                        })
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: onClose,
-                                    children: "Close"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    type: "submit",
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: form.handleSubmit(processForm),
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
                     })
                 ]
             }),

package/dist/components/CalculationSelector/CalculationSelector.d.ts

@@ -1,7 +1,8 @@
 import { CalculationType } from '@perses-dev/core';
+import { ReactElement } from 'react';
 export interface CalculationSelectorProps {
     value: CalculationType;
     onChange: (unit: CalculationType) => void;
 }
-export declare function CalculationSelector({ value, onChange }: CalculationSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalculationSelector({ value, onChange }: CalculationSelectorProps): ReactElement;
 //# sourceMappingURL=CalculationSelector.d.ts.map

package/dist/components/CalculationSelector/CalculationSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAU3F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAuBhF"}
+{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAUrC,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAuB/F"}

package/dist/components/CalculationSelector/CalculationSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps) {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption) => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"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,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AACpF,SAASC,mBAAmB,QAA4C,mBAAmB;AAG3F,MAAMC,eAAgDC,OAAOC,OAAO,CAACH,qBAAqBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASC,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,0BAA0B,CAACC,GAAYC;QAC3CH,SAASG,SAASP,EAAE;IACtB;IAEA,MAAMQ,aAAab,mBAAmB,CAACQ,MAAM;IAE7C,qBACE,KAACV;QACCgB,OAAM;QACNC,uBACE,KAAChB;YACCS,OAAO;gBACL,GAAGK,UAAU;gBACbR,IAAIG;YACN;YACAQ,SAASf;YACTQ,UAAUC;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps): ReactElement {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption): void => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"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,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AACpF,SAASC,mBAAmB,QAA4C,mBAAmB;AAI3F,MAAMC,eAAgDC,OAAOC,OAAO,CAACH,qBAAqBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASC,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,0BAA0B,CAACC,GAAYC;QAC3CH,SAASG,SAASP,EAAE;IACtB;IAEA,MAAMQ,aAAab,mBAAmB,CAACQ,MAAM;IAE7C,qBACE,KAACV;QACCgB,OAAM;QACNC,uBACE,KAAChB;YACCS,OAAO;gBACL,GAAGK,UAAU;gBACbR,IAAIG;YACN;YACAQ,SAASf;YACTQ,UAAUC;YACVO,gBAAgB;;;AAK1B"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.d.ts

@@ -1,14 +1,15 @@
 import { Action, DatasourceDefinition } from '@perses-dev/core';
-import { DispatchWithoutAction } from 'react';
+import { DispatchWithoutAction, ReactElement } from 'react';
 interface DatasourceEditorFormProps {
     initialDatasourceDefinition: DatasourceDefinition;
-    initialAction: Action;
+    action: Action;
     isDraft: boolean;
     isReadonly?: boolean;
+    onActionChange?: (action: Action) => void;
     onSave: (def: DatasourceDefinition) => void;
     onClose: DispatchWithoutAction;
     onDelete?: DispatchWithoutAction;
 }
-export declare function DatasourceEditorForm(props: DatasourceEditorFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement;
 export {};
 //# sourceMappingURL=DatasourceEditorForm.d.ts.map

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAY,MAAM,OAAO,CAAC;AAQxD,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAuOpE"}
+{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAc,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAQ7E,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA6MnF"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -10,19 +10,18 @@
 // 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, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
-import { useState } from 'react';
-import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { PluginEditor } from '../PluginEditor';
 import { getSubmitText, getTitleAction } from '../../utils';
 import { useValidationSchemas } from '../../context';
 export function DatasourceEditorForm(props) {
-    const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
+    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
-    const [action, setAction] = useState(initialAction);
     const titleAction = getTitleAction(action, isDraft);
     const submitText = getSubmitText(action, isDraft);
     const { datasourceEditorSchema } = useValidationSchemas();
@@ -75,61 +74,15 @@ export function DatasourceEditorForm(props) {
                             " Datasource"
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(Stack, {
-                        direction: "row",
-                        spacing: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: action === 'read' ? /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    disabled: isReadonly,
-                                    variant: "contained",
-                                    onClick: ()=>setAction('update'),
-                                    children: "Edit"
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "error",
-                                    disabled: isReadonly,
-                                    variant: "outlined",
-                                    onClick: onDelete,
-                                    children: "Delete"
-                                }),
-                                /*#__PURE__*/ _jsx(Divider, {
-                                    orientation: "vertical",
-                                    flexItem: true,
-                                    sx: (theme)=>({
-                                            borderColor: theme.palette.grey['500'],
-                                            '&.MuiDivider-root': {
-                                                marginLeft: 2,
-                                                marginRight: 1
-                                            }
-                                        })
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: onClose,
-                                    children: "Close"
-                                })
-                            ]
-                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: form.handleSubmit(processForm),
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ _jsx(FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
                     })
                 ]
             }),

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DispatchWithoutAction, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { useValidationSchemas } from '../../context';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n  const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel() {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\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\">{titleAction} Datasource</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","useValidationSchemas","DatasourceEditorForm","props","initialDatasourceDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport React, { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { useValidationSchemas } from '../../context';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n  const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\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\">{titleAction} Datasource</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","React","useState","DiscardChangesConfirmationDialog","FormActions","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","useValidationSchemas","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}

package/dist/components/DatasourceSelect.d.ts

@@ -1,5 +1,6 @@
 import { SelectProps } from '@mui/material';
 import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {
     value: DatasourceSelector;
@@ -11,11 +12,11 @@ export interface DatasourceSelectProps extends Omit<SelectProps<string>, Omitted
  * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for
  * the input deal with a `DatasourceSelector`.
  */
-export declare function DatasourceSelect(props: DatasourceSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatasourceSelect(props: DatasourceSelectProps): ReactElement;
 export declare function DatasourceName(props: {
     name: string;
     overridden?: boolean;
     overriding?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): ReactElement;
 export {};
 //# sourceMappingURL=DatasourceSelect.d.ts.map

package/dist/components/DatasourceSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAU,WAAW,EAAiE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAuF5D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,2CAajG"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAU,WAAW,EAAiE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAK9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACvF,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuF3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH"}

package/dist/components/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DatasourceSelect.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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps) {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = () => {};\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }) {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/DatasourceSelect.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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { Select, SelectProps, MenuItem, Stack, Divider, ListItemText, Chip, IconButton, Box } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { DatasourceSelectItemSelector, useListDatasourceSelectItems } from '../runtime';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface DatasourceSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelector;\n  onChange: (next: DatasourceSelector) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  // Rebuild the group of the value if not provided\n  const defaultValue = useMemo(() => {\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with\n  const menuItems = useMemo(() => {\n    return (data ?? []).map((itemGroup) => ({\n      group: itemGroup.group,\n      editLink: itemGroup.editLink,\n      items: itemGroup.items.map((item) => ({\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    }));\n  }, [data]);\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      {menuItems.map((menuItemGroup) => [\n        <Divider key={`${menuItemGroup.group}-divider`} />,\n        ...menuItemGroup.items.map((menuItem) => (\n          <MenuItem key={menuItem.value} value={menuItem.value} disabled={menuItem.overridden || !menuItem.saved}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName\n                  name={menuItem.name}\n                  overridden={menuItem.overridden}\n                  overriding={menuItem.overriding}\n                />\n              </ListItemText>\n              {!menuItem.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {menuItemGroup.group && menuItemGroup.group.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={menuItemGroup.group}\n                    size=\"small\"\n                    onDelete={menuItemGroup.editLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      menuItemGroup.editLink ? (\n                        <IconButton href={menuItemGroup.editLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </MenuItem>\n        )),\n      ])}\n    </Select>\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectorToOptionValue(selector: DatasourceSelectItemSelector): string {\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): DatasourceSelector {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n"],"names":["OpenInNewIcon","Select","MenuItem","Stack","Divider","ListItemText","Chip","IconButton","Box","useMemo","useListDatasourceSelectItems","DatasourceSelect","props","datasourcePluginKind","value","project","onChange","others","data","isLoading","defaultValue","group","flatMap","itemGroup","items","find","item","kind","selector","name","overridden","menuItems","map","editLink","overriding","saved","selectorToOptionValue","optionValue","handleChange","e","next","optionValueToSelector","target","fakeActionEvent","menuItemGroup","menuItem","disabled","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","label","size","onDelete","undefined","deleteIcon","href","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","words","split","Error"],"mappings":"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"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.d.ts

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
 import { LegendSpecOptions } from '../../model';
 export interface LegendOptionsEditorProps {
     value?: LegendSpecOptions;
     onChange: (legend?: LegendSpecOptions) => void;
+    showValuesEditor?: boolean;
 }
-export declare function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function LegendOptionsEditor({ value, onChange, showValuesEditor, }: LegendOptionsEditorProps): ReactElement;
 //# sourceMappingURL=LegendOptionsEditor.d.ts.map

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,aAAa,CAAC;AAqCrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAwIhF"}
+{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAGL,iBAAiB,EAMlB,MAAM,aAAa,CAAC;AAqCrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,gBAAuB,GACxB,EAAE,wBAAwB,GAAG,YAAY,CA0IzC"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -39,7 +39,7 @@ const VALUE_OPTIONS = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config])=>{
         ...config
     };
 });
-export function LegendOptionsEditor({ value, onChange }) {
+export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
         const legendValue = checked === true ? {
@@ -151,7 +151,7 @@ export function LegendOptionsEditor({ value, onChange }) {
                     disableClearable: true
                 })
             }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+            showValuesEditor && /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Values",
                 control: // For some reason, the inferred option type doesn't always seem to work
                 // quite right when `multiple` is true. Explicitly setting the generics