luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Replace RadioButton With Internal Component (#14809) 

* removes ember-radio-button dep and adds radio-button component

* updates missed instances of legacy RadioButton

* removes empty class attr
This commit is contained in:
Jordan Reimer 2022-03-31 16:16:05 -06:00 committed by GitHub
parent dbda6e6ec5
commit 28dfa31666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 141 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/app/templates/components/raft-join.hbs
View File

@ -30,28 +30,28 @@
<br />
How do you want to get started?
</h2>
<RadioButton
@value="join"
@groupValue={{this.preference}}
@changed={{action (mut this.preference)}}
@name="setup-pref"
@radioId="join"
@classNames="vlt-radio is-block"
>
<div class="vlt-radio is-block">
<RadioButton
id="join"
name="setup-pref"
@value="join"
@groupValue={{this.preference}}
@onChange={{fn (mut this.preference)}}
/>
<label for="join"></label>
Join an existing Raft cluster
</RadioButton>
<RadioButton
@value="init"
@groupValue={{this.preference}}
@changed={{action (mut this.preference)}}
@name="setup-pref"
@radioId="init"
@classNames="vlt-radio is-block"
>
</div>
<div class="vlt-radio is-block">
<RadioButton
id="init"
name="setup-pref"
@value="init"
@groupValue={{this.preference}}
@onChange={{fn (mut this.preference)}}
/>
<label for="init" data-test-join-init></label>
Create a new Raft cluster
</RadioButton>
</div>
</div>
<div class="box is-marginless is-shadowless">
<button type="submit" class="button is-primary" data-test-next>

24
ui/app/templates/components/secret-delete-menu.hbs
View File

@ -49,12 +49,12 @@
{{#if (or this.canSoftDeleteSecretData this.canDeleteSecretData)}}
<div class="modal-radio-button" data-test-delete-modal="delete-version">
<RadioButton
id="delete-version"
name="setup-deleteType"
class="radio"
@value={{if this.canSoftDeleteSecretData "soft-delete" "delete-latest-version"}}
@radioClass="radio"
@groupValue={{this.deleteType}}
@changed={{action (mut this.deleteType)}}
@name="setup-deleteType"
@radioId="delete-version"
@onChange={{fn (mut this.deleteType)}}
/>
<div class="helper-text">
<label for="delete-version" data-test-type-select="delete-version"><strong>Delete this version</strong></label>
@ -70,12 +70,12 @@
{{#if this.canDestroyVersion}}
<div class="modal-radio-button" data-test-delete-modal="destroy-version">
<RadioButton
id="destroy-version"
name="setup-deleteType"
class="radio"
@value="destroy"
@radioClass="radio"
@groupValue={{this.deleteType}}
@changed={{action (mut this.deleteType)}}
@name="setup-deleteType"
@radioId="destroy-version"
@onChange={{fn (mut this.deleteType)}}
/>
<div class="helper-text">
<label for="destroy-version" data-test-type-select="destroy-version"><strong>Destroy this version</strong></label>
@ -91,12 +91,12 @@
{{#if this.canDestroyAllVersions}}
<div class="modal-radio-button" data-test-delete-modal="destroy-all-versions">
<RadioButton
id="destroy-all-versions"
name="setup-deleteType"
class="radio"
@value="destroy-all-versions"
@radioClass="radio"
@groupValue={{this.deleteType}}
@changed={{action (mut this.deleteType)}}
@name="setup-deleteType"
@radioId="destroy-all-versions"
@onChange={{fn (mut this.deleteType)}}
/>
<div class="helper-text">
<label for="destroy-all-versions" data-test-replication-type-select="destroy-all-versions">

1
ui/lib/core/addon/components/radio-button.hbs Normal file
View File

@ -0,0 +1 @@
<input ...attributes checked={{eq @value @groupValue}} type="radio" {{on "change" (fn @onChange @value)}} />

20
ui/lib/core/addon/templates/components/box-radio.hbs
View File

@ -11,13 +11,13 @@
<Icon @name={{@glyph}} @size="24" class="has-text-grey-light" />
{{@displayName}}
<RadioButton
id={{@type}}
name={{@groupName}}
class="radio"
disabled={{@disabled}}
@value={{@type}}
@radioClass="radio"
@groupValue={{@groupValue}}
@changed={{@onRadioChange}}
@name={{@groupName}}
@radioId={{@type}}
@disabled={{@disabled}}
@onChange={{@onRadioChange}}
/>
</label>
</T.Trigger>
@ -39,13 +39,13 @@
<Icon @name={{@glyph}} @size="24" class="has-text-grey-light" />
{{@displayName}}
<RadioButton
id={{@type}}
name={{@groupName}}
class="radio"
disabled={{@disabled}}
@value={{@type}}
@radioClass="radio"
@groupValue={{@mountType}}
@changed={{@onRadioChange}}
@name={{@groupName}}
@radioId={{@type}}
@disabled={{@disabled}}
@onChange={{@onRadioChange}}
/>
</label>
</div>

1
ui/lib/core/app/components/radio-button.js Normal file
View File

@ -0,0 +1 @@
export { default } from 'core/components/radio-button';

1
ui/lib/core/package.json
View File

@ -19,7 +19,6 @@
"ember-concurrency": "*",
"ember-maybe-in-element": "*",
"ember-power-select": "*",
"ember-radio-button": "*",
"ember-router-helpers": "*",
"ember-svg-jar": "*",
"ember-truth-helpers": "*",

24
ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
View File

@ -16,12 +16,12 @@
</div>
<div class="radio-card-radio-row">
<RadioButton
id="no-filtering"
name="config-mode"
class="radio"
@value={{null}}
@radioClass="radio"
@groupValue={{this.config.mode}}
@changed={{queue (action (mut this.config.mode))}}
@name="config-mode"
@radioId="no-filtering"
@onChange={{fn (mut this.config.mode)}}
/>
<label for="no-filtering"></label>
</div>
@ -40,12 +40,12 @@
</div>
<div class="radio-card-radio-row">
<RadioButton
id="allow"
name="config-mode"
class="radio"
@value="allow"
@radioClass="radio"
@groupValue={{this.config.mode}}
@changed={{queue (action (mut this.config.mode))}}
@name="config-mode"
@radioId="allow"
@onChange={{fn (mut this.config.mode)}}
/>
<label for="allow"></label>
</div>
@ -64,12 +64,12 @@
</div>
<div class="radio-card-radio-row">
<RadioButton
id="deny"
name="config-mode"
class="radio"
@value="deny"
@radioClass="radio"
@groupValue={{this.config.mode}}
@changed={{queue (action (mut this.config.mode))}}
@name="config-mode"
@radioId="deny"
@onChange={{fn (mut this.config.mode)}}
/>
<label for="deny"></label>
</div>

26
ui/lib/replication/addon/templates/components/replication-summary.hbs
View File

@ -80,7 +80,13 @@
</p>
</div>
<div>
<RadioButton @value="dr" @groupValue={{this.replicationMode}} @name="replication-mode" @radioId="dr" />
<RadioButton
id="dr"
name="replication-mode"
@value="dr"
@groupValue={{this.replicationMode}}
@onChange={{fn (mut this.replicationMode)}}
/>
<label for="dr" data-test-replication-type-select="dr"></label>
</div>
</label>
@ -107,14 +113,16 @@
</div>
<div>
{{#if (has-feature "Performance Replication")}}
<RadioButton
@value="performance"
@groupValue={{this.replicationMode}}
@name="replication-mode"
@classNames="box columns is-centered"
@radioId="performance"
/>
<label for="performance" data-test-replication-type-select="performance"></label>
<div class="box columns is-centered">
<RadioButton
id="performance"
name="replication-mode"
@value="performance"
@groupValue={{this.replicationMode}}
@onChange={{fn (mut this.replicationMode)}}
/>
<label for="performance" data-test-replication-type-select="performance"></label>
</div>
{{/if}}
</div>
</label>

1
ui/package.json
View File

@ -134,7 +134,6 @@
"ember-power-select": "^5.0.3",
"ember-promise-helpers": "^1.0.9",
"ember-qunit": "^5.1.4",
"ember-radio-button": "^2.0.1",
"ember-resolver": "^8.0.2",
"ember-responsive": "^3.0.0-beta.3",
"ember-router-helpers": "^0.4.0",

69
ui/tests/integration/components/radio-button-test.js Normal file
View File

@ -0,0 +1,69 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | radio-button', function (hooks) {
setupRenderingTest(hooks);
test('it should spread attributes on input element', async function (assert) {
await render(
hbs(`
<RadioButton
id="foo"
name="bar"
class="radio"
@onChange={{fn (mut this.groupValue)}}
/>
`)
);
assert.dom('input').hasAttribute('id', 'foo', 'id set on input element');
assert.dom('input').hasAttribute('name', 'bar', 'name set on input element');
assert.dom('input').hasClass('radio', 'class set on input element');
});
test('it should be checked when value and groupValue are equal', async function (assert) {
await render(
hbs(`
<RadioButton
@value="foo"
@groupValue="foo"
@onChange={{fn (mut this.groupValue)}}
/>
`)
);
assert.true(
this.element.querySelector('input').checked,
'input is checked when value matches groupValue'
);
});
test('it should send onChange action and mark correct radio as checked', async function (assert) {
await render(
hbs(`
<RadioButton
@value="foo"
@groupValue={{this.groupValue}}
@onChange={{fn (mut this.groupValue)}}
data-test-radio-1
/>
<RadioButton
@value="bar"
@groupValue={{this.groupValue}}
@onChange={{fn (mut this.groupValue)}}
data-test-radio-2
/>
`)
);
const radio1 = this.element.querySelector('[data-test-radio-1]');
const radio2 = this.element.querySelector('[data-test-radio-2]');
assert.false(radio1.checked, 'radio1 is unchecked when groupValue is undefined');
assert.false(radio2.checked, 'radio2 is unchecked when groupValue is undefined');
await click('[data-test-radio-1]');
assert.true(radio1.checked, 'radio1 is checked');
assert.false(radio2.checked, 'radio2 is unchecked');
await click('[data-test-radio-2]');
assert.false(radio1.checked, 'radio1 is unchecked');
assert.true(radio2.checked, 'radio2 is checked');
});
});

28
ui/yarn.lock
View File

@ -6751,7 +6751,7 @@ broccoli-output-wrapper@^3.2.5:
heimdalljs-logger "^0.1.10"
symlink-or-copy "^1.2.0"
broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
version "1.4.6"
resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==
@ -9925,17 +9925,6 @@ ember-cli-get-component-path-option@^1.0.0:
resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=
ember-cli-htmlbars@^1.1.1:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-1.3.5.tgz#65be9678b274b5e7861d7f75c188780af7ef9d13"
integrity sha512-Qur/anb0Vk57qmIhGLkSzl8X1QIMoae6pLa14MRQ8+YD2N5fNs3qdhEFf0SDBquPOH1QxQtraiNQvji47QBJyg==
dependencies:
broccoli-persistent-filter "^1.0.3"
ember-cli-version-checker "^1.0.2"
hash-for-dep "^1.0.2"
json-stable-stringify "^1.0.0"
strip-bom "^2.0.0"
ember-cli-htmlbars@^2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-2.0.5.tgz#b5a105429a6bce4f7c9c97b667e3b8926e31397f"
@ -10243,13 +10232,6 @@ ember-cli-typescript@^4.1.0, ember-cli-typescript@^4.2.0, ember-cli-typescript@^
stagehand "^1.0.0"
walk-sync "^2.2.0"
ember-cli-version-checker@^1.0.2:
version "1.3.1"
resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-1.3.1.tgz#0bc2d134c830142da64bf9627a0eded10b61ae72"
integrity sha1-C8LRNMgwFC2mS/lieg7e0QthrnI=
dependencies:
semver "^5.3.0"
ember-cli-version-checker@^2.1.0, ember-cli-version-checker@^2.1.2:
version "2.2.0"
resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz#47771b731fe0962705e27c8199a9e3825709f3b3"
@ -10738,14 +10720,6 @@ ember-qunit@^5.1.4:
silent-error "^1.1.1"
validate-peer-dependencies "^1.2.0"
ember-radio-button@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ember-radio-button/-/ember-radio-button-2.0.1.tgz#f081a44d581a4b1db88fef79ec5c47da712ab963"
integrity sha512-cAAyFgNIM3PquowkWfa0lOSlq4PPst9vpkNiLi5yhd1LJ4lVtwgn6s+OpPXWKJLZdig2m31PWU8jxobcubge5w==
dependencies:
ember-cli-babel "^6.9.2"
ember-cli-htmlbars "^1.1.1"
ember-require-module@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/ember-require-module/-/ember-require-module-0.3.0.tgz#65aff7908b5b846467e4526594d33cfe0c23456b"