Addressing various Ember depreciations required for 4.0 (#14532)

* remove Ember Logger * remove jquery * prevent setting ember string methods on string * remove reopen class * Revert "remove reopen class" This reverts commit d6a48f1486. * redo * clean up * fix test * Update ui/app/styles/components/tabs.scss Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> * fix test * test clean up * clean up cont. Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
2026-02-03 20:40:45 -05:00 · 2022-03-16 18:36:48 -06:00 · 2022-03-16 18:36:48 -06:00 · d4622b2f90
commit d4622b2f90
parent 5d2dfc5c66
20 changed files with 61 additions and 114 deletions
--- a/ui/app/components/link-to.js
+++ b/ui/app/components/link-to.js
@ -1,7 +0,0 @@
-import LinkComponent from '@ember/routing/link-component';
-
-LinkComponent.reopen({
-  activeClass: 'is-active',
-});
-
-export default LinkComponent;
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@ -76,12 +76,21 @@
      padding-top: $size-4;
    }

+    li {
+      a {
+        &.active {
+          border-right: 4px solid $blue;
+          color: $blue;
+        }
+      }
+    }
+
    a {
      color: $grey-dark;
      padding-left: $size-5;
      transition: 250ms border-width;

-      &.is-active {
+      &.active {
        border-right: 4px solid $blue;
      }
    }
--- a/ui/app/styles/components/tabs.scss
+++ b/ui/app/styles/components/tabs.scss
@ -13,20 +13,26 @@
      &:focus {
        box-shadow: none;
      }
-      &.is-active,
-      &.is-active .tab {
+      &.active,
+      &.active .tab {
        border-color: $blue;
        color: $blue;
      }
    }
+    li {
+      > a &.active {
+        border-color: $blue;
+        color: $blue !important;
+      }
+    }
  }

  li {
    &:focus {
      box-shadow: none;
    }
-    &.is-active a,
-    &.is-active .tab {
+    &.active a,
+    &.active .tab {
      border-color: $blue;
      color: $blue;
    }
@ -55,29 +61,3 @@
    outline: none;
  }
 }
-
-.nav-tab-link {
-  color: $grey;
-  font-weight: $font-weight-semibold;
-  text-decoration: none;
-  padding: $size-6 $size-8 $size-8;
-  border-bottom: 2px solid transparent;
-  transition: background-color $speed, border-color $speed;
-
-  &:hover,
-  &:active {
-    border-color: $grey-light;
-  }
-
-  &:hover {
-    background-color: $ui-gray-050;
-  }
-
-  &:focus {
-    box-shadow: none;
-  }
-  &.is-active {
-    border-color: $blue !important;
-    color: $blue !important;
-  }
-}
--- a/ui/app/styles/core/navbar.scss
+++ b/ui/app/styles/core/navbar.scss
@ -146,7 +146,7 @@
    z-index: 201;
  }

