From 1b14678b3866b4cad0fee676c05e5ce2fc08ec45 Mon Sep 17 00:00:00 2001
From: sayuree <52072402+sayuree@users.noreply.github.com>
Date: Tue, 18 Apr 2023 05:11:43 +0600
Subject: [PATCH] Add tooltip to help icon (#3626)

* Add tooltip to help icon

Signed-off-by: sabina.zaripova <sabina.zaripova@nu.edu.kz>

Add tooltip to menu icon

Signed-off-by: sabina.zaripova <sabina.zaripova@nu.edu.kz>
---
 CHANGELOG.md                                  |  1 +
 .../header/__snapshots__/header.test.tsx.snap | 46 +++++++++++++++++++
 .../header_help_menu.test.tsx.snap            | 40 ++++++++++++++++
 src/core/public/chrome/ui/header/header.tsx   |  8 +++-
 .../chrome/ui/header/header_help_menu.tsx     |  8 ++++
 5 files changed, 102 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d272f3b3459..2e92e153f38d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -224,6 +224,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [VisBuilder] Rename "Histogram" to "Bar" in visualization type picker ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))
 - [Table Visualization] Fix an issue preventing sorting the first column ([#2828](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2828))
 - Temporary workaround for task-kill exceptions on Windows when it is passed a pid for a process that is already dead ([#2842](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2842))
+- Add clarifying tooltips to header navigation ([#3573](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/3573))
 
 ### 🚞 Infrastructure
 
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index c7e883d9b00b..6486e207ed37 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -2798,6 +2798,7 @@ exports[`Header handles visibility and lock changes 1`] = `
                                 >
                                   <span
                                     data-euiicon-type="menu"
+                                    title="Menu"
                                   />
                                 </span>
                               </span>
@@ -2842,11 +2843,13 @@ exports[`Header handles visibility and lock changes 1`] = `
                               >
                                 <EuiIcon
                                   size="m"
+                                  title="Menu"
                                   type="menu"
                                 >
                                   <span
                                     data-euiicon-type="menu"
                                     size="m"
+                                    title="Menu"
                                   />
                                 </EuiIcon>
                               </span>
@@ -5416,6 +5419,11 @@ exports[`Header handles visibility and lock changes 1`] = `
                               size="m"
                               type="questionInCircle"
                             />
+                            <EuiIcon
+                              size="m"
+                              title="Help"
+                              type="help"
+                            />
                           </EuiHeaderSectionItemButton>
                         }
                         closePopover={[Function]}
@@ -5467,6 +5475,10 @@ exports[`Header handles visibility and lock changes 1`] = `
                                             <span
                                               data-euiicon-type="questionInCircle"
                                             />
+                                            <span
+                                              data-euiicon-type="help"
+                                              title="Help"
+                                            />
                                           </span>
                                         </span>
                                       </span>
@@ -5514,6 +5526,17 @@ exports[`Header handles visibility and lock changes 1`] = `
                                               size="m"
                                             />
                                           </EuiIcon>
+                                          <EuiIcon
+                                            size="m"
+                                            title="Help"
+                                            type="help"
+                                          >
+                                            <span
+                                              data-euiicon-type="help"
+                                              size="m"
+                                              title="Help"
+                                            />
+                                          </EuiIcon>
                                         </span>
                                       </span>
                                     </span>
@@ -8117,6 +8140,7 @@ exports[`Header renders condensed header 1`] = `
                                 >
                                   <span
                                     data-euiicon-type="menu"
+                                    title="Menu"
                                   />
                                 </span>
                               </span>
@@ -8161,11 +8185,13 @@ exports[`Header renders condensed header 1`] = `
                               >
                                 <EuiIcon
                                   size="m"
+                                  title="Menu"
                                   type="menu"
                                 >
                                   <span
                                     data-euiicon-type="menu"
                                     size="m"
+                                    title="Menu"
                                   />
                                 </EuiIcon>
                               </span>
@@ -10652,6 +10678,11 @@ exports[`Header renders condensed header 1`] = `
                               size="m"
                               type="questionInCircle"
                             />
+                            <EuiIcon
+                              size="m"
+                              title="Help"
+                              type="help"
+                            />
                           </EuiHeaderSectionItemButton>
                         }
                         closePopover={[Function]}
@@ -10703,6 +10734,10 @@ exports[`Header renders condensed header 1`] = `
                                             <span
                                               data-euiicon-type="questionInCircle"
                                             />
+                                            <span
+                                              data-euiicon-type="help"
+                                              title="Help"
+                                            />
                                           </span>
                                         </span>
                                       </span>
@@ -10750,6 +10785,17 @@ exports[`Header renders condensed header 1`] = `
                                               size="m"
                                             />
                                           </EuiIcon>
+                                          <EuiIcon
+                                            size="m"
+                                            title="Help"
+                                            type="help"
+                                          >
+                                            <span
+                                              data-euiicon-type="help"
+                                              size="m"
+                                              title="Help"
+                                            />
+                                          </EuiIcon>
                                         </span>
                                       </span>
                                     </span>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_help_menu.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_help_menu.test.tsx.snap
index 835c2d8d4a4e..5406fbf6abaa 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_help_menu.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_help_menu.test.tsx.snap
@@ -1626,6 +1626,11 @@ exports[`Header help menu hides survey link 1`] = `
             size="m"
             type="questionInCircle"
           />
+          <EuiIcon
+            size="m"
+            title="Help"
+            type="help"
+          />
         </EuiHeaderSectionItemButton>
       }
       closePopover={[Function]}
@@ -1677,6 +1682,10 @@ exports[`Header help menu hides survey link 1`] = `
                           <span
                             data-euiicon-type="questionInCircle"
                           />
+                          <span
+                            data-euiicon-type="help"
+                            title="Help"
+                          />
                         </span>
                       </span>
                     </span>
@@ -1724,6 +1733,17 @@ exports[`Header help menu hides survey link 1`] = `
                             size="m"
                           />
                         </EuiIcon>
+                        <EuiIcon
+                          size="m"
+                          title="Help"
+                          type="help"
+                        >
+                          <span
+                            data-euiicon-type="help"
+                            size="m"
+                            title="Help"
+                          />
+                        </EuiIcon>
                       </span>
                     </span>
                   </span>
@@ -3782,6 +3802,11 @@ exports[`Header help menu renders survey link 1`] = `
             size="m"
             type="questionInCircle"
           />
+          <EuiIcon
+            size="m"
+            title="Help"
+            type="help"
+          />
         </EuiHeaderSectionItemButton>
       }
       closePopover={[Function]}
@@ -3833,6 +3858,10 @@ exports[`Header help menu renders survey link 1`] = `
                           <span
                             data-euiicon-type="questionInCircle"
                           />
+                          <span
+                            data-euiicon-type="help"
+                            title="Help"
+                          />
                         </span>
                       </span>
                     </span>
@@ -3880,6 +3909,17 @@ exports[`Header help menu renders survey link 1`] = `
                             size="m"
                           />
                         </EuiIcon>
+                        <EuiIcon
+                          size="m"
+                          title="Help"
+                          type="help"
+                        >
+                          <span
+                            data-euiicon-type="help"
+                            size="m"
+                            title="Help"
+                          />
+                        </EuiIcon>
                       </span>
                     </span>
                   </span>
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 917d1ebd4c46..a78371f4f264 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -173,7 +173,13 @@ export function Header({
                   aria-controls={navId}
                   ref={toggleCollapsibleNavRef}
                 >
-                  <EuiIcon type="menu" size="m" />
+                  <EuiIcon
+                    type="menu"
+                    size="m"
+                    title={i18n.translate('core.ui.primaryNav.menu', {
+                      defaultMessage: 'Menu',
+                    })}
+                  />
                 </EuiHeaderSectionItemButton>
               </EuiHeaderSectionItem>
 
diff --git a/src/core/public/chrome/ui/header/header_help_menu.tsx b/src/core/public/chrome/ui/header/header_help_menu.tsx
index 6f536184edc1..f0be769937f5 100644
--- a/src/core/public/chrome/ui/header/header_help_menu.tsx
+++ b/src/core/public/chrome/ui/header/header_help_menu.tsx
@@ -331,6 +331,14 @@ class HeaderHelpMenuUI extends Component<Props, State> {
         onClick={this.onMenuButtonClick}
       >
         <EuiIcon type="questionInCircle" size="m" />
+        <EuiIcon
+          type="help"
+          size="m"
+          title={intl.formatMessage({
+            id: 'core.ui.chrome.headerGlobalNav.helpMenuButtonTitle',
+            defaultMessage: 'Help',
+          })}
+        />
       </EuiHeaderSectionItemButton>
     );