Merge pull request #651 from codex-team/new-notification-pattern

feat(notifications): new notification pattern

.stylelintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     } ],
     'at-rule-no-unknown': [true, {
       ignoreAtRules: ['mixin', 'define-mixin']
-    }]
+    }],
+    'no-descending-specificity': null
   }
 };

schema.graphql

@@ -185,6 +185,12 @@ input CreateProjectNotificationsRuleInput {
   """Words to exclude from notification"""
   excluding: [String!]! = []
 
+  """Treshold to be reached to send notification"""
+  threshold: Int = 100
+
+  """Treshold period in milliseconds"""
+  thresholdPeriod: Int = 3600000
+
   """Notification channels to recieve events"""
   channels: NotificationsChannelsInput!
 }

src/analytics/amplitude.ts

@@ -43,6 +43,10 @@ export const Analytics = {
    * @param userId - user identifier
    */
   setUserId: (userId: string): void => {
+    if (!isRegistered) {
+      return;
+    }
+
     return setUserId(userId);
   },
 };

src/api/fragments.ts

@@ -80,6 +80,15 @@ export const PROJECT_NOTIFICATIONS_RULE_FRAGMENT = `
         isEnabled
       }
     }
+    threshold
+    thresholdPeriod
+  }
+`;
+
+export const PROJECT_NOTIFICATIONS_RULE_POINTER_FRAGMENT = `
+  fragment ProjectNotificationRulePointer on ProjectNotificationRulePointer {
+    id
+    projectId
   }
 `;
 

src/api/projects/index.js

@@ -5,6 +5,7 @@ import {
   MUTATION_UPDATE_LAST_VISIT,
   MUTATION_CREATE_PROJECT_NOTIFY_RULE,
   MUTATION_UPDATE_PROJECT_NOTIFY_RULE,
+  MUTATION_REMOVE_PROJECT_NOTIFY_RULE,
   MUTATION_REMOVE_PROJECT,
   MUTATION_TOGGLE_ENABLED_STATE_OF_A_PROJECT_NOTIFY_RULE,
   QUERY_CHART_DATA, MUTATION_GENERATE_NEW_INTEGRATION_TOKEN
@@ -114,6 +115,18 @@ export async function updateProjectNotificationsRule(payload) {
   })).updateProjectNotificationsRule;
 }
 
