[VAULT-19467] UI Breadcrumb Title Case (#29206)

* [VAULT-19467] Vault UI Breadcrumb Title Case * should use Title Case * update changelog * rename changelog * update tests * more test updates * update tests --------- Co-authored-by: Tony Wittinger <anwittin@users.noreply.github.com>
2025-10-29 17:52:32 +00:00 · 2024-12-20 10:47:34 -08:00
parent e349c99891
commit 0d3a82adf4
31 changed files with 57 additions and 54 deletions
--- a/changelog/29206.txt
+++ b/changelog/29206.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Application static breadcrumbs should be formatted in title case.
+```
--- a/ui/lib/ldap/addon/routes/libraries/library/check-out.ts
+++ b/ui/lib/ldap/addon/routes/libraries/library/check-out.ts
@@ -49,9 +49,9 @@ export default class LdapLibraryCheckOutRoute extends Route {
    const library = this.modelFor('libraries.library') as LdapLibraryModel;
    controller.breadcrumbs = [
      { label: library.backend, route: 'overview' },
-      { label: 'libraries', route: 'libraries' },
+      { label: 'Libraries', route: 'libraries' },
      { label: library.name, route: 'libraries.library' },
-      { label: 'check-out' },
+      { label: 'Check-Out' },
    ];
  }

--- a/ui/lib/ldap/addon/routes/libraries/library/details.ts
+++ b/ui/lib/ldap/addon/routes/libraries/library/details.ts
@@ -25,7 +25,7 @@ export default class LdapLibraryDetailsRoute extends Route {

    controller.breadcrumbs = [
      { label: resolvedModel.backend, route: 'overview' },
-      { label: 'libraries', route: 'libraries' },
+      { label: 'Libraries', route: 'libraries' },
      { label: resolvedModel.name },
    ];
  }
--- a/ui/lib/ldap/addon/routes/libraries/library/edit.ts
+++ b/ui/lib/ldap/addon/routes/libraries/library/edit.ts
@@ -25,9 +25,9 @@ export default class LdapLibraryEditRoute extends Route {

    controller.breadcrumbs = [
      { label: resolvedModel.backend, route: 'overview' },
-      { label: 'libraries', route: 'libraries' },
+      { label: 'Libraries', route: 'libraries' },
      { label: resolvedModel.name, route: 'libraries.library.details' },
-      { label: 'edit' },
+      { label: 'Edit' },
    ];
  }
 }
--- a/ui/lib/pki/addon/components/page/pki-role-details.ts
+++ b/ui/lib/pki/addon/components/page/pki-role-details.ts
@@ -25,7 +25,7 @@ export default class DetailsPage extends Component<Args> {
    return [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview' },
-      { label: 'roles', route: 'roles.index' },
+      { label: 'Roles', route: 'roles.index' },
      { label: this.args.role.id },
    ];
  }
--- a/ui/lib/pki/addon/routes/keys/index.js
+++ b/ui/lib/pki/addon/routes/keys/index.js
@@ -48,7 +48,7 @@ export default class PkiKeysIndexRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: resolvedModel.parentModel.id },
-      { label: 'keys', route: 'keys.index', model: resolvedModel.parentModel.id },
+      { label: 'Keys', route: 'keys.index', model: resolvedModel.parentModel.id },
    ];
    controller.notConfiguredMessage = PKI_DEFAULT_EMPTY_STATE_MSG;
  }
--- a/ui/lib/pki/addon/routes/keys/key/details.js
+++ b/ui/lib/pki/addon/routes/keys/key/details.js
@@ -17,7 +17,7 @@ export default class PkiKeyDetailsRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: resolvedModel.backend },
-      { label: 'keys', route: 'keys.index', model: resolvedModel.backend },
+      { label: 'Keys', route: 'keys.index', model: resolvedModel.backend },
      { label: resolvedModel.id },
    ];
  }
--- a/ui/lib/pki/addon/routes/keys/key/edit.js
+++ b/ui/lib/pki/addon/routes/keys/key/edit.js
@@ -20,7 +20,7 @@ export default class PkiKeyEditRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: this.secretMountPath.currentPath },
-      { label: 'keys', route: 'keys.index', model: this.secretMountPath.currentPath },
+      { label: 'Keys', route: 'keys.index', model: this.secretMountPath.currentPath },
      { label: resolvedModel.id },
    ];
  }
--- a/ui/lib/pki/addon/routes/roles/create.js
+++ b/ui/lib/pki/addon/routes/roles/create.js
@@ -32,8 +32,8 @@ export default class PkiRolesCreateRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: this.secretMountPath.currentPath },
-      { label: 'roles', route: 'roles.index', model: this.secretMountPath.currentPath },
-      { label: 'create' },
+      { label: 'Roles', route: 'roles.index', model: this.secretMountPath.currentPath },
+      { label: 'Create' },
    ];
  }

--- a/ui/lib/pki/addon/routes/roles/role/details.js
+++ b/ui/lib/pki/addon/routes/roles/role/details.js
@@ -24,7 +24,7 @@ export default class RolesRoleDetailsRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: this.secretMountPath.currentPath },
-      { label: 'roles', route: 'roles.index', model: this.secretMountPath.currentPath },
+      { label: 'Roles', route: 'roles.index', model: this.secretMountPath.currentPath },
      { label: id },
    ];
  }
--- a/ui/lib/pki/addon/routes/roles/role/edit.js
+++ b/ui/lib/pki/addon/routes/roles/role/edit.js
@@ -40,9 +40,9 @@ export default class PkiRoleEditRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: this.secretMountPath.currentPath },
-      { label: 'roles', route: 'roles.index', model: this.secretMountPath.currentPath },
+      { label: 'Roles', route: 'roles.index', model: this.secretMountPath.currentPath },
      { label: id, route: 'roles.role.details', models: [this.secretMountPath.currentPath, id] },
-      { label: 'edit' },
+      { label: 'Edit' },
    ];
  }
 }
--- a/ui/lib/pki/addon/routes/roles/role/generate.js
+++ b/ui/lib/pki/addon/routes/roles/role/generate.js
@@ -25,9 +25,9 @@ export default class PkiRoleGenerateRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: this.secretMountPath.currentPath },
-      { label: 'roles', route: 'roles.index', model: this.secretMountPath.currentPath },
+      { label: 'Roles', route: 'roles.index', model: this.secretMountPath.currentPath },
      { label: role, route: 'roles.role.details', models: [this.secretMountPath.currentPath, role] },
-      { label: 'generate certificate' },
+      { label: 'Generate Certificate' },
    ];
    // This is updated on successful generate in the controller
    controller.hasSubmitted = false;
--- a/ui/lib/pki/addon/routes/roles/role/sign.js
+++ b/ui/lib/pki/addon/routes/roles/role/sign.js
@@ -25,9 +25,9 @@ export default class PkiRoleSignRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: this.secretMountPath.currentPath },
-      { label: 'roles', route: 'roles.index', model: this.secretMountPath.currentPath },
+      { label: 'Roles', route: 'roles.index', model: this.secretMountPath.currentPath },
      { label: role, route: 'roles.role.details', models: [this.secretMountPath.currentPath, role] },
-      { label: 'sign certificate' },
+      { label: 'Sign Certificate' },
    ];
    // This is updated on successful generate in the controller
    controller.hasSubmitted = false;
--- a/ui/lib/pki/addon/routes/tidy/auto/configure.js
+++ b/ui/lib/pki/addon/routes/tidy/auto/configure.js
@@ -21,10 +21,10 @@ export default class PkiTidyAutoConfigureRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: backend },
-      { label: 'configuration', route: 'configuration.index', model: backend },
-      { label: 'tidy', route: 'tidy', model: backend },
-      { label: 'auto', route: 'tidy.auto', model: backend },
-      { label: 'configure' },
+      { label: 'Configuration', route: 'configuration.index', model: backend },
+      { label: 'Tidy', route: 'tidy', model: backend },
+      { label: 'Auto', route: 'tidy.auto', model: backend },
+      { label: 'Configure' },
    ];
  }
 }
--- a/ui/lib/pki/addon/routes/tidy/auto/index.js
+++ b/ui/lib/pki/addon/routes/tidy/auto/index.js
@@ -19,8 +19,8 @@ export default class TidyAutoIndexRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: backend },
-      { label: 'tidy', route: 'tidy.index', model: backend },
-      { label: 'auto' },
+      { label: 'Tidy', route: 'tidy.index', model: backend },
+      { label: 'Auto' },
    ];
    controller.title = this.secretMountPath.currentPath;
  }
--- a/ui/lib/pki/addon/routes/tidy/manual.js
+++ b/ui/lib/pki/addon/routes/tidy/manual.js
@@ -21,9 +21,9 @@ export default class PkiTidyManualRoute extends Route {
    controller.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.secretMountPath.currentPath, route: 'overview', model: resolvedModel.backend },
-      { label: 'configuration', route: 'configuration.index', model: resolvedModel.backend },
-      { label: 'tidy', route: 'tidy', model: resolvedModel.backend },
-      { label: 'manual' },
+      { label: 'Configuration', route: 'configuration.index', model: resolvedModel.backend },
+      { label: 'Tidy', route: 'tidy', model: resolvedModel.backend },
+      { label: 'Manual' },
    ];
  }
 }
--- a/ui/tests/acceptance/secrets/backend/ldap/libraries-test.js
+++ b/ui/tests/acceptance/secrets/backend/ldap/libraries-test.js
@@ -69,7 +69,7 @@ module('Acceptance | ldap | libraries', function (hooks) {
        isURL(`libraries/test-library/${uri}`, this.backend),
        `Transitions to ${action} route on list item action menu click`
      );
-      await click('[data-test-breadcrumb="libraries"] a');
+      await click('[data-test-breadcrumb="Libraries"] a');
    }
  });

--- a/ui/tests/integration/components/kubernetes/page/configure-test.js
+++ b/ui/tests/integration/components/kubernetes/page/configure-test.js
@@ -36,7 +36,7 @@ module('Integration | Component | kubernetes | Page::Configure', function (hooks
    this.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: 'kubernetes', route: 'overview' },
-      { label: 'configure' },
+      { label: 'Configure' },
    ];
    this.expectedInferred = {
      disable_local_ca_jwt: false,
--- a/ui/tests/integration/components/kubernetes/page/credentials-test.js
+++ b/ui/tests/integration/components/kubernetes/page/credentials-test.js
@@ -38,9 +38,9 @@ module('Integration | Component | kubernetes | Page::Credentials', function (hoo
    };
    this.breadcrumbs = [
      { label: this.backend, route: 'overview' },
-      { label: 'roles', route: 'roles' },
+      { label: 'Roles', route: 'roles' },
      { label: this.roleName, route: 'roles.role.details' },
-      { label: 'credentials' },
+      { label: 'Credentials' },
    ];
    this.renderComponent = () => {
      return render(
--- a/ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js
+++ b/ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js
@@ -40,8 +40,8 @@ module('Integration | Component | kubernetes | Page::Role::CreateAndEdit', funct
    this.newModel = store.createRecord('kubernetes/role', { backend: 'kubernetes-test' });
    this.breadcrumbs = [
      { label: this.newModel.backend, route: 'overview' },
-      { label: 'roles', route: 'roles' },
-      { label: 'create' },
+      { label: 'Roles', route: 'roles' },
+      { label: 'Create' },
    ];
    setRunOptions({
      rules: {
--- a/ui/tests/integration/components/kubernetes/page/role/details-test.js
+++ b/ui/tests/integration/components/kubernetes/page/role/details-test.js
@@ -45,7 +45,7 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
      this.model = store.peekRecord('kubernetes/role', data.name);
      this.breadcrumbs = [
        { label: this.model.backend, route: 'overview' },
-        { label: 'roles', route: 'roles' },
+        { label: 'Roles', route: 'roles' },
        { label: this.model.name },
      ];
      return render(hbs`<Page::Role::Details @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
@@ -86,7 +86,7 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(1)')
      .containsText(this.model.backend, 'Overview breadcrumb renders');
-    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('roles', 'Roles breadcrumb renders');
+    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('Roles', 'Roles breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(3)')
      .containsText(this.model.name, 'Role breadcrumb renders');
--- a/ui/tests/integration/components/kv/kv-page-header-test.js
+++ b/ui/tests/integration/components/kv/kv-page-header-test.js
@@ -37,7 +37,7 @@ module('Integration | Component | kv | kv-page-header', function (hooks) {
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.model.backend, route: 'secrets' },
      { label: this.model.path, route: 'secrets.secret.details', model: this.model.path },
-      { label: 'edit' },
+      { label: 'Edit' },
    ];
  });

