Merge branch 'service-desk-fe-updates-v1' into 'master'

Service Desk FE updates v1

See merge request !1604

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.js

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: null,
     },
+    isInstanceAdmin: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   methods: {
@@ -32,15 +37,23 @@ export default {
       <div class="checkbox">
         <label for="service-desk-enabled-checkbox">
           <input
+            ref="enabled-checkbox"
             type="checkbox"
             id="service-desk-enabled-checkbox"
+            :disabled="!isInstanceAdmin"
             :checked="isEnabled"
             @change="onCheckboxToggle($event)">
           <span class="descr">
-            Activate service desk
+            Activate Service Desk
           </span>
         </label>
       </div>
+      <p
+        ref="only-instance-admin-activate-message"
+        v-if="!isInstanceAdmin"
+        class="settings-message">
+        Only instance admins can activate/deactivate Service Desk
+      </p>
       <template v-if="isEnabled">
         <div
           class="panel-slim panel-default">
@@ -55,7 +68,8 @@ export default {
               An error occurred while fetching the incoming email
             </template>
             <template v-else-if="incomingEmail">
-              <span ref="service-desk-incoming-email">
+              <span
+                ref="service-desk-incoming-email">
                 {{ incomingEmail }}
               </span>
               <button
@@ -74,7 +88,9 @@ export default {
             </template>
           </div>
         </div>
-        <p class="settings-message">
+        <p
+          ref="recommend-protect-email-from-spam-message"
+          class="settings-message">
           We recommend you protect the external support email address.
           Unblocked email spam would result in many spam issues being created,
           and may disrupt your GitLab service.

app/assets/javascripts/projects/settings_service_desk/service_desk_root.js

@@ -8,14 +8,17 @@ import eventHub from './event_hub';
 class ServiceDeskRoot {
   constructor(wrapperElement) {
     this.wrapperElement = wrapperElement;
-    const isEnabled = this.wrapperElement.dataset.enabled !== undefined &&
+    const isEnabled = typeof this.wrapperElement.dataset.enabled !== 'undefined' &&
       this.wrapperElement.dataset.enabled !== 'false';
     const incomingEmail = this.wrapperElement.dataset.incomingEmail;
     const endpoint = this.wrapperElement.dataset.endpoint;
+    const isInstanceAdmin = typeof this.wrapperElement.dataset.isInstanceAdmin !== 'undefined' &&
+      this.wrapperElement.dataset.isInstanceAdmin !== 'false';
 
     this.store = new ServiceDeskStore({
       isEnabled,
       incomingEmail,
+      isInstanceAdmin,
     });
     this.service = new ServiceDeskService(endpoint);
   }
@@ -37,7 +40,7 @@ class ServiceDeskRoot {
   }
 
   unbindEvents() {
-    eventHub.$on('serviceDeskEnabledCheckboxToggled', this.onEnableToggledWrapper);
+    eventHub.$off('serviceDeskEnabledCheckboxToggled', this.onEnableToggledWrapper);
   }
 
   render() {
@@ -48,7 +51,8 @@ class ServiceDeskRoot {
         <service-desk-setting
           :isEnabled="isEnabled"
           :incomingEmail="incomingEmail"
-          :fetchError="fetchError" />
+          :fetchError="fetchError"
+          :isInstanceAdmin="isInstanceAdmin" />
       `,
       components: {
         'service-desk-setting': ServiceDeskSetting,

app/assets/javascripts/projects/settings_service_desk/stores/service_desk_store.js

@@ -4,6 +4,7 @@ class ServiceDeskStore {
       isEnabled: false,
       incomingEmail: '',
       fetchError: null,
+      isInstanceAdmin: false,
     }, initialState);
   }
 
@@ -18,6 +19,10 @@ class ServiceDeskStore {
   setFetchError(value) {
     this.state.fetchError = value;
   }
+
+  setIsInstanceAdmin(value) {
+    this.state.isInstanceAdmin = value;
+  }
 }
 
 export default ServiceDeskStore;

app/mailers/emails/ee/service_desk.rb

 module Emails
   module EE
     module ServiceDesk
+      extend ActiveSupport::Concern
+
+      included do
+        layout 'service_desk', only: [:service_desk_thank_you_email, :service_desk_new_note_email]
+      end
+
       def service_desk_thank_you_email(issue_id)
         setup_service_desk_mail(issue_id)
 

app/views/layouts/service_desk.html.haml

+%html{ lang: "en" }
+  %head
+    %meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    %title
+      GitLab
+    = stylesheet_link_tag 'notify'
+    = yield :head
+  %body
+    .content
+      = yield
+    .footer{ style: "margin-top: 10px;" }
+    %p
+      —
+      %br
+      = link_to "Unsubscribe", @sent_notification_url

app/views/notify/service_desk_new_note_email.html.haml

+- if current_application_settings.email_author_in_body
+  %div
+    #{link_to @note.author_name, user_url(@note.author)} wrote:
+%div
+  = markdown(@note.note, pipeline: :email, author: @note.author)

app/views/notify/service_desk_thank_you_email.html.haml

+%p
+  Thank you for your support request! We are tracking your request as ticket ##{@issue.iid}, and will respond as soon as we can.

app/views/projects/edit.html.haml

@@ -131,10 +131,11 @@
           %fieldset.js-service-desk-setting-wrapper.features.append-bottom-default
             %h5.prepend-top-0
               Service Desk
-              = link_to icon('question-circle'), help_page_path("TODO")
+              = link_to icon('question-circle'), help_page_path('user/project/service_desk')
             .js-service-desk-setting-root{ data: { endpoint: namespace_project_service_desk_path(@project.namespace, @project),
               enabled: @project.service_desk_enabled,
-              incoming_email: (@project.service_desk_address if @project.service_desk_enabled) } }
+              incoming_email: (@project.service_desk_address if @project.service_desk_enabled),
+              is_instance_admin: current_user.is_admin? } }
 
         %hr
         %fieldset.features.append-bottom-default

spec/features/projects/settings/ee/service_desk_setting_spec.rb

@@ -3,25 +3,63 @@ require 'spec_helper'
 describe 'Service Desk Setting', js: true, feature: true do
   include WaitForAjax
 
-  let(:project) { create(:project_empty_repo, :private) }
-  let(:user) { create(:user) }
+  describe 'as project master/admin' do
+    let(:project) { create(:project_empty_repo, :private) }
+    let(:user) { create(:user) }
 
-  before do
-    project.add_master(user)
-    login_as(user)
-    allow_any_instance_of(License).to receive(:add_on?).and_call_original
-    allow_any_instance_of(License).to receive(:add_on?).with('GitLab_ServiceDesk') { true }
+    before do
+      project.add_master(user)
+      login_as(user)
+      allow_any_instance_of(License).to receive(:add_on?).and_call_original
+      allow_any_instance_of(License).to receive(:add_on?).with('GitLab_ServiceDesk') { true }
+    end
 
-    visit edit_namespace_project_path(project.namespace, project)
-  end
+    describe 'when disabled' do
+      before do
+        visit edit_namespace_project_path(project.namespace, project)
+      end
+
+      it 'shows disabled activation checkbox' do
+        expect(page).to have_selector("#service-desk-enabled-checkbox[disabled]")
+      end
+    end
+
+    describe 'when enabled' do
+      before do
+        project.update(service_desk_enabled: true)
+        visit edit_namespace_project_path(project.namespace, project)
+      end
+
+      it 'shows disabled activation checkbox' do
+        expect(page).to have_selector("#service-desk-enabled-checkbox[disabled]")
+      end
 
-  it 'shows service desk activation checkbox' do
-    expect(page).to have_selector("#service-desk-enabled-checkbox")
+      it 'shows service_desk_address when enabled' do
+        expect(find('.js-service-desk-setting-wrapper .panel-body')).to have_content(project.service_desk_address)
+      end
+    end
   end
 
-  it 'shows incoming email after activating' do
-    find("#service-desk-enabled-checkbox").click
-    wait_for_ajax
-    expect(find('.js-service-desk-setting-wrapper .panel-body')).to have_content(project.service_desk_address)
+  describe 'as instance admin' do
+    let(:project) { create(:project_empty_repo, :private) }
+    let(:user) { create(:user, :admin) }
+
+    before do
+      login_as(user)
+      allow_any_instance_of(License).to receive(:add_on?).and_call_original
+      allow_any_instance_of(License).to receive(:add_on?).with('GitLab_ServiceDesk') { true }
+
+      visit edit_namespace_project_path(project.namespace, project)
+    end
+
+    it 'shows activation checkbox' do
+      expect(page).to have_selector("#service-desk-enabled-checkbox")
+    end
+
+    it 'shows incoming email after activating' do
+      find("#service-desk-enabled-checkbox").click
+      wait_for_ajax
+      expect(find('.js-service-desk-setting-wrapper .panel-body')).to have_content(project.service_desk_address)
+    end
   end
 end

spec/javascripts/projects/settings_service_desk/components/service_desk_setting_spec.js

@@ -23,25 +23,49 @@ describe('ServiceDeskSetting', () => {
     let el;
 
     describe('only isEnabled', () => {
-      beforeEach(() => {
-        vm = createComponent({
-          isEnabled: true,
+      describe('as project admin', () => {
+        beforeEach(() => {
+          vm = createComponent({
+            isEnabled: true,
+          });
+          el = vm.$el;
         });
-        el = vm.$el;
-      });
 
-      it('see main panel with the email info', () => {
-        expect(el.querySelector('.panel')).toBeDefined();
-      });
+        it('should see disabled activation checkbox', () => {
+          expect(vm.$refs['enabled-checkbox'].getAttribute('disabled')).toEqual('disabled');
+        });
 
-      it('see loading spinner', () => {
-        expect(el.querySelector('.fa-spinner')).toBeDefined();
-        expect(el.querySelector('.fa-exclamation-circle')).toBeNull();
-        expect(vm.$refs['service-desk-incoming-email']).toBeUndefined();
+        it('should see only instance admin can activate/deactivate message', () => {
+          expect(vm.$refs['only-instance-admin-activate-message']).toBeDefined();
+        });
+
+        it('should see main panel with the email info', () => {
+          expect(el.querySelector('.panel')).toBeDefined();
+        });
+
+        it('should see loading spinner', () => {
+          expect(el.querySelector('.fa-spinner')).toBeDefined();
+          expect(el.querySelector('.fa-exclamation-circle')).toBeNull();
+          expect(vm.$refs['service-desk-incoming-email']).toBeUndefined();
+        });
+
+        it('should see warning message', () => {
+          expect(vm.$refs['recommend-protect-email-from-spam-message']).toBeDefined();
+        });
       });
 
-      it('see warning message', () => {
-        expect(el.querySelector('.settings-message')).toBeDefined();
+      describe('as instance admin', () => {
+        beforeEach(() => {
+          vm = createComponent({
+            isEnabled: true,
+            isInstanceAdmin: true,
+          });
+          el = vm.$el;
+        });
+
+        it('should see activation checkbox (not disabled)', () => {
+          expect(vm.$refs['enabled-checkbox'].getAttribute('disabled')).toEqual(null);
+        });
       });
     });
 
@@ -54,7 +78,7 @@ describe('ServiceDeskSetting', () => {
         el = vm.$el;
       });
 
-      it('see email', () => {
+      it('should see email', () => {
         expect(vm.$refs['service-desk-incoming-email'].textContent.trim()).toEqual('foo@bar.com');
         expect(el.querySelector('.fa-spinner')).toBeNull();
         expect(el.querySelector('.fa-exclamation-circle')).toBeNull();
@@ -70,7 +94,7 @@ describe('ServiceDeskSetting', () => {
         el = vm.$el;
       });
 
-      it('see error message', () => {
+      it('should see error message', () => {
         expect(el.querySelector('.fa-exclamation-circle')).toBeDefined();
         expect(el.querySelector('.panel-body').textContent.trim()).toEqual('An error occurred while fetching the incoming email');
         expect(el.querySelector('.fa-spinner')).toBeNull();
@@ -94,7 +118,7 @@ describe('ServiceDeskSetting', () => {
     });
 
     it('should not see warning message', () => {
-      expect(el.querySelector('.settings-message')).toBeNull();
+      expect(vm.$refs['recommend-protect-email-from-spam-message']).toBeUndefined();
     });
   });
 

spec/javascripts/projects/settings_service_desk/services/service_desk_service_spec.js

@@ -26,7 +26,7 @@ describe('ServiceDeskService', () => {
   });
 
   describe('toggleServiceDesk', () => {
-    it('enable service desk', (done) => {
+    it('enable Service Desk', (done) => {
       spyOn(service.serviceDeskResource, 'update').and.returnValue(Promise.resolve({
         data: {
           service_desk_enabled: true,
@@ -40,11 +40,11 @@ describe('ServiceDeskService', () => {
           done();
         })
         .catch((err) => {
-          done.fail(`Failed to enable service desk and fetch incoming email:\n${err}`);
+          done.fail(`Failed to enable Service Desk and fetch incoming email:\n${err}`);
         });
     });
 
-    it('disable service desk', (done) => {
+    it('disable Service Desk', (done) => {
       spyOn(service.serviceDeskResource, 'update').and.returnValue(Promise.resolve({
         data: {
           service_desk_enabled: false,
@@ -58,7 +58,7 @@ describe('ServiceDeskService', () => {
           done();
         })
         .catch((err) => {
-          done.fail(`Failed to disable service desk and reset incoming email:\n${err}`);
+          done.fail(`Failed to disable Service Desk and reset incoming email:\n${err}`);
         });
     });
   });

spec/javascripts/projects/settings_service_desk/stores/service_desk_store_spec.js

@@ -50,4 +50,22 @@ describe('ServiceDeskStore', () => {
       expect(store.state.fetchError).toEqual(err);
     });
   });
+
+  describe('setIsInstanceAdmin', () => {
+    it('defaults to false', () => {
+      expect(store.state.isInstanceAdmin).toEqual(false);
+    });
+
+    it('set true', () => {
+      store.setIsInstanceAdmin(true);
+
+      expect(store.state.isInstanceAdmin).toEqual(true);
+    });
+
+    it('set false', () => {
+      store.setIsInstanceAdmin(false);
+
+      expect(store.state.isInstanceAdmin).toEqual(false);
+    });
+  });
 });