@perses-dev/plugin-system 0.41.1 → 0.42.0

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

@@ -23,75 +23,36 @@ Object.defineProperty(exports, "DatasourceEditorForm", {
 const _jsxruntime = require("react/jsx-runtime");
 const _useimmer = require("use-immer");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = 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 _validation = require("../../validation");
-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 = {};
-    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;
-}
 /**
  * This preprocessing ensures that we always have a defined object for the `display` property
  * @param datasource
- */ function getInitialState(datasource) {
-    var _datasource_spec_display, _datasource_spec_display1;
-    var _datasource_spec_display_name, _datasource_spec_display_description;
+ */ function getInitialState(name, spec) {
+    var _spec_display, _spec_display1;
+    var _spec_display_name, _spec_display_description;
     const patchedDisplay = {
-        name: (_datasource_spec_display_name = (_datasource_spec_display = datasource.spec.display) === null || _datasource_spec_display === void 0 ? void 0 : _datasource_spec_display.name) !== null && _datasource_spec_display_name !== void 0 ? _datasource_spec_display_name : '',
-        description: (_datasource_spec_display_description = (_datasource_spec_display1 = datasource.spec.display) === null || _datasource_spec_display1 === void 0 ? void 0 : _datasource_spec_display1.description) !== null && _datasource_spec_display_description !== void 0 ? _datasource_spec_display_description : ''
+        name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : '',
+        description: (_spec_display_description = (_spec_display1 = spec.display) === null || _spec_display1 === void 0 ? void 0 : _spec_display1.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
     };
     return {
-        ...datasource,
+        name: name,
         spec: {
-            ...datasource.spec,
+            ...spec,
             display: patchedDisplay
         }
     };
 }
 function DatasourceEditorForm(props) {
     var _state_spec_display, _state_spec_display1;
-    const { initialDatasource , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
-    const patchedInitialDatasource = getInitialState(initialDatasource);
-    const [state, setState] = (0, _useimmer.useImmer)(patchedInitialDatasource);
+    const { initialName , initialSpec , initialAction , isDraft , isReadonly , onSave , onClose , onDelete  } = props;
+    const initialState = getInitialState(initialName, initialSpec);
+    const [state, setState] = (0, _useimmer.useImmer)(initialState);
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     const [action, setAction] = (0, _react.useState)(initialAction);
     const titleAction = (0, _utils.getTitleAction)(action, isDraft);
@@ -100,28 +61,38 @@ function DatasourceEditorForm(props) {
         resolver: (0, _zod.zodResolver)(_validation.datasourceEditValidationSchema),
         mode: 'onBlur',
         defaultValues: {
-            name: state.metadata.name,
+            name: state.name,
             title: (_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name,
             description: (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.description,
             default: state.spec.default
         }
     });
     const processForm = ()=>{
-        onSave(state);
+        var _state_spec_display;
+        // reset display name to undefined when empty, because we don't want an empty string as value
+        const name = (_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name;
+        const finalDisplay = {
+            ...state.spec.display,
+            name: name ? name : undefined
+        };
+        onSave(state.name, {
+            ...state.spec,
+            display: finalDisplay
+        });
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
     const handleCancel = (0, _react.useCallback)(()=>{
-        if (JSON.stringify(patchedInitialDatasource) !== JSON.stringify(state)) {
+        if (JSON.stringify(initialState) !== JSON.stringify(state)) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
         }
     }, [
         state,
-        patchedInitialDatasource,
+        initialState,
         setDiscardDialogOpened,
         onClose
     ]);
@@ -237,7 +208,7 @@ function DatasourceEditorForm(props) {
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                                 setState((draft)=>{
-                                                    draft.metadata.name = event.target.value;
+                                                    draft.name = event.target.value;
                                                 });
                                             }
                                         });

package/dist/cjs/components/DatasourceSelect.js

@@ -39,8 +39,8 @@ function _interop_require_default(obj) {
     };
 }
 function DatasourceSelect(props) {
-    const { datasourcePluginKind , value , onChange , ...others } = props;
-    const { data , isLoading  } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind);
+    const { datasourcePluginKind , value , project , onChange , ...others } = props;
+    const { data , isLoading  } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind, project);
     // Rebuild the group of the value if not provided
     const defaultValue = (0, _react.useMemo)(()=>{
         var _flatMap_find;
@@ -57,6 +57,7 @@ function DatasourceSelect(props) {
     ]);
     // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
     const menuItems = (0, _react.useMemo)(()=>{
+        var _item_saved;
         return (data !== null && data !== void 0 ? data : []).map((itemGroup)=>({
                 group: itemGroup.group,
                 editLink: itemGroup.editLink,
@@ -64,6 +65,7 @@ function DatasourceSelect(props) {
                         name: item.name,
                         overriding: item.overriding,
                         overridden: item.overridden,
+                        saved: (_item_saved = item.saved) !== null && _item_saved !== void 0 ? _item_saved : true,
                         group: item.selector.group,
                         value: selectorToOptionValue(item.selector)
                     }))
@@ -96,7 +98,7 @@ function DatasourceSelect(props) {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}, `${menuItemGroup.group}-divider`),
                 ...menuItemGroup.items.map((menuItem)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                         value: menuItem.value,
-                        disabled: menuItem.overridden,
+                        disabled: menuItem.overridden || !menuItem.saved,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                             direction: "row",
                             alignItems: "center",
@@ -110,6 +112,9 @@ function DatasourceSelect(props) {
                                         overriding: menuItem.overriding
                                     })
                                 }),
+                                !menuItem.saved && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                                    children: "Save the dashboard to enable this datasource"
+                                }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
                                     style: {
                                         textAlign: 'right'
@@ -151,8 +156,11 @@ function DatasourceName(props) {
 }
 // Delimiter used to stringify/parse option values
 const OPTION_VALUE_DELIMITER = '_____';
-// Given a DatasourceSelector, returns a string value like `{kind}_____{name}` that can be used as a Select input value
-function selectorToOptionValue(selector) {
+/**
+ * Given a DatasourceSelectItemSelector,
+ * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
+ * @param selector
+ */ function selectorToOptionValue(selector) {
     var _selector_group, _selector_name;
     return [
         selector.kind,
@@ -160,15 +168,19 @@ function selectorToOptionValue(selector) {
         (_selector_name = selector.name) !== null && _selector_name !== void 0 ? _selector_name : ''
     ].join(OPTION_VALUE_DELIMITER);
 }
-// Given an option value name like `{kind}_____{name}`, returns a DatasourceSelector
-function optionValueToSelector(optionValue) {
-    const [kind, group, name] = optionValue.split(OPTION_VALUE_DELIMITER);
-    if (kind === undefined || group === undefined || name === undefined) {
+/**
+ * Given an option value name like `{kind}_____{group}_____{name}`,
+ * returns a DatasourceSelector to be used by the query data model.
+ * @param optionValue
+ */ function optionValueToSelector(optionValue) {
+    const words = optionValue.split(OPTION_VALUE_DELIMITER);
+    const kind = words[0];
+    const name = words[2];
+    if (kind === undefined || name === undefined) {
         throw new Error('Invalid optionValue string');
     }
     return {
         kind,
-        group: group === '' ? undefined : group,
         name: name === '' ? undefined : name
     };
 }

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

@@ -67,6 +67,7 @@ function PanelSpecEditor(props) {
     tabs.push({
         label: 'JSON',
         content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
+            maxHeight: "80vh",
             value: panelDefinition,
             onChange: onJSONChange
         })

package/dist/cjs/components/PluginEditor/PluginEditor.js

@@ -27,7 +27,7 @@ const _PluginSpecEditor = require("../PluginSpecEditor");
 const _plugineditorapi = require("./plugin-editor-api");
 function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value , pluginType , pluginKindLabel , onChange: _ , isReadonly , ...others } = props;
+    const { value , pluginType , pluginKindLabel , onChange: _ , isReadonly , isExplore , ...others } = props;
     const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = (0, _plugineditorapi.usePluginEditor)(props);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
@@ -51,6 +51,7 @@ function PluginEditor(props) {
                 onChange: onKindChange
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginSpecEditor.PluginSpecEditor, {
+                isExplore: isExplore,
                 pluginType: pluginType,
                 pluginKind: value.kind,
                 value: value.spec,

package/dist/cjs/components/ProjectSelect.js

@@ -0,0 +1,96 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ProjectSelect", {
+    enumerable: true,
+    get: function() {
+        return ProjectSelect;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _context = require("../context");
+function ProjectSelect(props) {
+    const { onChange , value , ...others } = props;
+    const { data , isLoading  } = (0, _context.useProjectList)();
+    // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
+    const optionValue = isLoading ? '' : projectToOptionValue(value);
+    // When the user makes a selection, convert the string option value back to a DatasourceSelector
+    const handleChange = (e)=>{
+        const next = optionValueToSelector(e.target.value);
+        onChange(next);
+    };
+    // TODO:
+    //  - Does this need a loading indicator of some kind?
+    //  - The group's edit link is not clickable once selected.
+    //  - The group's edit link is disabled if datasource is overridden.
+    //    Ref: https://github.com/mui/material-ui/issues/36572
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+        ...others,
+        value: optionValue,
+        onChange: handleChange,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                value: 'none',
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    height: 32,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                        children: "None"
+                    })
+                })
+            }),
+            data === null || data === void 0 ? void 0 : data.map((project)=>[
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: project.metadata.name,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                            direction: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            height: 32,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                                children: project.metadata.name
+                            })
+                        })
+                    }, project.metadata.name)
+                ])
+        ]
+    });
+}
+/**
+ * Given a ProjectSelectItemSelector,
+ * returns a string value that can be used as a Select input value.
+ * @param selector
+ */ function projectToOptionValue(project) {
+    var _project_metadata_name;
+    return (_project_metadata_name = project.metadata.name) !== null && _project_metadata_name !== void 0 ? _project_metadata_name : 'none';
+}
+/**
+ * Given an option value name,
+ * returns a ProjectResource to be used by the query data model.
+ * @param optionValue
+ */ function optionValueToSelector(optionValue) {
+    return {
+        kind: 'Project',
+        metadata: {
+            name: optionValue
+        }
+    };
+}

