[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 <[email protected]>

changelog/29206.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Application static breadcrumbs should be formatted in title case.
+```

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 },
     ];
   }

ui/lib/pki/addon/routes/keys/index.js

@@ -47,7 +47,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;
   }

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 },
     ];
   }

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 },
     ];
   }

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' },
     ];
   }
 }

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 },
     ];
   }

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' },
     ];
   }
 }

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;

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;

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' },
     ];
   }
 }

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;
   }

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' },
     ];
   }
 }

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,

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(

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: {

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');

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' },
     ];
   });
 

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' },
     ];
   });
 

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: {

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: {

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) {

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');

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) {

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');

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');

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' },
     ];
   });