@perses-dev/plugin-system 0.37.1 → 0.38.0

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

@@ -0,0 +1,29 @@
+// 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
+});
+_exportStar(require("./VariableEditorForm"), exports);
+_exportStar(require("./VariablePreview"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -0,0 +1,102 @@
+// 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, {
+    getInitialState: ()=>getInitialState,
+    getVariableDefinitionFromState: ()=>getVariableDefinitionFromState
+});
+function getInitialState(initialVariableDefinition) {
+    var ref, ref1;
+    var _value;
+    const textVariableFields = {
+        value: (_value = initialVariableDefinition.spec.value) !== null && _value !== void 0 ? _value : ''
+    };
+    const listVariableFields = {
+        allowMultiple: false,
+        allowAll: false,
+        capturing_regexp: undefined,
+        plugin: {
+            kind: '',
+            spec: {}
+        },
+        customAllValue: undefined
+    };
+    if (initialVariableDefinition.kind === 'ListVariable') {
+        var _allow_all_value;
+        listVariableFields.allowMultiple = (_allow_all_value = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value !== void 0 ? _allow_all_value : false;
+        var _allow_all_value1;
+        listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
+        listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;
+        listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+        listVariableFields.customAllValue = initialVariableDefinition.spec.custom_all_value;
+    }
+    return {
+        name: initialVariableDefinition.spec.name,
+        title: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.name,
+        kind: initialVariableDefinition.kind,
+        description: (ref1 = initialVariableDefinition.spec.display) === null || ref1 === void 0 ? void 0 : ref1.description,
+        listVariableFields,
+        textVariableFields
+    };
+}
+function getVariableDefinitionFromState(state) {
+    const { name , title , kind , description  } = state;
+    let display = title ? {
+        name: title
+    } : undefined;
+    if (description) {
+        if (display) {
+            display.description = description;
+        } else {
+            // Name is mandatory if you want to add a description, autofilled by the metadata name if undefined
+            display = {
+                name: name,
+                description: description
+            };
+        }
+    }
+    if (kind === 'TextVariable') {
+        return {
+            kind,
+            spec: {
+                name,
+                display,
+                ...state.textVariableFields
+            }
+        };
+    }
+    if (kind === 'ListVariable') {
+        return {
+            kind,
+            spec: {
+                name,
+                display,
+                allow_multiple: state.listVariableFields.allowMultiple,
+                allow_all_value: state.listVariableFields.allowAll,
+                capturing_regexp: state.listVariableFields.capturing_regexp,
+                plugin: state.listVariableFields.plugin,
+                custom_all_value: state.listVariableFields.customAllValue
+            }
+        };
+    }
+    throw new Error(`Unknown variable kind: ${kind}`);
+}

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

@@ -0,0 +1,29 @@
+// 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
+});
+_exportStar(require("./variable-model"), exports);
+_exportStar(require("./VariableEditorForm"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/Variables/variable-model.js

@@ -0,0 +1,117 @@
+// 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 name1 in all)Object.defineProperty(target, name1, {
+        enumerable: true,
+        get: all[name1]
+    });
+}
+_export(exports, {
+    filterVariableList: ()=>filterVariableList,
+    useListVariablePluginValues: ()=>useListVariablePluginValues,
+    getVariableValuesKey: ()=>getVariableValuesKey,
+    VARIABLE_TYPES: ()=>VARIABLE_TYPES
+});
+const _reactQuery = require("@tanstack/react-query");
+const _runtime = require("../../runtime");
+function filterVariableList(data, capturedRegexp) {
+    const result = [];
+    const filteredSet = new Set();
+    for (const variableValue of data){
+        const matches = variableValue.value.matchAll(capturedRegexp);
+        let concat = '';
+        for (const match of matches){
+            for(let i = 1; i < match.length; i++){
+                const m = match[i];
+                if (m !== undefined) {
+                    concat = `${concat}${m}`;
+                }
+            }
+        }
+        if (concat !== '' && !filteredSet.has(concat)) {
+            // like that we are avoiding to have duplicating variable value
+            filteredSet.add(concat);
+            result.push({
+                label: variableValue.label,
+                value: concat
+            });
+        }
+    }
+    return result;
+}
+function useListVariablePluginValues(definition) {
+    const { data: variablePlugin  } = (0, _runtime.usePlugin)('Variable', definition.spec.plugin.kind);
+    const datasourceStore = (0, _runtime.useDatasourceStore)();
+    const allVariables = (0, _runtime.useTemplateVariableValues)();
+    const { absoluteTimeRange: timeRange , refreshKey  } = (0, _runtime.useTimeRange)();
+    const variablePluginCtx = {
+        timeRange,
+        datasourceStore,
+        variables: allVariables
+    };
+    const spec = definition.spec.plugin.spec;
+    const capturingRegexp = definition.spec.capturing_regexp !== undefined ? new RegExp(definition.spec.capturing_regexp, 'g') : undefined;
+    let dependsOnVariables;
+    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
+        dependsOnVariables = dependencies.variables;
+    }
+    const variables = (0, _runtime.useTemplateVariableValues)(dependsOnVariables);
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    return (0, _reactQuery.useQuery)([
+        name,
+        definition,
+        variablesValueKey,
+        timeRange,
+        refreshKey
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables,
+            timeRange
+        }));
+        if (resp === undefined) {
+            return [];
+        }
+        if (capturingRegexp === undefined) {
+            return resp.data;
+        }
+        return filterVariableList(resp.data, capturingRegexp);
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+}
+function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
+}
+const VARIABLE_TYPES = [
+    {
+        label: 'List',
+        kind: 'ListVariable'
+    },
+    {
+        label: 'Text',
+        kind: 'TextVariable'
+    }
+];