package/dist/cjs/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js

@@ -119,26 +119,28 @@ function TimeSeriesQueryEditor({ queries =[] , onChange  }) {
             }
         }
     ];
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        spacing: 1,
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                spacing: 1,
+                children: queryDefinitions.map((query, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesQueryInput.TimeSeriesQueryInput, {
+                        index: i,
+                        query: query,
+                        isCollapsed: !!queriesCollapsed[i],
+                        onChange: handleQueryChange,
+                        onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
+                        onCollapseExpand: handleQueryCollapseExpand
+                    }, i))
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
                 startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
                 sx: {
-                    marginLeft: 'auto'
+                    marginTop: 1
                 },
                 onClick: handleQueryAdd,
                 children: "Add Query"
-            }),
-            queryDefinitions.map((query, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesQueryInput.TimeSeriesQueryInput, {
-                    index: i,
-                    query: query,
-                    isCollapsed: !!queriesCollapsed[i],
-                    onChange: handleQueryChange,
-                    onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
-                    onCollapseExpand: handleQueryCollapseExpand
-                }, i))
+            })
         ]
     });
 }

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

@@ -122,7 +122,7 @@ function VariableEditorForm(props) {
         setDiscardDialogOpened,
         onClose
     ]);
-    var _state_textVariableFields_constant;
+    var _state_textVariableFields_constant, _state_listVariableFields_capturingRegexp, _state_listVariableFields_sort;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -434,7 +434,7 @@ function VariableEditorForm(props) {
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             label: "Capturing Regexp Filter",
-                                            value: state.listVariableFields.capturingRegexp || '',
+                                            value: (_state_listVariableFields_capturingRegexp = state.listVariableFields.capturingRegexp) !== null && _state_listVariableFields_capturingRegexp !== void 0 ? _state_listVariableFields_capturingRegexp : '',
                                             InputLabelProps: {
                                                 shrink: action === 'read' ? true : undefined
                                             },
@@ -453,6 +453,54 @@ function VariableEditorForm(props) {
                                             },
                                             helperText: "Optional, if you want to filter on captured result."
                                         })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                                            select: true,
