@perses-dev/plugin-system 0.50.0 → 0.51.0-beta.0

package/dist/cjs/components/MultiQueryEditor/MultiQueryEditor.js

@@ -33,34 +33,35 @@ function _interop_require_default(obj) {
     };
 }
 function useDefaultQueryDefinition(queryTypes) {
-    var _queryPlugins_;
     // Build the default query plugin
     // This will be used only if the queries are empty, to open a starting query
     // Firs the default query type
     const defaultQueryType = queryTypes[0];
     // Then the default plugin kind
     // Use as default the plugin kind explicitly set as default or the first in the list
-    const { data: queryPlugins } = (0, _runtime.useListPluginMetadata)(queryTypes);
+    const { data: queryPlugins, isLoading } = (0, _runtime.useListPluginMetadata)(queryTypes);
     const { defaultPluginKinds } = (0, _runtime.usePluginRegistry)();
-    var _defaultPluginKinds_defaultQueryType, _ref;
-    const defaultQueryKind = (_ref = (_defaultPluginKinds_defaultQueryType = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[defaultQueryType]) !== null && _defaultPluginKinds_defaultQueryType !== void 0 ? _defaultPluginKinds_defaultQueryType : queryPlugins === null || queryPlugins === void 0 ? void 0 : (_queryPlugins_ = queryPlugins[0]) === null || _queryPlugins_ === void 0 ? void 0 : _queryPlugins_.kind) !== null && _ref !== void 0 ? _ref : '';
+    const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
     const { data: defaultQueryPlugin } = (0, _runtime.usePlugin)(defaultQueryType, defaultQueryKind, {
-        useErrorBoundary: true,
+        throwOnError: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query
     return {
-        kind: defaultQueryType,
-        spec: {
-            plugin: {
-                kind: defaultQueryKind,
-                spec: (defaultQueryPlugin === null || defaultQueryPlugin === void 0 ? void 0 : defaultQueryPlugin.createInitialOptions()) || {}
+        defaultInitialQueryDefinition: {
+            kind: defaultQueryType,
+            spec: {
+                plugin: {
+                    kind: defaultQueryKind,
+                    spec: defaultQueryPlugin?.createInitialOptions() || {}
+                }
             }
-        }
+        },
+        isLoading
     };
 }
 function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
-    const defaultInitialQueryDefinition = useDefaultQueryDefinition(queryTypes);
+    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
     // Query handlers
@@ -113,9 +114,9 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
         });
     };
     // show one query input if queries is empty
-    const queryDefinitions = queries.length ? queries : [
+    const queryDefinitions = queries.length ? queries : !isLoading ? [
         defaultInitialQueryDefinition
-    ];
+    ] : [];
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {

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

@@ -29,14 +29,14 @@ const _MultiQueryEditor = require("../MultiQueryEditor");
 function PanelSpecEditor(props) {
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
+    const { data: plugin, isPending, error } = (0, _runtime.usePlugin)('Panel', kind);
     if (error) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
             error: error
         });
     }
     // TODO: Proper loading indicator
-    if (isLoading) {
+    if (isPending) {
         return null;
     }
     if (plugin === undefined) {
@@ -50,17 +50,14 @@ function PanelSpecEditor(props) {
             content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                 control: control,
                 name: "panelDefinition.spec.queries",
-                render: ({ field })=>{
-                    var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
-                        queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
-                        queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
+                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
+                        queryTypes: plugin.supportedQueryTypes ?? [],
+                        queries: panelDefinition.spec.queries ?? [],
                         onChange: (queries)=>{
                             field.onChange(queries);
                             onQueriesChange(queries);
                         }
-                    });
-                }
+                    })
             })
         });
     }
@@ -102,9 +99,8 @@ function PanelSpecEditor(props) {
                 })
         })
     });
-    var _panelDefinition_spec_queries;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.QueryCountProvider, {
-        queryCount: ((_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : []).length,
+        queryCount: (panelDefinition.spec.queries ?? []).length,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabs.OptionsEditorTabs, {
             tabs: tabs
         }, tabs.length)

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

@@ -22,6 +22,7 @@ Object.defineProperty(exports, "PluginEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
 const _PluginKindSelect = require("../PluginKindSelect");
 const _PluginSpecEditor = require("../PluginSpecEditor");
 const _plugineditorapi = require("./plugin-editor-api");
@@ -47,14 +48,17 @@ function PluginEditor(props) {
                     readOnly: isReadonly
                 },
                 error: !!error,
-                helperText: error === null || error === void 0 ? void 0 : error.message,
+                helperText: error?.message,
                 onChange: onSelectionChange
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginSpecEditor.PluginSpecEditor, {
-                pluginSelection: value.selection,
-                value: value.spec,
-                onChange: onSpecChange,
-                isReadonly: isReadonly
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                FallbackComponent: _components.ErrorAlert,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginSpecEditor.PluginSpecEditor, {
+                    pluginSelection: value.selection,
+                    value: value.spec,
+                    onChange: onSpecChange,
+                    isReadonly: isReadonly
+                })
             })
         ]
     });

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

