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

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

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,

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>

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,

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,

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",

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äŧūřę",