feat: 🎸 Custom information field (#1493)

* 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 `<InfoField>` 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 <randall@randallmorey.com>

ui/admin/app/components/form/credential-store/static/index.hbs

@@ -45,10 +45,10 @@
   </form.textarea>
 
   {{#if (feature-flag 'static-credentials')}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        {{#if @model.isNew}}
+    {{#if @model.isNew}}
+      <form.fieldset>
+        <:title>{{t 'form.type.label'}}</:title>
+        <:body>
           <form.radioGroup
             @name='types'
             @selectedValue={{@model.type}}
@@ -68,28 +68,22 @@
               @layout='wide'
             />
           </form.radioGroup>
-        {{else}}
-          <form.radioGroup
-            @name='types'
-            @selectedValue={{@model.type}}
-            as |radioGroup|
-          >
-            <radioGroup.card
-              @label={{t
-                (concat 'resources.credential-store.types.' @model.type)
-              }}
-              @helperText={{t
-                (concat 'resources.credential-store.help.' @model.type)
-              }}
-              @value={{@model.type}}
-              @layout='wide'
-              readonly={{true}}
-              @disabled={{true}}
-            />
-          </form.radioGroup>
-        {{/if}}
-      </:body>
-    </form.fieldset>
+        </:body>
+      </form.fieldset>
+    {{else}}
+      <InfoField
+        @value={{t (concat 'resources.credential-store.types.' @model.type)}}
+        disabled={{form.disabled}}
+        as |F|
+      >
+        <F.Label>{{t 'form.type.label'}}</F.Label>
+        <F.HelperText>{{t
+            (concat 'resources.credential-store.help.' @model.type)
+          }}
+        </F.HelperText>
+      </InfoField>
+    {{/if}}
+
   {{/if}}
 
   {{#if (can 'save model' @model)}}

ui/admin/app/components/form/credential/ssh_private_key/index.hbs

@@ -69,19 +69,14 @@
       </:body>
     </form.fieldset>
   {{else}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:description>
-        <Rose::Form::Label>
-          {{t (concat 'resources.credential.types.' @model.type)}}
-        </Rose::Form::Label>
-      </:description>
-      <:body>
-        <Rose::Form::HelperText>{{t
-            (concat 'resources.credential.help.' @model.type)
-          }}</Rose::Form::HelperText>
-      </:body>
-    </form.fieldset>
+    <InfoField
+      @value={{t (concat 'resources.credential.help.' @model.type)}}
+      as |F|
+    >
+      <F.Label>{{t 'form.type.label'}}</F.Label>
+      <F.HelperText>{{t (concat 'resources.credential.types.' @model.type)}}
+      </F.HelperText>
+    </InfoField>
   {{/if}}
 
   <form.input

ui/admin/app/components/form/credential/username_password/index.hbs

@@ -69,19 +69,14 @@
       </:body>
     </form.fieldset>
   {{else}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:description>
-        <Rose::Form::Label>
-          {{t (concat 'resources.credential.types.' @model.type)}}
-        </Rose::Form::Label>
-      </:description>
-      <:body>
-        <Rose::Form::HelperText>{{t
-            (concat 'resources.credential.help.' @model.type)
-          }}</Rose::Form::HelperText>
-      </:body>
-    </form.fieldset>
+    <InfoField
+      @value={{t (concat 'resources.credential.help.' @model.type)}}
+      as |F|
+    >
+      <F.Label>{{t 'form.type.label'}}</F.Label>
+      <F.HelperText>{{t (concat 'resources.credential.types.' @model.type)}}
+      </F.HelperText>
+    </InfoField>
   {{/if}}
 
   <form.input

ui/admin/app/components/info-field/index.hbs

@@ -0,0 +1,13 @@
+<div class='info-field{{if @icon " has-icon"}}'>
+  {{#if @icon}}
+    <FlightIcon @name={{@icon}} @size='24' />
+  {{/if}}
+  <Hds::Form::TextInput::Field
+    @value={{@value}}
+    readonly={{true}}
+    ...attributes
+    as |F|
+  >
+    {{yield F}}
+  </Hds::Form::TextInput::Field>
+</div>

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);
+    }
+  }
+}

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`
+        <InfoField @value="Description" as |F|>
+          <F.Label>Type</F.Label>
+          <F.HelperText>JSON</F.HelperText>
+        </InfoField>
+      `
+    );
+    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`
+        <InfoField @value="Description" @icon='apple' as |F|>
+          <F.Label>Type</F.Label>
+          <F.HelperText>JSON</F.HelperText>
+        </InfoField>
+      `
+    );
+    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();
+  });
+});