chore: desktop header nav dropdown changes (#2833)

addons/rose/app/styles/rose/components/header/_dropdown.scss

@@ -3,35 +3,11 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@use '../../variables/sizing';
-@use '../../utilities/type';
-@use '../../variables/color/sass';
-
-$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
-
 .rose-header {
-  .rose-dropdown {
-    &,
-    &[open] {
-      .rose-dropdown-trigger {
-        color: #{sass.color(ui-gray, 300)};
-        background: url($chevron) no-repeat right sizing.rems(s) center;
-        background-size: sizing.rems(m);
-
-        $y-padding: sizing.rems(xxxs);
-        $right-padding: sizing.rems(xs) + sizing.rems(l);
-
-        padding: $y-padding $right-padding $y-padding sizing.rems(s);
-
-        &.has-icon-only {
-          padding-left: sizing.rems(xs);
-        }
-
-        &:hover,
-        &:focus {
-          background-color: transparent;
-        }
-      }
-    }
+  // Temporary fix: This header component will be retired upon integrating HDS side nav for desktop.
+   .header-dropdown-button-override > button {
+    background: var(--black);
+    border: none;
+    color: var(--white);
   }
 }

e2e-tests/desktop/tests/authentication.spec.js

@@ -21,15 +21,14 @@ test.describe('user/password authentication tests', () => {
       /.*\/scopes\/global\/projects\/targets$/,
     );
 
+    // click dropdown
     await electronPage
-      .locator('details')
-      .filter({ hasText: 'Sign Out' })
+      .getByRole('button', { name: 'admin' })
       .click();
 
     await electronPage.getByRole('button', { name: 'Sign Out' }).click();
     await expect(electronPage).toHaveURL(/.*\/scopes\/global\/authenticate\//);
   });
-
   test('Fails to authenticate with wrong password', async ({
     electronPage,
     clusterUrl,

ui/desktop/app/styles/app.scss

@@ -109,7 +109,8 @@
   .rose-header-utilities button {
     -webkit-app-region: no-drag;
   }
-
+  
+ 
   &.header-cushion {
     padding-left: sizing.rems(l) * 3;
   }

ui/desktop/app/templates/application.hbs

@@ -19,7 +19,7 @@
         <div id='header-nav'></div>
       </header.nav>
 
-      <header.utilities as |utilities|>
+      <header.utilities>
         {{#if this.showWindowActions}}
           <Hds::Button
             {{on 'click' this.close}}
@@ -50,15 +50,25 @@
         {{/if}}
 
         {{#if this.session.isAuthenticated}}
-          <utilities.dropdown
-            @text={{this.session.data.authenticated.username}}
-            @icon='user-circle'
-            as |dropdown|
-          >
-            <dropdown.button {{on 'click' this.invalidateSession}}>
+          <Hds::Dropdown class='header-dropdown-button-override' as |dd|>
+            {{#if this.session.data.authenticated.username}}
+              <dd.ToggleButton
+                @icon='user-circle'
+                @text={{this.session.data.authenticated.username}}
+              />
+            {{else}}
+              <dd.ToggleIcon
+                @icon='user-circle'
+                @text={{t 'titles.user-menu'}}
+              />
+            {{/if}}
+            <dd.Interactive
+              data-test-sign-out
+              {{on 'click' this.invalidateSession}}
+            >
               {{t 'actions.deauthenticate'}}
-            </dropdown.button>
-          </utilities.dropdown>
+            </dd.Interactive>
+          </Hds::Dropdown>
         {{/if}}
 
       </header.utilities>

ui/desktop/app/templates/scopes/scope.hbs

@@ -7,7 +7,11 @@
 
 {{#if this.session.isAuthenticated}}
   <EmberWormhole @to='header-nav'>
-    <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
+    <Hds::Dropdown
+      class='header-dropdown-button-override'
+      @enableCollisionDetection={{true}}
+      as |dd|
+    >
       <dd.ToggleButton
         @text={{this.scopes.selectedOrg.displayName}}
         @icon={{if this.scopes.selectedOrg.isGlobal 'globe' 'org'}}

ui/desktop/tests/acceptance/authentication-test.js

@@ -176,18 +176,24 @@ module('Acceptance | authentication', function (hooks) {
   test('signing out redirects to first global authenticate method', async function (assert) {
     assert.expect(3);
     await visit(urls.authenticate.methods.global);
+
     await fillIn('[name="identification"]', 'test');
     await fillIn('[name="password"]', 'test');
     await click('[type="submit"]');
+
     assert.ok(currentSession().isAuthenticated);
-    await click('.rose-header-utilities .rose-dropdown summary');
+
+    await click('.rose-header-utilities .header-dropdown-button-override button');
+
     assert.strictEqual(
       find(
-        '.rose-header-utilities .rose-dropdown-content button',
+        '[data-test-sign-out]',
       ).textContent.trim(),
       'Sign Out',
     );
-    await click('.rose-header-utilities .rose-dropdown-content button');
+
+    await click('[data-test-sign-out]');
+
     assert.notOk(currentSession().isAuthenticated);
   });