+                                            label: "Sort",
+                                            value: (_state_listVariableFields_sort = state.listVariableFields.sort) !== null && _state_listVariableFields_sort !== void 0 ? _state_listVariableFields_sort : '',
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                readOnly: isReadonly
+                                            },
+                                            onChange: (e)=>{
+                                                setState((draft)=>{
+                                                    draft.listVariableFields.sort = e.target.value;
+                                                });
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "none",
+                                                    children: "None"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "alphabetical-asc",
+                                                    children: "Alphabetical, asc"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "alphabetical-desc",
+                                                    children: "Alphabetical, desc"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "numerical-asc",
+                                                    children: "Numerical, asc"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "numerical-desc",
+                                                    children: "Numerical, desc"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "alphabetical-ci-asc",
+                                                    children: "Alphabetical, case-insensitive, asc"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: "alphabetical-ci-desc",
+                                                    children: "Alphabetical, case-insensitive, desc"
+                                                })
+                                            ]
+                                        })
                                     })
                                 ]
                             }),

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

@@ -38,21 +38,23 @@ function getInitialState(initialVariableDefinition) {
     const listVariableFields = {
         allowMultiple: false,
         allowAll: false,
+        customAllValue: undefined,
         capturingRegexp: undefined,
+        sort: undefined,
         plugin: {
             kind: '',
             spec: {}
-        },
-        customAllValue: undefined
+        }
     };
     if (initialVariableDefinition.kind === 'ListVariable') {
+        var _initialVariableDefinition_spec_allowMultiple;
+        listVariableFields.allowMultiple = (_initialVariableDefinition_spec_allowMultiple = initialVariableDefinition.spec.allowMultiple) !== null && _initialVariableDefinition_spec_allowMultiple !== void 0 ? _initialVariableDefinition_spec_allowMultiple : false;
         var _initialVariableDefinition_spec_allowAllValue;
-        listVariableFields.allowMultiple = (_initialVariableDefinition_spec_allowAllValue = initialVariableDefinition.spec.allowAllValue) !== null && _initialVariableDefinition_spec_allowAllValue !== void 0 ? _initialVariableDefinition_spec_allowAllValue : false;
-        var _initialVariableDefinition_spec_allowAllValue1;
-        listVariableFields.allowAll = (_initialVariableDefinition_spec_allowAllValue1 = initialVariableDefinition.spec.allowAllValue) !== null && _initialVariableDefinition_spec_allowAllValue1 !== void 0 ? _initialVariableDefinition_spec_allowAllValue1 : false;
+        listVariableFields.allowAll = (_initialVariableDefinition_spec_allowAllValue = initialVariableDefinition.spec.allowAllValue) !== null && _initialVariableDefinition_spec_allowAllValue !== void 0 ? _initialVariableDefinition_spec_allowAllValue : false;
+        listVariableFields.customAllValue = initialVariableDefinition.spec.customAllValue;
         listVariableFields.capturingRegexp = initialVariableDefinition.spec.capturingRegexp;
+        listVariableFields.sort = initialVariableDefinition.spec.sort;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
-        listVariableFields.customAllValue = initialVariableDefinition.spec.customAllValue;
     }
     var _initialVariableDefinition_spec_display_name, _initialVariableDefinition_spec_display_description;
     return {
@@ -88,9 +90,10 @@ function getVariableDefinitionFromState(state) {
                 display,
                 allowMultiple: state.listVariableFields.allowMultiple,
                 allowAllValue: state.listVariableFields.allowAll,
+                customAllValue: state.listVariableFields.customAllValue,
                 capturingRegexp: state.listVariableFields.capturingRegexp,
-                plugin: state.listVariableFields.plugin,
-                customAllValue: state.listVariableFields.customAllValue
+                sort: state.listVariableFields.sort,
+                plugin: state.listVariableFields.plugin
             }
         };
     }

