POC: Refactor hds side nav to hds app side nav and header

ui/admin/app/components/scope-picker/index.hbs → addons/core/addon/components/scope-picker/index.hbs

@@ -4,19 +4,15 @@
 }}
 
 <Hds::Dropdown
+  class='scope-picker'
   @enableCollisionDetection={{true}}
-  @matchToggleWidth={{true}}
-  {{! HDS provided class to automatically fade in/out }}
-  class='hds-side-nav-hide-when-minimized scope-picker'
+  @listPosition='bottom-left'
   data-test-side-nav-scope-dropdown
+  ...attributes
   as |D|
 >
   {{#let this.currentScope as |scope|}}
-    <D.ToggleButton
-      @text={{scope.name}}
-      @icon={{scope.icon}}
-      class='scope-picker__toggle-button'
-    />
+    <D.ToggleButton @text={{scope.name}} @icon={{scope.icon}} />
   {{/let}}
 
   <D.Checkmark

addons/core/addon/styles/addon.scss

@@ -72,3 +72,11 @@
     margin-bottom: 0.5rem;
   }
 }
+
+// scope picker
+.scope-picker {
+  li:has(.indentation),
+  li.indentation {
+    margin-left: 1.5rem;
+  }
+}

addons/rose/app/components/rose/header/brand.js → addons/core/app/components/scope-picker/index.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-export { default } from 'rose/components/rose/header/brand';
+export { default } from 'core/components/scope-picker/index';

addons/rose/app/components/rose/header.js → addons/core/app/utils/param-value-finder.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-export { default } from 'rose/components/rose/header';
+export { default } from 'core/utils/param-value-finder';

ui/admin/tests/integration/components/scope-picker/index-test.js → addons/core/tests/integration/components/scope-picker/index-test.js

