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>

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'}>
+    <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>
+              <Stack key={index} wrap direction="column" gap={0.5}>
                 <Text color="secondary">{infoItem.label + ':'}</Text>
                 <div>{infoItem.value}</div>
               </Stack>
             );
           })}
-
           {plugin.updatedAt && (
-        <div>
+            <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>
-        </div>
+            </Stack>
           )}
+        </Stack>
+      </Box>
 
       {plugin?.details?.links && plugin.details?.links?.length > 0 && (
+        <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) => (
-            <div key={index}>
+              <TextLink key={index} href={link.url} external>
-              <TextLink href={link.url} external>
                 {link.name}
               </TextLink>
-            </div>
             ))}
           </Stack>
+        </Box>
       )}
 
       {!plugin?.isCore && (
-        <TextLink href="mailto:integrations@grafana.com" external>
+        <Box padding={2} borderColor="medium" borderStyle="solid">
-          <Trans i18nKey="plugins.details.labels.reportAbuse">Report Abuse</Trans>
+          <Stack direction="column">
-        </TextLink>
+            <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>
   );

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

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

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đäŧęđ: ",