+/**
+ * Send request for removing specific project notifications rule
+ *
+ * @param {ProjectNotificationRulePointer} payload - update rule payload
+ * @returns {Promise<ProjectNotificationsRule>}
+ */
+export async function removeProjectNotificationsRule(payload) {
+  return (await api.callOld(MUTATION_REMOVE_PROJECT_NOTIFY_RULE, {
+    input: payload,
+  })).removeProjectNotificationsRule;
+}
+
 /**
  * Send request for updating specific project notifications rule
  *

src/api/projects/queries.js

@@ -109,6 +109,19 @@ export const MUTATION_UPDATE_PROJECT_NOTIFY_RULE = `
   ${PROJECT_NOTIFICATIONS_RULE_FRAGMENT}
 `;
 
+// language=GraphQL
+export const MUTATION_REMOVE_PROJECT_NOTIFY_RULE = `
+  mutation ( $input: ProjectNotificationRulePointer! ) {
+    deleteProjectNotificationsRule(
+      input: $input
+    ) {
+      ...ProjectNotificationsRule
+    }
+  }
+
+  ${PROJECT_NOTIFICATIONS_RULE_FRAGMENT}
+`;
+
 // language=GraphQL
 export const MUTATION_REMOVE_PROJECT = `
   mutation removeProject($projectId: ID!) {

src/components/catalog/Item.vue

@@ -75,8 +75,8 @@ export default {
   }
 
   &__header {
-    height: 100px;
     flex-shrink: 0;
+    height: 100px;
     background-position: center center;
     background-size: cover;
     border-radius: 4px;

src/components/catalog/catchers/AddCatcher.vue

@@ -308,12 +308,12 @@ export default {
     }
 
     &__catalog-more {
-      background-color: var(--color-bg-main);
+      width: 100%;
       margin: 7.5px 7.5px 50px;
-      text-align: center;
       padding: 18px 20px;
+      text-align: center;
+      background-color: var(--color-bg-main);
       border-radius: 4px;
-      width: 100%;
       cursor: pointer;
       transition: all 0.2s ease;
 

src/components/event/details/DetailsBase.vue

@@ -43,15 +43,15 @@ export default {
 <style>
   .event-details {
     &__header {
+      display: flex;
+      gap: 4px;
+      align-items: center;
       margin: 0 0 10px 0;
       color: var(--color-text-second);
       font-weight: bold;
       font-size: 12px;
       letter-spacing: 0.15px;
       text-transform: uppercase;
-      display: flex;
-      align-items: center;
-      gap: 4px;
 
       .icon {
         width: 20px;

src/components/forms/CustomSelect.vue

@@ -86,7 +86,7 @@ export default {
   },
   computed: {
     filteredOption() {
-      return this.options.filter(opt => opt !== this.value);
+      return this.options.filter(opt => opt.id !== this.value.id);
     },
   },
   methods: {

src/components/forms/RadioButtonGroup.vue

@@ -41,8 +41,15 @@
             v-if="option.description"
             class="radio-button-group__option-description"
           >
-            {{ option.description }}
+            <div v-if="option.description !== undefined">
+              {{ option.description }}
+            </div>
           </div>
+          <slot
+            v-else
+            name="description"
+            :option="option"
+          />
         </div>
 
         <UiRadio

src/components/modals/ChooseTariffPlanPopup.vue

@@ -262,16 +262,16 @@ export default Vue.extend({
     }
 
     &__premium-card {
-      background: var(--color-bg-main);
-      border-radius: 7px;
       display: flex;
       align-items: center;
       padding: 20px 25px;
+      background: var(--color-bg-main);
+      border-radius: 7px;
     }
 
     &__premium-card-title {
-      font-weight: 600;
       width: 150px;
+      font-weight: 600;
     }
 
     &__premium-card-limit {
@@ -282,11 +282,11 @@ export default Vue.extend({
     }
 
     &__premium-card-price {
+      margin-right: 20px;
       margin-left: auto;
       color: var(--color-text-second);
       font-weight: 600;
       font-size: 13px;
-      margin-right: 20px;
     }
   }
 </style>

src/components/modals/PaymentDetailsDialog.vue

@@ -101,7 +101,6 @@
         v-if="isRecurrent"
         class="payment-details__adoption-autoProlongation"
       >
-
         <UiCheckboxWithLabel
           v-model="isAcceptedRecurrentPaymentAgreement"
           class="payment-details__adoption-autoProlongation-item"
@@ -319,7 +318,7 @@ export default Vue.extend({
       const newCardOption: CustomSelectOption = {
         id: NEW_CARD_ID,
         value: NEW_CARD_ID,
-        name:  this.$t('billing.paymentDetails.newCard') as string
+        name:  this.$t('billing.paymentDetails.newCard') as string,
       };
 
       if (!cards) {
@@ -540,7 +539,7 @@ export default Vue.extend({
       const widget = new window.cp.CloudPayments({ language: this.$i18n.locale });
 
       const paymentData: PlanProlongationPayload = {
-        checksum: data.checksum
+        checksum: data.checksum,
       };
 
       const interval = this.workspace.isDebug ? 'Day' : 'Month';
@@ -560,7 +559,7 @@ export default Vue.extend({
       }
 
       const amount = data.isCardLinkOperation ? AMOUNT_FOR_CARD_VALIDATION : data.plan.monthlyCharge;
-      const method = data.isCardLinkOperation ? 'auth' : 'charge'
+      const method = data.isCardLinkOperation ? 'auth' : 'charge';
 
       widget.pay(method,
         {

src/components/project/EventBadge.vue

@@ -6,8 +6,14 @@
     <span class="event-badge__count">
       {{ eventCount | abbreviateNumber }}
     </span>
-    <div v-if="affectedUsersCount !== null && affectedUsersCount > 0" class="event-badge__affected-users">
-      <Icon symbol="user-small" class="event-badge__affected-users-icon"/>
+    <div
+      v-if="affectedUsersCount !== null && affectedUsersCount > 0"
+      class="event-badge__affected-users"
+    >
+      <Icon
+        symbol="user-small"
+        class="event-badge__affected-users-icon"
+      />
       {{ affectedUsersCount | abbreviateNumber }}
     </div>
   </div>
@@ -52,20 +58,20 @@ export default {
 <style>
 .event-badge {
   display: inline-flex;
+  align-items: center;
   height: 20px;
   padding: 5px 5px;
   color: var(--color-text-main);
   line-height: 9px;
   white-space: nowrap;
-  align-items: center;
   background-color: var(--color-indicator-medium);
   border-radius: 6px;
 
   &__affected-users {
-    font-size: 10px;
-    margin-left: 10px;
     display: flex;
     align-items: center;
+    margin-left: 10px;
+    font-size: 10px;
 
     &-icon {
       display: block;
@@ -76,8 +82,8 @@ export default {
   }
 
   &__count {
-    font-size: 12px;
     font-weight: bold;
+    font-size: 12px;
   }
 
   &--visited {

src/components/project/Overview.vue

@@ -29,7 +29,7 @@
             :key="dailyEventInfo.groupHash"
             :last-occurrence-timestamp="dailyEventInfo.lastRepetitionTime"
             :count="dailyEventInfo.count"
-            :affected-users-count ="dailyEventInfo.affectedUsers"
+            :affected-users-count="dailyEventInfo.affectedUsers"
             class="project-overview__event"
             :event="getEventByProjectIdAndGroupHash(project.id, dailyEventInfo.groupHash)"
             @onAssigneeIconClick="showAssignees(project.id, dailyEventInfo.groupHash, $event)"

src/components/project/settings/Notifications.vue

@@ -37,6 +37,7 @@
         :project-id="project.id"
         :enable-editing="userCanEdit"
         @editClicked="editRule"
+        @removeClicked="removeRule"
       />
     </section>
   </div>
@@ -154,6 +155,15 @@ export default Vue.extend({
       this.addRuleOpened = true;
     },
 
+    removeRule(ruleId: string): void {
+      this.$store.dispatch('REMOVE_NOTIFICATIONS_RULE', {
+        projectId: this.project.id,
+        ruleId,
+      });
+
+      this.$forceUpdate();
+    },
+
     /**
      * Close and clear add rule form
      */