@perses-dev/plugin-system 0.49.0-rc.1 → 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/cjs/runtime/DataQueriesProvider/DataQueriesProvider.js

@@ -38,6 +38,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _timeseriesqueries = require("../time-series-queries");
 const _tracequeries = require("../trace-queries");
+const _UsageMetricsProvider = require("../UsageMetricsProvider");
 const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
@@ -82,6 +83,7 @@ function DataQueriesProvider(props) {
             }
         };
     });
+    const usageMetrics = (0, _UsageMetricsProvider.useUsageMetrics)();
     // Filter definitions for time series query and other future query plugins
     const timeSeriesQueries = queryDefinitions.filter((definition)=>definition.kind === 'TimeSeriesQuery');
     const timeSeriesResults = (0, _timeseriesqueries.useTimeSeriesQueries)(timeSeriesQueries, options, queryOptions);
@@ -99,6 +101,17 @@ function DataQueriesProvider(props) {
             ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
             ...(0, _model.transformQueryResults)(traceResults, traceQueries)
         ];
+        if (queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) {
+            for (const result of mergedQueryResults){
+                if (!result.isLoading && !result.isFetching && !result.error) {
+                    usageMetrics.markQuery(result.definition, 'success');
+                } else if (result.error) {
+                    usageMetrics.markQuery(result.definition, 'error');
+                } else {
+                    usageMetrics.markQuery(result.definition, 'pending');
+                }
+            }
+        }
         return {
             queryResults: mergedQueryResults,
             isFetching: mergedQueryResults.some((result)=>result.isFetching),
@@ -111,7 +124,9 @@ function DataQueriesProvider(props) {
         timeSeriesResults,
         traceQueries,
         traceResults,
-        refetchAll
+        refetchAll,
+        queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled,
+        usageMetrics
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(DataQueriesContext.Provider, {
         value: ctx,

package/dist/cjs/runtime/UsageMetricsProvider.js

@@ -0,0 +1,99 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    UsageMetricsContext: function() {
+        return UsageMetricsContext;
+    },
+    UsageMetricsProvider: function() {
+        return UsageMetricsProvider;
+    },
+    useUsageMetrics: function() {
+        return useUsageMetrics;
+    },
+    useUsageMetricsContext: function() {
+        return useUsageMetricsContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _core = require("@perses-dev/core");
+const _react = require("react");
+const UsageMetricsContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+const useUsageMetricsContext = ()=>{
+    return (0, _react.useContext)(UsageMetricsContext);
+};
+const useUsageMetrics = ()=>{
+    const ctx = useUsageMetricsContext();
+    return {
+        markQuery: (definition, newState)=>{
+            if (ctx === undefined) {
+                return;
+            }
+            const definitionKey = JSON.stringify(definition);
+            if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
+                // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
+                return;
+            }
+            if (ctx.pendingQueries.get(definitionKey) !== newState) {
+                ctx.pendingQueries.set(definitionKey, newState);
+                if (newState === 'error') {
+                    ctx.renderErrorCount += 1;
+                }
+                const allDone = [
+                    ...ctx.pendingQueries.values()
+                ].every((p)=>p !== 'pending');
+                if (ctx.renderDurationMs === 0 && allDone) {
+                    ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
+                    submitMetrics(ctx);
+                }
+            }
+        }
+    };
+};
+const submitMetrics = async (stats)=>{
+    await (0, _core.fetch)('/api/v1/view', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            project: stats.project,
+            dashboard: stats.dashboard,
+            render_time: stats.renderDurationMs / 1000,
+            render_errors: stats.renderErrorCount
+        })
+    });
+};
+const UsageMetricsProvider = ({ project, dashboard, children })=>{
+    const ctx = {
+        project: project,
+        dashboard: dashboard,
+        renderErrorCount: 0,
+        startRenderTime: Date.now(),
+        renderDurationMs: 0,
+        pendingQueries: new Map()
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(UsageMetricsContext.Provider, {
+        value: ctx,
+        children: children
+    });
+};

package/dist/cjs/runtime/index.js

@@ -23,6 +23,7 @@ _export_star(require("./time-series-queries"), exports);
 _export_star(require("./trace-queries"), exports);
 _export_star(require("./DataQueriesProvider"), exports);
 _export_star(require("./QueryCountProvider"), exports);
+_export_star(require("./UsageMetricsProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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
                     })
                 ]
             }),