From 80776a844d5ef5f06f8af41dc2572335df7dd618 Mon Sep 17 00:00:00 2001
From: Ming-Hay <157658916+minghay@users.noreply.github.com>
Date: Tue, 18 Jun 2024 18:17:10 -0700
Subject: [PATCH] fix: Default parameter icon (#1069)

---
 .../pipeline/parameters/styles.scss           |  4 ++
 .../pipeline/parameters/template.hbs          |  7 +++
 app/components/pipeline/styles.scss           |  2 +
 .../pipeline/parameters/component-test.js     | 54 +++++++++++++++++--
 4 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/app/components/pipeline/parameters/styles.scss b/app/components/pipeline/parameters/styles.scss
index d6941f70a..53938ce02 100644
--- a/app/components/pipeline/parameters/styles.scss
+++ b/app/components/pipeline/parameters/styles.scss
@@ -43,6 +43,10 @@
                 margin-top: auto;
                 margin-bottom: auto;
                 padding-left: 0.25rem;
+
+                &.fa-exclamation-triangle {
+                  color: colors.$sd-warning;
+                }
               }
             }
 
diff --git a/app/components/pipeline/parameters/template.hbs b/app/components/pipeline/parameters/template.hbs
index 27012ba29..3f98d9214 100644
--- a/app/components/pipeline/parameters/template.hbs
+++ b/app/components/pipeline/parameters/template.hbs
@@ -17,6 +17,13 @@
                 {{#if parameter.description}}
                   <FaIcon @icon="question-circle" @title={{parameter.description}}></FaIcon>
                 {{/if}}
+                {{#if (and
+                        (not (is-array parameter.defaultValues))
+                        (not (eq parameter.value parameter.defaultValues))
+                      )
+                }}
+                  <FaIcon @icon="exclamation-triangle" @title="Default value: {{parameter.defaultValues}}"></FaIcon>
+                {{/if}}
               </label>
               {{#if (is-array parameter.defaultValues)}}
                 <div class="dropdown-selection-container">
diff --git a/app/components/pipeline/styles.scss b/app/components/pipeline/styles.scss
index 7b73b2bbc..85af406cd 100644
--- a/app/components/pipeline/styles.scss
+++ b/app/components/pipeline/styles.scss
@@ -1,7 +1,9 @@
 @use 'nav/styles' as nav;
 @use 'modal/toggle-job/styles' as toggle-job;
+@use 'parameters/styles' as parameters;
 
 @mixin styles {
   @include nav.styles;
   @include toggle-job.styles;
+  @include parameters.styles;
 }
diff --git a/tests/integration/components/pipeline/parameters/component-test.js b/tests/integration/components/pipeline/parameters/component-test.js
index 54af81114..f3bd077cc 100644
--- a/tests/integration/components/pipeline/parameters/component-test.js
+++ b/tests/integration/components/pipeline/parameters/component-test.js
@@ -46,7 +46,7 @@ module('Integration | Component | pipeline/parameters', function (hooks) {
         meta: {
           parameters: {
             bar: { value: 'barzy' },
-            foo: { value: 'foozy' },
+            foo: { value: 'foo' },
             job1: { p1: { value: 'abc' }, p2: { value: 'xyz' } }
           }
         }
@@ -54,7 +54,7 @@ module('Integration | Component | pipeline/parameters', function (hooks) {
       pipeline: {
         parameters: {
           bar: ['barbar', 'bazbaz'],
-          foo: { value: 'foofoo', description: 'awesome' }
+          foo: { value: 'foo', description: 'awesome' }
         }
       },
       jobs: [
@@ -90,7 +90,7 @@ module('Integration | Component | pipeline/parameters', function (hooks) {
       .hasText('barzy');
     assert.dom(parameters[1].querySelector('label')).hasText('foo awesome');
     assert.dom(parameters[1].querySelector('label svg')).exists({ count: 1 });
-    assert.dom(parameters[1].querySelector('input')).hasValue('foozy');
+    assert.dom(parameters[1].querySelector('input')).hasValue('foo');
   });
 
   test('it renders parameters job group expanded', async function (assert) {
@@ -278,4 +278,52 @@ module('Integration | Component | pipeline/parameters', function (hooks) {
       })
     );
   });
+
+  test('it adds icon when input is not equal to default value', async function (assert) {
+    this.setProperties({
+      event: {
+        meta: {
+          parameters: {
+            foo: { value: 'foobar' }
+          }
+        }
+      },
+      pipeline: {
+        parameters: {
+          foo: { value: 'foobar' }
+        }
+      },
+      jobs: [],
+      onUpdateParameters: () => {}
+    });
+
+    await render(
+      hbs`<Pipeline::Parameters
+        @action="start"
+        @event={{this.event}}
+        @pipeline={{this.pipeline}}
+        @jobs={{this.jobs}}
+        @onUpdateParameters={{this.onUpdateParameters}}
+      />`
+    );
+
+    assert
+      .dom(
+        '.parameter-list.expanded .parameter label svg.fa-exclamation-triangle'
+      )
+      .doesNotExist();
+
+    await fillIn('.parameter-list.expanded input', 'foofoofoo');
+
+    assert
+      .dom(
+        '.parameter-list.expanded .parameter label svg.fa-exclamation-triangle'
+      )
+      .exists({ count: 1 });
+    assert
+      .dom(
+        '.parameter-list.expanded .parameter label svg.fa-exclamation-triangle title'
+      )
+      .hasText('Default value: foobar');
+  });
 });