Skip to content

Commit

Permalink
VAULT-12127 Refactor breadcrumbs to use breadcrumb component (#18489)
Browse files Browse the repository at this point in the history
* VAULT-12127 Refactor breadcrumbs to use Page::Breadcrumbs component

* Fix failing tests by adding breadcrumbs properties
  • Loading branch information
kiannaquach authored Dec 20, 2022
1 parent 3bff9f9 commit 1534eb4
Show file tree
Hide file tree
Showing 24 changed files with 138 additions and 84 deletions.
2 changes: 1 addition & 1 deletion ui/lib/kubernetes/addon/components/page/configuration.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<TabPageHeader @model={{@backend}}>
<TabPageHeader @model={{@backend}} @breadcrumbs={{@breadcrumbs}}>
<ToolbarLink @route="configure" data-test-toolbar-config-action>
{{if @config "Edit configuration" "Configure Kubernetes"}}
</ToolbarLink>
Expand Down
21 changes: 1 addition & 20 deletions ui/lib/kubernetes/addon/components/page/credentials.hbs
Original file line number Diff line number Diff line change
@@ -1,25 +1,6 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li data-test-crumb="overview">
<span class="sep">/</span>
<LinkTo @route="overview">{{@backend}}</LinkTo>
</li>
<li data-test-crumb="roles">
<span class="sep">/</span>
<LinkTo @route="roles">roles</LinkTo>
</li>
<li data-test-crumb="details">
<span class="sep">/</span>
<LinkTo @route="roles.role.details">{{@roleName}}</LinkTo>
</li>
<li>
<span class="sep">/</span>
<span>credentials</span>
</li>
</ul>
</nav>
<Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
</p.top>
<p.levelLeft>
<h1 class="title is-3 has-bottom-margin-2" data-test-credentials-header>
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/kubernetes/addon/components/page/overview.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<TabPageHeader @model={{@backend}}>
<TabPageHeader @model={{@backend}} @breadcrumbs={{@breadcrumbs}}>
<ToolbarLink @route="configure">Configure Kubernetes</ToolbarLink>
</TabPageHeader>

Expand Down
17 changes: 1 addition & 16 deletions ui/lib/kubernetes/addon/components/page/role/details.hbs
Original file line number Diff line number Diff line change
@@ -1,21 +1,6 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
<ul>
<li data-test-crumb="overview">
<span class="sep">/</span>
<LinkTo @route="overview">{{@model.backend}}</LinkTo>
</li>
<li data-test-crumb="roles">
<span class="sep">/</span>
<LinkTo @route="roles">roles</LinkTo>
</li>
<li>
<span class="sep">/</span>
<span data-test-crumb="role">{{@model.name}}</span>
</li>
</ul>
</nav>
<Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-header-title>
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/kubernetes/addon/components/page/roles.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<TabPageHeader @model={{@backend}} @filterRoles={{true}} @rolesFilterValue={{@filterValue}}>
<TabPageHeader @model={{@backend}} @filterRoles={{true}} @rolesFilterValue={{@filterValue}} @breadcrumbs={{@breadcrumbs}}>
<ToolbarLink @route="roles.create" @type="add" data-test-toolbar-roles-action>
Create role
</ToolbarLink>
Expand Down
13 changes: 1 addition & 12 deletions ui/lib/kubernetes/addon/components/tab-page-header.hbs
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
<ul>
<li data-test-crumb="secrets">
<span class="sep">/</span>
<LinkToExternal @route="secrets">secrets</LinkToExternal>
</li>
<li>
<span class="sep">/</span>
<span data-test-crumb="path">{{@model.id}}</span>
</li>
</ul>
</nav>
<Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-header-title>
Expand Down
9 changes: 9 additions & 0 deletions ui/lib/kubernetes/addon/routes/configuration.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,13 @@ export default class KubernetesConfigureRoute extends FetchConfigRoute {
config: this.configModel,
};
}

setupController(controller, resolvedModel) {
super.setupController(controller, resolvedModel);

controller.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: resolvedModel.backend.id },
];
}
}
9 changes: 9 additions & 0 deletions ui/lib/kubernetes/addon/routes/overview.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,13 @@ export default class KubernetesOverviewRoute extends FetchConfigRoute {
roles: this.store.query('kubernetes/role', { backend }).catch(() => []),
});
}

setupController(controller, resolvedModel) {
super.setupController(controller, resolvedModel);

controller.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: resolvedModel.backend.id },
];
}
}
9 changes: 9 additions & 0 deletions ui/lib/kubernetes/addon/routes/roles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,13 @@ export default class KubernetesRolesRoute extends FetchConfigRoute {
roles,
});
}

