diff --git a/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts b/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts index 0a587e25c92..251523db9ee 100644 --- a/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts +++ b/public/app/features/plugins/admin/__mocks__/catalogPlugin.mock.ts @@ -22,6 +22,7 @@ export default { isPublished: true, isManaged: false, isPreinstalled: { found: false, withVersion: false }, + latestVersion: '4.2.2', name: 'Zabbix', orgName: 'Alexander Zobnin', popularity: 0.2093, diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx index 27df365178c..2169f41e564 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx @@ -64,7 +64,8 @@ const mockPlugin: CatalogPlugin = { }; const mockInfo = [ - { label: 'Version', value: '1.1.0' }, + { label: 'Installed version', value: '1.0.0' }, + { label: 'Latest version', value: '1.2.0' }, { label: 'Author', value: 'Test Author' }, ]; @@ -81,7 +82,7 @@ describe('PluginDetailsPanel', () => { it('should render latest version information', () => { render(); expect(screen.getByText('Latest version:')).toBeInTheDocument(); - expect(screen.getByText('1.1.0')).toBeInTheDocument(); + expect(screen.getByText('1.2.0')).toBeInTheDocument(); }); it('should render links section when plugin has links', () => { diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx index 938c1a8db17..ad678656742 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx @@ -2,11 +2,10 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; import { PageInfoItem } from '@grafana/runtime/src/components/PluginPage'; -import { Stack, Text, LinkButton, Box, TextLink, useStyles2 } from '@grafana/ui'; +import { Stack, Text, LinkButton, Box, TextLink } from '@grafana/ui'; import { Trans } from 'app/core/internationalization'; import { formatDate } from 'app/core/internationalization/dates'; -import { getLatestCompatibleVersion } from '../helpers'; import { CatalogPlugin } from '../types'; type Props = { @@ -18,31 +17,11 @@ type Props = { export function PluginDetailsPanel(props: Props): React.ReactElement | null { const { pluginExtentionsInfo, plugin, width = '250px' } = props; - const styles = useStyles2(getStyles); return ( - {plugin.isInstalled && plugin.installedVersion && ( - - - Installed version: - -
{plugin.installedVersion}
-
- )} - - - Latest version: - -
- {plugin.latestVersion || getLatestCompatibleVersion(plugin.details?.versions)?.version} -
-
{pluginExtentionsInfo.map((infoItem, index) => { - if (infoItem.label === 'Version') { - return null; - } return ( {infoItem.label + ':'} diff --git a/public/app/features/plugins/admin/hooks/usePluginInfo.tsx b/public/app/features/plugins/admin/hooks/usePluginInfo.tsx index be9a6c2c9aa..1bb1334e1ef 100644 --- a/public/app/features/plugins/admin/hooks/usePluginInfo.tsx +++ b/public/app/features/plugins/admin/hooks/usePluginInfo.tsx @@ -20,23 +20,40 @@ export const usePluginInfo = (plugin?: CatalogPlugin): PageInfoItem[] => { // Populate info const latestCompatibleVersion = getLatestCompatibleVersion(plugin.details?.versions); const useLatestCompatibleInfo = !plugin.isInstalled; - let version = plugin.installedVersion; - if (!version && useLatestCompatibleInfo && latestCompatibleVersion?.version) { - version = latestCompatibleVersion?.version; - } - if (version) { - if (plugin.isManaged) { - info.push({ - label: t('plugins.details.labels.version', 'Version'), - value: 'Managed by Grafana', - }); - } else { - info.push({ - label: t('plugins.details.labels.version', 'Version'), - value: `${version}${plugin.isPreinstalled.withVersion ? ' (preinstalled)' : ''}`, - }); + const installedVersion = plugin.installedVersion; + const latestVersion = plugin.latestVersion; + + if (installedVersion || latestVersion) { + const managedVersionText = 'Managed by Grafana'; + + const addInfo = (label: string, value: string | undefined) => { + if (value) { + info.push({ + label: + label === 'installedVersion' + ? t('plugins.details.labels.installedVersion', 'Installed Version') + : t('plugins.details.labels.latestVersion', 'Latest Version'), + value, + }); + } + }; + + if (plugin.isInstalled) { + const installedVersionValue = plugin.isManaged ? managedVersionText : installedVersion; + addInfo('installedVersion', installedVersionValue); } + + let latestVersionValue; + if (plugin.isManaged) { + latestVersionValue = managedVersionText; + } else if (plugin.isPreinstalled?.withVersion) { + latestVersionValue = `${latestVersion} (preinstalled)`; + } else { + latestVersionValue = latestVersion; + } + + addInfo('latestVersion', latestVersionValue); } if (Boolean(plugin.orgName)) { diff --git a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx index cca2d83f736..0ff39437740 100644 --- a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx +++ b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx @@ -182,7 +182,8 @@ describe('Plugin details page', () => { it('should display the installed version if a plugin is installed', async () => { const installedVersion = '1.3.443'; - const { queryByText } = renderPluginDetails({ id, installedVersion }); + const isInstalled = true; + const { queryByText } = renderPluginDetails({ id, isInstalled, installedVersion }); expect(await queryByText(`${installedVersion}`)).toBeInTheDocument(); }); @@ -200,7 +201,7 @@ describe('Plugin details page', () => { }; const { findByText, queryByText } = renderPluginDetails({ id, details }); - expect(await findByText('1.1.1')).toBeInTheDocument(); + expect(await findByText('4.2.2')).toBeInTheDocument(); expect(queryByText(/>=8.0.0/i)).toBeInTheDocument(); }); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index cccc9867be9..d4ecfb90224 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -2521,15 +2521,14 @@ "dependencies": "Dependencies", "downloads": "Downloads", "from": "From", - "installedVersion": "Installed version: ", + "installedVersion": "Installed Version", "lastCommitDate": "Last commit date:", - "latestVersion": "Latest version: ", + "latestVersion": "Latest Version", "links": "Links ", "reportAbuse": "Report a concern ", "signature": "Signature", "status": "Status", - "updatedAt": "Last updated:", - "version": "Version" + "updatedAt": "Last updated:" } }, "empty-state": { diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 8b288f78bba..340bd89b16d 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -2521,15 +2521,14 @@ "dependencies": "Đępęʼnđęʼnčįęş", "downloads": "Đőŵʼnľőäđş", "from": "Fřőm", - "installedVersion": "Ĩʼnşŧäľľęđ vęřşįőʼn: ", + "installedVersion": "Ĩʼnşŧäľľęđ Vęřşįőʼn", "lastCommitDate": "Ŀäşŧ čőmmįŧ đäŧę:", - "latestVersion": "Ŀäŧęşŧ vęřşįőʼn: ", + "latestVersion": "Ŀäŧęşŧ Vęřşįőʼn", "links": "Ŀįʼnĸş ", "reportAbuse": "Ŗępőřŧ ä čőʼnčęřʼn ", "signature": "Ŝįģʼnäŧūřę", "status": "Ŝŧäŧūş", - "updatedAt": "Ŀäşŧ ūpđäŧęđ:", - "version": "Vęřşįőʼn" + "updatedAt": "Ŀäşŧ ūpđäŧęđ:" } }, "empty-state": {