Merge branch 'develop' into fix/CW-3385

app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue

@@ -2,7 +2,7 @@
 import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import NewHook from './NewHook.vue';
 import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
 import MultipleIntegrationHooks from './MultipleIntegrationHooks.vue';
@@ -13,13 +13,28 @@ export default {
     SingleIntegrationHooks,
     MultipleIntegrationHooks,
   },
-  mixins: [hookMixin],
   props: {
     integrationId: {
       type: [String, Number],
       required: true,
     },
   },
+  setup(props) {
+    const { integrationId } = props;
+
+    const {
+      integration,
+      isIntegrationMultiple,
+      isIntegrationSingle,
+      isHookTypeInbox,
+    } = useIntegrationHook(integrationId);
+    return {
+      integration,
+      isIntegrationMultiple,
+      isIntegrationSingle,
+      isHookTypeInbox,
+    };
+  },
   data() {
     return {
       loading: {},
@@ -31,23 +46,9 @@ export default {
   },
   computed: {
     ...mapGetters({ uiFlags: 'integrations/getUIFlags' }),
-    integration() {
-      return this.$store.getters['integrations/getIntegration'](
-        this.integrationId
-      );
-    },
     showIntegrationHooks() {
       return !this.uiFlags.isFetching && !isEmptyObject(this.integration);
     },
-    integrationType() {
-      return this.integration.allow_multiple_hooks ? 'multiple' : 'single';
-    },
-    isIntegrationMultiple() {
-      return this.integrationType === 'multiple';
-    },
-    isIntegrationSingle() {
-      return this.integrationType === 'single';
-    },
     showAddButton() {
       return this.showIntegrationHooks && this.isIntegrationMultiple;
     },
@@ -120,14 +121,14 @@ export default {
     <div v-if="showIntegrationHooks" class="w-full">
       <div v-if="isIntegrationMultiple">
         <MultipleIntegrationHooks
-          :integration="integration"
+          :integration-id="integrationId"
           @delete="openDeletePopup"
         />
       </div>
 
       <div v-if="isIntegrationSingle">
         <SingleIntegrationHooks
-          :integration="integration"
+          :integration-id="integrationId"
           @add="openAddHookModal"
           @delete="openDeletePopup"
         />
@@ -135,7 +136,7 @@ export default {
     </div>
 
     <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
-      <NewHook :integration="integration" @close="hideAddHookModal" />
+      <NewHook :integration-id="integrationId" @close="hideAddHookModal" />
     </woot-modal>
 
     <woot-delete-modal

app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue

@@ -1,14 +1,18 @@
 <script>
 import { mapGetters } from 'vuex';
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 export default {
-  mixins: [hookMixin],
   props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
+    integrationId: {
+      type: String,
+      required: true,
     },
   },
+  setup(props) {
+    const { integration, isHookTypeInbox, hasConnectedHooks } =
+      useIntegrationHook(props.integrationId);
+    return { integration, isHookTypeInbox, hasConnectedHooks };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -2,16 +2,22 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 
 export default {
-  mixins: [hookMixin],
   props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
+    integrationId: {
+      type: String,
+      required: true,
     },
   },
+  setup(props) {
+    const { integration, isHookTypeInbox } = useIntegrationHook(
+      props.integrationId
+    );
+
+    return { integration, isHookTypeInbox };
+  },
   data() {
     return {
       endPoint: '',

app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue

@@ -1,13 +1,18 @@
 <script>
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 export default {
-  mixins: [hookMixin],
   props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
+    integrationId: {
+      type: String,
+      required: true,
     },
   },
+  setup(props) {
+    const { integration, hasConnectedHooks } = useIntegrationHook(
+      props.integrationId
+    );
+    return { integration, hasConnectedHooks };
+  },
 };
 </script>