package/dist/cjs/components/index.js

@@ -24,6 +24,7 @@ _exportStar(require("./PluginKindSelect"), exports);
 _exportStar(require("./PluginRegistry"), exports);
 _exportStar(require("./PluginSpecEditor"), exports);
 _exportStar(require("./TimeSeriesQueryEditor"), exports);
+_exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/constants/index.js

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./user-interface-text"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/constants/user-interface-text.js

@@ -0,0 +1,25 @@
+// 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
+});
+Object.defineProperty(exports, "TOOLTIP_TEXT", {
+    enumerable: true,
+    get: ()=>TOOLTIP_TEXT
+});
+const TOOLTIP_TEXT = {
+    // Variable editor buttons
+    refreshVariableValues: 'Refresh values',
+    copyVariableValues: 'Copy values to clipboard'
+};

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./components"), exports);
+_exportStar(require("./constants"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./runtime"), exports);
 _exportStar(require("./test-utils"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAqBpD"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA4BpD"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -24,7 +24,7 @@ import { usePluginEditor } from './plugin-editor-api';
  * `usePluginEditor` hook that powers this component.
  */ export function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value , pluginType , pluginKindLabel , onChange: _ , ...others } = props;
+    const { value , pluginType , pluginKindLabel , onChange: _ , isReadonly , ...others } = props;
     const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = usePluginEditor(props);
     var ref;
     return /*#__PURE__*/ _jsxs(Box, {
@@ -48,6 +48,7 @@ import { usePluginEditor } from './plugin-editor-api';
                         label: pluginKindLabel,
                         pluginType: pluginType,
                         value: pendingKind !== '' ? pendingKind : value.kind,
+                        readOnly: isReadonly,
                         onChange: onKindChange
                     }),
                     /*#__PURE__*/ _jsx(FormHelperText, {
@@ -59,7 +60,8 @@ import { usePluginEditor } from './plugin-editor-api';
                 pluginType: pluginType,
                 pluginKind: value.kind,
                 value: value.spec,
-                onChange: onSpecChange
+                onChange: onSpecChange,
+                isReadonly: isReadonly
             })
         ]
     });

