From 26fab520864ba58bc70ee3d0cdcc6a1cc6373b94 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Thu, 24 Oct 2024 12:55:29 +0200
Subject: [PATCH] Plugins: Plugin details right panel improvements (#93982)

* Add installed and latest version information

* get latest changelog for changelog tab from gcom

* fix displaying signature type

* fix integration test

* add translations

* remove gcom request at local changelog method
---
 public/app/features/plugins/admin/api.ts      |  3 +--
 .../admin/components/PluginDetailsBody.tsx    |  3 +++
 .../components/PluginDetailsRightPanel.tsx    | 19 +++++++++++++++++++
 .../features/plugins/admin/helpers.test.ts    |  2 ++
 public/app/features/plugins/admin/helpers.ts  |  5 +++++
 public/locales/en-US/grafana.json             |  2 ++
 public/locales/pseudo-LOCALE/grafana.json     |  2 ++
 7 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/app/features/plugins/admin/api.ts b/public/app/features/plugins/admin/api.ts
index 74415b39779..12dff5b852a 100644
--- a/public/app/features/plugins/admin/api.ts
+++ b/public/app/features/plugins/admin/api.ts
@@ -36,7 +36,7 @@ export async function getPluginDetails(id: string): Promise<CatalogPluginDetails
     versions,
     statusContext: remote?.statusContext ?? '',
     iam: remote?.json?.iam,
-    changelog: localChangelog || remote?.changelog,
+    changelog: remote?.changelog || localChangelog,
   };
 }
 
@@ -122,7 +122,6 @@ async function getLocalPluginChangelog(id: string): Promise<string> {
   try {
     const markdown: string = await getBackendSrv().get(`${API_ROOT}/${id}/markdown/CHANGELOG`);
     const markdownAsHtml = markdown ? renderMarkdown(markdown) : '';
-
     return markdownAsHtml;
   } catch (error) {
     if (isFetchError(error)) {
diff --git a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
index 1a76902203c..d1dd68e0bb2 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
@@ -152,6 +152,9 @@ export const getStyles = (theme: GrafanaTheme2) => ({
       '& > p': {
         margin: theme.spacing(1, 0),
       },
+      code: {
+        'white-space': 'pre-wrap',
+      },
     },
     a: {
       color: theme.colors.text.link,
diff --git a/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx b/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx
index 86d6d6650d8..6a791205d68 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx
@@ -3,6 +3,7 @@ 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 = {
@@ -16,7 +17,25 @@ export function PluginDetailsRightPanel(props: Props): React.ReactElement | null
     <Stack direction="column" gap={3} shrink={0} grow={0} maxWidth={'250px'}>
       <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>{plugin.installedVersion}</div>
+            </Stack>
+          )}
           {info.map((infoItem, index) => {
+            if (infoItem.label === 'Version') {
+              return (
+                <Stack key={index} wrap direction="column" gap={0.5}>
+                  <Text color="secondary">
+                    <Trans i18nKey="plugins.details.labels.latestVersion">Latest version: </Trans>
+                  </Text>
+                  <div>{getLatestCompatibleVersion(plugin.details?.versions)?.version}</div>
+                </Stack>
+              );
+            }
             return (
               <Stack key={index} wrap direction="column" gap={0.5}>
                 <Text color="secondary">{infoItem.label + ':'}</Text>
diff --git a/public/app/features/plugins/admin/helpers.test.ts b/public/app/features/plugins/admin/helpers.test.ts
index 95152175022..b47c5bf774b 100644
--- a/public/app/features/plugins/admin/helpers.test.ts
+++ b/public/app/features/plugins/admin/helpers.test.ts
@@ -211,6 +211,8 @@ describe('Plugins/Helpers', () => {
         popularity: 0.2111,
         publishedAt: '2016-04-06T20:23:41.000Z',
         signature: 'valid',
+        signatureOrg: 'Alexander Zobnin',
+        signatureType: 'community',
         type: 'app',
         updatedAt: '2021-05-18T14:53:01.000Z',
         isFullyInstalled: false,
diff --git a/public/app/features/plugins/admin/helpers.ts b/public/app/features/plugins/admin/helpers.ts
index b68a6dd44ee..6310c2603dc 100644
--- a/public/app/features/plugins/admin/helpers.ts
+++ b/public/app/features/plugins/admin/helpers.ts
@@ -118,6 +118,9 @@ export function mapRemoteToCatalog(plugin: RemotePlugin, error?: PluginError): C
     status,
     angularDetected,
     keywords,
+    signatureType,
+    versionSignatureType,
+    versionSignedByOrgName,
   } = plugin;
 
   const isDisabled = !!error || isDisabledSecretsPlugin(typeCode);
@@ -137,6 +140,8 @@ export function mapRemoteToCatalog(plugin: RemotePlugin, error?: PluginError): C
     popularity,
     publishedAt,
     signature: getPluginSignature({ remote: plugin, error }),
+    signatureType: signatureType || versionSignatureType || undefined,
+    signatureOrg: versionSignedByOrgName,
     updatedAt,
     hasUpdate: false,
     isPublished: true,
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 29ed9464d08..460320276da 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -2161,6 +2161,8 @@
         "dependencies": "Dependencies",
         "downloads": "Downloads",
         "from": "From",
+        "installedVersion": "Installed version: ",
+        "latestVersion": "Latest version: ",
         "links": "Links ",
         "reportAbuse": "Report a concern ",
         "signature": "Signature",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index b41dcb052cb..44c71ecee91 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -2161,6 +2161,8 @@
         "dependencies": "Đępęʼnđęʼnčįęş",
         "downloads": "Đőŵʼnľőäđş",
         "from": "Fřőm",
+        "installedVersion": "Ĩʼnşŧäľľęđ vęřşįőʼn: ",
+        "latestVersion": "Ŀäŧęşŧ vęřşįőʼn: ",
         "links": "Ŀįʼnĸş ",
         "reportAbuse": "Ŗępőřŧ ä čőʼnčęřʼn ",
         "signature": "Ŝįģʼnäŧūřę",