setupController(controller, resolvedModel) {
super.setupController(controller, resolvedModel);

controller.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: resolvedModel.backend.id },
];
}
}
11 changes: 11 additions & 0 deletions ui/lib/kubernetes/addon/routes/roles/role/credentials.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,15 @@ export default class KubernetesRoleCredentialsRoute extends Route {
backend: this.secretMountPath.get(),
};
}

setupController(controller, resolvedModel) {
super.setupController(controller, resolvedModel);

controller.breadcrumbs = [
{ label: resolvedModel.backend, route: 'overview' },
{ label: 'roles', route: 'roles' },
{ label: resolvedModel.roleName, route: 'roles.role.details' },
{ label: 'credentials' },
];
}
}
10 changes: 10 additions & 0 deletions ui/lib/kubernetes/addon/routes/roles/role/details.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,14 @@ export default class KubernetesRoleDetailsRoute extends Route {
const { name } = this.paramsFor('roles.role');
return this.store.queryRecord('kubernetes/role', { backend, name });
}

setupController(controller, resolvedModel) {
super.setupController(controller, resolvedModel);

controller.breadcrumbs = [
{ label: resolvedModel.backend, route: 'overview' },
{ label: 'roles', route: 'roles' },
{ label: resolvedModel.name },
];
}
}
2 changes: 1 addition & 1 deletion ui/lib/kubernetes/addon/templates/configuration.hbs
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<Page::Configuration @config={{this.model.config}} @backend={{this.model.backend}} />
<Page::Configuration @config={{this.model.config}} @backend={{this.model.backend}} @breadcrumbs={{this.breadcrumbs}} />
7 changes: 6 additions & 1 deletion ui/lib/kubernetes/addon/templates/overview.hbs
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
<Page::Overview @config={{this.model.config}} @backend={{this.model.backend}} @roles={{this.model.roles}} />
<Page::Overview
@config={{this.model.config}}
@backend={{this.model.backend}}
@roles={{this.model.roles}}
@breadcrumbs={{this.breadcrumbs}}
/>
1 change: 1 addition & 0 deletions ui/lib/kubernetes/addon/templates/roles/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
@config={{this.model.config}}
@backend={{this.model.backend}}
@filterValue={{this.pageFilter}}
@breadcrumbs={{this.breadcrumbs}}
/>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<Page::Credentials @roleName={{this.model.roleName}} @backend={{this.model.backend}} />
<Page::Credentials @roleName={{this.model.roleName}} @backend={{this.model.backend}} @breadcrumbs={{this.breadcrumbs}} />
2 changes: 1 addition & 1 deletion ui/lib/kubernetes/addon/templates/roles/role/details.hbs
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<Page::Role::Details @model={{@model}} />
<Page::Role::Details @model={{@model}} @breadcrumbs={{this.breadcrumbs}} />
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ module('Acceptance | kubernetes | credentials', function (hooks) {
test('it should have correct breadcrumb links in credentials view', async function (assert) {
assert.expect(3);
await this.visitRoleCredentials();
await click('[data-test-crumb="details"] a');
await click('[data-test-breadcrumbs] li:nth-child(3) a');
this.validateRoute(assert, 'roles.role.details', 'Transitions to role details route on breadcrumb click');
await this.visitRoleCredentials();
await click('[data-test-crumb="roles"] a');
await click('[data-test-breadcrumbs] li:nth-child(2) a');
this.validateRoute(assert, 'roles.index', 'Transitions to roles route on breadcrumb click');
await this.visitRoleCredentials();
await click('[data-test-crumb="overview"] a');
await click('[data-test-breadcrumbs] li:nth-child(1) a');
this.validateRoute(assert, 'overview', 'Transitions to overview route on breadcrumb click');
});

Expand Down
11 changes: 6 additions & 5 deletions ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ module('Acceptance | kubernetes | roles', function (hooks) {
assert.expect(2);
await this.visitRoles();
await click('[data-test-list-item-link]');
await click('[data-test-crumb="roles"] a');
await click('[data-test-breadcrumbs] li:nth-child(2) a');
this.validateRoute(assert, 'roles.index', 'Transitions to roles route on breadcrumb click');
await click('[data-test-list-item-link]');
await click('[data-test-crumb="overview"] a');
await click('[data-test-breadcrumbs] li:nth-child(1) a');
this.validateRoute(assert, 'overview', 'Transitions to overview route on breadcrumb click');
});

Expand All @@ -68,7 +68,8 @@ module('Acceptance | kubernetes | roles', function (hooks) {
`roles.role.${action}`,
`Transitions to ${action} route on menu action click`
);
const selector = action === 'details' ? '[data-test-crumb="roles"] a' : '[data-test-cancel]';
const selector =
action === 'details' ? '[data-test-breadcrumbs] li:nth-child(2) a' : '[data-test-cancel]';
await click(selector);
}
}
Expand All @@ -84,7 +85,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
await fillIn('[data-test-input="allowedKubernetesNamespaces"]', '*');
await click('[data-test-save]');
this.validateRoute(assert, 'roles.role.details', 'Transitions to details route on save success');
await click('[data-test-crumb="roles"] a');
await click('[data-test-breadcrumbs] li:nth-child(2) a');
assert.dom('[data-test-role="new-test-role"]').exists('New role renders in list');
});