package/dist/components/PluginEditor/PluginEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box, FormControl, FormHelperText, InputLabel } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <FormControl margin=\"dense\" fullWidth={false} disabled={isLoading} error={error !== null} sx={{ mb: 1 }}>\n        {/* TODO: How to ensure ids are unique? */}\n        <InputLabel id=\"plugin-kind-label\">{pluginKindLabel}</InputLabel>\n        <PluginKindSelect\n          labelId=\"plugin-kind-label\"\n          label={pluginKindLabel}\n          pluginType={pluginType}\n          value={pendingKind !== '' ? pendingKind : value.kind}\n          onChange={onKindChange}\n        />\n        <FormHelperText>{error?.message ?? ''}</FormHelperText>\n      </FormControl>\n      <PluginSpecEditor pluginType={pluginType} pluginKind={value.kind} value={value.spec} onChange={onSpecChange} />\n    </Box>\n  );\n}\n"],"names":["Box","FormControl","FormHelperText","InputLabel","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","others","pendingKind","isLoading","error","onKindChange","onSpecChange","margin","fullWidth","disabled","sx","mb","id","labelId","label","kind","message","pluginKind","spec"],"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;AAAA,SAASA,GAAG,EAAEC,WAAW,EAAEC,cAAc,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC7E,SAASC,gBAAgB,QAAQ,qBAAqB,CAAC;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB,CAAC;AACvD,SAA4BC,eAAe,QAAQ,qBAAqB,CAAC;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,CAAA,EAAEC,UAAU,CAAA,EAAEC,eAAe,CAAA,EAAEC,QAAQ,EAAEC,CAAC,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGN,KAAK,AAAC;IAC7E,MAAM,EAAEO,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,eAAe,CAACE,KAAK,CAAC,AAAC;QAatES,GAAc;IAZrC,qBACE,MAACjB,GAAG;QAAE,GAAGc,MAAM;;0BACb,MAACb,WAAW;gBAACmB,MAAM,EAAC,OAAO;gBAACC,SAAS,EAAE,KAAK;gBAAEC,QAAQ,EAAEN,SAAS;gBAAEC,KAAK,EAAEA,KAAK,KAAK,IAAI;gBAAEM,EAAE,EAAE;oBAAEC,EAAE,EAAE,CAAC;iBAAE;;kCAErG,KAACrB,UAAU;wBAACsB,EAAE,EAAC,mBAAmB;kCAAEd,eAAe;sBAAc;kCACjE,KAACP,gBAAgB;wBACfsB,OAAO,EAAC,mBAAmB;wBAC3BC,KAAK,EAAEhB,eAAe;wBACtBD,UAAU,EAAEA,UAAU;wBACtBD,KAAK,EAAEM,WAAW,KAAK,EAAE,GAAGA,WAAW,GAAGN,KAAK,CAACmB,IAAI;wBACpDhB,QAAQ,EAAEM,YAAY;sBACtB;kCACF,KAAChB,cAAc;kCAAEe,CAAAA,GAAc,GAAdA,KAAK,aAALA,KAAK,WAAS,GAAdA,KAAAA,CAAc,GAAdA,KAAK,CAAEY,OAAO,cAAdZ,GAAc,cAAdA,GAAc,GAAI,EAAE;sBAAkB;;cAC3C;0BACd,KAACZ,gBAAgB;gBAACK,UAAU,EAAEA,UAAU;gBAAEoB,UAAU,EAAErB,KAAK,CAACmB,IAAI;gBAAEnB,KAAK,EAAEA,KAAK,CAACsB,IAAI;gBAAEnB,QAAQ,EAAEO,YAAY;cAAI;;MAC3G,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box, FormControl, FormHelperText, InputLabel } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <FormControl margin=\"dense\" fullWidth={false} disabled={isLoading} error={error !== null} sx={{ mb: 1 }}>\n        {/* TODO: How to ensure ids are unique? */}\n        <InputLabel id=\"plugin-kind-label\">{pluginKindLabel}</InputLabel>\n        <PluginKindSelect\n          labelId=\"plugin-kind-label\"\n          label={pluginKindLabel}\n          pluginType={pluginType}\n          value={pendingKind !== '' ? pendingKind : value.kind}\n          readOnly={isReadonly}\n          onChange={onKindChange}\n        />\n        <FormHelperText>{error?.message ?? ''}</FormHelperText>\n      </FormControl>\n      <PluginSpecEditor\n        pluginType={pluginType}\n        pluginKind={value.kind}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","FormControl","FormHelperText","InputLabel","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","isReadonly","others","pendingKind","isLoading","error","onKindChange","onSpecChange","margin","fullWidth","disabled","sx","mb","id","labelId","label","kind","readOnly","message","pluginKind","spec"],"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;AAAA,SAASA,GAAG,EAAEC,WAAW,EAAEC,cAAc,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC7E,SAASC,gBAAgB,QAAQ,qBAAqB,CAAC;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB,CAAC;AACvD,SAA4BC,eAAe,QAAQ,qBAAqB,CAAC;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,CAAA,EAAEC,UAAU,CAAA,EAAEC,eAAe,CAAA,EAAEC,QAAQ,EAAEC,CAAC,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGP,KAAK,AAAC;IACzF,MAAM,EAAEQ,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAEC,YAAY,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGd,eAAe,CAACE,KAAK,CAAC,AAAC;QActEU,GAAc;IAbrC,qBACE,MAAClB,GAAG;QAAE,GAAGe,MAAM;;0BACb,MAACd,WAAW;gBAACoB,MAAM,EAAC,OAAO;gBAACC,SAAS,EAAE,KAAK;gBAAEC,QAAQ,EAAEN,SAAS;gBAAEC,KAAK,EAAEA,KAAK,KAAK,IAAI;gBAAEM,EAAE,EAAE;oBAAEC,EAAE,EAAE,CAAC;iBAAE;;kCAErG,KAACtB,UAAU;wBAACuB,EAAE,EAAC,mBAAmB;kCAAEf,eAAe;sBAAc;kCACjE,KAACP,gBAAgB;wBACfuB,OAAO,EAAC,mBAAmB;wBAC3BC,KAAK,EAAEjB,eAAe;wBACtBD,UAAU,EAAEA,UAAU;wBACtBD,KAAK,EAAEO,WAAW,KAAK,EAAE,GAAGA,WAAW,GAAGP,KAAK,CAACoB,IAAI;wBACpDC,QAAQ,EAAEhB,UAAU;wBACpBF,QAAQ,EAAEO,YAAY;sBACtB;kCACF,KAACjB,cAAc;kCAAEgB,CAAAA,GAAc,GAAdA,KAAK,aAALA,KAAK,WAAS,GAAdA,KAAAA,CAAc,GAAdA,KAAK,CAAEa,OAAO,cAAdb,GAAc,cAAdA,GAAc,GAAI,EAAE;sBAAkB;;cAC3C;0BACd,KAACb,gBAAgB;gBACfK,UAAU,EAAEA,UAAU;gBACtBsB,UAAU,EAAEvB,KAAK,CAACoB,IAAI;gBACtBpB,KAAK,EAAEA,KAAK,CAACwB,IAAI;gBACjBrB,QAAQ,EAAEQ,YAAY;gBACtBN,UAAU,EAAEA,UAAU;cACtB;;MACE,CACN;AACJ,CAAC"}

