From f88571c2e7e767b0ce3b2dab74d0e2f768617934 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Wed, 11 Sep 2024 11:44:16 +0200
Subject: [PATCH] Plugins: Plugin details right panel UI improvements (#93171)

* UI improvements WIP

* change links appearance and layout for plugin details right panel

* Changed external links back

* Update public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx

Co-authored-by: David Harris <david.harris@grafana.com>

* Update public/locales/en-US/grafana.json

Co-authored-by: David Harris <david.harris@grafana.com>

* fix report abuse to report concern

---------

Co-authored-by: David Harris <david.harris@grafana.com>
---
 .../components/PluginDetailsRightPanel.tsx    | 72 +++++++++++--------
 .../admin/pages/PluginDetails.test.tsx        |  4 +-
 public/locales/en-US/grafana.json             |  4 +-
 public/locales/pseudo-LOCALE/grafana.json     |  4 +-
 4 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx b/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx
index 61303e61e33..86d6d6650d8 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsRightPanel.tsx
@@ -1,5 +1,5 @@
 import { PageInfoItem } from '@grafana/runtime/src/components/PluginPage';
-import { TextLink, Stack, Text } 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';
 
@@ -12,43 +12,55 @@ type Props = {
 
 export function PluginDetailsRightPanel(props: Props): React.ReactElement | null {
   const { info, plugin } = props;
-
   return (
-    <Stack direction="column" gap={1} grow={0} shrink={0} maxWidth={'250px'}>
-      {info.map((infoItem, index) => {
-        return (
-          <Stack key={index} wrap>
-            <Text color="secondary">{infoItem.label + ':'}</Text>
-            <div>{infoItem.value}</div>
-          </Stack>
-        );
-      })}
-
-      {plugin.updatedAt && (
-        <div>
-          <Text color="secondary">
-            <Trans i18nKey="plugins.details.labels.updatedAt">Last updated: </Trans>
-          </Text>{' '}
-          <Text>{formatDate(new Date(plugin.updatedAt))}</Text>
-        </div>
-      )}
+    <Stack direction="column" gap={3} shrink={0} grow={0} maxWidth={'250px'}>
+      <Box padding={2} borderColor="medium" borderStyle="solid">
+        <Stack direction="column" gap={2}>
+          {info.map((infoItem, index) => {
+            return (
+              <Stack key={index} wrap direction="column" gap={0.5}>
+                <Text color="secondary">{infoItem.label + ':'}</Text>
+                <div>{infoItem.value}</div>
+              </Stack>
+            );
+          })}
+          {plugin.updatedAt && (
+            <Stack direction="column" gap={0.5}>
+              <Text color="secondary">
+                <Trans i18nKey="plugins.details.labels.updatedAt">Last updated: </Trans>
+              </Text>{' '}
+              <Text>{formatDate(new Date(plugin.updatedAt))}</Text>
+            </Stack>
+          )}
+        </Stack>
+      </Box>
 
       {plugin?.details?.links && plugin.details?.links?.length > 0 && (
-        <Stack direction="column" gap={2}>
-          {plugin.details.links.map((link, index) => (
-            <div key={index}>
-              <TextLink href={link.url} external>
+        <Box padding={2} borderColor="medium" borderStyle="solid">
+          <Stack direction="column" gap={2}>
+            <Text color="secondary">
+              <Trans i18nKey="plugins.details.labels.links">Links </Trans>
+            </Text>
+            {plugin.details.links.map((link, index) => (
+              <TextLink key={index} href={link.url} external>
                 {link.name}
               </TextLink>
-            </div>
-          ))}
-        </Stack>
+            ))}
+          </Stack>
+        </Box>
       )}
 
       {!plugin?.isCore && (
-        <TextLink href="mailto:integrations@grafana.com" external>
-          <Trans i18nKey="plugins.details.labels.reportAbuse">Report Abuse</Trans>
-        </TextLink>
+        <Box padding={2} borderColor="medium" borderStyle="solid">
+          <Stack direction="column">
+            <Text color="secondary">
+              <Trans i18nKey="plugins.details.labels.reportAbuse">Report a concern </Trans>
+            </Text>
+            <LinkButton href="mailto:integrations@grafana.com" variant="secondary" fill="solid">
+              <Trans i18nKey="plugins.details.labels.contactGrafanaLabs">Contact Grafana Labs</Trans>
+            </LinkButton>
+          </Stack>
+        </Box>
       )}
     </Stack>
   );
diff --git a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
index 41303424649..951aaa08a12 100644
--- a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
+++ b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
@@ -913,13 +913,13 @@ describe('Plugin details page', () => {
       config.featureToggles.pluginsDetailsRightPanel = false;
     });
 
-    it('should display Last updated and report abuse information', async () => {
+    it('should display Last updated and report a concern information', async () => {
       const id = 'right-panel-test-plugin';
       const updatedAt = '2023-10-26T16:54:55.000Z';
       const { queryByText } = renderPluginDetails({ id, updatedAt });
       expect(queryByText('Last updated:')).toBeVisible();
       expect(queryByText('10/26/2023')).toBeVisible();
-      expect(queryByText('Report Abuse')).toBeVisible();
+      expect(queryByText('Report a concern')).toBeVisible();
     });
 
     it('should not display Last updated if there is no updated At data', async () => {
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 2e4acb53181..cb543308190 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1893,10 +1893,12 @@
     },
     "details": {
       "labels": {
+        "contactGrafanaLabs": "Contact Grafana Labs",
         "dependencies": "Dependencies",
         "downloads": "Downloads",
         "from": "From",
-        "reportAbuse": "Report Abuse",
+        "links": "Links ",
+        "reportAbuse": "Report a concern ",
         "signature": "Signature",
         "status": "Status",
         "updatedAt": "Last updated: ",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 5ffa4a799f3..f3244f3faea 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1893,10 +1893,12 @@
     },
     "details": {
       "labels": {
+        "contactGrafanaLabs": "Cőʼnŧäčŧ Ğřäƒäʼnä Ŀäþş",
         "dependencies": "Đępęʼnđęʼnčįęş",
         "downloads": "Đőŵʼnľőäđş",
         "from": "Fřőm",
-        "reportAbuse": "Ŗępőřŧ Åþūşę",
+        "links": "Ŀįʼnĸş ",
+        "reportAbuse": "Ŗępőřŧ ä čőʼnčęřʼn ",
         "signature": "Ŝįģʼnäŧūřę",
         "status": "Ŝŧäŧūş",
         "updatedAt": "Ŀäşŧ ūpđäŧęđ: ",