From 9a238d259a5825fbc348cfb611f836bc1dc9f645 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Sun, 17 Dec 2017 00:20:20 +0000
Subject: Fix subscribe button

---
 .../pipelines/components/header_component.vue      | 11 ++++
 .../pipelines/pipeline_details_bundle.js           |  9 ++-
 .../pipelines/pipeline_details_mediatior.js        |  1 +
 .../clients/pipeline_notification_client.js        |  1 +
 .../workers/pipeline_notification_worker.js        |  1 +
 .../vue_shared/components/header_ci_component.vue  | 18 ++++--
 ...ipeline_push_notifications_subscribe_button.vue | 75 ++++++++++++++++++++++
 .../push_notifications_subscribe_button.vue        | 56 ----------------
 app/controllers/profiles_controller.rb             | 14 +++-
 app/models/ci/pipeline.rb                          |  4 +-
 app/models/ci/pipeline_subscription.rb             |  2 +-
 app/models/user.rb                                 |  7 +-
 app/services/users/update_service.rb               | 15 +++--
 app/views/projects/pipelines/show.html.haml        |  2 +-
 app/workers/pipeline_webpush_worker.rb             | 11 +++-
 15 files changed, 149 insertions(+), 78 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/pipeline_push_notifications_subscribe_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/push_notifications_subscribe_button.vue

(limited to 'app')

diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 2a1ecac3707..20dfe5ea649 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -14,6 +14,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    isSubscribed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   components: {
     ciHeader,
@@ -44,6 +49,10 @@ export default {
       eventHub.$emit('headerPostAction', action);
     },
 
+    emitSetIsSubscribed(...args) {
+      eventHub.$emit('setIsSubscribed', ...args);
+    },
+
     getActions() {
       const actions = [];
 
@@ -88,7 +97,9 @@ export default {
       :time="pipeline.created_at"
       :user="pipeline.user"
       :actions="actions"
+      :is-subscribed="isSubscribed"
       @actionClicked="postAction"
+      @setIsSubscribed="emitSetIsSubscribed"
       />
     <loading-icon
       v-if="isLoading"
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 206023d4ddb..28e198ee628 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -8,7 +8,7 @@ import eventHub from './event_hub';
 document.addEventListener('DOMContentLoaded', () => {
   const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
 
-  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint, isSubscribed: dataset.isSubscribed });
 
   mediator.fetchPipeline();
 
@@ -46,9 +46,11 @@ document.addEventListener('DOMContentLoaded', () => {
     },
     created() {
       eventHub.$on('headerPostAction', this.postAction);
+      eventHub.$on('setIsSubscribed', this.setIsSubscribed);
     },
     beforeDestroy() {
       eventHub.$off('headerPostAction', this.postAction);
+      eventHub.$off('setIsSubscribed', this.setIsSubscribed);
     },
     methods: {
       postAction(action) {
@@ -56,11 +58,16 @@ document.addEventListener('DOMContentLoaded', () => {
           .then(() => this.mediator.refreshPipeline())
           .catch(() => new Flash('An error occurred while making the request.'));
       },
+
+      setIsSubscribed(isSubscribed) {
+        this.mediator.state.isSubscribed = isSubscribed;
+      },
     },
     render(createElement) {
       return createElement('pipeline-header', {
         props: {
           isLoading: this.mediator.state.isLoading,
+          isSubscribed: this.mediator.state.isSubscribed,
           pipeline: this.mediator.store.state.pipeline,
         },
       });
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
index 823ccd849f4..e63de175b0c 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -12,6 +12,7 @@ export default class pipelinesMediator {
 
     this.state = {};
     this.state.isLoading = false;
+    this.state.isSubscribed = options.isSubscribed === 'true';
   }
 
   fetchPipeline() {
diff --git a/app/assets/javascripts/service_workers/clients/pipeline_notification_client.js b/app/assets/javascripts/service_workers/clients/pipeline_notification_client.js
index ba0266a2991..5532abb12aa 100644
--- a/app/assets/javascripts/service_workers/clients/pipeline_notification_client.js
+++ b/app/assets/javascripts/service_workers/clients/pipeline_notification_client.js
@@ -29,6 +29,7 @@ export default {
 
   register() {
     return this.worker.register(this.workerPath)
+      .then(this.worker.ready)
       .then((registration) => {
         this.registration = registration;
       });
diff --git a/app/assets/javascripts/service_workers/workers/pipeline_notification_worker.js b/app/assets/javascripts/service_workers/workers/pipeline_notification_worker.js
index bf332a0afdd..6da713960f1 100644
--- a/app/assets/javascripts/service_workers/workers/pipeline_notification_worker.js
+++ b/app/assets/javascripts/service_workers/workers/pipeline_notification_worker.js
@@ -1,5 +1,6 @@
 function onPush(event) {
   console.log('PipelineNotificatinWorker onPush', event);
+  debugger;
   console.log('JSON', event.data.json());
   console.log('logo', gon);
   console.log('test');
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index f1ec9bcfda1..adc871a086e 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -4,7 +4,7 @@ import loadingIcon from './loading_icon.vue';
 import timeagoTooltip from './time_ago_tooltip.vue';
 import tooltip from '../directives/tooltip';
 import userAvatarImage from './user_avatar/user_avatar_image.vue';
-import pushNotificationsSubscribeButton from './push_notifications_subscribe_button.vue';
+import pipelinePushNotificationsSubscribeButton from './pipeline_push_notifications_subscribe_button.vue';
 
 /**
  * Renders header component for job and pipeline page based on UI mockups
@@ -46,6 +46,11 @@ export default {
       required: false,
       default: false,
     },
+    isSubscribed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   directives: {
@@ -57,7 +62,7 @@ export default {
     loadingIcon,
     timeagoTooltip,
     userAvatarImage,
-    pushNotificationsSubscribeButton,
+    pipelinePushNotificationsSubscribeButton,
   },
 
   computed: {
@@ -70,6 +75,10 @@ export default {
     onClickAction(action) {
       this.$emit('actionClicked', action);
     },
+
+    emitSetIsSubscribed(...args) {
+      this.$emit('setIsSubscribed', ...args);
+    },
   },
 };
 </script>
@@ -143,9 +152,10 @@ export default {
             aria-hidden="true">
           </i>
         </button>
-
       </template>
-      <push-notifications-subscribe-button />
+
+      <pipeline-push-notifications-subscribe-button :pipeline-id="itemId" :is-subscribed="isSubscribed" @setIsSubscribed="emitSetIsSubscribed" />
+
       <button
         v-if="hasSidebarButton"
         type="button"
diff --git a/app/assets/javascripts/vue_shared/components/pipeline_push_notifications_subscribe_button.vue b/app/assets/javascripts/vue_shared/components/pipeline_push_notifications_subscribe_button.vue
new file mode 100644
index 00000000000..8265aa49c1b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pipeline_push_notifications_subscribe_button.vue
@@ -0,0 +1,75 @@
+<script>
+import PipelineNotificationClient from '../../service_workers/clients/pipeline_notification_client';
+import axios from '../../lib/utils/axios_utils';
+
+export default {
+  props: {
+    pipelineId: {
+      type: Number,
+      required: true,
+    },
+
+    isSubscribed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      hasPermission: true,
+    };
+  },
+
+  computed: {
+    actionName() {
+      return this.isSubscribed ? 'Unsubscribe' : 'Subscribe';
+    },
+  },
+
+  methods: {
+    subscribe() {
+      PipelineNotificationClient.init()
+        .then(() => PipelineNotificationClient.getSubscription())
+        .then((subscription) => {
+          if (!subscription) return PipelineNotificationClient.subscribe();
+
+          return subscription;
+        })
+        .then((subscription) => {
+          const subscriptionData = subscription.toJSON();
+
+          // lazy
+          return axios.put('/profile.json', {
+            user: {
+              webpush_endpoint: subscriptionData.endpoint,
+              webpush_p256dh: subscriptionData.keys.p256dh,
+              webpush_auth: subscriptionData.keys.auth,
+              subscribed_pipeline: this.pipelineId,
+            },
+          });
+        })
+        .then(() => {
+          this.$emit('setIsSubscribed', true);
+          this.hasPermission = true;
+        })
+        .catch(() => {
+          this.hasPermission = false;
+        });
+    },
+  },
+};
+</script>
+
+
+<template>
+<button
+  :disabled="!hasPermission"
+  class="btn"
+  type="button"
+  @click="subscribe"
+>
+  {{ actionName }} to push notifications
+</button>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/push_notifications_subscribe_button.vue b/app/assets/javascripts/vue_shared/components/push_notifications_subscribe_button.vue
deleted file mode 100644
index ac40285c244..00000000000
--- a/app/assets/javascripts/vue_shared/components/push_notifications_subscribe_button.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-import PipelineNotificationClient from '../../service_workers/clients/pipeline_notification_client';
-import axios from '../../lib/utils/axios_utils';
-
-export default {
-  data() {
-    return {
-      hasPermission: true,
-    };
-  },
-
-  methods: {
-    subscribe() {
-      PipelineNotificationClient.init()
-        .then(() => PipelineNotificationClient.getSubscription())
-        .then((subscription) => {
-          if (!subscription) return PipelineNotificationClient.subscribe();
-
-          return subscription;
-        })
-        .then((subscription) => {
-          const subscriptionData = subscription.toJSON();
-          
-          // lazy
-          return axios.put('/profile', {
-            user: {
-              webpush_endpoint: subscriptionData.endpoint,
-              webpush_p256dh: subscriptionData.keys.p256dh,
-              webpush_auth: subscriptionData.keys.auth,
-              subscribed_pipelines: '68,69',
-            },
-          });
-        })
-        .then(() => {
-          this.hasPermission = true;
-        })
-        .catch((error) => {
-          console.log(error);
-          this.hasPermission = false;
-        });
-    },
-  },
-};
-</script>
-
-
-<template>
-<button
-  :disabled="!hasPermission"
-  class="btn"
-  type="button"
-  @click="subscribe"
->
-  Subscribe to push notifications
-</button>
-</template>
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index 0f99cf1e7db..9b7239e6233 100644
--- a/app/controllers/profiles_controller.rb
+++ b/app/controllers/profiles_controller.rb
@@ -15,8 +15,16 @@ class ProfilesController < Profiles::ApplicationController
       if result[:status] == :success
         message = "Profile was successfully updated"
 
-        format.html { redirect_back_or_default(default: { action: 'show' }, options: { notice: message }) }
-        format.json { render json: { message: message } }
+        p '😂'
+
+        format.html do
+          p '😘'
+          redirect_back_or_default(default: { action: 'show' }, options: { notice: message })
+        end
+        format.json do
+          p '🙄'
+          render json: { message: message }
+        end
       else
         format.html { redirect_back_or_default(default: { action: 'show' }, options: { alert: result[:message] }) }
         format.json { render json: result }
@@ -95,7 +103,7 @@ class ProfilesController < Profiles::ApplicationController
       :webpush_endpoint,
       :webpush_p256dh,
       :webpush_auth,
-      :subscribed_pipelines
+      :subscribed_pipeline
     )
   end
 end
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index 6e7c43c35c6..39674cb88ef 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -31,7 +31,7 @@ module Ci
     has_many :auto_canceled_pipelines, class_name: 'Ci::Pipeline', foreign_key: 'auto_canceled_by_id'
     has_many :auto_canceled_jobs, class_name: 'CommitStatus', foreign_key: 'auto_canceled_by_id'
 
-    has_many :pipeline_subscriptions, class_name: 'Ci::PipelineSubscription'
+    has_many :pipeline_subscriptions, class_name: 'Ci::PipelineSubscription', foreign_key: 'ci_pipeline_id'
     has_many :webpush_subscribers, through: :pipeline_subscriptions, class_name: 'User', source: :user
 
     delegate :id, to: :project, prefix: true
@@ -139,7 +139,7 @@ module Ci
         next if transition.loopback?
 
         pipeline.run_after_commit do
-          PipelineWebpushWorker.perform_async(pipeline.id, pipeline.webpush_subscribers)
+          PipelineWebpushWorker.perform_async(pipeline.id)
           PipelineHooksWorker.perform_async(pipeline.id)
           ExpirePipelineCacheWorker.perform_async(pipeline.id)
         end
diff --git a/app/models/ci/pipeline_subscription.rb b/app/models/ci/pipeline_subscription.rb
index 797e942a5ca..424c592225e 100644
--- a/app/models/ci/pipeline_subscription.rb
+++ b/app/models/ci/pipeline_subscription.rb
@@ -3,6 +3,6 @@ module Ci
     extend Gitlab::Ci::Model
 
     belongs_to :user
-    belongs_to :pipeline, class_name: 'Ci::Pipeline'
+    belongs_to :pipeline, class_name: 'Ci::Pipeline', foreign_key: 'ci_pipeline_id'
   end
 end
diff --git a/app/models/user.rb b/app/models/user.rb
index 19672b2a28f..e8551748d66 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -135,7 +135,7 @@ class User < ActiveRecord::Base
   has_many :custom_attributes, class_name: 'UserCustomAttribute'
 
   has_many :pipeline_subscriptions, class_name: 'Ci::PipelineSubscription'
-  has_many :subscribed_pipelines, through: :pipeline_subscriptions, class_name: 'Ci::Pipeline', source: :pipeline
+  has_many :subscribed_pipelines, through: :pipeline_subscriptions, class_name: 'Ci::Pipeline', source: :pipeline, foreign_key: 'ci_pipeline_id'
 
   #
   # Validations
@@ -168,7 +168,6 @@ class User < ActiveRecord::Base
   validates :webpush_p256dh, uniqueness: true, allow_nil: true
   validates :webpush_auth, uniqueness: true, allow_nil: true
   validates :webpush_endpoint, uniqueness: true, allow_nil: true
-  
 
   before_validation :sanitize_attrs
   before_validation :set_notification_email, if: :email_changed?
@@ -1188,6 +1187,10 @@ class User < ActiveRecord::Base
     max_member_access_for_group_ids([group_id])[group_id]
   end
 
+  def is_subscribed?(pipeline)
+    subscribed_pipelines.exists?(pipeline.id)
+  end
+
   protected
 
   # override, from Devise::Validatable
diff --git a/app/services/users/update_service.rb b/app/services/users/update_service.rb
index e7e6d59df56..cc9c557e419 100644
--- a/app/services/users/update_service.rb
+++ b/app/services/users/update_service.rb
@@ -1,3 +1,5 @@
+require 'byebug'
+
 module Users
   class UpdateService < BaseService
     include NewUserNotifier
@@ -13,13 +15,14 @@ module Users
 
       user_exists = @user.persisted?
 
-      if @params[:subscribed_pipelines]
-        @params[:subscribed_pipelines].split(/\,/).each do |pipeline_id|
-          Ci::Pipeline.find(pipeline_id).try do |pipeline|
-            p '🔥'
-            @user.subscribed_pipelines << pipeline
-          end
+      if @params[:subscribed_pipeline]
+        Ci::Pipeline.find(@params[:subscribed_pipeline]).try do |pipeline|
+          p '🔥'
+          p pipeline
+          @user.subscribed_pipelines << pipeline
         end
+
+        @params.delete(:subscribed_pipeline)
       end
 
       assign_attributes(&block)
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 2174154b207..32c41f3b199 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -9,7 +9,7 @@
 
   = render "projects/pipelines/with_tabs", pipeline: @pipeline
 
-.js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json) } }
+.js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json), is_subscribed: current_user ? current_user.is_subscribed?(@pipeline).to_s : false } }
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag('common_vue')
diff --git a/app/workers/pipeline_webpush_worker.rb b/app/workers/pipeline_webpush_worker.rb
index e40e3e1f3ca..e94e3786b1d 100644
--- a/app/workers/pipeline_webpush_worker.rb
+++ b/app/workers/pipeline_webpush_worker.rb
@@ -7,9 +7,16 @@ class PipelineWebpushWorker
 
   queue_namespace :pipeline_default
 
-  def perform(pipeline_id, subscribers)
+  def perform(pipeline_id)
+    p "🔥"
+    p pipeline_id
     Ci::Pipeline.find(pipeline_id).try do |pipeline|
-      subscribers.each do |subscriber|
+      p "😂test"
+      p pipeline
+      p pipeline.webpush_subscribers
+      pipeline.webpush_subscribers.each do |subscriber|
+        p "❤️"
+        p subscriber
         Webpush.payload_send(
           message: "#{pipeline_id} has updated",
           endpoint: subscriber.webpush_endpoint,
-- 
cgit v1.2.1