@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'admin/tests/helpers';
+import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { click } from '@ember/test-helpers';
@@ -27,7 +27,8 @@ module('Integration | Component | scope-picker/index', function (hooks) {
   const PROJECT_ADD_MORE_TEXT =
     '[data-test-scope-picker-project-and-more-text]';
   const PROJECT_LIST_COUNT = '[data-test-scope-picker-project-count]';
-  const SELECTED_SCOPE_CHECK = (id) => `[href="/scopes/${id}"] .hds-icon-check`;
+  const SELECTED_SCOPE_CHECK =
+    '.hds-dropdown-list-item--variant-checkmark-selected .hds-text';
 
   let global;
   let scopeService;
@@ -195,7 +196,7 @@ module('Integration | Component | scope-picker/index', function (hooks) {
 
     assert.dom(SCOPE_PICKER_DROPDOWN).hasText('Global');
     assert.dom(SCOPE_PICKER_DROPDOWN_ICON).hasClass('hds-icon-globe');
-    assert.dom(SELECTED_SCOPE_CHECK('global')).isVisible();
+    assert.dom(SELECTED_SCOPE_CHECK).hasText('Global');
   });
 
   test('it renders correct dropdown button text and icon when selected scope is org type', async function (assert) {
@@ -215,7 +216,7 @@ module('Integration | Component | scope-picker/index', function (hooks) {
 
     assert.dom(SCOPE_PICKER_DROPDOWN).hasText(scopeService.org.displayName);
     assert.dom(SCOPE_PICKER_DROPDOWN_ICON).hasClass('hds-icon-org');
-    assert.dom(SELECTED_SCOPE_CHECK(scopeService.org.id)).isVisible();
+    assert.dom(SELECTED_SCOPE_CHECK).hasText(scopeService.org.displayName);
   });
 
   test('it renders correct dropdown button text and icon when selected scope is project type', async function (assert) {
@@ -229,7 +230,6 @@ module('Integration | Component | scope-picker/index', function (hooks) {
     });
     query.filters.scope_id = [{ equals: org.id }];
     const projects = await store.query('scope', { scope_id: org.id, query });
-    scopeService.org = global;
     scopeService.project = projects[0];
     query.filters.scope_id = [{ equals: 'global' }];
     scopeService.orgsList = await store.query('scope', {
@@ -243,6 +243,6 @@ module('Integration | Component | scope-picker/index', function (hooks) {
 
     assert.dom(SCOPE_PICKER_DROPDOWN).hasText(scopeService.project.displayName);
     assert.dom(SCOPE_PICKER_DROPDOWN_ICON).hasClass('hds-icon-grid');
-    assert.dom(SELECTED_SCOPE_CHECK(scopeService.project.id)).isVisible();
+    assert.dom(SELECTED_SCOPE_CHECK).hasText(scopeService.project.displayName);
   });
 });

addons/core/tests/unit/utils/param-value-finder-test.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import { paramValueFinder } from 'core/utils/param-value-finder';
+
+module('Unit | Utility | param-value-finder', function (hooks) {
+  setupTest(hooks);
+
+  test('returns empty array when null or empty routeInfo object is used', function (assert) {
+    let result = paramValueFinder('scopes', null);
+
+    assert.deepEqual(result, []);
+
+    result = paramValueFinder('scopes', {});
+
+    assert.deepEqual(result, []);
+  });
+
+  test('returns correct array when routeInfo object is used', function (assert) {
+    // Route being tested is '/scopes'
+    const application = { localName: 'application', params: {}, parent: null };
+    const scopes = { localName: 'scopes', params: {}, parent: application };
+    const scopesIndex = {
+      localName: 'index',
+      name: 'scopes.index',
+      parent: scopes,
+    };
+    let result = paramValueFinder('scopes', scopesIndex.parent);
+
+    assert.deepEqual(result, []);
+
+    // Route being tested is '/scopes/global/auth-methods'
+    const scope = {
+      localName: 'scope',
+      params: { scope_id: 'global' },
+      parent: scopes,
+    };
+    const authMethods = {
+      localName: 'auth-methods',
+      params: {},
+      parent: scope,
+    };
+    const authMethodsIndex = {
+      localName: 'index',
+      name: 'scopes.scope.auth-methods.index',
+      parent: authMethods,
+    };
+    result = paramValueFinder('scopes', authMethodsIndex.parent);
+    assert.deepEqual(result, ['global']);
+  });
+});

addons/rose/addon/styles/hds/overrides.scss

@@ -59,20 +59,3 @@ form {
     color: inherit;
   }
 }
-
-// TODO: This is a temporary fix that ensures changing the color theme won't alter the dropdown colors.
-.app-frame-sidebar-style-overrides .side-nav-style-overrides {
-  .hds-dropdown-toggle-button,
-  .hds-dropdown-toggle-icon {
-    background: var(--token-side-nav-color-surface-primary);
-
-    &:hover {
-      background: var(--token-side-nav-color-surface-interactive-hover);
-    }
-
-    &:active,
-    &:focus {
-      background: var(--token-side-nav-color-surface-primary);
-    }
-  }
-}

addons/rose/addon/styles/hds/themes/dark-mode/_color-tokens-tier-2.scss

@@ -259,4 +259,24 @@
   --token-form-toggle-base-surface-color-default: var(
     --token-color-palette-neutral-100
   ); /* the toggle has a different base surface color, compared to the other controls */
+
+  // Hds app side nav color-mappings
+  --token-app-side-nav-color-foreground-primary: var(
+    --token-color-palette-neutral-600
+  );
+  --token-app-side-nav-color-surface-primary: var(
+    --token-color-palette-neutral-50
+  );
+  --token-app-side-nav-wrapper-border-color: var(
+    --token-color-palette-neutral-200
+  );
+  --token-app-side-nav-color-foreground-faint: var(
+    --token-color-palette-neutral-500
+  );
+  --token-app-side-nav-color-surface-interactive-hover: var(
+    --token-color-palette-neutral-100
+  );
+  --token-app-side-nav-color-surface-interactive-active: var(
+    --token-color-palette-neutral-300
+  );
 }

addons/rose/addon/styles/hds/themes/dark-mode/index.scss

@@ -121,14 +121,80 @@
   }
 }
 
+@mixin dark-mode-button-override {
+  /* stylelint-disable-next-line selector-class-pattern */
+  .hds-app-frame:has(
+    .hds-app-side-nav--is-mobile.hds-app-side-nav--is-not-minimized
+  ) {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .hds-button,
+    .hds-dropdown-toggle-button,
+    .hds-dropdown-toggle-icon,
+    .hds-app-header__home-link {
+      color: var(--token-color-palette-neutral-200);
+      background-color: var(--token-color-palette-neutral-50);
+      border-color: var(--token-color-palette-neutral-100);
+    }
+  }
+}
+
+@mixin dark-mode-app-header-override {
+  .hds-app-header {
+    color: var(--token-color-palette-neutral-700);
+    background: var(--token-color-palette-neutral-0);
+    border-bottom-color: var(--token-color-palette-neutral-100);
+
+    &__home-link {
+      background-color: var(--token-color-palette-neutral-0);
+    }
+  }
+
+  .hds-dropdown-toggle-button,
+  .hds-dropdown-toggle-icon {
+    background: var(--token-color-palette-neutral-0);
+    border-color: var(--token-color-palette-neutral-100);
+
+    &:hover {
+      background: var(--token-color-palette-neutral-50);
+    }
+
+    &:active,
+    &:focus {
+      background: var(--token-color-palette-neutral-0);
+    }
+  }
+}
+
+@mixin dark-mode-app-side-nav-override {
+  .hds-app-side-nav {
+    &__overlay {
+      background-color: var(--token-color-palette-neutral-50);
+    }
+
+    &__list-title {
+      color: var(--token-color-palette-neutral-300);
+    }
+
+    &__list-item-link.active {
+      background: var(--token-color-palette-neutral-100);
+    }
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .ember-application:not(.rose-theme-light) {
     @include dark-mode;
     @include dark-mode-modal-override;
+    @include dark-mode-app-header-override;
+    @include dark-mode-app-side-nav-override;
+    @include dark-mode-button-override;
   }
 }
 
 .ember-application.rose-theme-dark {
   @include dark-mode;
   @include dark-mode-modal-override;
+  @include dark-mode-app-header-override;
+  @include dark-mode-app-side-nav-override;
+  @include dark-mode-button-override;
 }

addons/rose/app/styles/rose/components/_index.scss

@@ -8,7 +8,6 @@
 @use 'code-editor';
 @use 'form';
 @use 'frame';
-@use 'header';
 @use 'layout';
 @use 'list';
 @use 'metadata-list';