Merge branch '31184-refactor-disabled-sidebar-notification-to-vue' into 'master'

Refactor sidebar notifications disabled from HAML to Vue

Closes #31184

See merge request gitlab-org/gitlab!20007

app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue

@@ -33,6 +33,8 @@ export default {
   <div class="block subscriptions">
     <subscriptions
       :loading="store.isFetching.subscriptions"
+      :project-emails-disabled="store.projectEmailsDisabled"
+      :subscribe-disabled-description="store.subscribeDisabledDescription"
       :subscribed="store.subscribed"
       @toggleSubscription="onToggleSubscription"
     />

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -26,6 +26,16 @@ export default {
       required: false,
       default: false,
     },
+    projectEmailsDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    subscribeDisabledDescription: {
+      type: String,
+      required: false,
+      default: '',
+    },
     subscribed: {
       type: Boolean,
       required: false,
@@ -42,11 +52,23 @@ export default {
       return this.subscribed === null;
     },
     notificationIcon() {
+      if (this.projectEmailsDisabled) {
+        return ICON_OFF;
+      }
       return this.subscribed ? ICON_ON : ICON_OFF;
     },
     notificationTooltip() {
+      if (this.projectEmailsDisabled) {
+        return this.subscribeDisabledDescription;
+      }
       return this.subscribed ? LABEL_ON : LABEL_OFF;
     },
+    notificationText() {
+      if (this.projectEmailsDisabled) {
+        return this.subscribeDisabledDescription;
+      }
+      return __('Notifications');
+    },
   },
   methods: {
     /**
@@ -81,6 +103,7 @@ export default {
 <template>
   <div>
     <span
+      ref="tooltip"
       v-tooltip
       class="sidebar-collapsed-icon"
       :title="notificationTooltip"
@@ -96,8 +119,9 @@ export default {
         class="sidebar-item-icon is-active"
       />
     </span>
-    <span class="issuable-header-text hide-collapsed float-left"> {{ __('Notifications') }} </span>
+    <span class="issuable-header-text hide-collapsed float-left"> {{ notificationText }} </span>
     <toggle-button
+      v-if="!projectEmailsDisabled"
       ref="toggleButton"
       :is-loading="showLoadingState"
       :value="subscribed"

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -28,6 +28,8 @@ export default class SidebarStore {
     this.moveToProjectId = 0;
     this.isLockDialogOpen = false;
     this.participants = [];
+    this.projectEmailsDisabled = false;
+    this.subscribeDisabledDescription = '';
     this.subscribed = null;
 
     SidebarStore.singleton = this;
@@ -53,6 +55,8 @@ export default class SidebarStore {
   }
 
   setSubscriptionsData(data) {
+    this.projectEmailsDisabled = data.project_emails_disabled || false;
+    this.subscribeDisabledDescription = data.subscribe_disabled_description;
     this.isFetching.subscriptions = false;
     this.subscribed = data.subscribed || false;
   }

app/serializers/issuable_sidebar_extras_entity.rb

@@ -3,11 +3,20 @@
 class IssuableSidebarExtrasEntity < Grape::Entity
   include RequestAwareEntity
   include TimeTrackableEntity
+  include NotificationsHelper
 
   expose :participants, using: ::API::Entities::UserBasic do |issuable|
     issuable.participants(request.current_user)
   end
 
+  expose :project_emails_disabled do |issuable|
+    issuable.project.emails_disabled?
+  end
+
+  expose :subscribe_disabled_description do |issuable|
+    notification_description(:owner_disabled)
+  end
+
   expose :subscribed do |issuable|
     issuable.subscribed?(request.current_user, issuable.project)
   end

app/views/shared/issuable/_sidebar.html.haml

@@ -141,13 +141,7 @@
         .js-sidebar-participants-entry-point
 
         - if signed_in
-          - if issuable_sidebar[:project_emails_disabled]
-            .block.js-emails-disabled
-              .sidebar-collapsed-icon.has-tooltip{ title: notification_description(:owner_disabled), data: { placement: "left", container: "body", boundary: 'viewport' } }
-                = notification_setting_icon
-              .hide-collapsed= notification_description(:owner_disabled)
-          - else
-            .js-sidebar-subscriptions-entry-point
+          .js-sidebar-subscriptions-entry-point
 
         - project_ref = issuable_sidebar[:reference]
         .block.project-reference

changelogs/unreleased/31184-refactor-disabled-sidebar-notification-to-vue.yml

+---
+title: Refactor disabled sidebar notifications to Vue
+merge_request: 20007
+author: minghuan lei
+type: other

spec/features/issues/user_toggles_subscription_spec.rb

@@ -33,7 +33,6 @@ describe "User toggles subscription", :js do
 
     it 'is disabled' do
       expect(page).to have_content('Notifications have been disabled by the project or group owner')
-      expect(page).to have_selector('.js-emails-disabled', visible: true)
       expect(page).not_to have_selector('.js-issuable-subscribe-button')
     end
   end

spec/fixtures/api/schemas/entities/merge_request_sidebar_extras.json

@@ -3,6 +3,8 @@
   "properties" : {
     "id": { "type": "integer" },
     "iid": { "type": "integer" },
+    "project_emails_disabled": { "type": "boolean" },
+    "subscribe_disabled_description": { "type": "string" },
     "subscribed": { "type": "boolean" },
     "time_estimate": { "type": "integer" },
     "total_time_spent": { "type": "integer" },

spec/javascripts/sidebar/subscriptions_spec.js

@@ -76,4 +76,25 @@ describe('Subscriptions', function() {
 
     expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar');
   });
+
+  describe('given project emails are disabled', () => {
+    const subscribeDisabledDescription = 'Notifications have been disabled';
+
+    beforeEach(() => {
+      vm = mountComponent(Subscriptions, {
+        subscribed: false,
+        projectEmailsDisabled: true,
+        subscribeDisabledDescription,
+      });
+    });
+
+    it('sets the correct display text', () => {
+      expect(vm.$el.textContent).toContain(subscribeDisabledDescription);
+      expect(vm.$refs.tooltip.dataset.originalTitle).toBe(subscribeDisabledDescription);
+    });
+
+    it('does not render the toggle button', () => {
+      expect(vm.$refs.toggleButton).toBeUndefined();
+    });
+  });
 });

spec/serializers/issuable_sidebar_extras_entity_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe IssuableSidebarExtrasEntity do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :repository) }
+  let(:resource) { create(:issue, project: project) }
+  let(:request) { double('request', current_user: user) }
+
+  subject { described_class.new(resource, request: request).as_json }
+
+  it 'have subscribe attributes' do
+    expect(subject).to include(:participants,
+                               :project_emails_disabled,
+                               :subscribe_disabled_description,
+                               :subscribed,
+                               :assignees)
+  end
+end