[ENHANCEMENT] plugin-system: add panel query editor options context

Author: ibakshay

dashboards/src/components/PanelDrawer/PanelQueriesSharedControls.tsx

@@ -87,6 +87,7 @@ export function PanelQueriesSharedControls({
           <PanelSpecEditor
             control={control}
             panelDefinition={panelDefinition}
+            queryOptions={pluginQueryOptions}
             onJSONChange={onJSONChange}
             onQueriesChange={onQueriesChange}
             onQueryRun={handleRunQuery}

plugin-system/src/components/PanelSpecEditor/PanelSpecEditor.tsx

@@ -15,7 +15,13 @@ import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
 import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
 import { Control, Controller } from 'react-hook-form';
 import { forwardRef, ReactElement } from 'react';
-import { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';
+import {
+  QueryCountProvider,
+  QueryEditorOptionsProvider,
+  QueryOptions,
+  useDataQueriesContext,
+  usePlugin,
+} from '../../runtime';
 import { PanelPlugin } from '../../model';
 import { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';
 import { MultiQueryEditor } from '../MultiQueryEditor';
@@ -24,14 +30,15 @@ import { PluginEditorRef } from '../PluginEditor';
 export interface PanelSpecEditorProps {
   control: Control<PanelEditorValues>;
   panelDefinition: PanelDefinition;
+  queryOptions?: QueryOptions;
   onQueriesChange: (queries: QueryDefinition[]) => void;
   onQueryRun: (index: number, query: QueryDefinition) => void;
   onPluginSpecChange: (spec: UnknownSpec) => void;
   onJSONChange: (panelDefinitionStr: string) => void;
 }
 
 export const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {
-  const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
+  const { control, panelDefinition, queryOptions, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
   const { kind } = panelDefinition.spec.plugin;
   const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
 
@@ -132,9 +139,11 @@ export const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>
   });
 
   return (
-    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>
-      <OptionsEditorTabs key={tabs.length} tabs={tabs} />
-    </QueryCountProvider>
+    <QueryEditorOptionsProvider options={queryOptions}>
+      <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>
+        <OptionsEditorTabs key={tabs.length} tabs={tabs} />
+      </QueryCountProvider>
+    </QueryEditorOptionsProvider>
   );
 });
 

plugin-system/src/runtime/QueryEditorOptionsProvider.tsx

@@ -0,0 +1,31 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { createContext, ReactElement, ReactNode, useContext } from 'react';
+
+export type QueryEditorOptions = Record<string, unknown>;
+
+const QueryEditorOptionsContext = createContext<QueryEditorOptions>({});
+
+export interface QueryEditorOptionsProviderProps {
+  options?: QueryEditorOptions;
+  children: ReactNode;
+}
+
+export function QueryEditorOptionsProvider({ options, children }: QueryEditorOptionsProviderProps): ReactElement {
+  return <QueryEditorOptionsContext.Provider value={options ?? {}}>{children}</QueryEditorOptionsContext.Provider>;
+}
+
+export function useQueryEditorOptions<T extends QueryEditorOptions = QueryEditorOptions>(): T {
+  return useContext(QueryEditorOptionsContext) as T;
+}

plugin-system/src/runtime/index.ts

@@ -22,5 +22,6 @@ export * from './profile-queries';
 export * from './item-actions';
 export * from './DataQueriesProvider';
 export * from './QueryCountProvider';
+export * from './QueryEditorOptionsProvider';
 export * from './RouterProvider';
 export * from './UsageMetricsProvider';