diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx index 51aae32d1f..87d316f7b7 100644 --- a/src/frontend/src/components/nav/PanelGroup.tsx +++ b/src/frontend/src/components/nav/PanelGroup.tsx @@ -43,6 +43,7 @@ import { PanelType } from './Panel'; export type PanelProps = { pageKey: string; panels: PanelType[]; + targetInstance?: any; targetModel?: ModelType | string; targetId?: number | null; selectedPanel?: string; @@ -55,6 +56,7 @@ function BasePanelGroup({ panels, onPanelChange, selectedPanel, + targetInstance, targetModel, targetId, collapsible = true diff --git a/src/frontend/src/components/plugins/PluginPanel.tsx b/src/frontend/src/components/plugins/PluginPanel.tsx index 0da74d05a5..0f694f2673 100644 --- a/src/frontend/src/components/plugins/PluginPanel.tsx +++ b/src/frontend/src/components/plugins/PluginPanel.tsx @@ -10,6 +10,7 @@ import { PanelType } from '../nav/Panel'; interface PluginPanelProps extends PanelType { src?: string; params?: any; + targetInstance?: any; targetModel?: ModelType | string; targetId?: string | number | null; } @@ -22,6 +23,7 @@ interface PluginPanelParameters { props: PluginPanelProps; targetModel?: ModelType | string; targetId?: number | null; + targetInstance?: any; api: AxiosInstance; } @@ -39,6 +41,7 @@ function PanelNoContent() { * * - api instance * - custom context data from server + * - model instance (already fetched via API) */ /** @@ -68,7 +71,8 @@ export default function PluginPanel({ props }: { props: PluginPanelProps }) { props: props, api: api, targetModel: props.targetModel, - targetId: props.targetId + targetId: props.targetId, + targetInstance: props.targetInstance }); } }; diff --git a/src/frontend/src/hooks/UsePluginPanels.tsx b/src/frontend/src/hooks/UsePluginPanels.tsx index b37d311e74..6181b3b205 100644 --- a/src/frontend/src/hooks/UsePluginPanels.tsx +++ b/src/frontend/src/hooks/UsePluginPanels.tsx @@ -18,9 +18,11 @@ export type PluginPanelState = { }; export function usePluginPanels({ + targetInstance, targetModel, targetId }: { + targetInstance?: any; targetModel?: ModelType | string; targetId?: string | number | null; }): PluginPanelState { @@ -33,7 +35,7 @@ export function usePluginPanels({ // API query to fetch information on available plugin panels const { isFetching, data } = useQuery({ - enabled: pluginPanelsEnabled && !!targetModel, + enabled: pluginPanelsEnabled && !!targetModel && targetId != undefined, queryKey: [targetModel, targetId], queryFn: async () => { if (!pluginPanelsEnabled || !targetModel) { @@ -63,7 +65,16 @@ export function usePluginPanels({ name: identifierString(`${pluginKey}-${panel.name}`), label: panel.label || t`Plugin Panel`, icon: , - content: + content: ( + + ) }; }) ?? [] );