fix the upload profile image button (#614)

app/controllers/profile.js

@@ -9,6 +9,15 @@ const BASE_URL = ENV.BASE_API_URL;
 export default class ProfileController extends Controller {
   @service toast;
   @service router;
+  get isDev() {
+    if (
+      this.router.currentRoute &&
+      this.router.currentRoute.queryParams.dev === 'true'
+    ) {
+      return this.router.currentRoute.queryParams.dev;
+    }
+    return false;
+  }
   get imageUploadUrl() {
     return `${BASE_URL}/users/picture`;
   }

app/styles/profile.css

@@ -40,7 +40,7 @@
 }
 
 .profile-page-error {
-  text-align: center; 
+  text-align: center;
   color: red;
 }
 
@@ -91,6 +91,7 @@
   aspect-ratio: 1;
   margin: auto;
   text-align: center;
+  position: relative;
 }
 
 .profile-form .user__pic {
@@ -101,6 +102,18 @@
 
 .edit-btn {
   padding: 0;
+  margin-top: 0.5rem;
+  color: var(--profile-edit-btn-clr);
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.profile-edit-button {
+  padding: 0.5rem;
+  border-radius: 100%;
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
   font-size: 1rem;
   margin-top: 0.5rem;
   color: var(--profile-edit-btn-clr);

app/templates/profile.hbs

@@ -9,16 +9,23 @@
         <img
           class='user__pic'
           src={{'dummyProfilePicture.png'}}
-          alt='user profile '
+          alt='user profile'
         />
       {{/if}}
-      <Button
-        @onClick={{this.handleShowEditProfilePictureModal}}
-        @class='edit-btn btn'
-        @data-test-btn='edit'
-      >
-        Update Picture
-      </Button>
+
+      {{#if this.isDev}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='profile-edit-button '
+         @data-test-btn='edit'>
+          <FaIcon @icon="edit" />
+        </Button>
+      {{else}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='edit-btn btn'
+         @data-test-btn='edit'>
+          Update Picture
+        </Button>
+        {{/if}}
     </div>
     <div class='profile-form-grid'>
       {{#if (get @model 'isDeveloper')}}

tests/integration/components/profile-field-test.js

@@ -13,8 +13,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @label={{this.label}} 
+      <ProfileField
+        @label={{this.label}}
         @icon_url={{this.icon_url}}
       />
     `);
@@ -35,8 +35,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @showError={{this.showError}} 
+      <ProfileField
+        @showError={{this.showError}}
         @errorMessage={{this.errorMessage}}
       />
     `);
@@ -53,8 +53,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @label={{this.label}} 
+      <ProfileField
+        @label={{this.label}}
         @icon_url={{this.icon_url}}
         @isDeveloper={{this.isDeveloper}}
       />
@@ -80,8 +80,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @label={{this.label}} 
+      <ProfileField
+        @label={{this.label}}
         @icon_url={{this.icon_url}}
         @isDeveloper={{this.isDeveloper}}
       />

tests/integration/components/profile-test.js

@@ -0,0 +1,57 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, settled, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | profile-component', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('button appearance based on isDev property', async function (assert) {
+    this.set('handleShowEditProfilePictureModal', () => {
+      this.set('showEditProfilePictureModal', true);
+    });
+
+    this.set('isDev', true);
+
+    await render(hbs`
+      {{#if this.isDev}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='profile-edit-button '
+         @data-test-btn='edit'>
+          <FaIcon @icon="edit" />
+        </Button>
+      {{else}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='edit-btn btn'
+         @data-test-btn='edit'>
+          Update Picture
+        </Button>
+      {{/if}}
+    `);
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button');
+
+    await click('[data-test-btn="edit"]');
+
+    assert.ok(
+      this.showEditProfilePictureModal,
+      'Modal should be shown after clicking the button'
+    );
+
+    this.set('isDev', false);
+
+    await settled();
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('edit-btn');
+    assert.dom('[data-test-btn="edit"]').hasText('Update Picture');
+
+    await click('[data-test-btn="edit"]');
+
+    assert.ok(
+      this.showEditProfilePictureModal,
+      'Modal should be shown after clicking the button'
+    );
+  });
+});

tests/unit/routes/profile-test.js

@@ -20,4 +20,16 @@ module('Unit | Route | profile', function (hooks) {
     assert.dom('[data-test-modal="image-upload"]').exists();
     assert.dom('[data-test-btn="browse"]').exists();
   });
+  test('button appearance based on dev query param', async (assert) => {
+    await visit('/profile?dev=true');
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button');
+
+    await visit('/profile?dev=false');
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('edit-btn');
+    assert.dom('[data-test-btn="edit"]').hasText('Update Picture');
+  });
 });