From 92db4d4947b2ac8c3f3a4fcaa67c9ec98b60f12f Mon Sep 17 00:00:00 2001 From: Dharini Jeeva Date: Thu, 15 Dec 2022 09:11:01 -0800 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20rose=20radioca?= =?UTF-8?q?rd=20and=20styles=20(#1521)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit chore: 🤖 remove rose radio card and styles --- .../components/rose/form/radio/card/index.js | 25 -- .../rose/form/radio/card/index.stories.mdx | 86 +------ .../rose/form/radio/group/index.hbs | 8 - .../rose/form/radio/group/index.stories.mdx | 84 +----- .../styles/rose/components/form/_index.scss | 1 - .../rose/components/form/_radio-card.scss | 240 ------------------ .../components/rose/form/radio/card-test.js | 53 ---- ui/admin/app/abilities/credential.js | 3 +- .../form/worker/create-worker-led/index.js | 4 +- .../brokered-credential-sources-test.js | 14 +- .../tests/unit/abilities/credential-test.js | 72 ++---- 11 files changed, 46 insertions(+), 544 deletions(-) delete mode 100644 addons/rose/addon/components/rose/form/radio/card/index.js delete mode 100644 addons/rose/app/styles/rose/components/form/_radio-card.scss delete mode 100644 addons/rose/tests/integration/components/rose/form/radio/card-test.js diff --git a/addons/rose/addon/components/rose/form/radio/card/index.js b/addons/rose/addon/components/rose/form/radio/card/index.js deleted file mode 100644 index f4aaab3bb..000000000 --- a/addons/rose/addon/components/rose/form/radio/card/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import RoseFormRadioRadioComponent from '../radio'; -import { deprecate } from '@ember/debug'; - -export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent { - // =attributes - layout = this.args.layout; - className = `rose-form-radio-card ${this.layout}`; - - constructor() { - super(...arguments); - deprecate( - `Rose Form/Radio/Card component is deprecated, use HDS Form/RadioCard instead. For more info, refer to `, - false, - { - id: 'rose.form.radio.card', - until: '4.8.0', - for: 'rose', - since: { - enabled: '3.28.8', - }, - url: 'https://boundary-ui-storybook.vercel.app/?path=/docs/rose-form-radio-radio-card--card', - } - ); - } -} diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx index 5cd8de8ab..9d284938c 100644 --- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx @@ -1,15 +1,12 @@ import { Meta, Story, Preview } from '@storybook/addon-docs'; import { hbs } from 'ember-cli-htmlbars'; - + -# HDS::Form::RadioCard (Recommended) +# RadioCard (removed) -> **_NOTE:_** Replaces the deprecated Rose/Form/Radio/Card. - -Refer to the [HDS Form::RadioCard -documentation](https://design-system-components-hashicorp.vercel.app/components/form/radio-card) -for a complete overview +Rose/Form/Select has been removed in favor of +[HDS::Form::RadioCard](https://design-system-components-hashicorp.vercel.app/components/form/radio-card). ```handlebars @@ -44,78 +41,3 @@ export const HDSTemplate = (args) => ({ {HDSTemplate.bind({})} - -# Rose/Form/Radio/Card (Deprecated) - -Rose/Form/Radio/Card has been deprecated in favor of [HDS::Form::RadioCard](https://design-system-components-hashicorp.vercel.app/components/form/radio-card) - -### usage: - -# Form Radiofield in a wide format - -Renders a form radiofield in a Wide format. - -```handlebars - -``` - -Renders a form radiofield in a tile format. - -```handlebars - -``` - -export const Template = (args) => ({ - template: hbs` - `, - context: args, -}); - - - - {Template.bind({})} - - diff --git a/addons/rose/addon/components/rose/form/radio/group/index.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs index 8e090407d..e883eb431 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.hbs +++ b/addons/rose/addon/components/rose/form/radio/group/index.hbs @@ -8,13 +8,5 @@ changed=@changed inline=@inline ) - card=(component - 'rose/form/radio/card' - name=@name - selectedValue=@selectedValue - disabled=@disabled - changed=@changed - layout=@layout - ) ) }} \ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx index a698fedda..dd0d5b106 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx @@ -75,9 +75,9 @@ export const Template = (args) => ({ -# HDS::Form::RadioCard::Group (Recommended) +# HDS::Form::RadioCard::Group -> **_NOTE:_** Replaces the deprecated Rose/Form/Radio/Group/Card. +> **_NOTE:_** Replaces the removed Rose/Form/Radio/Group/Card. ```handlebars ({ {HDSTemplate.bind({})} - -# Rose::Form::Radio::Group::Card (Deprecated) - -```handlebars - - - - - -``` - -export const RoseTemplate = (args) => ({ - template: hbs` - - - - `, - context: args, -}); - - - - {RoseTemplate.bind({})} - - diff --git a/addons/rose/app/styles/rose/components/form/_index.scss b/addons/rose/app/styles/rose/components/form/_index.scss index b06e535f6..73137ac8d 100644 --- a/addons/rose/app/styles/rose/components/form/_index.scss +++ b/addons/rose/app/styles/rose/components/form/_index.scss @@ -6,4 +6,3 @@ @import 'select'; @import 'radio'; @import 'fieldset'; -@import 'radio-card'; diff --git a/addons/rose/app/styles/rose/components/form/_radio-card.scss b/addons/rose/app/styles/rose/components/form/_radio-card.scss deleted file mode 100644 index 0c61fb51d..000000000 --- a/addons/rose/app/styles/rose/components/form/_radio-card.scss +++ /dev/null @@ -1,240 +0,0 @@ -@use '../../variables/sizing'; -@use '../../utilities/type'; -@use '../../variables/typography'; - -$size-xxl: sizing.rems(xxl); // 48 -$size-xl: sizing.rems(xl); // 36 -$size-l: sizing.rems(l); // 24 -$size-m: sizing.rems(m); // 16 -$size-s: sizing.rems(s); // 12 -$size-xs: sizing.rems(xs); // 8 -$size-xxs: sizing.rems(xxs); // 4 -$size-xxxs: sizing.rems(xxxs); // 2 -$size-xxxxs: sizing.rems(xxxxs); // 1 - -$radio-svg: ( - 'default': - "", - 'hover': - "", - 'focus': - "", - 'checked': - "", - 'disabled': - "", - 'disabled-checked': - "", - 'error': - "", - 'error-checked': - "", -); - -.rose-form-radio-card { - $card-wide-width: $size-m * 10; - $card-tile-width: $size-m * 7.25; - $border-width: $size-xxxs * 2; - - &.wide { - width: ($size-m) * 20; - } - - &.tile { - width: ($size-m) * 15; - - .rose-icon { - --size: #{$size-xl}; - - padding: $size-xxxs; - } - - .rose-form-radio-label { - display: flex; - flex-direction: column; - align-items: center; - height: $size-m * 9; - - &::after { - left: $card-tile-width - $border-width; - } - } - } - - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - margin: $size-m $size-xs $size-m 0; - - .radio-card-overlay { - position: absolute; - height: $size-l + $size-xxs; - background-color: var(--ui-gray-subtler-5); - width: 100%; - bottom: 0; - right: 0; - border-bottom-left-radius: $size-xxxs; - border-bottom-right-radius: $size-xxxs; - } - - .rose-form-radio-label { - @include type.type(s, bold); - - width: ($size-m) * 23; - height: 100%; - display: block; - position: relative; - text-align: left; - border: $size-xxxxs solid var(--ui-gray-subtler-2); - box-shadow: 0 $size-xxs $size-xxs - rgba(var(--stark-components), var(--opacity-2)); - border-radius: $size-xxs; - padding: $size-s $size-m ($size-xl + $size-m); - box-sizing: border-box; - - .rose-form-helper-text { - @include type.type(xs, normal); - - padding-top: $size-xs; - } - - &::after { - position: absolute; - bottom: $size-xxs + $size-xxxxs; - right: $card-wide-width - $border-width; - display: block; - width: $size-m; - height: $size-m; - 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; - z-index: 1; - bottom: $size-xs; - opacity: 0; - - &:not(:disabled) { - &:focus { - ~ .rose-form-radio-label { - &::after { - background-image: url($data-svg-prefix + map-get( - $radio-svg, - 'focus' - )); - } - } - } - - &:hover { - ~ .rose-form-radio-label { - border: $size-xxxxs solid var(--ui-gray); - } - } - - &:checked { - ~ .rose-form-radio-label { - &::after { - background-image: url($data-svg-prefix + map-get( - $radio-svg, - 'checked' - )); - } - - .radio-card-overlay { - background-color: var(--action-subtler-1h); - - .ember-application.rose-theme-light & { - background-color: var(--action-subtler-1h); - } - @media (prefers-color-scheme: dark) { - background-color: var(--action-subtler-1); - } - - .ember-application.rose-theme-dark & { - background-color: var(--action-subtler-1); - } - } - - border: $size-xxxxs solid var(--info-subtler-1); - } - } - } - - &:disabled { - ~ .rose-form-radio-label { - border: $size-xxxxs solid var(--ui-border-subtler-1); - background-color: var(--ui-gray-subtler-6); - color: var(--ui-gray-starker-1); - - &::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 { - .rose-form-radio-field { - &:not(:disabled, :focus) { - ~ .rose-form-radio-label { - color: var(--ui-gray); - border: $size-xxxxs solid var(--failure); - - .radio-card-overlay { - background-color: var(--failure-subtler-2); - } - - .rose-form-helper-text.error { - color: var(--ui-gray); - } - - &::after { - background-image: url($data-svg-prefix + map-get( - $radio-svg, - 'error' - )); - } - } - - &:checked { - ~ .rose-form-radio-label { - color: var(--ui-gray); - border: $size-xxxxs solid var(--failure); - - .radio-card-overlay { - background-color: var(--failure-subtler-2); - } - - &::after { - background-image: url($data-svg-prefix + map-get( - $radio-svg, - 'error-checked' - )); - } - } - } - } - } - } -} diff --git a/addons/rose/tests/integration/components/rose/form/radio/card-test.js b/addons/rose/tests/integration/components/rose/form/radio/card-test.js deleted file mode 100644 index 5bc55dd0e..000000000 --- a/addons/rose/tests/integration/components/rose/form/radio/card-test.js +++ /dev/null @@ -1,53 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | rose/form/radio/card', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(await find('input')); - assert.strictEqual(await find('input').type, 'radio'); - }); - - test('it renders in a tile format when tile layout is applied', async function (assert) { - await render(hbs``); - assert.ok(await find('.tile')); - }); - - test('it supports an icon', async function (assert) { - await render( - hbs`` - ); - assert.ok(find('svg')); - }); - - test('it is checked when @value and @selectedValue values match', async function (assert) { - await render( - hbs`` - ); - assert.true(await find('input').checked); - }); - - test('it is not disabled by default', async function (assert) { - await render(hbs``); - assert.false(await find('input').disabled); - }); - - test('it is not in error state by default', async function (assert) { - await render(hbs``); - assert.notOk(await find('.error')); - }); - - test('it is disabled when @disabled={{true}}', async function (assert) { - await render(hbs``); - assert.true(await find('input').disabled); - }); - - test('it is in error state when @error={{true}}', async function (assert) { - await render(hbs``); - assert.ok(await find('.error')); - }); -}); diff --git a/ui/admin/app/abilities/credential.js b/ui/admin/app/abilities/credential.js index 0faae0a97..70bd961cd 100644 --- a/ui/admin/app/abilities/credential.js +++ b/ui/admin/app/abilities/credential.js @@ -6,7 +6,8 @@ export default class OverrideCredentialAbility extends CredentialAbility { @service features; get canRead() { - return (this.features.isEnabled('json-credentials') || this.model.type !== 'json') + return this.features.isEnabled('json-credentials') || + this.model.type !== 'json' ? super.canRead : false; } diff --git a/ui/admin/app/components/form/worker/create-worker-led/index.js b/ui/admin/app/components/form/worker/create-worker-led/index.js index 3b7bfdc27..3bc1a37bf 100644 --- a/ui/admin/app/components/form/worker/create-worker-led/index.js +++ b/ui/admin/app/components/form/worker/create-worker-led/index.js @@ -112,7 +112,9 @@ ${listenerText} return `wget -q https://releases.hashicorp.com/boundary-worker/0.11.2+hcp/boundary-worker_0.11.2+hcp_linux_amd64.zip ;\\ sudo apt-get update && sudo apt-get install unzip ;\\ unzip *.zip ;\\ -./boundary-worker server -config="${this.configFilePath || ''}/pki-worker.hcl"`; +./boundary-worker server -config="${ + this.configFilePath || '' + }/pki-worker.hcl"`; } return `curl -fsSL https://apt.releases.hashicorp.com/gpg | sudo apt-key add - ;\\ sudo apt-add-repository "deb [arch=amd64] https://apt.releases.hashicorp.com $(lsb_release -cs) main" ;\\ diff --git a/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js b/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js index 9f940eb04..8bd4eb77d 100644 --- a/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js +++ b/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js @@ -151,7 +151,9 @@ module('Acceptance | targets | brokered credential sources', function (hooks) { }); await visit(urls.brokeredCredentialSources); - assert.dom('.rose-table-row:nth-child(3)').includesText(jsonCredential.name); + assert + .dom('.rose-table-row:nth-child(3)') + .includesText(jsonCredential.name); assert.dom(`[href="${urls.jsonCredential}"]`).doesNotExist(); }); @@ -324,7 +326,10 @@ module('Acceptance | targets | brokered credential sources', function (hooks) { await click('tbody tr .rose-dropdown-button-danger'); assert.strictEqual(findAll('tbody tr').length, credentialLibraryCount - 1); await visit(urls.addBrokeredCredentialSources); - assert.strictEqual(findAll('tbody tr').length, availableCredentialsCount + 1); + assert.strictEqual( + findAll('tbody tr').length, + availableCredentialsCount + 1 + ); }); test('can remove a username & password type credential', async function (assert) { @@ -339,7 +344,10 @@ module('Acceptance | targets | brokered credential sources', function (hooks) { await click('tbody tr .rose-dropdown-button-danger'); assert.strictEqual(findAll('tbody tr').length, credentialCount - 1); await visit(urls.addBrokeredCredentialSources); - assert.strictEqual(findAll('tbody tr').length, availableCredentialsCount + 1); + assert.strictEqual( + findAll('tbody tr').length, + availableCredentialsCount + 1 + ); }); test('cannot remove credential libraries without proper authorization', async function (assert) { diff --git a/ui/admin/tests/unit/abilities/credential-test.js b/ui/admin/tests/unit/abilities/credential-test.js index 4e76ace86..4a0e3ef78 100644 --- a/ui/admin/tests/unit/abilities/credential-test.js +++ b/ui/admin/tests/unit/abilities/credential-test.js @@ -9,19 +9,13 @@ module('Unit | Abilities | credential', function (hooks) { const service = this.owner.lookup('service:can'); const credential = { authorized_actions: ['read'], - type: 'json' + type: 'json', }; - assert.ok( - service.can('read credential', credential) - ); - credential.type = 'username_password' - assert.ok( - service.can('read credential', credential) - ); - credential.type = 'ssh_private_key' - assert.ok( - service.can('read credential', credential) - ); + assert.ok(service.can('read credential', credential)); + credential.type = 'username_password'; + assert.ok(service.can('read credential', credential)); + credential.type = 'ssh_private_key'; + assert.ok(service.can('read credential', credential)); }); test('cannot read without proper authorized actions', function (assert) { @@ -29,19 +23,13 @@ module('Unit | Abilities | credential', function (hooks) { const service = this.owner.lookup('service:can'); const credential = { authorized_actions: [], - type: 'json' + type: 'json', }; - assert.notOk( - service.can('read credential', credential) - ); - credential.type = 'username_password' - assert.notOk( - service.can('read credential', credential) - ); - credential.type = 'ssh_private_key' - assert.notOk( - service.can('read credential', credential) - ); + assert.notOk(service.can('read credential', credential)); + credential.type = 'username_password'; + assert.notOk(service.can('read credential', credential)); + credential.type = 'ssh_private_key'; + assert.notOk(service.can('read credential', credential)); }); test('cannot read without proper authorized actions and json-credentials disabled', function (assert) { @@ -51,19 +39,13 @@ module('Unit | Abilities | credential', function (hooks) { featuresService.disable('json-credentials'); const credential = { authorized_actions: [], - type: 'json' + type: 'json', }; - assert.notOk( - service.can('read credential', credential) - ); - credential.type = 'username_password' - assert.notOk( - service.can('read credential', credential) - ); - credential.type = 'ssh_private_key' - assert.notOk( - service.can('read credential', credential) - ); + assert.notOk(service.can('read credential', credential)); + credential.type = 'username_password'; + assert.notOk(service.can('read credential', credential)); + credential.type = 'ssh_private_key'; + assert.notOk(service.can('read credential', credential)); }); test('cannot read when json-credentials is disabled', function (assert) { @@ -73,18 +55,12 @@ module('Unit | Abilities | credential', function (hooks) { featuresService.disable('json-credentials'); const credential = { authorized_actions: ['read'], - type: 'json' + type: 'json', }; - assert.notOk( - service.can('read credential', credential) - ); - credential.type = 'username_password' - assert.ok( - service.can('read credential', credential) - ); - credential.type = 'ssh_private_key' - assert.ok( - service.can('read credential', credential) - ); + assert.notOk(service.can('read credential', credential)); + credential.type = 'username_password'; + assert.ok(service.can('read credential', credential)); + credential.type = 'ssh_private_key'; + assert.ok(service.can('read credential', credential)); }); });