From 1a5118042d7d853bcff0697db18b2f461e2f943c Mon Sep 17 00:00:00 2001
From: Jusheng Huang <117657272+viajes7@users.noreply.github.com>
Date: Wed, 11 Sep 2024 01:25:14 +0800
Subject: [PATCH] [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 <elasticmachine@users.noreply.github.com>
Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
---
 .../dashboard_top_nav/_dashboard_top_nav.scss      |  5 +++++
 .../internal_dashboard_top_nav.tsx                 | 14 +++++++-------
 2 files changed, 12 insertions(+), 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
index e73de35dfc41d..6b0141a50861d 100644
--- 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
index 4ad82045d5146..e2b93e2c9764e 100644
--- 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,
       },
     ];