[Dashboard] Fix breadcrumb update icon does not working when clicked (#…

…192240) ## Summary Fixes #186132 In the `header_breadcrumbs.test.tsx`, forces the last breadcrumb inactivity. So `onClick` did not take effect finally. So, I'm considering putting `onClick` on the update icon. PS: This is my first time to contribute code to kibana. If there is anything that needs to be modified, please give me some advice and I will try my best. Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Hannah Mudge <[email protected]>
elastic · Sep 10, 2024 · 1a51180 · 1a51180
1 parent 5ec0cb0
commit 1a51180
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_top_nav/_dashboard_top_nav.scss b/src/plugins/dashboard/public/dashboard_top_nav/_dashboard_top_nav.scss
@@ -1,4 +1,9 @@
 .kbnBody {
+  .dshTitleBreadcrumbs__updateIcon {
+    margin-left: $euiSizeXS;
+    cursor: pointer;
+  }
+
   .dashboardTopNav {
     width: 100%;
     position: sticky;

diff --git a/src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -172,17 +172,17 @@ export function InternalDashboardTopNav({
         text:
           viewMode === ViewMode.EDIT ? (
             <>
-              {dashboardTitle} <EuiIcon size="s" type="pencil" />
+              {dashboardTitle}
+              <EuiIcon
+                size="s"
+                type="pencil"
+                className="dshTitleBreadcrumbs__updateIcon"
+                onClick={() => dashboard.showSettings()}
+              />
             </>
           ) : (
             dashboardTitle
           ),
-        onClick:
-          viewMode === ViewMode.EDIT
-            ? () => {
-                dashboard.showSettings();
-              }
-            : undefined,
       },
     ];