-  &.is-active {
+  &.active {
    @include until($mobile) {
      box-shadow: 5px 0 10px rgba($black, 0.36);
      transform: translateX(0);
--- a/ui/app/templates/components/configure-pki-secret.hbs
+++ b/ui/app/templates/components/configure-pki-secret.hbs
@ -2,7 +2,7 @@
  <nav class="tabs">
    <ul>
      {{#each (array "cert" "urls" "crl" "tidy") as |section|}}
-        <LinkTo @route="vault.cluster.settings.configure-secret-backend.section" @model={{section}} @activeClass="is-active">
+        <LinkTo @route="vault.cluster.settings.configure-secret-backend.section" @model={{section}}>
          {{#if (eq section "cert")}}
            CA certificate
          {{else if (eq section "urls")}}
--- a/ui/app/templates/components/secret-edit.hbs
+++ b/ui/app/templates/components/secret-edit.hbs
@ -27,22 +27,12 @@
  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
    <nav class="tabs">
      <ul>
-        <LinkTo
-          @route="vault.cluster.secrets.backend.show"
-          @model={{this.key.id}}
-          @activeClass="is-active"
-          data-test-secret-tab
-        >
+        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.key.id}} data-test-secret-tab>
          Secret
        </LinkTo>
        {{! must have read access to /metadata see tab or update to update metadata}}
        {{#if (or this.canReadSecretMetadata this.canUpdateSecretMetadata)}}
-          <LinkTo
-            @route="vault.cluster.secrets.backend.metadata"
-            @model={{this.key.id}}
-            @activeClass="is-active"
-            data-test-secret-metadata-tab
-          >
+          <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{this.key.id}} data-test-secret-metadata-tab>
            Metadata
          </LinkTo>
        {{/if}}
--- a/ui/app/templates/components/secret-list-header-tab.hbs
+++ b/ui/app/templates/components/secret-list-header-tab.hbs
@ -1,10 +1,5 @@
 {{#unless this.dontShowTab}}
-  <LinkTo
-    @route="vault.cluster.secrets.backend.list-root"
-    @query={{hash tab=@tab}}
-    @activeClass="is-active"
-    data-test-secret-list-tab={{@label}}
-  >
+  <LinkTo @route="vault.cluster.secrets.backend.list-root" @query={{hash tab=@tab}} data-test-secret-list-tab={{@label}}>
    {{@label}}
  </LinkTo>
 {{/unless}}
--- a/ui/app/templates/components/secret-list-header.hbs
+++ b/ui/app/templates/components/secret-list-header.hbs
@ -30,7 +30,7 @@
      <nav class="tabs" aria-label="secret tabs">
        <ul>
          {{#if options.hasOverview}}
-            <LinkTo @route="vault.cluster.secrets.backend.overview" @activeClass="is-active" data-test-tab="overview">
+            <LinkTo @route="vault.cluster.secrets.backend.overview" data-test-tab="overview">
              Overview
            </LinkTo>
          {{/if}}
@ -53,11 +53,7 @@
              />
            {{/if}}
          {{/each}}
-          <LinkTo
-            @route="vault.cluster.secrets.backend.configuration"
-            @activeClass="is-active"
-            data-test-configuration-tab={{true}}
-          >
+          <LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
            Configuration
          </LinkTo>
        </ul>
@ -71,17 +67,12 @@
          {{#if (contains @model.engineType (supported-secret-backends))}}
            <LinkTo
              @route="vault.cluster.secrets.backend.list-root"
-              @activeClass="is-active"
              @current-when="vault.cluster.secrets.backend.list-root vault.cluster.secrets.backend.list"
            >
              {{capitalize (pluralize options.item)}}
            </LinkTo>
          {{/if}}
-          <LinkTo
-            @route="vault.cluster.secrets.backend.configuration"
-            data-test-configuration-tab={{true}}
-            @activeClass="is-active"
-          >
+          <LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
            Configuration
          </LinkTo>
        </ul>
--- a/ui/app/templates/vault/cluster/clients.hbs
+++ b/ui/app/templates/vault/cluster/clients.hbs
@ -9,14 +9,14 @@
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
  <nav class="tabs">
    <ul>
-      <LinkTo @route="vault.cluster.clients.current" class="nav-tab-link">
+      <LinkTo @route="vault.cluster.clients.current" data-test-current-month>
        Current month
      </LinkTo>
-      <LinkTo @route="vault.cluster.clients.history" class="nav-tab-link">
+      <LinkTo @route="vault.cluster.clients.history" data-test-history>
        History
      </LinkTo>
      {{#if (or @model.config.configPath.canRead @model.configPath.canRead)}}
-        <LinkTo @route="vault.cluster.clients.config" class="nav-tab-link">
+        <LinkTo @route="vault.cluster.clients.config">
          Configuration
        </LinkTo>
      {{/if}}
--- a/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/metadata.hbs
@ -18,10 +18,10 @@
 <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
  <nav class="tabs">
    <ul>
-      <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.id}} data-test-secret-tab @activeClass="is-active">
+      <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.id}} data-test-secret-tab>
        Secret
      </LinkTo>
-      <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{this.id}} @activeClass="is-active">
+      <LinkTo @route="vault.cluster.secrets.backend.metadata" @model={{this.id}}>
        Metadata
      </LinkTo>
    </ul>
--- a/ui/config/environment.js
+++ b/ui/config/environment.js
@ -14,8 +14,8 @@ module.exports = function (environment) {
        // e.g. 'with-controller': true
      },
      EXTEND_PROTOTYPES: {
-        // Prevent Ember Data from overriding Date.parse.
-        Date: false,
+        Date: false, // Prevent Ember Data from overriding Date.parse.
+        String: false, // Prevent user from using an Ember string method on string. ex: "foo".capitalize();
      },
    },

--- a/ui/lib/replication/addon/templates/mode.hbs
+++ b/ui/lib/replication/addon/templates/mode.hbs
@ -7,7 +7,7 @@
      {{#if this.model.replicationAttrs.replicationEnabled}}
        <PageHeader as |p|>
          <p.top>
-            <nav class="key-value-header breadcrumb">
+            <nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
              <ul>
                <li>
                  <LinkTo @route="index">
@ -32,24 +32,18 @@
          </p.levelLeft>
        </PageHeader>
        <div class="tabs-container box is-bottomless is-fullwidth is-paddingless is-marginless">
-          <nav class="tabs sub-nav">
+          <nav class="tabs sub-nav" aria-label="tab navigation">
            <ul>
-              <li class={{if (is-active-route "vault.cluster.replication.mode.index") "is-active" ""}}>
-                <LinkTo @route="mode" @model={{this.replicationMode}} data-test-replication-link="details">
-                  Details
-                </LinkTo>
-              </li>
-              <li class={{if (is-active-route "vault.cluster.replication.mode.manage") "is-active" ""}}>
-                <LinkTo @route="mode.manage" @model={{this.replicationMode}} data-test-replication-link="manage">
-                  Manage
-                </LinkTo>
-              </li>
+              <LinkTo @route="mode.index" @model={{this.replicationMode}} data-test-replication-link="details">
+                Details
+              </LinkTo>
+              <LinkTo @route="mode.manage" @model={{this.replicationMode}} data-test-replication-link="manage">
+                Manage
+              </LinkTo>
              {{#if this.model.replicationAttrs.isPrimary}}
-                <li class={{if (is-active-route "vault.cluster.replication.mode.secondaries") "is-active" ""}}>
-                  <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} data-test-replication-link="secondaries">
-                    Secondaries
-                  </LinkTo>
-                </li>
+                <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} data-test-replication-link="secondaries">
+                  Secondaries
+                </LinkTo>
              {{/if}}
            </ul>
          </nav>
--- a/ui/package.json
+++ b/ui/package.json
@ -200,7 +200,6 @@
    "highlight.js": "^10.4.1",
    "https-proxy-agent": "^2.2.3",
    "ini": "^1.3.6",
-    "jquery": "^3.5.0",
    "js-yaml": "^3.13.1",
    "kind-of": "^6.0.3",
    "lodash.defaultsdeep": "^4.6.1",
@ -237,7 +236,6 @@
  "dependencies": {
    "handlebars": "^4.3.0",
    "highlight.js": "^10.4.1",
-    "jquery": "^3.5.0",
    "js-yaml": "^3.13.1",
    "lodash": "^4.17.13",
    "node-notifier": "^8.0.1"
--- a/ui/tests/acceptance/client-current-test.js
+++ b/ui/tests/acceptance/client-current-test.js
@ -40,7 +40,7 @@ module('Acceptance | clients current', function (hooks) {
    });
    await visit('/vault/clients/current');
    assert.equal(currentURL(), '/vault/clients/current');
-    assert.dom(SELECTORS.activeTab).hasText('Current month', 'current month tab is active');
+    assert.dom(SELECTORS.currentMonthActiveTab).hasText('Current month', 'current month tab is active');
    assert.dom(SELECTORS.emptyStateTitle).hasText('Tracking is disabled');
  });

@ -58,7 +58,7 @@ module('Acceptance | clients current', function (hooks) {
    });
    await visit('/vault/clients/current');
    assert.equal(currentURL(), '/vault/clients/current');
-    assert.dom(SELECTORS.activeTab).hasText('Current month', 'current month tab is active');
+    assert.dom(SELECTORS.currentMonthActiveTab).hasText('Current month', 'current month tab is active');
    assert.dom(SELECTORS.emptyStateTitle).hasText('No data received');
  });

@ -76,7 +76,7 @@ module('Acceptance | clients current', function (hooks) {
    });
    await visit('/vault/clients/current');
    assert.equal(currentURL(), '/vault/clients/current');
-    assert.dom(SELECTORS.activeTab).hasText('Current month', 'current month tab is active');
+    assert.dom(SELECTORS.currentMonthActiveTab).hasText('Current month', 'current month tab is active');
    assert.dom(SELECTORS.usageStats).exists('usage stats block exists');
    assert.dom('[data-test-stat-text-container]').exists({ count: 3 }, '3 stat texts exist');
    const { clients, entity_clients, non_entity_clients, by_namespace } = monthly.data;
@ -189,7 +189,7 @@ module('Acceptance | clients current', function (hooks) {
    });
    await visit('/vault/clients/current');
    assert.equal(currentURL(), '/vault/clients/current');
-    assert.dom(SELECTORS.activeTab).hasText('Current month', 'current month tab is active');
+    assert.dom(SELECTORS.currentMonthActiveTab).hasText('Current month', 'current month tab is active');
    assert.dom(SELECTORS.usageStats).exists('usage stats block exists');
    assert.dom('[data-test-stat-text-container]').exists({ count: 3 }, '3 stat texts exist');
    const { clients, entity_clients, non_entity_clients } = monthly.data;
--- a/ui/tests/acceptance/client-history-test.js
+++ b/ui/tests/acceptance/client-history-test.js
@ -46,7 +46,7 @@ module('Acceptance | clients history tab', function (hooks) {
    });
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history');
-    assert.dom(SELECTORS.activeTab).hasText('History', 'history tab is active');
+    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');

    assert.dom('[data-test-tracking-disabled] .message-title').hasText('Tracking is disabled');
    assert.dom(SELECTORS.emptyStateTitle).hasText('No data received');
@ -70,7 +70,7 @@ module('Acceptance | clients history tab', function (hooks) {
    });
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history');
-    assert.dom(SELECTORS.activeTab).hasText('History', 'history tab is active');
+    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');
    assert.dom(SELECTORS.emptyStateTitle).hasText('Data tracking is disabled');
    assert.dom(SELECTORS.filterBar).doesNotExist('Filter bar is hidden when no data available');
  });
@ -93,7 +93,7 @@ module('Acceptance | clients history tab', function (hooks) {
    // History Tab
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history');
-    assert.dom(SELECTORS.activeTab).hasText('History', 'history tab is active');
+    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');

    assert.dom(SELECTORS.emptyStateTitle).hasText('No monthly history');
    assert.dom(SELECTORS.filterBar).doesNotExist('Does not show filter bar');
@ -183,7 +183,7 @@ module('Acceptance | clients history tab', function (hooks) {
    });
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history', 'clients/history URL is correct');
-    assert.dom(SELECTORS.activeTab).hasText('History', 'history tab is active');
+    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');
    assert.dom(SELECTORS.usageStats).exists('usage stats block exists');
    assert.dom('[data-test-stat-text-container]').exists({ count: 3 }, '3 stat texts exist');
    const { total, by_namespace } = activity.data;
@ -269,7 +269,7 @@ module('Acceptance | clients history tab', function (hooks) {
    });
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history', 'clients/history URL is correct');
-    assert.dom(SELECTORS.activeTab).hasText('History', 'history tab is active');
+    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');
    assert.dom('[data-test-flash-message] .message-actions').containsText(`You upgraded to Vault 1.9.0`);
  });

@ -315,7 +315,7 @@ module('Acceptance | clients history tab', function (hooks) {
    });
    await visit('/vault/clients/history');
    assert.equal(currentURL(), '/vault/clients/history', 'clients/history URL is correct');
-    assert.dom(SELECTORS.activeTab).hasText('History', 'history tab is active');
+    assert.dom(SELECTORS.historyActiveTab).hasText('History', 'history tab is active');
    // Message changes depending on ent or OSS
    assert.dom(SELECTORS.emptyStateTitle).exists('Empty state exists');
    assert.dom(SELECTORS.monthDropdown).exists('Dropdown exists to select month');
--- a/ui/tests/acceptance/enterprise-transform-test.js
+++ b/ui/tests/acceptance/enterprise-transform-test.js
@ -71,7 +71,7 @@ module('Acceptance | Enterprise | Transform secrets', function (hooks) {
    );
    assert.ok(transformationsPage.isEmpty, 'renders empty state');
    assert
-      .dom('.is-active[data-test-secret-list-tab="Transformations"]')
+      .dom('.active[data-test-secret-list-tab="Transformations"]')
      .exists('Has Transformations tab which is active');
    assert.dom('[data-test-secret-list-tab="Roles"]').exists('Has Roles tab');
    assert.dom('[data-test-secret-list-tab="Templates"]').exists('Has Templates tab');
--- a/ui/tests/acceptance/not-found-test.js
+++ b/ui/tests/acceptance/not-found-test.js
@ -6,22 +6,18 @@ import logout from 'vault/tests/pages/logout';
 import Ember from 'ember';

 let adapterException;
-let loggerError;

 module('Acceptance | not-found', function (hooks) {
  setupApplicationTest(hooks);

  hooks.beforeEach(function () {
-    loggerError = Ember.Logger.error;
    adapterException = Ember.Test.adapter.exception;
    Ember.Test.adapter.exception = () => {};
-    Ember.Logger.error = () => {};
    return authPage.login();
  });

  hooks.afterEach(function () {
    Ember.Test.adapter.exception = adapterException;
-    Ember.Logger.error = loggerError;
    return logout.visit();
  });

--- a/ui/tests/acceptance/secrets/backend/database/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/database/secret-test.js
@ -255,7 +255,7 @@ module('Acceptance | secrets/database/*', function (hooks) {
    );
    assert.dom('[data-test-component="empty-state"]').exists('Empty state exists');
    assert
-      .dom('.is-active[data-test-secret-list-tab="Connections"]')
+      .dom('.active[data-test-secret-list-tab="Connections"]')
      .exists('Has Connections tab which is active');
    await click('[data-test-tab="overview"]');
    assert.equal(currentURL(), `/vault/secrets/${backend}/overview`, 'Tab links to overview page');
--- a/ui/tests/helpers/clients.js
+++ b/ui/tests/helpers/clients.js
@ -15,7 +15,8 @@ import { formatRFC3339 } from 'date-fns';
 */

 export const SELECTORS = {
-  activeTab: '.nav-tab-link.is-active',
+  currentMonthActiveTab: '.active[data-test-current-month]',
+  historyActiveTab: '.active[data-test-history]',
  emptyStateTitle: '[data-test-empty-state-title]',
  usageStats: '[data-test-usage-stats]',
  dateDisplay: '[data-test-date-display]',
--- a/ui/tests/pages/access/methods.js
+++ b/ui/tests/pages/access/methods.js
@ -3,7 +3,7 @@ import { create, attribute, visitable, collection, hasClass, text } from 'ember-
 export default create({
  visit: visitable('/vault/access/'),
  navLinks: collection('[data-test-link]', {
-    isActive: hasClass('is-active'),
+    isActive: hasClass('active'),
    text: text(),
    scope: '[data-test-sidebar]',
  }),