chore: 🤖 remove ember radio btn, update it with hds (#2556)
* chore: 🤖 remove ember radio btn, update it with hds
This commit is contained in:
1 parent
415f638028
commit
f8796b362e
21 files changed
+127
-612
No files matched your search
@@ -21,7 +21,6 @@
|
||||
}}
|
||||
{{yield
|
||||
(hash
|
||||
radioGroup=(component 'rose/form/radio/group' disabled=this.disabled)
|
||||
checkbox=(component 'rose/form/checkbox' disabled=this.disabled)
|
||||
checkboxGroup=(component
|
||||
'rose/form/checkbox/group' disabled=this.disabled
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
{{!
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: BUSL-1.1
|
||||
}}
|
||||
|
||||
{{yield
|
||||
(hash
|
||||
radio=(component
|
||||
'rose/form/radio/radio'
|
||||
name=@name
|
||||
selectedValue=@selectedValue
|
||||
disabled=@disabled
|
||||
changed=@changed
|
||||
inline=@inline
|
||||
)
|
||||
)
|
||||
}}
|
||||
@@ -1,43 +0,0 @@
|
||||
{{!
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: BUSL-1.1
|
||||
}}
|
||||
|
||||
<div class='{{this.className}} {{if @error " error"}} {{if @inline "inline"}}'>
|
||||
|
||||
<RadioButton
|
||||
...attributes
|
||||
@radioClass='rose-form-radio-field'
|
||||
@radioId={{this.id}}
|
||||
type='radio'
|
||||
disabled={{@disabled}}
|
||||
@name={{@name}}
|
||||
@value={{@value}}
|
||||
@groupValue={{@selectedValue}}
|
||||
@disabled={{@disabled}}
|
||||
@changed={{@changed}}
|
||||
/>
|
||||
|
||||
<label class='rose-form-radio-label' for={{this.id}}>
|
||||
|
||||
{{#if @icon}}
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
{{@label}}
|
||||
<span class='radio-card-overlay'></span>
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText
|
||||
@id='helper-text-{{this.id}}'
|
||||
@error={{@error}}
|
||||
@link={{@link}}
|
||||
@linkText={{@linkText}}
|
||||
>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
</label>
|
||||
|
||||
{{yield}}
|
||||
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
import Component from '@glimmer/component';
|
||||
import { generateComponentID } from '../../../../../utilities/component-auto-id';
|
||||
|
||||
export default class RoseFormRadioRadioComponent extends Component {
|
||||
// =attributes
|
||||
className = 'rose-form-radio';
|
||||
id = generateComponentID();
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
export { default } from 'rose/components/rose/form/radio/card';
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
export { default } from 'rose/components/rose/form/radio/group';
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
export { default } from 'rose/components/rose/form/radio/radio';
|
||||
@@ -9,5 +9,4 @@
|
||||
@import 'input';
|
||||
@import 'checkbox';
|
||||
@import 'select';
|
||||
@import 'radio';
|
||||
@import 'fieldset';
|
||||
@@ -1,184 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
@use '../../variables/sizing';
|
||||
@use '../../utilities/type';
|
||||
@use '../../variables/typography';
|
||||
|
||||
$radio-svg: (
|
||||
'default':
|
||||
"<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'hover':
|
||||
"<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'focus':
|
||||
"<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'checked':
|
||||
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
|
||||
'disabled':
|
||||
"<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'disabled-checked':
|
||||
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
|
||||
'error':
|
||||
"<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
|
||||
'error-checked':
|
||||
"<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
|
||||
);
|
||||
$data-svg-prefix: 'data:image/svg+xml;utf-8,';
|
||||
|
||||
.rose-form-radio {
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
|
||||
.rose-form-radio-label {
|
||||
margin-right: sizing.rems(s);
|
||||
}
|
||||
}
|
||||
@include type.type(m);
|
||||
|
||||
position: relative;
|
||||
margin-bottom: sizing.rems(xs);
|
||||
color: var(--ui-gray);
|
||||
|
||||
.rose-form-radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.rose-form-helper-text {
|
||||
font-weight: normal;
|
||||
margin-left: sizing.rems(xxs);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include type.type(s, semibold);
|
||||
|
||||
color: currentcolor;
|
||||
padding-left: sizing.rems(l);
|
||||
padding-top: sizing.rems(xxxs);
|
||||
|
||||
.rose-icon {
|
||||
margin-right: sizing.rems(xxs);
|
||||
margin-left: sizing.rems(xxs);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: sizing.rems(xs);
|
||||
left: 0;
|
||||
display: block;
|
||||
width: sizing.rems(m);
|
||||
height: sizing.rems(m);
|
||||
pointer-events: none;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -#{sizing.rems(xxxxs)};
|
||||
left: -#{sizing.rems(xxxs)};
|
||||
display: block;
|
||||
width: sizing.rems(l);
|
||||
height: sizing.rems(l);
|
||||
transform: scale(2);
|
||||
pointer-events: none;
|
||||
content: ' ';
|
||||
background: no-repeat 50%/50% 50%;
|
||||
background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
|
||||
}
|
||||
}
|
||||
|
||||
.rose-form-radio-field {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: sizing.rems(m);
|
||||
height: sizing.rems(m);
|
||||
opacity: 0;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'hover'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'focus'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'checked'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'disabled'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'disabled-checked'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: var(--failure);
|
||||
|
||||
.rose-form-radio-field {
|
||||
&:not(:disabled, :focus) {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'error'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .rose-form-radio-label {
|
||||
&::after {
|
||||
background-image: url($data-svg-prefix + map-get(
|
||||
$radio-svg,
|
||||
'error-checked'
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,7 +40,6 @@
|
||||
"ember-composable-helpers": "^5.0.0",
|
||||
"ember-focus-trap": "^1.0.1",
|
||||
"ember-named-blocks-polyfill": "^0.2.5",
|
||||
"ember-radio-button": "github:yapplabs/ember-radio-button.git#b2ab65f",
|
||||
"ember-uuid": "^2.1.0",
|
||||
"jsonlint": "^1.6.3",
|
||||
"sass": "^1.69.5"
|
||||
|
||||
@@ -72,19 +72,12 @@ module('Integration | Component | rose/form', function (hooks) {
|
||||
</Hds::Form::Select::Field>
|
||||
|
||||
<form.checkbox @label="Checkbox" @name="checkbox-field" />
|
||||
<form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@label="Red"
|
||||
@value="red"
|
||||
/>
|
||||
</form.radioGroup>
|
||||
</Rose::Form>
|
||||
`);
|
||||
assert.ok(find('[name="input-field"]'));
|
||||
assert.ok(find('[name="textarea-field"]'));
|
||||
assert.ok(find('[name="select-field"]'));
|
||||
assert.ok(find('[name="checkbox-field"]'));
|
||||
assert.ok(find('[name="radio-group-field"]'));
|
||||
});
|
||||
|
||||
test('it supports an editability toggle when @showEditToggle is true', async function (assert) {
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render, click, findAll } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | rose/form/radio/group', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
await render(hbs`
|
||||
<Rose::Form::Radio::Group @name="bird" as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="Pegion"
|
||||
@value="pegion"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="flamingo"
|
||||
@value="flamingo"
|
||||
/>
|
||||
</Rose::Form::Radio::Group>
|
||||
`);
|
||||
|
||||
assert.strictEqual(findAll('input').length, 2);
|
||||
assert.strictEqual(findAll('input')[0].name, 'bird');
|
||||
assert.strictEqual(findAll('input')[1].name, 'bird');
|
||||
});
|
||||
|
||||
test('it renders with @selectedValue value selected', async function (assert) {
|
||||
await render(hbs`
|
||||
<Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="Pegion"
|
||||
@value="pegion"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="flamingo"
|
||||
@value="flamingo"
|
||||
/>
|
||||
</Rose::Form::Radio::Group>
|
||||
`);
|
||||
|
||||
assert.false(findAll('[type="radio"]')[0].checked);
|
||||
assert.true(findAll('[type="radio"]')[1].checked);
|
||||
|
||||
await click(findAll('[type="radio"]')[0]);
|
||||
|
||||
assert.true(findAll('[type="radio"]')[0].checked);
|
||||
assert.false(findAll('[type="radio"]')[1].checked);
|
||||
});
|
||||
|
||||
test('it reflects active radiofield value in @selectedValue and triggers a @changed function', async function (assert) {
|
||||
assert.expect(5);
|
||||
this.changed = (value) => {
|
||||
this.selectedValue = value;
|
||||
assert.ok(value);
|
||||
};
|
||||
await render(hbs`
|
||||
<Rose::Form::Radio::Group
|
||||
@name="bird"
|
||||
@selectedValue={{this.selectedValue}}
|
||||
@changed={{this.changed}}
|
||||
as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="Pegion"
|
||||
@value="pegion"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="flamingo"
|
||||
@value="flamingo"
|
||||
/>
|
||||
</Rose::Form::Radio::Group>
|
||||
`);
|
||||
|
||||
assert.notOk(this.selectedValue);
|
||||
|
||||
await click(findAll('[type="radio"]')[0]);
|
||||
assert.strictEqual(this.selectedValue, 'pegion');
|
||||
|
||||
await click(findAll('[type="radio"]')[1]);
|
||||
assert.strictEqual(this.selectedValue, 'flamingo');
|
||||
});
|
||||
|
||||
test('it uses @selectedValue value to set active radiofield', async function (assert) {
|
||||
this.set('selectedValue', 'cat');
|
||||
await render(hbs`
|
||||
<Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="Pegion"
|
||||
@value="pegion"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@name="bird"
|
||||
@label="flamingo"
|
||||
@value="flamingo"
|
||||
/>
|
||||
</Rose::Form::Radio::Group>
|
||||
`);
|
||||
|
||||
assert.false(findAll('[type="radio"]')[0].checked);
|
||||
assert.false(findAll('[type="radio"]')[1].checked);
|
||||
|
||||
this.set('selectedValue', 'flamingo');
|
||||
assert.false(findAll('[type="radio"]')[0].checked);
|
||||
assert.true(findAll('[type="radio"]')[1].checked);
|
||||
|
||||
this.set('selectedValue', 'pegion');
|
||||
assert.true(findAll('[type="radio"]')[0].checked);
|
||||
assert.false(findAll('[type="radio"]')[1].checked);
|
||||
|
||||
this.set('selectedValue', 'dog');
|
||||
assert.false(findAll('[type="radio"]')[0].checked);
|
||||
assert.false(findAll('[type="radio"]')[1].checked);
|
||||
});
|
||||
});
|
||||
@@ -1,71 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render, find } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | rose/form/radio/radio', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio />`);
|
||||
assert.ok(await find('input'));
|
||||
assert.strictEqual(await find('input').type, 'radio');
|
||||
});
|
||||
|
||||
test('it renders with label', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio @label="Label"/>`);
|
||||
assert.strictEqual(await find('label').textContent.trim(), 'Label');
|
||||
});
|
||||
|
||||
test('it supports an icon', async function (assert) {
|
||||
await render(
|
||||
hbs`<Rose::Form::Radio::Radio @icon="flight-icons/svg/user-circle-16" />`,
|
||||
);
|
||||
assert.ok(find('svg'));
|
||||
});
|
||||
|
||||
test('it is checked when @value and @selectedValue values match', async function (assert) {
|
||||
await render(
|
||||
hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`,
|
||||
);
|
||||
assert.true(await find('input').checked);
|
||||
});
|
||||
|
||||
test('it is not checked when @value and @selectedValue values are different', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
|
||||
assert.false(await find('input').checked);
|
||||
|
||||
await render(hbs`<Rose::Form::Radio::Radio @selectedValue="tree"/>`);
|
||||
assert.false(await find('input').checked);
|
||||
|
||||
await render(
|
||||
hbs`<Rose::Form::Radio::Radio @value="root" @selectedValue="tree"/>`,
|
||||
);
|
||||
assert.false(await find('input').checked);
|
||||
});
|
||||
|
||||
test('it is not disabled by default', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio />`);
|
||||
assert.false(await find('input').disabled);
|
||||
});
|
||||
|
||||
test('it is not in error state by default', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio />`);
|
||||
assert.notOk(await find('.error'));
|
||||
});
|
||||
|
||||
test('it is disabled when @disabled={{true}}', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio @disabled={{true}}/>`);
|
||||
assert.true(await find('input').disabled);
|
||||
});
|
||||
|
||||
test('it is in error state when @error={{true}}', async function (assert) {
|
||||
await render(hbs`<Rose::Form::Radio::Radio @error={{true}} />`);
|
||||
assert.ok(await find('.error'));
|
||||
});
|
||||
});
|
||||
@@ -4,40 +4,29 @@
|
||||
}}
|
||||
|
||||
{{#if (or @model.isOIDC @model.isLDAP)}}
|
||||
<Rose::Dropdown
|
||||
@text={{t (concat 'states.' @model.state)}}
|
||||
@icon={{if
|
||||
@model.isInactive
|
||||
'flight-icons/svg/x-circle-16'
|
||||
(if
|
||||
@model.isPrivate
|
||||
'flight-icons/svg/lock-16'
|
||||
'flight-icons/svg/check-circle-16'
|
||||
)
|
||||
}}
|
||||
@dropdownRight={{true}}
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.section @title={{t 'actions.change-state'}}>
|
||||
<Rose::Form as |form|>
|
||||
<form.radioGroup
|
||||
@name='theme'
|
||||
@selectedValue={{@model.state}}
|
||||
@changed={{fn @changeState @model}}
|
||||
as |radioGroup|
|
||||
>
|
||||
{{#each @model.options.state as |state|}}
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label={{t (concat 'states.' state)}}
|
||||
@value={{state}}
|
||||
/>
|
||||
</dropdown.item>
|
||||
{{/each}}
|
||||
</form.radioGroup>
|
||||
</Rose::Form>
|
||||
</dropdown.section>
|
||||
</Rose::Dropdown>
|
||||
<Hds::Dropdown class='change-state' data-test-change-state as |dd|>
|
||||
<dd.Title @text={{t 'actions.change-state'}} />
|
||||
<dd.ToggleButton
|
||||
@text={{t (concat 'states.' @model.state)}}
|
||||
@color='secondary'
|
||||
@icon={{if
|
||||
@model.isInactive
|
||||
'x-circle'
|
||||
(if @model.isPrivate 'lock' 'check-circle')
|
||||
}}
|
||||
/>
|
||||
|
||||
{{#each @model.options.state as |state|}}
|
||||
<dd.Radio
|
||||
checked={{eq @model.state state}}
|
||||
@value={{state}}
|
||||
{{on 'change' (fn @changeState @model state)}}
|
||||
>
|
||||
{{t (concat 'states.' state)}}
|
||||
</dd.Radio>
|
||||
{{/each}}
|
||||
</Hds::Dropdown>
|
||||
|
||||
{{/if}}
|
||||
|
||||
<Hds::Dropdown data-test-manage-auth-method as |dd|>
|
||||
|
||||
@@ -8,6 +8,21 @@ import { inject as service } from '@ember/service';
|
||||
import { getOwner } from '@ember/application';
|
||||
import { action } from '@ember/object';
|
||||
|
||||
const THEMES = [
|
||||
{
|
||||
label: 'system',
|
||||
value: 'system-default-theme',
|
||||
},
|
||||
{
|
||||
label: 'light',
|
||||
value: 'light',
|
||||
},
|
||||
{
|
||||
label: 'dark',
|
||||
value: 'dark',
|
||||
},
|
||||
];
|
||||
|
||||
export default class ApplicationController extends Controller {
|
||||
// =services
|
||||
|
||||
@@ -16,6 +31,14 @@ export default class ApplicationController extends Controller {
|
||||
@service featureEdition;
|
||||
@service flashMessages;
|
||||
|
||||
/**
|
||||
* Returns available themes
|
||||
* @type {array}
|
||||
*/
|
||||
get themes() {
|
||||
return THEMES;
|
||||
}
|
||||
|
||||
// =actions
|
||||
|
||||
/**
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
*/
|
||||
|
||||
import Route from '@ember/routing/route';
|
||||
import { getOwner } from '@ember/application';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { action } from '@ember/object';
|
||||
import { A } from '@ember/array';
|
||||
@@ -65,7 +64,9 @@ export default class ApplicationRoute extends Route {
|
||||
this.intl.setLocale(['en-us']);
|
||||
await this.session.setup();
|
||||
const theme = this.session.get('data.theme');
|
||||
this.toggleTheme(theme);
|
||||
/* eslint-disable-next-line ember/no-controller-access-in-routes */
|
||||
const controller = this.controllerFor(this.routeName);
|
||||
controller.toggleTheme(theme);
|
||||
|
||||
// Setup the DB from a successful authentication restoration
|
||||
if (this.session.isAuthenticated) {
|
||||
@@ -77,32 +78,6 @@ export default class ApplicationRoute extends Route {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies the specified color theme to the root ember element.
|
||||
* @param {string} theme - "light", "dark", or nullish (system default)
|
||||
*/
|
||||
@action
|
||||
toggleTheme(theme) {
|
||||
const rootElementSelector = getOwner(this).rootElement;
|
||||
const rootEl = getOwner(this)
|
||||
.lookup('service:-document')
|
||||
.querySelector(rootElementSelector);
|
||||
this.session.set('data.theme', theme);
|
||||
switch (theme) {
|
||||
case 'light':
|
||||
rootEl.classList.add('rose-theme-light');
|
||||
rootEl.classList.remove('rose-theme-dark');
|
||||
break;
|
||||
case 'dark':
|
||||
rootEl.classList.add('rose-theme-dark');
|
||||
rootEl.classList.remove('rose-theme-light');
|
||||
break;
|
||||
default:
|
||||
rootEl.classList.remove('rose-theme-dark');
|
||||
rootEl.classList.remove('rose-theme-light');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Invalidates the session if a 401 error occurs and returns false to
|
||||
* prevent further error handling.
|
||||
|
||||
@@ -1078,3 +1078,13 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.change-state {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.dropdown-radio-btn {
|
||||
.hds-form-group__control-field {
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -34,36 +34,22 @@
|
||||
<dropdown.separator />
|
||||
|
||||
<dropdown.section @title={{t 'actions.toggle-color-theme'}}>
|
||||
<Rose::Form as |form|>
|
||||
<form.radioGroup
|
||||
@name='theme'
|
||||
@selectedValue={{or
|
||||
this.session.data.theme
|
||||
'system-default-theme'
|
||||
}}
|
||||
@changed={{this.toggleTheme}}
|
||||
as |radioGroup|
|
||||
>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label={{t 'themes.system'}}
|
||||
@value='system-default-theme'
|
||||
/>
|
||||
</dropdown.item>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label={{t 'themes.light'}}
|
||||
@value='light'
|
||||
/>
|
||||
</dropdown.item>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label={{t 'themes.dark'}}
|
||||
@value='dark'
|
||||
/>
|
||||
</dropdown.item>
|
||||
</form.radioGroup>
|
||||
</Rose::Form>
|
||||
<Hds::Form::Radio::Group
|
||||
@name='theme'
|
||||
class='dropdown-radio-btn'
|
||||
as |G|
|
||||
>
|
||||
{{#each this.themes as |theme|}}
|
||||
<G.RadioField
|
||||
@value={{theme.value}}
|
||||
checked={{eq this.session.data.theme theme.value}}
|
||||
{{on 'change' (fn this.toggleTheme theme.value)}}
|
||||
as |F|
|
||||
>
|
||||
<F.Label>{{t (concat 'themes.' theme.label)}}</F.Label>
|
||||
</G.RadioField>
|
||||
{{/each}}
|
||||
</Hds::Form::Radio::Group>
|
||||
</dropdown.section>
|
||||
|
||||
</utilities.dropdown>
|
||||
@@ -79,23 +65,23 @@
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.section @title={{t 'actions.toggle-feature-edition'}}>
|
||||
<Rose::Form as |form|>
|
||||
<form.radioGroup
|
||||
@name='edition'
|
||||
@selectedValue={{this.featureEdition.edition}}
|
||||
@changed={{this.toggleEdition}}
|
||||
as |radioGroup|
|
||||
>
|
||||
{{#each this.featureEdition.editions as |edition|}}
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label={{edition}}
|
||||
@value={{edition}}
|
||||
/>
|
||||
</dropdown.item>
|
||||
{{/each}}
|
||||
</form.radioGroup>
|
||||
</Rose::Form>
|
||||
<Hds::Form::Radio::Group
|
||||
@name='edition'
|
||||
class='dropdown-radio-btn'
|
||||
as |G|
|
||||
>
|
||||
{{#each this.featureEdition.editions as |edition|}}
|
||||
<G.RadioField
|
||||
@value={{edition}}
|
||||
checked={{eq this.featureEdition.edition edition}}
|
||||
{{on 'change' (fn this.toggleEdition edition)}}
|
||||
as |F|
|
||||
>
|
||||
<F.Label>{{edition}}</F.Label>
|
||||
</G.RadioField>
|
||||
{{/each}}
|
||||
</Hds::Form::Radio::Group>
|
||||
|
||||
</dropdown.section>
|
||||
<dropdown.separator />
|
||||
<dropdown.section @title={{t 'actions.toggle-licensed-features'}}>
|
||||
|
||||
@@ -25,6 +25,11 @@ import {
|
||||
|
||||
import { TYPE_AUTH_METHOD_OIDC } from 'api/models/auth-method';
|
||||
|
||||
const CHANGE_STATE_SELECTOR = '[data-test-change-state] button:first-child';
|
||||
const CHANGE_STATE_INPUT_CHECKED = '[data-test-change-state] input:checked';
|
||||
|
||||
const CHANGE_STATE_INPUT_SELECTOR = '[data-test-change-state]';
|
||||
|
||||
module('Acceptance | auth-methods | oidc', function (hooks) {
|
||||
setupApplicationTest(hooks);
|
||||
setupMirage(hooks);
|
||||
@@ -67,9 +72,9 @@ module('Acceptance | auth-methods | oidc', function (hooks) {
|
||||
|
||||
test('can view oidc state', async function (assert) {
|
||||
await visit(urls.authMethod);
|
||||
await click('.rose-layout-page-actions .rose-dropdown-trigger');
|
||||
await click(CHANGE_STATE_SELECTOR);
|
||||
assert.strictEqual(
|
||||
find('.rose-dropdown[open] input:checked').value,
|
||||
find(CHANGE_STATE_INPUT_CHECKED).value,
|
||||
instances.authMethod.attributes.state,
|
||||
);
|
||||
});
|
||||
@@ -77,29 +82,45 @@ module('Acceptance | auth-methods | oidc', function (hooks) {
|
||||
test('can update oidc state', async function (assert) {
|
||||
const updateValue = 'inactive';
|
||||
await visit(urls.authMethod);
|
||||
await click('.rose-layout-page-actions .rose-dropdown-trigger');
|
||||
await click(`.rose-dropdown[open] input[value="${updateValue}"]`);
|
||||
const authMethod = this.server.db.authMethods.find(instances.authMethod.id);
|
||||
await click(CHANGE_STATE_SELECTOR);
|
||||
await click(`${CHANGE_STATE_INPUT_SELECTOR} input[value="${updateValue}"]`);
|
||||
const authMethod = this.server.schema.authMethods.findBy({
|
||||
id: instances.authMethod.id,
|
||||
});
|
||||
|
||||
assert.strictEqual(authMethod.attributes.state, updateValue);
|
||||
});
|
||||
|
||||
test('can update oidc state to active-private', async function (assert) {
|
||||
const updateValue = 'active-private';
|
||||
await visit(urls.authMethod);
|
||||
await click('.rose-layout-page-actions .rose-dropdown-trigger');
|
||||
await click(`.rose-dropdown[open] input[value="${updateValue}"]`);
|
||||
const authMethod = this.server.db.authMethods.find(instances.authMethod.id);
|
||||
await click(CHANGE_STATE_SELECTOR);
|
||||
await click(`${CHANGE_STATE_INPUT_SELECTOR} input[value="${updateValue}"]`);
|
||||
const authMethod = this.server.schema.authMethods.findBy({
|
||||
id: instances.authMethod.id,
|
||||
});
|
||||
assert.strictEqual(
|
||||
find(CHANGE_STATE_INPUT_CHECKED).value,
|
||||
instances.authMethod.attributes.state,
|
||||
);
|
||||
assert.strictEqual(authMethod.attributes.state, updateValue);
|
||||
});
|
||||
|
||||
test('can update oidc state to active-public', async function (assert) {
|
||||
// Update default 'active-public' state to inactive
|
||||
instances.authMethod.attributes.state = 'inactive';
|
||||
const updateValue = 'active-public';
|
||||
await visit(urls.authMethod);
|
||||
await click('.rose-layout-page-actions .rose-dropdown-trigger');
|
||||
await click(`.rose-dropdown[open] input[value="${updateValue}"]`);
|
||||
const authMethod = this.server.db.authMethods.find(instances.authMethod.id);
|
||||
await click(CHANGE_STATE_SELECTOR);
|
||||
await click(`${CHANGE_STATE_INPUT_SELECTOR} input[value="${updateValue}"]`);
|
||||
const authMethod = this.server.schema.authMethods.findBy({
|
||||
id: instances.authMethod.id,
|
||||
});
|
||||
|
||||
assert.strictEqual(
|
||||
find(CHANGE_STATE_INPUT_CHECKED).value,
|
||||
instances.authMethod.attributes.state,
|
||||
);
|
||||
|
||||
assert.strictEqual(authMethod.attributes.state, updateValue);
|
||||
});
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@ module('Acceptance | workers | create', function (hooks) {
|
||||
const featuresService = this.owner.lookup('service:features');
|
||||
featuresService.enable('byow-pki-hcp-cluster-id');
|
||||
await visit(newWorkerURL);
|
||||
const labels = findAll('label.hds-form-label');
|
||||
const labels = findAll('.worker-create-section label.hds-form-label');
|
||||
assert.dom(labels[0]).hasText('Boundary Cluster ID (Optional)');
|
||||
assert.dom(labels[2]).doesNotIncludeText('Initial Upstreams');
|
||||
});
|
||||
@@ -61,7 +61,7 @@ module('Acceptance | workers | create', function (hooks) {
|
||||
test('initial upstreams input field is visible for `oss` binary', async function (assert) {
|
||||
const featuresService = this.owner.lookup('service:features');
|
||||
await visit(newWorkerURL);
|
||||
const labels = findAll('label.hds-form-label');
|
||||
const labels = findAll('.worker-create-section label.hds-form-label');
|
||||
assert.false(featuresService.isEnabled('byow-pki-hcp-cluster-id'));
|
||||
assert.dom(labels[0]).doesNotIncludeText('Boundary Cluster ID');
|
||||
assert.dom(labels[2]).hasText('Initial Upstreams (Optional)');
|
||||
|
||||
@@ -9345,13 +9345,6 @@ ember-qunit@^8.1.0:
|
||||
ember-cli-test-loader "^3.1.0"
|
||||
qunit-theme-ember "^1.0.0"
|
||||
|
||||
"ember-radio-button@github:yapplabs/ember-radio-button.git#b2ab65f":
|
||||
version "0.0.0"
|
||||
resolved "https://codeload.github.com/yapplabs/ember-radio-button/tar.gz/b2ab65f81cae3b0f087cc99b8c01172b754cb181"
|
||||
dependencies:
|
||||
ember-cli-babel "^7.26.3"
|
||||
ember-cli-htmlbars "^5.7.1"
|
||||
|
||||
ember-resolver@^10.0.0:
|
||||
version "10.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-10.1.1.tgz#1106a2386337b13a9ee509a9ad2a18b53a728ab3"
|
||||
|
||||
Reference in new issue
Block a user