Plugins: Fix Managed By Grafana version display for grafana cloud (#98577)

* Change usePluginInfo to keep installed and latest version

* fix tests, delete console.log

* fix isManaged plugin which s not installed

* refactor add versions into info

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,

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(<PluginDetailsPanel plugin={mockPlugin} pluginExtentionsInfo={mockInfo} />);
     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', () => {

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 (
     <Stack direction="column" gap={3} shrink={0} grow={0} maxWidth={width} data-testid="plugin-details-panel">
       <Box padding={2} borderColor="medium" borderStyle="solid">
         <Stack direction="column" gap={2}>
-          {plugin.isInstalled && plugin.installedVersion && (
-            <Stack wrap direction="column" gap={0.5}>
-              <Text color="secondary">
-                <Trans i18nKey="plugins.details.labels.installedVersion">Installed version: </Trans>
-              </Text>
-              <div className={styles.pluginVersionDetails}>{plugin.installedVersion}</div>
-            </Stack>
-          )}
-          <Stack wrap direction="column" gap={0.5}>
-            <Text color="secondary">
-              <Trans i18nKey="plugins.details.labels.latestVersion">Latest version: </Trans>
-            </Text>
-            <div className={styles.pluginVersionDetails}>
-              {plugin.latestVersion || getLatestCompatibleVersion(plugin.details?.versions)?.version}
-            </div>
-          </Stack>
           {pluginExtentionsInfo.map((infoItem, index) => {
-            if (infoItem.label === 'Version') {
-              return null;
-            }
             return (
               <Stack key={index} wrap direction="column" gap={0.5}>
                 <Text color="secondary">{infoItem.label + ':'}</Text>

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)) {

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();
     });
 

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": {

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": {