From 0015745d416ed339ee10ed1e00ed89784583d61c Mon Sep 17 00:00:00 2001 From: Devon Anderson Date: Wed, 30 Nov 2022 14:38:12 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Custom=20information=20f?= =?UTF-8?q?ield=20(#1493)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 Custom information field Create custom information component for views that need read-only information listed. ✅ Closes: ICU-6957 ICU-6981 * refactor: 💡 fix setup for info-field component Added conditional icon as a yield to `Hds::Form::TextInput::Field` to avoid over complicating the css for `info-field` component. ✅ Closes: ICU-6957 * refactor `username_password` index.hbs `@value` on `` was pointing to wrong variable. * fix: 🐛 fixed lint Lint errors * fix: 🐛 linting errors fixed linting errors fixed * chore: 🤖 tweak info field styles and layout for icons * refactor: 💡 switched `grid-area` in css to match design Switched `grid-area`'s to match Design * refactor: 💡 removed grid attribute from field wrapper Removed display grid from `vertical` wrapper Co-authored-by: Randall Morey --- .../form/credential-store/static/index.hbs | 46 ++++++++----------- .../form/credential/ssh_private_key/index.hbs | 21 ++++----- .../credential/username_password/index.hbs | 21 ++++----- ui/admin/app/components/info-field/index.hbs | 13 ++++++ ui/admin/app/styles/app.scss | 44 ++++++++++++++++++ .../integration/components/info-field-test.js | 45 ++++++++++++++++++ 6 files changed, 138 insertions(+), 52 deletions(-) create mode 100644 ui/admin/app/components/info-field/index.hbs create mode 100644 ui/admin/tests/integration/components/info-field-test.js diff --git a/ui/admin/app/components/form/credential-store/static/index.hbs b/ui/admin/app/components/form/credential-store/static/index.hbs index fa567fcba..d21406ec7 100644 --- a/ui/admin/app/components/form/credential-store/static/index.hbs +++ b/ui/admin/app/components/form/credential-store/static/index.hbs @@ -45,10 +45,10 @@ {{#if (feature-flag 'static-credentials')}} - - <:title>{{t 'form.type.label'}} - <:body> - {{#if @model.isNew}} + {{#if @model.isNew}} + + <:title>{{t 'form.type.label'}} + <:body> - {{else}} - - - - {{/if}} - - + + + {{else}} + + {{t 'form.type.label'}} + {{t + (concat 'resources.credential-store.help.' @model.type) + }} + + + {{/if}} + {{/if}} {{#if (can 'save model' @model)}} diff --git a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs index 78521aa81..3e06da207 100644 --- a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs +++ b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs @@ -69,19 +69,14 @@ {{else}} - - <:title>{{t 'form.type.label'}} - <:description> - - {{t (concat 'resources.credential.types.' @model.type)}} - - - <:body> - {{t - (concat 'resources.credential.help.' @model.type) - }} - - + + {{t 'form.type.label'}} + {{t (concat 'resources.credential.types.' @model.type)}} + + {{/if}} {{else}} - - <:title>{{t 'form.type.label'}} - <:description> - - {{t (concat 'resources.credential.types.' @model.type)}} - - - <:body> - {{t - (concat 'resources.credential.help.' @model.type) - }} - - + + {{t 'form.type.label'}} + {{t (concat 'resources.credential.types.' @model.type)}} + + {{/if}} + {{#if @icon}} + + {{/if}} + + {{yield F}} + + \ No newline at end of file diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 7410faf99..a99fbd19c 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -1,5 +1,6 @@ @use 'rose/variables/sizing'; @use 'rose/variables/media'; +@use 'rose/utilities/type'; @import 'rose'; @import 'notify'; @@ -9,6 +10,7 @@ justify-content: center; } } + .rose-layout-centered { > .rose-layout-page { width: sizing.rems(l) * 18; @@ -452,3 +454,45 @@ } } } + +.info-field { + .hds-form-field--layout-vertical { + grid-template-areas: 'label' 'helper-text' 'text-input'; + + .hds-form-label { + font-size: sizing.rems(m); + grid-area: label; + line-height: sizing.rems(m) + sizing.rems(xxs); + } + + .hds-form-helper-text { + grid-area: helper-text; + font-size: sizing.rems(m); + color: var(--token-form-label-color); + + } + + .hds-form-text-input { + background-color: transparent; + border: 0; + grid-area: text-input; + margin-top: sizing.rems(xs); + line-height: sizing.rems(m) + sizing.rems(xxs); + padding: 0; + } + + + } + + &.has-icon { + .flight-icon { + position: absolute; + transform: translatey(sizing.rems(xl) - sizing.rems(s)); + } + + .hds-form-helper-text, + .hds-form-text-input { + margin-left: sizing.rems(l) + sizing.rems(xs); + } + } +} diff --git a/ui/admin/tests/integration/components/info-field-test.js b/ui/admin/tests/integration/components/info-field-test.js new file mode 100644 index 000000000..691c9d04a --- /dev/null +++ b/ui/admin/tests/integration/components/info-field-test.js @@ -0,0 +1,45 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | info-field', function (hooks) { + setupRenderingTest(hooks); + + test('it renders without icon', async function (assert) { + assert.expect(4); + + await render( + hbs` + + Type + JSON + + ` + ); + assert.dom('.info-field').isVisible(); + assert.dom('.info-field .hds-form-label').hasText('Type'); + assert.dom('.info-field .hds-form-helper-text').hasText('JSON'); + assert.dom('.info-field .hds-form-text-input').isVisible(); + }); + + test('it renders with icon', async function (assert) { + assert.expect(5); + + await render( + hbs` + + Type + JSON + + ` + ); + assert.dom('.info-field').isVisible(); + assert.dom('.info-field .hds-form-label').hasText('Type'); + assert + .dom('.info-field .hds-form-helper-text:last-of-type') + .hasText('JSON'); + assert.dom('[data-test-icon="apple"]').isVisible(); + assert.dom('.info-field .hds-form-text-input').isVisible(); + }); +});