diff --git a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx index c0c840d7e75..034b2374a88 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx @@ -4,24 +4,17 @@ import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2, Icon, Stack } from '@grafana/ui'; -import { Version, CatalogPlugin, PluginIconName } from '../types'; +import { CatalogPlugin, PluginIconName } from '../types'; type Props = { plugin: CatalogPlugin; - latestCompatibleVersion?: Version; + grafanaDependency?: string; className?: string; }; -export function PluginDetailsHeaderDependencies({ - plugin, - latestCompatibleVersion, - className, -}: Props): React.ReactElement | null { +export function PluginDetailsHeaderDependencies({ plugin, grafanaDependency }: Props): React.ReactElement | null { const styles = useStyles2(getStyles); const pluginDependencies = plugin.details?.pluginDependencies; - const grafanaDependency = plugin.isInstalled - ? plugin.details?.grafanaDependency - : latestCompatibleVersion?.grafanaDependency || plugin.details?.grafanaDependency; const hasNoDependencyInfo = !grafanaDependency && (!pluginDependencies || !pluginDependencies.length); if (hasNoDependencyInfo) { diff --git a/public/app/features/plugins/admin/hooks/usePluginInfo.tsx b/public/app/features/plugins/admin/hooks/usePluginInfo.tsx index 8874d62d0b3..ecd946d414e 100644 --- a/public/app/features/plugins/admin/hooks/usePluginInfo.tsx +++ b/public/app/features/plugins/admin/hooks/usePluginInfo.tsx @@ -19,7 +19,11 @@ export const usePluginInfo = (plugin?: CatalogPlugin): PageInfoItem[] => { // Populate info const latestCompatibleVersion = getLatestCompatibleVersion(plugin.details?.versions); - const version = plugin.installedVersion || latestCompatibleVersion?.version; + const useLatestCompatibleInfo = !plugin.isInstalled; + let version = plugin.installedVersion; + if (!version && useLatestCompatibleInfo && latestCompatibleVersion?.version) { + version = latestCompatibleVersion?.version; + } if (Boolean(version)) { info.push({ @@ -47,15 +51,16 @@ export const usePluginInfo = (plugin?: CatalogPlugin): PageInfoItem[] => { } const pluginDependencies = plugin.details?.pluginDependencies; - const grafanaDependency = plugin.isInstalled - ? plugin.details?.grafanaDependency - : latestCompatibleVersion?.grafanaDependency || plugin.details?.grafanaDependency; + let grafanaDependency = plugin.details?.grafanaDependency; + if (useLatestCompatibleInfo && latestCompatibleVersion?.grafanaDependency) { + grafanaDependency = latestCompatibleVersion?.grafanaDependency; + } const hasNoDependencyInfo = !grafanaDependency && (!pluginDependencies || !pluginDependencies.length); if (!hasNoDependencyInfo) { info.push({ label: 'Dependencies', - value: <PluginDetailsHeaderDependencies plugin={plugin} latestCompatibleVersion={latestCompatibleVersion} />, + value: <PluginDetailsHeaderDependencies plugin={plugin} grafanaDependency={grafanaDependency} />, }); }