From c0642f393ff895005a0c8bb4b6a03295866540a7 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 15 Oct 2021 10:25:09 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20icon=20support=20t?=
 =?UTF-8?q?o=20input=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/input/index.hbs      | 28 +++++++++++--------
 .../rose/form/input/index.stories.mdx         |  5 ++++
 .../styles/rose/components/form/_input.scss   | 12 ++++++++
 .../components/rose/form/input-test.js        |  5 ++++
 .../templates/scopes/scope/sessions/index.hbs |  1 -
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
index 9bf8003e3..e9f1c6ced 100644
--- a/addons/rose/addon/components/rose/form/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/index.hbs
@@ -34,16 +34,22 @@
       </Rose::Form::HelperText>
     {{/if}}
 
-    <Rose::Form::Input::Input
-      ...attributes
-      @id={{this.id}}
-      @name={{@name}}
-      @value={{@value}}
-      @type={{@type}}
-      @disabled={{@disabled}}
-      @error={{@error}}
-      @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
-
+    <div class="rose-input-icon-wrapper">
+       {{#if @icon}}
+          <Rose::Icon
+            @name={{@icon}}
+            @size="medium" />
+       {{/if}}
+      <Rose::Form::Input::Input
+        ...attributes
+        @id={{this.id}}
+        @name={{@name}}
+        @value={{@value}}
+        @type={{@type}}
+        @disabled={{@disabled}}
+        @error={{@error}}
+        @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
+    </div>
     {{yield (hash
       errors=(component 'rose/form/errors'
         id=(concat 'errors-' this.id)
@@ -51,4 +57,4 @@
     )}}
 
   </div>
-{{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx
index 041507976..c9decc5fd 100644
--- a/addons/rose/addon/components/rose/form/input/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx
@@ -18,6 +18,7 @@ Renders a simple form input.
   @helperText="Enter your email"
   @error={{false}}
   @disabled={{false}}
+  @icon='flight-icons/svg/search-16'
   readonly={{false}}
 />
 ```
@@ -70,6 +71,10 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
+      icon: select('icon', {
+        'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
+      },
+      ),
     }
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index bdfd5fff9..7a397d484 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -5,6 +5,18 @@
   margin-bottom: sizing.rems(m);
 }
 
+.rose-input-icon-wrapper {
+  position: relative;
+  .rose-icon.medium {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+  }
+  .rose-form-input-field {
+    padding-left: 30px;
+  }
+}
+
 .rose-form-input-field {
   @include type.type(m);
   display: inline-block;
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 2f6c6cc56..d053698ab 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -58,6 +58,11 @@ module('Integration | Component | rose/form/input', function (hooks) {
     assert.ok(await find('[disabled]'));
   });
 
+  test('it supports an icon using @icon', async function (assert) {
+    await render(hbs`<Rose::Form::Input @icon="flight-icons/svg/search-16" />`);
+    assert.ok(find('.rose-icon'));
+  });
+
   test('it supports readonly attribute', async function (assert) {
     await render(hbs`<Rose::Form::Input readonly={{true}} />`);
     assert.ok(await find('[readonly]'));
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 297c68a70..2c1e54891 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -15,7 +15,6 @@
   <page.body>
 
     {{#if @model}}
-
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>