@perses-dev/plugin-system 0.55.0-beta.10 → 0.55.0-beta.11

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

@@ -1 +1 @@
-{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAMzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7D;AA4CD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHAyF3B,CAAC"}
+{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAMzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7D;AA4CD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHAkG3B,CAAC"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button, Stack } from "@mui/material";
 import { produce } from "immer";
 import AddIcon from "mdi-material-ui/Plus";
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { useListPluginMetadata, usePlugin, usePluginRegistry } from "../../runtime/index.js";
 import { QueryEditorContainer } from "./QueryEditorContainer.js";
 function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
@@ -62,6 +62,21 @@ function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
+    // When a panel has no queries, MultiQueryEditor displays a default query (see queryDefinitions below), but that
+    // default is only visual until the user interacts with it. Persist it so panels whose default query needs no user
+    // input (e.g. alerts/silences) still have a query saved, and therefore run in view mode.
+    useEffect(()=>{
+        if (queries.length === 0 && !isLoading && defaultInitialQueryDefinition.spec.plugin.kind !== '') {
+            onChange([
+                defaultInitialQueryDefinition
+            ]);
+        }
+    }, [
+        queries.length,
+        isLoading,
+        defaultInitialQueryDefinition,
+        onChange
+    ]);
     // Query handlers
     const handleQueryChange = (index, queryDef)=>{
         onChange(produce(queries, (draft)=>{

package/dist/components/MultiQueryEditor/MultiQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 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 { Button, Stack } from '@mui/material';\nimport type { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { produce } from 'immer';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { QueryData } from '../../runtime';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport type { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  queryResults?: QueryData[];\n  onChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[],\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin, isLoading: isPluginLoading } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading: isLoading || isPluginLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      }),\n    );\n  };\n\n  const handleQueryRun = (index: number, queryDef: QueryDefinition): void => {\n    onQueryRun(index, queryDef);\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      }),\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      }),\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  let queryDefinitions: QueryDefinition[] = queries;\n  if (queries.length === 0 && !isLoading) {\n    queryDefinitions = [defaultInitialQueryDefinition];\n  }\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            queryResult={queryResults?.[i]}\n            filteredQueryPlugins={filteredQueryPlugins}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onQueryRun={handleQueryRun}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["Button","Stack","produce","AddIcon","forwardRef","useState","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","isPluginLoading","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","queryResults","onChange","onQueryRun","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryRun","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","queryResult","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 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 { Button, Stack } from '@mui/material';\nimport type { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { produce } from 'immer';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport type { QueryData } from '../../runtime';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport type { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  queryResults?: QueryData[];\n  onChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[],\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin, isLoading: isPluginLoading } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading: isLoading || isPluginLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // When a panel has no queries, MultiQueryEditor displays a default query (see queryDefinitions below), but that\n  // default is only visual until the user interacts with it. Persist it so panels whose default query needs no user\n  // input (e.g. alerts/silences) still have a query saved, and therefore run in view mode.\n  useEffect(() => {\n    if (queries.length === 0 && !isLoading && defaultInitialQueryDefinition.spec.plugin.kind !== '') {\n      onChange([defaultInitialQueryDefinition]);\n    }\n  }, [queries.length, isLoading, defaultInitialQueryDefinition, onChange]);\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      }),\n    );\n  };\n\n  const handleQueryRun = (index: number, queryDef: QueryDefinition): void => {\n    onQueryRun(index, queryDef);\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      }),\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      }),\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  let queryDefinitions: QueryDefinition[] = queries;\n  if (queries.length === 0 && !isLoading) {\n    queryDefinitions = [defaultInitialQueryDefinition];\n  }\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            queryResult={queryResults?.[i]}\n            filteredQueryPlugins={filteredQueryPlugins}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onQueryRun={handleQueryRun}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["Button","Stack","produce","AddIcon","forwardRef","useEffect","useState","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","isPluginLoading","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","queryResults","onChange","onQueryRun","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryRun","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","queryResult","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGtG,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,aAAa,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAM3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,wBAAwB,EAAE,uBAAuB,EAAE,CAAC;IACpD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,kHA4I1B,CAAC"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGtG,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,aAAa,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAM3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,wBAAwB,EAAE,uBAAuB,EAAE,CAAC;IACpD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,kHAmJ1B,CAAC"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -23,7 +23,10 @@ import { PanelAnnotationsEditor } from "./PanelAnnotationsEditor.js";
 export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { control, panelDefinition, variableDefinitionGroups, panelGroups, onQueriesChange, onQueryRun, onPluginSpecChange, onAnnotationsChange, onJSONChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
+    const { data: plugin, isLoading, error } = usePlugin('Panel', kind, {
+        version: panelDefinition.spec.plugin.metadata?.version,
+        registry: panelDefinition.spec.plugin.metadata?.registry
+    });
     const { queryResults } = useDataQueriesContext();
     if (error) {
         return /*#__PURE__*/ _jsx(ErrorAlert, {

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright 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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport type { AnnotationSpec, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { forwardRef } from 'react';\nimport type { Control } from 'react-hook-form';\nimport { Controller } from 'react-hook-form';\n\nimport type { PanelEditorValues, PanelPlugin } from '../../model';\nimport { useDataQueriesContext, usePlugin } from '../../runtime';\nimport type { PanelGroup, VariableDefinitionGroup } from '../LayoutEditor';\nimport { LayoutEditor } from '../LayoutEditor';\nimport { LinksEditor } from '../LinksEditor';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport type { OptionsEditorTabsProps } from '../OptionsEditorTabs';\nimport { OptionsEditorTabs } from '../OptionsEditorTabs';\nimport type { PluginEditorRef } from '../PluginEditor';\nimport { PanelAnnotationsEditor } from './PanelAnnotationsEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  variableDefinitionGroups: VariableDefinitionGroup[];\n  panelGroups?: PanelGroup[];\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onAnnotationsChange: (annotations: AnnotationSpec[]) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const {\n    control,\n    panelDefinition,\n    variableDefinitionGroups,\n    panelGroups,\n    onQueriesChange,\n    onQueryRun,\n    onPluginSpecChange,\n    onAnnotationsChange,\n    onJSONChange,\n  } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  const { queryResults } = useDataQueriesContext();\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor, supportsAnnotations } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              queryResults={queryResults}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n              onQueryRun={(index, query) => {\n                onQueryRun(index, query);\n                // If spec has not changed, refetch to update the data\n                if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n                  queryResults[index]?.refetch?.();\n                }\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      })),\n    );\n  }\n\n  // annotations are common to all panel plugins, but only shown for plugins that render them\n  if (supportsAnnotations) {\n    tabs.push({\n      label: 'Annotations',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.annotations\"\n          render={({ field }) => (\n            <PanelAnnotationsEditor\n              value={panelDefinition.spec.annotations ?? []}\n              onChange={(annotations) => {\n                field.onChange(annotations);\n                onAnnotationsChange(annotations);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  // Always show the JSON editor, Links editor, and Layout editor by default.\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n  tabs.push({\n    label: 'Layout',\n    content: (\n      <LayoutEditor control={control} variableDefinitionGroups={variableDefinitionGroups} panelGroups={panelGroups} />\n    ),\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","forwardRef","Controller","useDataQueriesContext","usePlugin","LayoutEditor","LinksEditor","MultiQueryEditor","OptionsEditorTabs","PanelAnnotationsEditor","PanelSpecEditor","props","ref","control","panelDefinition","variableDefinitionGroups","panelGroups","onQueriesChange","onQueryRun","onPluginSpecChange","onAnnotationsChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","supportsAnnotations","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","annotations","maxHeight","json","parse","length","displayName"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAGhE,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,qBAAqB,EAAEC,SAAS,QAAQ,yBAAgB;AAEjE,SAASC,YAAY,QAAQ,2BAAkB;AAC/C,SAASC,WAAW,QAAQ,0BAAiB;AAC7C,SAASC,gBAAgB,QAAQ,+BAAsB;AAEvD,SAASC,iBAAiB,QAAQ,gCAAuB;AAEzD,SAASC,sBAAsB,QAAQ,8BAA2B;AAclE,OAAO,MAAMC,gCAAkBT,WAAkD,CAACU,OAAOC;IACvF,MAAM,EACJC,OAAO,EACPC,eAAe,EACfC,wBAAwB,EACxBC,WAAW,EACXC,eAAe,EACfC,UAAU,EACVC,kBAAkB,EAClBC,mBAAmB,EACnBC,YAAY,EACb,GAAGV;IACJ,MAAM,EAAEW,IAAI,EAAE,GAAGR,gBAAgBS,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGvB,UAAU,SAASkB;IAE9D,MAAM,EAAEM,YAAY,EAAE,GAAGzB;IAEzB,IAAIwB,OAAO;QACT,qBAAO,KAAC5B;YAAW4B,OAAOA;;IAC5B;IAEA,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAI,CAACF,QAAQ;QACX,MAAM,IAAIK,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAEC,mBAAmB,EAAE,GAAGR;IAC/E,IAAIS,OAAuC,EAAE;IAE7C,IAAI,CAACF,iBAAiB;QACpBE,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAAClC;gBACCW,SAASA;gBACTwB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAChC;wBACCK,KAAKA;wBACL4B,YAAYhB,OAAOiB,mBAAmB,IAAI,EAAE;wBAC5CC,SAAS5B,gBAAgBS,IAAI,CAACmB,OAAO,IAAI,EAAE;wBAC3Cd,cAAcA;wBACde,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;4BACfzB,gBAAgByB;wBAClB;wBACAxB,YAAY,CAAC0B,OAAOC;4BAClB3B,WAAW0B,OAAOC;4BAClB,sDAAsD;4BACtD,IAAIC,KAAKC,SAAS,CAACjC,gBAAgBS,IAAI,CAACmB,OAAO,EAAE,CAACE,MAAM,MAAME,KAAKC,SAAS,CAACF,QAAQ;gCACnFjB,YAAY,CAACgB,MAAM,EAAEI;4BACvB;wBACF;;;QAKV;IACF;IAEA,IAAIlB,8BAA8B;QAChCG,OAAOA,KAAKgB,MAAM,CAChBnB,6BAA6BoB,GAAG,CAAC,CAAC,EAAEf,KAAK,EAAEC,SAASe,sBAAsB,EAAE,GAAM,CAAA;gBAChFhB;gBACAC,uBACE,KAAClC;oBACCW,SAASA;oBACTwB,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACY;4BACCC,OAAOtC,gBAAgBS,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCoB,UAAU,CAACpB;gCACTgB,MAAMI,QAAQ,CAACpB;gCACfJ,mBAAmBI;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,2FAA2F;IAC3F,IAAIS,qBAAqB;QACvBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAAClC;gBACCW,SAASA;gBACTwB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC9B;wBACC2C,OAAOtC,gBAAgBS,IAAI,CAAC8B,WAAW,IAAI,EAAE;wBAC7CV,UAAU,CAACU;4BACTd,MAAMI,QAAQ,CAACU;4BACfjC,oBAAoBiC;wBACtB;;;QAKV;IACF;IAEA,2EAA2E;IAC3EpB,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC9B;YAAYO,SAASA;;IACjC;IACAoB,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAAClC;YACCW,SAASA;YACTwB,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACvC;oBACCsD,WAAU;oBACVF,OAAOtC;oBACP6B,UAAU,CAACY;wBACThB,MAAMI,QAAQ,CAACG,KAAKU,KAAK,CAACD;wBAC1BlC,aAAakC;oBACf;;;IAKV;IACAtB,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAAC/B;YAAaQ,SAASA;YAASE,0BAA0BA;YAA0BC,aAAaA;;IAErG;IAEA,qBAAO,KAACR;QAAoCyB,MAAMA;OAAnBA,KAAKwB,MAAM;AAC5C,GAAG;AAEH/C,gBAAgBgD,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright 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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport type { AnnotationSpec, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { forwardRef } from 'react';\nimport type { Control } from 'react-hook-form';\nimport { Controller } from 'react-hook-form';\n\nimport type { PanelEditorValues, PanelPlugin } from '../../model';\nimport { useDataQueriesContext, usePlugin } from '../../runtime';\nimport type { PanelGroup, VariableDefinitionGroup } from '../LayoutEditor';\nimport { LayoutEditor } from '../LayoutEditor';\nimport { LinksEditor } from '../LinksEditor';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport type { OptionsEditorTabsProps } from '../OptionsEditorTabs';\nimport { OptionsEditorTabs } from '../OptionsEditorTabs';\nimport type { PluginEditorRef } from '../PluginEditor';\nimport { PanelAnnotationsEditor } from './PanelAnnotationsEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  variableDefinitionGroups: VariableDefinitionGroup[];\n  panelGroups?: PanelGroup[];\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onAnnotationsChange: (annotations: AnnotationSpec[]) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const {\n    control,\n    panelDefinition,\n    variableDefinitionGroups,\n    panelGroups,\n    onQueriesChange,\n    onQueryRun,\n    onPluginSpecChange,\n    onAnnotationsChange,\n    onJSONChange,\n  } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const {\n    data: plugin,\n    isLoading,\n    error,\n  } = usePlugin('Panel', kind, {\n    version: panelDefinition.spec.plugin.metadata?.version,\n    registry: panelDefinition.spec.plugin.metadata?.registry,\n  });\n\n  const { queryResults } = useDataQueriesContext();\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor, supportsAnnotations } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              queryResults={queryResults}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n              onQueryRun={(index, query) => {\n                onQueryRun(index, query);\n                // If spec has not changed, refetch to update the data\n                if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n                  queryResults[index]?.refetch?.();\n                }\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      })),\n    );\n  }\n\n  // annotations are common to all panel plugins, but only shown for plugins that render them\n  if (supportsAnnotations) {\n    tabs.push({\n      label: 'Annotations',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.annotations\"\n          render={({ field }) => (\n            <PanelAnnotationsEditor\n              value={panelDefinition.spec.annotations ?? []}\n              onChange={(annotations) => {\n                field.onChange(annotations);\n                onAnnotationsChange(annotations);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  // Always show the JSON editor, Links editor, and Layout editor by default.\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n  tabs.push({\n    label: 'Layout',\n    content: (\n      <LayoutEditor control={control} variableDefinitionGroups={variableDefinitionGroups} panelGroups={panelGroups} />\n    ),\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","forwardRef","Controller","useDataQueriesContext","usePlugin","LayoutEditor","LinksEditor","MultiQueryEditor","OptionsEditorTabs","PanelAnnotationsEditor","PanelSpecEditor","props","ref","control","panelDefinition","variableDefinitionGroups","panelGroups","onQueriesChange","onQueryRun","onPluginSpecChange","onAnnotationsChange","onJSONChange","kind","spec","plugin","data","isLoading","error","version","metadata","registry","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","supportsAnnotations","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","annotations","maxHeight","json","parse","length","displayName"],"mappings":"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"}

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

@@ -1,9 +1,15 @@
 import type { BoxProps } from '@mui/material';
-import type { DatasourceSpec, UnknownSpec } from '@perses-dev/spec';
+import type { DatasourceSpec, PluginDefinitionMetadata, UnknownSpec } from '@perses-dev/spec';
 import type { PluginType } from '../../model';
 export interface PluginEditorSelection {
     type: PluginType;
     kind: string;
+    /**
+     * Optional plugin definition metadata (version and/or registry), matching the `metadata` field of a spec
+     * `Definition`. Only set when the user explicitly picks a specific version/registry of a plugin that has several of
+     * them available. When omitted, the latest available version is used.
+     */
+    metadata?: PluginDefinitionMetadata;
 }
 export interface PluginEditorValue {
     selection: PluginEditorSelection;

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,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpE,OAAO,KAAK,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAM3D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnF;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAkIA"}
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI9F,OAAO,KAAK,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAM3D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,wBAAwB,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnF;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CA2IA"}

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

@@ -63,7 +63,12 @@ import { useEvent } from "../../utils/index.js";
         value.selection,
         defaultPluginKind
     ]);
-    const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');
+    // Load the pending plugin honoring the pinned version/registry, so the initial options come from the exact
+    // implementation the definition will use rather than from the latest one.
+    const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '', {
+        version: pendingSelection?.metadata?.version,
+        registry: pendingSelection?.metadata?.registry
+    });
     useEffect(()=>{
         // Nothing to do if no new plugin kind is pending
         if (!pendingSelection) return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright 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 type { BoxProps } from '@mui/material';\nimport type { DatasourceSpec, UnknownSpec } from '@perses-dev/spec';\nimport { produce } from 'immer';\nimport { useState, useRef, useEffect } from 'react';\n\nimport type { PanelPlugin, PluginType } from '../../model';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\nimport type { PluginKindSelectProps } from '../PluginKindSelect';\nimport type { PluginSpecEditorProps } from '../PluginSpecEditor';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\n}\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  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  withRunQueryButton?: boolean;\n  filteredQueryPlugins?: string[];\n  onChange: (next: PluginEditorValue) => void;\n  onRunQuery?: () => void;\n  testConnection?: (spec: DatasourceSpec, healthCheckPath: string) => Promise<void>;\n}\n\nexport interface PluginEditorRef {\n  flushChanges?: () => 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, 'pluginTypes' | '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  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = 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    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\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 [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined || isFetching) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [\n    pendingSelection,\n    plugin,\n    isFetching,\n    rememberCurrentSpecState,\n    onChange,\n    onHideQuery,\n    hideQueryState,\n    value.selection,\n  ]);\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 onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\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 {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["produce","useState","useRef","useEffect","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright 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 type { BoxProps } from '@mui/material';\nimport type { DatasourceSpec, PluginDefinitionMetadata, UnknownSpec } from '@perses-dev/spec';\nimport { produce } from 'immer';\nimport { useState, useRef, useEffect } from 'react';\n\nimport type { PanelPlugin, PluginType } from '../../model';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\nimport type { PluginKindSelectProps } from '../PluginKindSelect';\nimport type { PluginSpecEditorProps } from '../PluginSpecEditor';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n  /**\n   * Optional plugin definition metadata (version and/or registry), matching the `metadata` field of a spec\n   * `Definition`. Only set when the user explicitly picks a specific version/registry of a plugin that has several of\n   * them available. When omitted, the latest available version is used.\n   */\n  metadata?: PluginDefinitionMetadata;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\n}\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  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  withRunQueryButton?: boolean;\n  filteredQueryPlugins?: string[];\n  onChange: (next: PluginEditorValue) => void;\n  onRunQuery?: () => void;\n  testConnection?: (spec: DatasourceSpec, healthCheckPath: string) => Promise<void>;\n}\n\nexport interface PluginEditorRef {\n  flushChanges?: () => 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, 'pluginTypes' | '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  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = 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    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\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 [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  // Load the pending plugin honoring the pinned version/registry, so the initial options come from the exact\n  // implementation the definition will use rather than from the latest one.\n  const {\n    data: plugin,\n    isFetching,\n    error,\n  } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '', {\n    version: pendingSelection?.metadata?.version,\n    registry: pendingSelection?.metadata?.registry,\n  });\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined || isFetching) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [\n    pendingSelection,\n    plugin,\n    isFetching,\n    rememberCurrentSpecState,\n    onChange,\n    onHideQuery,\n    hideQueryState,\n    value.selection,\n  ]);\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 onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\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 {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["produce","useState","useRef","useEffect","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","version","metadata","registry","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}

package/dist/components/PluginKindSelect/PluginKindSelect.d.ts

@@ -6,6 +6,20 @@ export interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'o
     pluginTypes: PluginType[];
     value?: PluginEditorSelection;
     onChange?: (s: PluginEditorSelection) => void;
+    /**
+     * When true, a plugin that has more than one version available is listed with a `<display name> - Latest` option and
+     * once per version, labeled `<display name> - <version>`. Selecting a specific version sets `metadata.version` on the
+     * selection so it can be persisted on the definition, while selecting Latest leaves the version unpinned. A plugin
+     * with a single available version is listed without a version, so it keeps resolving to the latest one. Defaults to
+     * false.
+     */
+    enableVersionSelection?: boolean;
+    /**
+     * When true, a plugin that is available in more than one registry is listed once per registry, labeled
+     * `<display name> (<registry>)`. Selecting such an option sets `metadata.registry` on the selection. A plugin
+     * available in a single registry is listed without it. Defaults to false.
+     */
+    enableRegistrySelection?: boolean;
 }
 /**
  * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific

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

@@ -1 +1 @@
-{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAKpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHAyD3B,CAAC"}
+{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAMpD,OAAO,KAAK,EAA4B,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAsFD;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHAkH3B,CAAC"}

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -14,6 +14,86 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, TextField } from "@mui/material";
 import { forwardRef, useCallback, useMemo } from "react";
 import { useListPluginMetadata } from "../../runtime/index.js";
+import { comparePluginVersions } from "../../utils/index.js";
+function getVariant(metadata) {
+    return {
+        version: metadata.metadata?.version ?? metadata.module?.version,
+        registry: metadata.metadata?.registry ?? metadata.module?.registry
+    };
+}
+function getVariantKey(variant) {
+    return `${variant.version ?? ''}:${variant.registry ?? ''}`;
+}
+/**
+ * Build the selectable entries of a plugin kind. A version (resp. registry) is only part of the entries when the caller
+ * enabled its selection *and* the plugin is actually installed in more than one version (resp. registry): there is
+ * nothing to pick otherwise, and leaving it out keeps the definition floating on the latest version.
+ */ function getGroupOptions(group, enableVersionSelection, enableRegistrySelection) {
+    const showVersion = enableVersionSelection && group.hasMultipleVersions;
+    const showRegistry = enableRegistrySelection && group.hasMultipleRegistries;
+    if (!showVersion && !showRegistry) {
+        const selection = {
+            type: group.type,
+            kind: group.kind
+        };
+        return [
+            {
+                selection,
+                label: group.displayName,
+                value: selectionToOptionValue(selection)
+            }
+        ];
+    }
+    const options = [];
+    const seen = new Set();
+    if (showVersion) {
+        const selection = {
+            type: group.type,
+            kind: group.kind
+        };
+        options.push({
+            selection,
+            label: `${group.displayName} - Latest`,
+            value: selectionToOptionValue(selection)
+        });
+        seen.add(getVariantKey({}));
+    }
+    for (const variant of group.variants){
+        const version = showVersion ? variant.version : undefined;
+        const registry = showRegistry ? variant.registry : undefined;
+        const metadata = {
+            ...version ? {
+                version
+            } : {},
+            ...registry ? {
+                registry
+            } : {}
+        };
+        // Variants that only differ on a field we don't display collapse into a single entry.
+        const key = getVariantKey({
+            version,
+            registry
+        });
+        if (seen.has(key)) {
+            continue;
+        }
+        seen.add(key);
+        const selection = {
+            type: group.type,
+            kind: group.kind,
+            ...version || registry ? {
+                metadata
+            } : {}
+        };
+        const label = `${group.displayName}${version ? ` - ${version}` : ''}${registry ? ` (${registry})` : ''}`;
+        options.push({
+            selection,
+            label,
+            value: selectionToOptionValue(selection)
+        });
+    }
+    return options;
+}
 /**
  * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific
  * plugin types. (e.g. "Show a list of all the Panel plugins", or "Show a list of all the Variable plugins", or "Show
@@ -21,19 +101,78 @@ import { useListPluginMetadata } from "../../runtime/index.js";
  * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know
  * when the user changes the plugin type (it fires at start for the default value.)
  */ export const PluginKindSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...others } = props;
+    const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, enableVersionSelection = false, enableRegistrySelection = false, ...others } = props;
     const { data, isLoading } = useListPluginMetadata(pluginTypes);
     const sortedData = useMemo(()=>{
-        if (filteredQueryPlugins?.length) {
-            return data?.filter((i)=>filteredQueryPlugins.includes(i.spec.name))?.toSorted((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
-        }
-        return data?.toSorted((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+        const filtered = filteredQueryPlugins?.length ? data?.filter((i)=>filteredQueryPlugins.includes(i.spec.name)) : data;
+        return filtered?.toSorted((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
     }, [
         data,
         filteredQueryPlugins
     ]);
+    // Group the metadata by plugin kind, collecting all the variants each one is installed under (newest version first).
+    const kindGroups = useMemo(()=>{
+        const groups = new Map();
+        for (const metadata of sortedData ?? []){
+            const key = `${metadata.kind}:${metadata.spec.name}`;
+            let group = groups.get(key);
+            if (group === undefined) {
+                group = {
+                    type: metadata.kind,
+                    kind: metadata.spec.name,
+                    displayName: metadata.spec.display.name,
+                    variants: [],
+                    hasMultipleVersions: false,
+                    hasMultipleRegistries: false
+                };
+                groups.set(key, group);
+            }
+            const variant = getVariant(metadata);
+            if (!group.variants.some((existing)=>getVariantKey(existing) === getVariantKey(variant))) {
+                group.variants.push(variant);
+            }
+        }
+        for (const group of groups.values()){
+            group.variants = group.variants.toSorted((a, b)=>comparePluginVersions(b.version ?? '', a.version ?? ''));
+            group.hasMultipleVersions = new Set(group.variants.map((v)=>v.version ?? '')).size > 1;
+            group.hasMultipleRegistries = new Set(group.variants.map((v)=>v.registry ?? '')).size > 1;
+        }
+        return [
+            ...groups.values()
+        ];
+    }, [
+        sortedData
+    ]);
+    const options = useMemo(()=>kindGroups.flatMap((group)=>getGroupOptions(group, enableVersionSelection, enableRegistrySelection)), [
+        kindGroups,
+        enableVersionSelection,
+        enableRegistrySelection
+    ]);
+    const labelsByValue = useMemo(()=>new Map(options.map((option)=>[
+                option.value,
+                option.label
+            ])), [
+        options
+    ]);
     // 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 value = useMemo(()=>{
+        if (!propValue || isLoading) {
+            return '';
+        }
+        const optionValue = selectionToOptionValue(propValue);
+        if (labelsByValue.has(optionValue)) {
+            return optionValue;
+        }
+        // The definition is not pinned (or is pinned to something we don't list): fall back to the first entry of that
+        // plugin kind, which is the one that will actually be used, so the Select has a matching value.
+        const fallback = options.find((option)=>option.selection.type === propValue.type && option.selection.kind === propValue.kind);
+        return fallback?.value ?? optionValue;
+    }, [
+        propValue,
+        isLoading,
+        labelsByValue,
+        options
+    ]);
     const handleChange = (event)=>{
         onChange?.(optionValueToSelection(event.target.value));
     };
@@ -41,10 +180,16 @@ import { useListPluginMetadata } from "../../runtime/index.js";
         if (selected === '') {
             return '';
         }
-        const selectedValue = optionValueToSelection(selected);
-        return sortedData?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
+        const optionValue = selected;
+        const label = labelsByValue.get(optionValue);
+        if (label !== undefined) {
+            return label;
+        }
+        const selectedValue = optionValueToSelection(optionValue);
+        return kindGroups.find((group)=>group.type === selectedValue.type && group.kind === selectedValue.kind)?.displayName;
     }, [
-        sortedData
+        labelsByValue,
+        kindGroups
     ]);
     // TODO: Does this need a loading indicator of some kind?
     return /*#__PURE__*/ _jsxs(TextField, {
@@ -63,14 +208,11 @@ import { useListPluginMetadata } from "../../runtime/index.js";
                 value: "",
                 children: "Loading..."
             }),
-            sortedData?.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
+            options.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
                     "data-testid": "option",
-                    value: selectionToOptionValue({
-                        type: metadata.kind,
-                        kind: metadata.spec.name
-                    }),
-                    children: metadata.spec.display.name
-                }, metadata.kind + metadata.spec.name))
+                    value: option.value,
+                    children: option.label
+                }, option.value))
         ]
     });
 });
