From 99891e1a88d0011d95e2782a917b6e75118fffe6 Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Wed, 28 Jul 2021 15:32:14 +0200
Subject: [PATCH] Catalog: Add breadcrumb to plugin details page (#37095)

* feat(catalog): introduce a breadcrumb to plugindetails page

* refactor(catalog): use aria-labels and nav element for a11y breadcrumbs
---
 .../plugins/admin/pages/PluginDetails.tsx     | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/public/app/features/plugins/admin/pages/PluginDetails.tsx b/public/app/features/plugins/admin/pages/PluginDetails.tsx
index 499ffa36d19..b07842588db 100644
--- a/public/app/features/plugins/admin/pages/PluginDetails.tsx
+++ b/public/app/features/plugins/admin/pages/PluginDetails.tsx
@@ -51,7 +51,7 @@ export default function PluginDetails({ match }: PluginDetailsProps): JSX.Elemen
             <PluginLogo
               src={plugin.info.logos.small}
               className={css`
-                object-fit: cover;
+                object-fit: contain;
                 width: 100%;
                 height: 68px;
                 max-width: 68px;
@@ -59,11 +59,27 @@ export default function PluginDetails({ match }: PluginDetailsProps): JSX.Elemen
             />
 
             <div className={styles.headerWrapper}>
-              <h1>{plugin.name}</h1>
+              <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+                <ol>
+                  <li>
+                    <a
+                      className={css`
+                        text-decoration: underline;
+                      `}
+                      href={'/plugins'}
+                    >
+                      Plugins
+                    </a>
+                  </li>
+                  <li>
+                    <a href={`/plugins/${pluginId}`} aria-current="page">
+                      {plugin.name}
+                    </a>
+                  </li>
+                </ol>
+              </nav>
               <div className={styles.headerLinks}>
-                <a className={styles.headerOrgName} href={'/plugins'}>
-                  {plugin.orgName}
-                </a>
+                <span>{plugin.orgName}</span>
                 {plugin.links.map((link: any) => (
                   <a key={link.name} href={link.url}>
                     {link.name}
@@ -126,13 +142,27 @@ export const getStyles = (theme: GrafanaTheme2) => {
   return {
     headerContainer: css`
       display: flex;
-      margin-bottom: 24px;
-      margin-top: 24px;
+      margin-bottom: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
       min-height: 120px;
     `,
     headerWrapper: css`
       margin-left: ${theme.spacing(3)};
     `,
+    breadcrumb: css`
+      font-size: ${theme.typography.h2.fontSize};
+      li {
+        display: inline;
+        list-style: none;
+        &::after {
+          content: '/';
+          padding: 0 0.25ch;
+        }
+        &:last-child::after {
+          content: '';
+        }
+      }
+    `,
     headerLinks: css`
       display: flex;
       align-items: center;
@@ -144,9 +174,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
           content: '|';
           padding: 0 ${theme.spacing()};
         }
-      }
-      & > *:last-child {
-        &::after {
+        &:last-child::after {
           content: '';
           padding-right: 0;
         }