@@ -50,7 +50,7 @@ function usePluginEditor(props) {
     });
     const { defaultPluginKinds } = (0, _runtime.usePluginRegistry)();
     const defaultPluginType = pluginTypes[0];
-    const defaultPluginKind = defaultPluginType ? defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[defaultPluginType] : undefined;
+    const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;
     const defaultPluginSelection = defaultPluginType && defaultPluginKind ? {
         type: defaultPluginType,
         kind: defaultPluginKind
@@ -68,7 +68,7 @@ function usePluginEditor(props) {
         value.selection,
         defaultPluginKind
     ]);
-    const { data: plugin, isFetching, error } = (0, _runtime.usePlugin)(pendingSelection === null || pendingSelection === void 0 ? void 0 : pendingSelection.type, (pendingSelection === null || pendingSelection === void 0 ? void 0 : pendingSelection.kind) || '');
+    const { data: plugin, isFetching, error } = (0, _runtime.usePlugin)(pendingSelection?.type, pendingSelection?.kind || '');
     (0, _react.useEffect)(()=>{
         // Nothing to do if no new plugin kind is pending
         if (!pendingSelection) return;
@@ -78,7 +78,7 @@ function usePluginEditor(props) {
         rememberCurrentSpecState();
         onChange({
             selection: pendingSelection,
-            spec: plugin.createInitialOptions()
+            spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {}
         });
         if (pendingSelection.type === 'Panel') {
             const panelPlugin = plugin;
@@ -101,9 +101,8 @@ function usePluginEditor(props) {
    * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we
    * make the switch.
    */ const onSelectionChange = (nextSelection)=>{
-        var _prevSpecState_current_nextSelection_type;
         // If we already have state for this plugin type/kind from a previous selection, just use it
-        const previousState = (_prevSpecState_current_nextSelection_type = prevSpecState.current[nextSelection.type]) === null || _prevSpecState_current_nextSelection_type === void 0 ? void 0 : _prevSpecState_current_nextSelection_type[nextSelection.kind];
+        const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];
         if (previousState !== undefined) {
             rememberCurrentSpecState();
             onChange({

package/dist/cjs/components/PluginKindSelect/PluginKindSelect.js

@@ -30,15 +30,14 @@ const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
     const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);
     const handleChange = (event)=>{
-        onChange === null || onChange === void 0 ? void 0 : onChange(optionValueToSelection(event.target.value));
+        onChange?.(optionValueToSelection(event.target.value));
     };
     const renderValue = (0, _react.useCallback)((selected)=>{
-        var _data_find;
         if (selected === '') {
             return '';
         }
         const selectedValue = optionValueToSelection(selected);
-        return data === null || data === void 0 ? void 0 : (_data_find = data.find((v)=>v.pluginType === selectedValue.type && v.kind === selectedValue.kind)) === null || _data_find === void 0 ? void 0 : _data_find.display.name;
+        return data?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
     }, [
         data
     ]);
@@ -59,14 +58,14 @@ const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 value: "",
                 children: "Loading..."
             }),
-            data === null || data === void 0 ? void 0 : data.map((metadata)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+            data?.map((metadata)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                     "data-testid": "option",
                     value: selectionToOptionValue({
-                        type: metadata.pluginType,
-                        kind: metadata.kind
+                        type: metadata.kind,
+                        kind: metadata.spec.name
                     }),
-                    children: metadata.display.name
-                }, metadata.pluginType + metadata.kind))
+                    children: metadata.spec.display.name
+                }, metadata.kind + metadata.spec.name))
         ]
     });
 });

package/dist/cjs/components/PluginRegistry/PluginRegistry.js

@@ -42,21 +42,21 @@ function PluginRegistry(props) {
         }
         return request;
     });
