fix: use react router links in lieu of redirect for gh main menu subelements (#5828)

Author: wdoconnell

cypress/e2e/cloud/globalHeader.test.ts

@@ -117,7 +117,6 @@ describe('change-account change-org global header', () => {
       })
 
       it('navigates to the org members page', () => {
-        makeQuartzUseIDPEOrgID()
         makeQuartzUseIDPEOrgID()
         cy.getByTestID('globalheader--org-dropdown')
           .should('be.visible')
@@ -243,6 +242,12 @@ describe('change-account change-org global header', () => {
   })
 
   describe('user profile avatar', {scrollBehavior: false}, () => {
+    before(() => {
+      makeQuartzUseIDPEOrgID()
+      cy.setFeatureFlags(globalHeaderFeatureFlags)
+      cy.visit('/')
+    })
+
     it('navigates to the `user profile` page', () => {
       makeQuartzUseIDPEOrgID()
       cy.getByTestID('global-header--user-avatar').should('be.visible').click()

src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderDropdown.scss

@@ -1,19 +1,14 @@
 @import '@influxdata/clockface/dist/variables.scss';
 
-.global-header--dropdown-button {
-  background: transparent;
-}
-.global-header--typeahead-item {
-  width: 100%;
-  padding-left: 14px;
+.button-icon {
+  color: $cf-grey-75;
+  margin-right: 8px;
+  font-size: 18px;
+  width: 18px;
 }
 
-.global-header--typeahead-input {
-  margin-top: 4px;
-  margin-bottom: 8px;
-  margin-left: 0;
-  margin-right: 0;
-  z-index: 0;
+.global-header--dropdown-button {
+  background: transparent;
 }
 
 .global-header--list {
@@ -25,11 +20,6 @@
   width: 4px !important;
 }
 
-.global-header--list::-webkit-scrollbar-track {
-  background-color: rgba($cf-grey-95, 0.15);
-  border-radius: 20px;
-}
-
 .global-header--list::-webkit-scrollbar-thumb {
   background: linear-gradient(
     to right,
@@ -39,23 +29,44 @@
   border-radius: 20px;
 }
 
-.button-icon {
-  color: $cf-grey-75;
-  margin-right: 8px;
-  font-size: 18px;
-  width: 18px;
-}
-
-.line-break {
-  margin: 6px 0;
-  background-color: rgba(241, 241, 243, 0.1);
+.global-header--list::-webkit-scrollbar-track {
+  background-color: rgba($cf-grey-95, 0.15);
+  border-radius: 20px;
 }
 
-.global-header--align-center {
+.global-header--main-dropdown-item {
   display: flex;
   align-items: center;
+  width: 100%;
+}
+
+.global-header--main-dropdown-item-link {
+  width: 100%;
+  border-radius: 2px;
+  color: #ffffff !important;
+  display: flex !important;
+  font-weight: 400 !important;
+  padding: 0px;
 }
 
 .global-header--switch-button {
   background-color: transparent !important;
 }
+
+.global-header--typeahead-input {
+  margin-top: 4px;
+  margin-bottom: 8px;
+  margin-left: 0;
+  margin-right: 0;
+  z-index: 0;
+}
+
+.global-header--typeahead-item {
+  width: 100%;
+  padding-left: 14px;
+}
+
+.line-break {
+  margin: 6px 0;
+  background-color: rgba(241, 241, 243, 0.1);
+}

src/identity/components/GlobalHeader/GlobalHeaderDropdown/index.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {MouseEvent} from 'react'
+import {Link} from 'react-router-dom'
 
 // Components
 import {
@@ -112,7 +113,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
     this.setState({showTypeAheadMenu: !showTypeAheadMenu})
   }
 
-  private renderMainMenuOptions = () => {
+  private renderMainMenuOptions = (onCollapse: VoidFunction) => {
     const {mainMenuOptions} = this.props
     return (
       <div>
@@ -126,15 +127,21 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
               onClick={this.sendMainMenuEvent(menuItem.name)}
               key={`eventWrapper.${menuItem.name}`}
             >
-              <Dropdown.HrefItem
-                className="global-header--align-center"
+              <Dropdown.LinkItem
+                className="global-header--main-dropdown-item"
                 key={menuItem.name}
-                href={menuItem.href}
                 testID={`${this.props.mainMenuTestID}-${menuItem.name}`}
+                selected={false}
               >
-                {iconEl}
-                {textEl}
-              </Dropdown.HrefItem>
+                <Link
+                  to={menuItem.href}
+                  className="global-header--main-dropdown-item-link"
+                  onClick={onCollapse}
+                >
+                  {iconEl}
+                  {textEl}
+                </Link>
+              </Dropdown.LinkItem>
             </div>
           )
         })}
@@ -164,7 +171,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
     )
   }
 
-  private renderMenu = () => {
+  private renderMenu = (onCollapse: VoidFunction) => {
     const {
       dropdownMenuStyle,
       dropdownMenuTheme = DropdownMenuTheme.None,
@@ -216,7 +223,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         )}
         {showTypeAheadMenu
           ? this.renderTypeAheadMenu()
-          : this.renderMainMenuOptions()}
+          : this.renderMainMenuOptions(onCollapse)}
       </Dropdown.Menu>
     )
   }
@@ -230,7 +237,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         {...dropdownProps}
         button={this.dropdownButton}
         disableAutoFocus
-        menu={this.renderMenu}
+        menu={onCollapse => this.renderMenu(onCollapse)}
         testID={this.props.testID}
       />
     )