@@ -78,29 +220,51 @@ PluginKindSelect.displayName = 'PluginKindSelect';
 // Delimiter used to stringify/parse option values
 const OPTION_VALUE_DELIMITER = '_____';
 /**
- * Given a PluginEditorSelection,
- * returns a string value like `{type}_____{kind}` that can be used as a Select input value.
+ * Given a PluginEditorSelection, returns a string value like `{type}_____{kind}` that can be used as a Select input
+ * value. A pinned version and/or registry is appended as `{type}_____{kind}_____{version}_____{registry}`, with empty
+ * segments for the parts that are not pinned.
  * @param selector
  */ function selectionToOptionValue(selector) {
-    return [
+    const { version, registry } = selector.metadata ?? {};
+    const parts = [
         selector.type,
         selector.kind
-    ].join(OPTION_VALUE_DELIMITER);
+    ];
+    if (version || registry) {
+        parts.push(version ?? '');
+    }
+    if (registry) {
+        parts.push(registry);
+    }
+    return parts.join(OPTION_VALUE_DELIMITER);
 }
 /**
- * Given an option value name like `{type}_____{kind}`,
- * returns a PluginEditorSelection to be used by the query data model.
+ * Given an option value name like `{type}_____{kind}` or `{type}_____{kind}_____{version}_____{registry}`, returns a
+ * PluginEditorSelection to be used by the query data model.
  * @param optionValue
  */ function optionValueToSelection(optionValue) {
     const words = optionValue.split(OPTION_VALUE_DELIMITER);
     const type = words[0];
     const kind = words[1];
+    const version = words[2];
+    const registry = words[3];
     if (type === undefined || kind === undefined) {
         throw new Error('Invalid optionValue string');
     }
+    const metadata = {
+        ...version ? {
+            version
+        } : {},
+        ...registry ? {
+            registry
+        } : {}
+    };
     return {
         type,
-        kind
+        kind,
+        ...version || registry ? {
+            metadata
+        } : {}
     };
 }