--- a/ui/tests/integration/components/kv/page/kv-page-configuration-test.js
+++ b/ui/tests/integration/components/kv/page/kv-page-configuration-test.js
@@ -54,7 +54,7 @@ module('Integration | Component | kv-v2 | Page::Configuration', function (hooks)
    this.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.model.mountConfig.path, route: 'list' },
-      { label: 'configuration' },
+      { label: 'Configuration' },
    ];
  });

--- a/ui/tests/integration/components/kv/page/kv-page-secret-edit-test.js
+++ b/ui/tests/integration/components/kv/page/kv-page-secret-edit-test.js
@@ -35,7 +35,7 @@ module('Integration | Component | kv-v2 | Page::Secret::Edit', function (hooks)
    this.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.backend, route: 'list' },
-      { label: 'edit' },
+      { label: 'Edit' },
    ];
    setRunOptions({
      rules: {
--- a/ui/tests/integration/components/kv/page/kv-page-secrets-create-test.js
+++ b/ui/tests/integration/components/kv/page/kv-page-secrets-create-test.js
@@ -32,7 +32,7 @@ module('Integration | Component | kv-v2 | Page::Secrets::Create', function (hook
    this.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: this.backend, route: 'list' },
-      { label: 'create' },
+      { label: 'Create' },
    ];
    setRunOptions({
      rules: {
--- a/ui/tests/integration/components/ldap/page/library/check-out-test.js
+++ b/ui/tests/integration/components/ldap/page/library/check-out-test.js
@@ -26,9 +26,9 @@ module('Integration | Component | ldap | Page::Library::CheckOut', function (hoo
    };
    this.breadcrumbs = [
      { label: 'ldap-test', route: 'overview' },
-      { label: 'libraries', route: 'libraries' },
+      { label: 'Libraries', route: 'libraries' },
      { label: 'test-library', route: 'libraries.library' },
-      { label: 'check-out' },
+      { label: 'Check-Out' },
    ];

    this.renderComponent = () => {
@@ -48,13 +48,13 @@ module('Integration | Component | ldap | Page::Library::CheckOut', function (hoo
      .containsText('ldap-test', 'Overview breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(2) a')
-      .containsText('libraries', 'Libraries breadcrumb renders');
+      .containsText('Libraries', 'Libraries breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(3)')
      .containsText('test-library', 'Library breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(4)')
-      .containsText('check-out', 'Check-out breadcrumb renders');
+      .containsText('Check-Out', 'Check-out breadcrumb renders');
  });

  test('it should render check out information and credentials', async function (assert) {
--- a/ui/tests/integration/components/ldap/page/library/details-test.js
+++ b/ui/tests/integration/components/ldap/page/library/details-test.js
@@ -34,7 +34,7 @@ module('Integration | Component | ldap | Page::Library::Details', function (hook

    this.breadcrumbs = [
      { label: 'ldap-test', route: 'overview' },
-      { label: 'libraries', route: 'libraries' },
+      { label: 'Libraries', route: 'libraries' },
      { label: 'test-library' },
    ];
  });
@@ -57,7 +57,7 @@ module('Integration | Component | ldap | Page::Library::Details', function (hook
      .containsText(this.model.backend, 'Overview breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(2) a')
-      .containsText('libraries', 'Libraries breadcrumb renders');
+      .containsText('Libraries', 'Libraries breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(3)')
      .containsText(this.model.name, 'Library breadcrumb renders');
--- a/ui/tests/integration/components/ldap/page/role/credentials-test.js
+++ b/ui/tests/integration/components/ldap/page/role/credentials-test.js
@@ -21,9 +21,9 @@ module('Integration | Component | ldap | Page::Role::Credentials', function (hoo
  hooks.beforeEach(function () {
    this.breadcrumbs = [
      { label: 'ldap-test', route: 'overview' },
-      { label: 'roles', route: 'roles' },
+      { label: 'Roles', route: 'roles' },
      { label: 'test-role', route: 'roles.role' },
-      { label: 'credentials' },
+      { label: 'Credentials' },
    ];
    this.transitionStub = sinon.stub(this.owner.lookup('service:router'), 'transitionTo');
  });
@@ -39,13 +39,13 @@ module('Integration | Component | ldap | Page::Role::Credentials', function (hoo
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(1)')
      .containsText('ldap-test', 'Overview breadcrumb renders');
-    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('roles', 'Roles breadcrumb renders');
+    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('Roles', 'Roles breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(3)')
      .containsText('test-role', 'Role breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(4)')
-      .containsText('credentials', 'Credentials breadcrumb renders');
+      .containsText('Credentials', 'Credentials breadcrumb renders');
  });

  test('it should render error', async function (assert) {
--- a/ui/tests/integration/components/ldap/page/role/details-test.js
+++ b/ui/tests/integration/components/ldap/page/role/details-test.js
@@ -37,7 +37,7 @@ module('Integration | Component | ldap | Page::Role::Details', function (hooks)
      this.model = store.peekRecord('ldap/role', ldapRoleID(type, data.name));
      this.breadcrumbs = [
        { label: this.model.backend, route: 'overview' },
-        { label: 'roles', route: 'roles' },
+        { label: 'Roles', route: 'roles' },
        { label: this.model.name },
      ];
      return render(hbs`<Page::Role::Details @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
@@ -52,7 +52,7 @@ module('Integration | Component | ldap | Page::Role::Details', function (hooks)
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(1)')
      .containsText(this.model.backend, 'Overview breadcrumb renders');
-    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('roles', 'Roles breadcrumb renders');
+    assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').containsText('Roles', 'Roles breadcrumb renders');
    assert
      .dom('[data-test-breadcrumbs] li:nth-child(3)')
      .containsText(this.model.name, 'Role breadcrumb renders');
--- a/ui/tests/integration/components/pki/page/pki-configure-create-test.js
+++ b/ui/tests/integration/components/pki/page/pki-configure-create-test.js
@@ -23,7 +23,7 @@ module('Integration | Component | page/pki-configure-create', function (hooks) {
    this.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: 'pki', route: 'overview', model: 'pki' },
-      { label: 'configure' },
+      { label: 'Configure' },
    ];
    this.config = this.store.createRecord('pki/action');
    this.urls = this.store.createRecord('pki/config/urls');
--- a/ui/tests/integration/components/pki/page/pki-tidy-auto-settings-test.js
+++ b/ui/tests/integration/components/pki/page/pki-tidy-auto-settings-test.js
@@ -23,8 +23,8 @@ module('Integration | Component | page/pki-tidy-auto-settings', function (hooks)
    this.breadcrumbs = [
      { label: 'Secrets', route: 'secrets', linkExternal: true },
      { label: backend, route: 'overview', model: backend },
-      { label: 'tidy', route: 'tidy.index', model: backend },
-      { label: 'auto' },
+      { label: 'Tidy', route: 'tidy.index', model: backend },
+      { label: 'Auto' },
    ];
  });