package/dist/components/PluginEditor/plugin-editor-api.d.ts

@@ -7,6 +7,7 @@ export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
     pluginType: PluginType;
     pluginKindLabel: string;
     value: Definition<UnknownSpec>;
+    isReadonly?: boolean;
     onChange: (next: Definition<UnknownSpec>) => void;
 }
 /**

package/dist/components/PluginEditor/plugin-editor-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAOtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAKD;;GAEG;AACH,oBAAY,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAChG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAqG1D"}
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAOtD,aAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAKD;;GAEG;AACH,oBAAY,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAChG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAqG1D"}

package/dist/components/PluginEditor/plugin-editor-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { Definition, UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect/PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor/PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\n\n// Props on MUI Box 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 PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginType: PluginType;\n  pluginKindLabel: string;\n  value: Definition<UnknownSpec>;\n  onChange: (next: Definition<UnknownSpec>) => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginType, value, onHideQueryEditorChange = () => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [pluginType]: { [value.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[pluginType];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[pluginType] = byPluginType;\n    }\n    byPluginType[value.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginKind = defaultPluginKinds?.[pluginType];\n  const initPendingKind = !value.kind && defaultPluginKind ? defaultPluginKind : '';\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingKind, setPendingKind] = useState(initPendingKind);\n  const { data: plugin, isFetching, error } = usePlugin(pluginType, pendingKind);\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (pendingKind === '') return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      kind: pendingKind,\n      spec: plugin.createInitialOptions(),\n    });\n\n    if (pluginType === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingKind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n\n    setPendingKind('');\n  }, [pendingKind, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, pluginType, value.kind]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onKindChange: PluginKindSelectProps['onChange'] = (e) => {\n    const nextKind = e.target.value;\n\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[pluginType]?.[nextKind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        kind: nextKind,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingKind(nextKind);\n    }\n\n    if (\n      pluginType === 'Panel' &&\n      hideQueryState.current[nextKind] !== undefined &&\n      hideQueryState.current[value.kind] !== hideQueryState.current[nextKind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextKind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return { pendingKind, isLoading: isFetching, error, onKindChange, onSpecChange, rememberCurrentSpecState };\n}\n"],"names":["useEvent","useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","usePluginEditor","props","pluginType","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginKind","initPendingKind","pendingKind","setPendingKind","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onKindChange","e","nextKind","target","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { Definition, UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect/PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor/PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\n\n// Props on MUI Box 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 PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginType: PluginType;\n  pluginKindLabel: string;\n  value: Definition<UnknownSpec>;\n  isReadonly?: boolean;\n  onChange: (next: Definition<UnknownSpec>) => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginType, value, onHideQueryEditorChange = () => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [pluginType]: { [value.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[pluginType];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[pluginType] = byPluginType;\n    }\n    byPluginType[value.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginKind = defaultPluginKinds?.[pluginType];\n  const initPendingKind = !value.kind && defaultPluginKind ? defaultPluginKind : '';\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingKind, setPendingKind] = useState(initPendingKind);\n  const { data: plugin, isFetching, error } = usePlugin(pluginType, pendingKind);\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (pendingKind === '') return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      kind: pendingKind,\n      spec: plugin.createInitialOptions(),\n    });\n\n    if (pluginType === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingKind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n\n    setPendingKind('');\n  }, [pendingKind, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, pluginType, value.kind]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onKindChange: PluginKindSelectProps['onChange'] = (e) => {\n    const nextKind = e.target.value;\n\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[pluginType]?.[nextKind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        kind: nextKind,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingKind(nextKind);\n    }\n\n    if (\n      pluginType === 'Panel' &&\n      hideQueryState.current[nextKind] !== undefined &&\n      hideQueryState.current[value.kind] !== hideQueryState.current[nextKind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextKind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return { pendingKind, isLoading: isFetching, error, onKindChange, onSpecChange, rememberCurrentSpecState };\n}\n"],"names":["useEvent","useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","usePluginEditor","props","pluginType","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginKind","initPendingKind","pendingKind","setPendingKind","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onKindChange","e","nextKind","target","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { VariableDefinition } from '@perses-dev/core';
+export declare type Action = 'create' | 'read' | 'update';
+interface VariableEditFormProps {
+    initialVariableDefinition: VariableDefinition;
+    onChange: (def: VariableDefinition) => void;
+    onCancel: () => void;
+    action?: Action;
+}
+export declare function VariableEditForm(props: VariableEditFormProps): JSX.Element;
+export {};
+//# sourceMappingURL=VariableEditorForm.d.ts.map

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AA6B9E,oBAAY,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAElD,UAAU,qBAAqB;IAC7B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAoT5D"}