package/dist/cjs/components/index.js

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

package/dist/cjs/context/ProjectStoreProvider.js

@@ -0,0 +1,78 @@
+// 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, {
+    ProjectStoreContext: function() {
+        return ProjectStoreContext;
+    },
+    useProjectList: function() {
+        return useProjectList;
+    },
+    useProjectStore: function() {
+        return useProjectStore;
+    },
+    ProjectStoreProvider: function() {
+        return ProjectStoreProvider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactquery = require("@tanstack/react-query");
+const _react = require("react");
+const _core = require("@perses-dev/core");
+const _queryparams = require("./query-params");
+const ProjectStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useProjectList() {
+    return (0, _reactquery.useQuery)([
+        'projects'
+    ], ()=>{
+        return (0, _core.fetchJson)('/api/v1/projects');
+    });
+}
+function useProjectStore() {
+    const ctx = (0, _react.useContext)(ProjectStoreContext);
+    if (ctx === undefined) {
+        throw new Error('No ProjectStoreContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+function ProjectStoreProvider(props) {
+    const { children , enabledURLParams  } = props;
+    const { project , setProject  } = (0, _queryparams.useSetProjectParams)(enabledURLParams);
+    const contextValue = (0, _react.useMemo)(()=>({
+            project: {
+                kind: 'Project',
+                metadata: {
+                    name: project
+                }
+            },
+            setProject: (project)=>{
+                setProject(project.metadata.name);
+            }
+        }), [
+        project,
+        setProject
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ProjectStoreContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+}

package/dist/cjs/context/index.js

@@ -0,0 +1,30 @@
+// 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
+});
+_export_star(require("./ProjectStoreProvider"), exports);
+function _export_star(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;
+}