Expand All @@ -94,7 +95,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
await click('[data-test-list-item-link]');
await click('[data-test-generate-credentials]');
this.validateRoute(assert, 'roles.role.credentials', 'Transitions to credentials route');
await click('[data-test-crumb="details"] a');
await click('[data-test-breadcrumbs] li:nth-child(3) a');
await click('[data-test-edit]');
this.validateRoute(assert, 'roles.role.edit', 'Transitions to edit route');
await click('[data-test-cancel]');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,18 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h
this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
};

this.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: this.backend.id },
];

this.renderComponent = () => {
return render(hbs`<Page::Configuration @backend={{this.backend}} @config={{this.config}} />`, {
owner: this.engine,
});
return render(
hbs`<Page::Configuration @backend={{this.backend}} @config={{this.config}} @breadcrumbs={{this.breadcrumbs}} />`,
{
owner: this.engine,
}
);
};
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,19 @@ module('Integration | Component | kubernetes | Page::Credentials', function (hoo
return new Response(400, {}, { errors });
});
};

this.breadcrumbs = [
{ label: this.backend, route: 'overview' },
{ label: 'roles', route: 'roles' },
{ label: this.roleName, route: 'roles.role.details' },
{ label: 'credentials' },
];
this.renderComponent = () => {
return render(hbs`<Page::Credentials @backend={{this.backend}} @roleName={{this.roleName}} />`, {
owner: this.engine,
});
return render(
hbs`<Page::Credentials @backend={{this.backend}} @roleName={{this.roleName}} @breadcrumbs={{this.breadcrumbs}}/>`,
{
owner: this.engine,
}
);
};
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,13 @@ module('Integration | Component | kubernetes | Page::Overview', function (hooks)
this.backend = this.store.peekRecord('secret-engine', 'kubernetes-test');
this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
this.roles = this.store.peekAll('kubernetes/role');

this.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: this.backend.id },
];
this.renderComponent = () => {
return render(
hbs`<Page::Overview @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} />`,
hbs`<Page::Overview @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @breadcrumbs={{this.breadcrumbs}} />`,
{ owner: this.engine }
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,14 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
...data,
});
this.model = store.peekRecord('kubernetes/role', data.name);
return render(hbs`<Page::Role::Details @model={{this.model}} />`, { owner: this.engine });
this.breadcrumbs = [
{ label: this.model.backend, route: 'overview' },
{ label: 'roles', route: 'roles' },
{ label: this.model.name },
];
return render(hbs`<Page::Role::Details @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
};

this.assertFilteredFields = (hiddenIndices, assert) => {
Expand Down Expand Up @@ -71,9 +78,13 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
test('it should render header with role name and breadcrumbs', async function (assert) {
await this.renderComponent();
assert.dom('[data-test-header-title]').hasText(this.model.name, 'Role name renders in header');
assert.dom('[data-test-crumb="overview"] a').hasText(this.model.backend, 'Overview breadcrumb renders');
assert.dom('[data-test-crumb="roles"] a').hasText('roles', 'Roles breadcrumb renders');
assert.dom('[data-test-crumb="role"]').hasText(this.model.name, 'Role breadcrumb renders');
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(3)')
.containsText(this.model.name, 'Role breadcrumb renders');
});

test('it should render toolbar actions', async function (assert) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,14 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
this.config = this.store.peekRecord('kubernetes/config', 'kubernetes-test');
this.roles = this.store.peekAll('kubernetes/role');
this.filterValue = '';
this.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: this.backend.id },
];

this.renderComponent = () => {
return render(
hbs`<Page::Roles @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @filterValue={{this.filterValue}} />`,
hbs`<Page::Roles @config={{this.config}} @backend={{this.backend}} @roles={{this.roles}} @filterValue={{this.filterValue}} @breadcrumbs={{this.breadcrumbs}} />`,
{ owner: this.engine }
);
};
Expand Down
Loading

0 comments on commit 1534eb4

Please sign in to comment.