-    const getPlugin = (0, _react.useCallback)(async (pluginType, kind)=>{
+    const getPlugin = (0, _react.useCallback)(async (kind, name)=>{
         // Get the indexes of the installed plugins
         const pluginIndexes = await getPluginIndexes();
         // Figure out what module the plugin is in by looking in the index
-        const typeAndKindKey = (0, _pluginindexes.getTypeAndKindKey)(pluginType, kind);
-        const resource = pluginIndexes.pluginResourcesByTypeAndKind.get(typeAndKindKey);
+        const typeAndKindKey = (0, _pluginindexes.getTypeAndKindKey)(kind, name);
+        const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);
         if (resource === undefined) {
-            throw new Error(`A ${pluginType} plugin for kind '${kind}' is not installed`);
+            throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);
         }
         // Treat the plugin module as a bunch of named exports that have plugins
         const pluginModule = await loadPluginModule(resource);
         // We currently assume that plugin modules will have named exports that match the kinds they handle
-        const plugin = pluginModule[kind];
+        const plugin = pluginModule[name];
         if (plugin === undefined) {
-            throw new Error(`The ${pluginType} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`);
+            throw new Error(`The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`);
         }
         return plugin;
     }, [
@@ -65,10 +65,7 @@ function PluginRegistry(props) {
     ]);
     const listPluginMetadata = (0, _react.useCallback)(async (pluginTypes)=>{
         const pluginIndexes = await getPluginIndexes();
-        return pluginTypes.flatMap((type)=>{
-            var _pluginIndexes_pluginMetadataByType_get;
-            return (_pluginIndexes_pluginMetadataByType_get = pluginIndexes.pluginMetadataByType.get(type)) !== null && _pluginIndexes_pluginMetadataByType_get !== void 0 ? _pluginIndexes_pluginMetadataByType_get : [];
-        });
+        return pluginTypes.flatMap((type)=>pluginIndexes.pluginMetadataByKind.get(type) ?? []);
     }, [
         getPluginIndexes
     ]);

package/dist/cjs/components/PluginRegistry/plugin-indexes.js

@@ -36,29 +36,32 @@ function usePluginIndexes(getInstalledPlugins) {
     const createPluginIndexes = (0, _core.useEvent)(async ()=>{
         const installedPlugins = await getInstalledPlugins();
         // Create the two indexes from the installed plugins
-        const pluginResourcesByTypeAndKind = new Map();
-        const pluginMetadataByType = new Map();
+        const pluginResourcesByNameAndKind = new Map();
+        const pluginMetadataByKind = new Map();
         for (const resource of installedPlugins){
             for (const pluginMetadata of resource.spec.plugins){
-                const { pluginType, kind } = pluginMetadata;
+                const { kind, spec: { name } } = pluginMetadata;
                 // Index the plugin by type and kind to point at the module that contains it
-                const key = getTypeAndKindKey(pluginType, kind);
-                if (pluginResourcesByTypeAndKind.has(key)) {
-                    console.warn(`Got more than one ${pluginType} plugin for kind ${kind}`);
+                const key = getTypeAndKindKey(kind, name);
+                if (pluginResourcesByNameAndKind.has(key)) {
+                    console.warn(`Got more than one ${kind} plugin for kind ${name}`);
                 }
-                pluginResourcesByTypeAndKind.set(key, resource);
+                pluginResourcesByNameAndKind.set(key, resource);
                 // Index the metadata by plugin type
-                let list = pluginMetadataByType.get(pluginType);
+                let list = pluginMetadataByKind.get(kind);
                 if (list === undefined) {
                     list = [];
-                    pluginMetadataByType.set(pluginType, list);
+                    pluginMetadataByKind.set(kind, list);
                 }
-                list.push(pluginMetadata);
+                list.push({
+                    ...pluginMetadata,
+                    module: resource.metadata
+                });
             }
         }
         return {
-            pluginResourcesByTypeAndKind,
-            pluginMetadataByType
+            pluginResourcesByNameAndKind,
+            pluginMetadataByKind
         };
     });
     // De-dupe creating plugin indexes (i.e. requests to get installed plugins)
@@ -77,6 +80,6 @@ function usePluginIndexes(getInstalledPlugins) {
     ]);
     return getPluginIndexes;
 }
-function getTypeAndKindKey(pluginType, kind) {
-    return `${pluginType}:${kind}`;
+function getTypeAndKindKey(kind, name) {
+    return `${kind}:${name}`;
 }

package/dist/cjs/components/ProjectSelect.js

@@ -56,7 +56,7 @@ function ProjectSelect(props) {
                     })
                 })
             }),
-            data === null || data === void 0 ? void 0 : data.map((project)=>[
+            data?.map((project)=>[
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                         value: project.metadata.name,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
@@ -79,8 +79,7 @@ function ProjectSelect(props) {
  * 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';
+    return project.metadata.name ?? 'none';
 }
 /**
  * Given an option value name,