vault/ui/tests/integration/components/kubernetes/page/configure-test.js
Angel Garbarino c8f593a3eb
Remove the Bulma CSS Framework (#19878)
* Step one: remove bulma (#19587)

* remove bulma and get app running

* add back in each statments from bulma variables

* remove space

* address pr comments

* add back copyright headedr

* Step two: add back and organize relevant Bulma classes (#19664)

* VAULT-14566 copy/paste bulma css for classes that it defines and we do not.

* add three new helper files and move helpers.scss to a new directory called helper-classes

* rename utils/colors to color_variables

* integrate all bulma sizing into previous utils/spacing doc, address obvious duplicates and rename to spacing_variables.

* small class name issues

* clean up

* comment clean up

* Step three: add Bulma classes to relevant component styles (#19683)

* add in bulma classes used in global-flash component

* add in bulma classes used in the modal component

* remaining bulma classes that can integrate into the vault css

* remove replication-header.scss and replace with helper.

* add bulma tabs classes to tabs component scss file

* remove ui-wizard style

* only do bulma explicit classes for now

* add in breadcrumb styling from bulma

* integrate bulma into css

* remove unecessary tabs bulma styling

* remove non-relevant bulma classes

* remove non relevant bulma css

* Step three cont. Bulma classes to component files (#19691)

* return box-label to as before now that you have those bulma classes

* missing modal bulma classes

* add bulma class to box component

* missed some bulma box classes

* remove scss unecessary

* add in bulma classes to icon component.

* move up icon

* missed modal class

* clean up

* size vars to icon

* Step four: address core directory files (#19719)

* move some basic helpers over to typography helper.

* rename helpers to other

* moveing generic classes to other relevant scss files.

* rename generic to link

* clean up

* clean up

* address core/box

* remove hero because the class is not used anywhere.

* add in level bulma css

* welp forgot a file.

* add in missing bulma classes into core/menu

* UI/step four core files 2 (#19754)

* address issue with input border and box shadow

* remove the is-white class, it was being used very poorly, replaced with exisiting helpers.

* organizing the forms and button core files

* small amount of clean up

* hot mess of colors dealing with just danger for now

* removed moved over bulma classes

* use helper for this one off

* clean up

* wip on the buttons

* fix select select:: after

* clean up select from bulma-classes.

* clean up

* clean up

* small fix

* Cleaning up the last of the core files (welp there's still more) (#19779)

* one missing thing for level core.

* replace no-underline and link-item with helper text-decoration-none

* core/menu double check

* handle core/message

* create and add to bulma classes for core/columns

* add in bulma-classes columns and column... not fun to qa later.

* remove core/notification

* core/progress bar

* revert the hbs changes

* fix over revert

* Core files cont. Focus on core/form (#19794)

* create input and textarea core files, move charts

* remove input and textarea classes from bulma classes

* remove input-hint component file, never a component

* fix the mess that is help-text:

* help and is-help and sub-text are a mess...

* fix switch alignment issues

* deal with file-name

* clean file out of bulma-classes

* create layout helper and move out some remaining button classes

* deal with core/title

* is-marginless move to helper

* helper layout add to core

* clean up

* remove core/tables

* test

* Revert "test"

This reverts commit e695dedfe9.

* Core files continued (#19896)

* test

* combine input and textarea

* clean up navbar brannd

* clean up the single instance delete class used on the modal and match with flight icon

* add back autocomplete to component

* create core/file

* alphabetize file css blocks

* core/checkboxes create and address

* combine b-checkboxes classes and remove from core the utils

* address duplicate helper

* Core files continued (#19930)

* clean up helper and remove duplicate class

* more clean up of the other helper

* fix pagination, hot mess

* add radio to checkbox styling

* tag to tags rename singular

* container core file

* finally... changing forms to one element, field

* finally remove bulma-classes

* cleanup

* comment cleanup

* add comment about pagination

* Consolidating our size variables with Bulma's (#19951)

* remove bulma-size variables that are duplicates of our own

* remove unused is-size-xx and duplicate font weights

* remove duplicate class

* ahh this is madness

* remove column-gap var

* remove  duplicate sizing of

* clean up breakpoints

* replace border-radius:2px for var so folks know the common border-radius

* replace header-height with new spacing var

* replace body-size and console-size vars with other sizing vars

* clean up final of size vars

* radius override things blah fixed

* last size var

* add back

* Finish size var clean up (#19970)

* remove size-small, etc.

* fix size-small things

* remove label unused classes

* move out font-family utils

* Update Color Vars (remove bulma color vars and overrides) (#20031)

* remove bulma_variables file

* remove duplicate helper

* replace hardcoded with color vars when appropriate

* broaden font-family utils

* add back box-link-hover-shadow

* welp

* fix pagination coloring

* Small fixes post var and core file work (#20035)

* fix auth-login splash container

* fix some splash page issues

* fix status menu

* fix menu-list regression

* fix regression on button text-decoration

* fix tag regression

* fix regression on select select

* fix regression on field field

* regression on textarea

* button focus state regression

* fix inputs

* fix is-outlined buttons

* Remove bulma switch (#20065)

* remove bulma/switch

* fix disbled style

* Bulma removal: starting the clean up process (#20066)

* remove unused class name

* add todo

* wip shamir-modal-flow usage of file styling

* final fix

* fix message type message-body css

* better match

* fix a.active on popup-menu-content

* VAULT-14625 fix

* blah overrides overrides and oh another override

* fix breadcrumb link

* fixes

* fix readonly state and hover on inputs.scss

* fix button style issue

* fix modal title spacing issue

* clean up

* fix switch

* fix checkbox issue and pr comment

* fix issue with tabs

* pr comment

* Bulma clean up cont. (#20119)

* gotta use rem on page container... it makes a difference, can't switch to px

* missing helper for background color

* fix textarea with icon

* can't seem to replace rem with px ;/

* fix table issues

* clean up columns.scss file

* fix

* fix rem vs px issues

* address some todos

* fix todo on help is-danger

* best effort for sizing var clean up

* reomve duplicate

* clearify

* welp forgot a word

* address sr-only class definition

* move to helper

* replaced single use class with helper and cleaned up flexbox

* move to make more sense

* move around layout and container

* color things

* things

* Cleanup 🧹 (#20196)

* remove carry over classes from bulma

* clean up title.scss

* clean up title is-5 has-top-padding-m and box.scss

* clean up breadcrumbs, buttons, c&r, columns

* clean up core files

* clean up cont looking at component files

* clean up remaining component files

* fix pagination

* pr comments, thank you

* add in merge color helper

* Remove out of scope changes (#20218)

* remove out of scope changes

* fix test

* add changelog

* remove scope creep

* fix scope creep cont

* qa fixes

* Fixes found while QA'ing Secret Engines (#20264)

* fix active tab issue for both secret and auth mounts

* use helper instead of :not last on content margin which causes problems

* fix missing disabled on b-checkbox

* quick fix

* deal with body-size issue

* fix order of other helper

* small fixes from qa

* update comments on the core files and change desktop font size from px back to rem

* missed 16px replaced with 1rem

* address chelseas comments

* fixes that jordan noticed

* remove unstable flexbox test

* test fix

* rename other to general

* address claires qa comments

* add in missing helper must have missed in earlier merge

* fix button

* small small small fix
2023-04-27 14:23:17 -06:00

280 lines
11 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { setupEngine } from 'ember-engines/test-support';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { render, click, waitUntil, find, fillIn } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { Response } from 'miragejs';
import sinon from 'sinon';
module('Integration | Component | kubernetes | Page::Configure', function (hooks) {
setupRenderingTest(hooks);
setupEngine(hooks, 'kubernetes');
setupMirage(hooks);
hooks.beforeEach(function () {
this.store = this.owner.lookup('service:store');
this.newModel = this.store.createRecord('kubernetes/config', { backend: 'kubernetes-new' });
this.existingConfig = {
kubernetes_host: 'https://192.168.99.100:8443',
kubernetes_ca_cert: '-----BEGIN CERTIFICATE-----\n.....\n-----END CERTIFICATE-----',
service_account_jwt: 'test-jwt',
disable_local_ca_jwt: true,
};
this.store.pushPayload('kubernetes/config', {
modelName: 'kubernetes/config',
backend: 'kubernetes-edit',
...this.existingConfig,
});
this.editModel = this.store.peekRecord('kubernetes/config', 'kubernetes-edit');
this.breadcrumbs = [
{ label: 'secrets', route: 'secrets', linkExternal: true },
{ label: 'kubernetes', route: 'overview' },
{ label: 'configure' },
];
this.expectedInferred = {
disable_local_ca_jwt: false,
kubernetes_ca_cert: null,
kubernetes_host: null,
service_account_jwt: null,
};
});
test('it should display proper options when toggling radio cards', async function (assert) {
await render(hbs`<Page::Configure @model={{this.newModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
assert
.dom('[data-test-radio-card="local"] input')
.isChecked('Local cluster radio card is checked by default');
assert
.dom('[data-test-config] p')
.hasText(
'Configuration values can be inferred from the pod and your local environment variables.',
'Inferred text is displayed'
);
assert.dom('[data-test-config] button').hasText('Get config values', 'Get config button renders');
assert
.dom('[data-test-config-save]')
.isDisabled('Save button is disabled when config values have not been inferred');
assert.dom('[data-test-config-cancel]').hasText('Back', 'Back button renders');
await click('[data-test-radio-card="manual"]');
assert.dom('[data-test-field]').exists({ count: 3 }, 'Form fields render');
assert.dom('[data-test-config-save]').isNotDisabled('Save button is enabled');
assert.dom('[data-test-config-cancel]').hasText('Back', 'Back button renders');
});
test('it should check for inferred config variables', async function (assert) {
assert.expect(8);
let status = 404;
this.server.get('/:path/check', () => {
assert.ok(
waitUntil(() => find('[data-test-config] button').disabled),
'Button is disabled while request is in flight'
);
return new Response(status, {});
});
await render(hbs`<Page::Configure @model={{this.newModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
await click('[data-test-config] button');
assert
.dom('[data-test-icon="x-square-fill"]')
.hasClass('has-text-danger', 'Icon is displayed for error state with correct styling');
const error =
'Vault could not infer a configuration from your environment variables. Check your configuration file to edit or delete them, or configure manually.';
assert.dom('[data-test-config] span').hasText(error, 'Error text is displayed');
assert.dom('[data-test-config-save]').isDisabled('Save button is disabled in error state');
status = 204;
await click('[data-test-radio-card="manual"]');
await click('[data-test-radio-card="local"]');
await click('[data-test-config] button');
assert
.dom('[data-test-icon="check-circle-fill"]')
.hasClass('has-text-success', 'Icon is displayed for success state with correct styling');
assert
.dom('[data-test-config] span')
.hasText('Configuration values were inferred successfully.', 'Success text is displayed');
assert.dom('[data-test-config-save]').isNotDisabled('Save button is enabled in success state');
});
test('it should create new manual config', async function (assert) {
assert.expect(2);
this.server.post('/:path/config', (schema, req) => {
const json = JSON.parse(req.requestBody);
assert.deepEqual(json, this.existingConfig, 'Values are passed to create endpoint');
return new Response(204, {});
});
const stub = sinon.stub(this.owner.lookup('service:router'), 'transitionTo');
await render(hbs`<Page::Configure @model={{this.newModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
await click('[data-test-radio-card="manual"]');
await fillIn('[data-test-input="kubernetesHost"]', this.existingConfig.kubernetes_host);
await fillIn('[data-test-input="serviceAccountJwt"]', this.existingConfig.service_account_jwt);
await fillIn('[data-test-input="kubernetesCaCert"]', this.existingConfig.kubernetes_ca_cert);
await click('[data-test-config-save]');
assert.ok(
stub.calledWith('vault.cluster.secrets.backend.kubernetes.configuration'),
'Transitions to configuration route on save success'
);
});
test('it should edit existing manual config', async function (assert) {
assert.expect(6);
const stub = sinon.stub(this.owner.lookup('service:router'), 'transitionTo');
await render(hbs`<Page::Configure @model={{this.editModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
assert.dom('[data-test-radio-card="manual"] input').isChecked('Manual config radio card is checked');
assert
.dom('[data-test-input="kubernetesHost"]')
.hasValue(this.existingConfig.kubernetes_host, 'Host field is populated');
assert
.dom('[data-test-input="serviceAccountJwt"]')
.hasValue(this.existingConfig.service_account_jwt, 'JWT field is populated');
assert
.dom('[data-test-input="kubernetesCaCert"]')
.hasValue(this.existingConfig.kubernetes_ca_cert, 'Cert field is populated');
await fillIn('[data-test-input="kubernetesHost"]', 'http://localhost:1212');
await click('[data-test-config-cancel]');
assert.ok(
stub.calledWith('vault.cluster.secrets.backend.kubernetes.configuration'),
'Transitions to configuration route when cancelling edit'
);
assert.strictEqual(
this.editModel.kubernetesHost,
this.existingConfig.kubernetes_host,
'Model values are rolled back on cancel'
);
});
test('it should display inferred success message when editing model using local values', async function (assert) {
this.store.pushPayload('kubernetes/config', {
modelName: 'kubernetes/config',
backend: 'kubernetes-edit-2',
disable_local_ca_jwt: false,
});
this.model = this.store.peekRecord('kubernetes/config', 'kubernetes-edit-2');
await render(hbs`<Page::Configure @model={{this.model}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
assert.dom('[data-test-radio-card="local"] input').isChecked('Local cluster radio card is checked');
assert
.dom('[data-test-icon="check-circle-fill"]')
.hasClass('has-text-success', 'Icon is displayed for success state with correct styling');
assert
.dom('[data-test-config] span')
.hasText('Configuration values were inferred successfully.', 'Success text is displayed');
});
test('it should show confirmation modal when saving edits', async function (assert) {
assert.expect(2);
this.server.post('/:path/config', () => {
assert.ok(true, 'Save request made after confirmation');
return new Response(204, {});
});
await render(
hbs`
<div id="modal-wormhole"></div>
<Page::Configure @model={{this.editModel}} @breadcrumbs={{this.breadcrumbs}} />
`,
{ owner: this.engine }
);
await click('[data-test-config-save]');
assert
.dom('.modal-card-body')
.hasText(
'Making changes to your configuration may affect how Vault will reach the Kubernetes API and authenticate with it. Are you sure?',
'Confirm modal renders'
);
await click('[data-test-config-confirm]');
});
test('it should validate form and show errors', async function (assert) {
await render(hbs`<Page::Configure @model={{this.newModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
await click('[data-test-radio-card="manual"]');
await click('[data-test-config-save]');
assert
.dom('[data-test-inline-error-message]')
.hasText('Kubernetes host is required', 'Error renders for required field');
assert.dom('[data-test-alert] p').hasText('There is an error with this form.', 'Alert renders');
});
test('it should save inferred config', async function (assert) {
assert.expect(2);
this.server.get('/:path/check', () => new Response(204, {}));
this.server.post('/:path/config', (schema, req) => {
const json = JSON.parse(req.requestBody);
assert.deepEqual(json, this.expectedInferred, 'Values are passed to create endpoint');
return new Response(204, {});
});
const stub = sinon.stub(this.owner.lookup('service:router'), 'transitionTo');
await render(hbs`<Page::Configure @model={{this.newModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
await click('[data-test-config] button');
await click('[data-test-config-save]');
assert.ok(
stub.calledWith('vault.cluster.secrets.backend.kubernetes.configuration'),
'Transitions to configuration route on save success'
);
});
test('it should unset manual config values when saving local cluster option', async function (assert) {
assert.expect(1);
this.server.get('/:path/check', () => new Response(204, {}));
this.server.post('/:path/config', (schema, req) => {
const json = JSON.parse(req.requestBody);
assert.deepEqual(json, this.expectedInferred, 'Manual config values are unset in server payload');
return new Response(204, {});
});
await render(hbs`<Page::Configure @model={{this.newModel}} @breadcrumbs={{this.breadcrumbs}} />`, {
owner: this.engine,
});
await click('[data-test-radio-card="manual"]');
await fillIn('[data-test-input="kubernetesHost"]', this.existingConfig.kubernetes_host);
await fillIn('[data-test-input="serviceAccountJwt"]', this.existingConfig.service_account_jwt);
await fillIn('[data-test-input="kubernetesCaCert"]', this.existingConfig.kubernetes_ca_cert);
await click('[data-test-radio-card="local"]');
await click('[data-test-config] button');
await click('[data-test-config-save]');
});
});