Update automations limitation

Author: joanagmaia

frontend/src/modules/automation/components/automation-toggle.vue

@@ -4,6 +4,7 @@
       :model-value="props.automation.state === 'active'"
       class="!grow-0 !ml-0"
       :disabled="!canEnable"
+      :before-change="beforeChange"
       @change="handleChange"
     />
     <span class="ml-2 text-gray-900 text-sm">
@@ -16,6 +17,9 @@
 import { computed, defineProps } from 'vue';
 import { useAutomationStore } from '@/modules/automation/store';
 import { useStore } from 'vuex';
+import { getWorkflowMax, showWorkflowLimitDialog } from '@/modules/automation/automation-limit';
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import { FeatureFlag } from '@/utils/featureFlag';
 import { automationTypes } from '../config/automation-types';
 
 const props = defineProps({
@@ -29,14 +33,38 @@ const store = useStore();
 
 const { changePublishState } = useAutomationStore();
 
+const { currentTenant } = mapGetters('auth');
+
 const canEnable = computed(() => {
   const { type } = props.automation;
+
   if (automationTypes[type]?.enableGuard) {
     return props.automation.state === 'active' || automationTypes[type]?.enableGuard(props.automation, store);
   }
+
   return true;
 });
 
+const beforeChange = () => {
+  if (props.automation.state === 'active') {
+    return true;
+  }
+
+  const isFeatureEnabled = FeatureFlag.isFlagEnabled(
+    FeatureFlag.flags.automations,
+  );
+
+  if (!isFeatureEnabled) {
+    const planWorkflowCountMax = getWorkflowMax(
+      currentTenant.value.plan,
+    );
+
+    showWorkflowLimitDialog({ planWorkflowCountMax });
+  }
+
+  return isFeatureEnabled;
+};
+
 const handleChange = (value) => {
   changePublishState(props.automation.id, value);
 };

frontend/src/modules/automation/pages/automation-list-page.vue

@@ -128,10 +128,8 @@ import { storeToRefs } from 'pinia';
 import pluralize from 'pluralize';
 import AppAutomationForm from '@/modules/automation/components/automation-form.vue';
 import AppAutomationListTable from '@/modules/automation/components/list/automation-list-table.vue';
-import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import AppAutomationExecutions from '@/modules/automation/components/automation-executions.vue';
 import { FeatureFlag } from '@/utils/featureFlag';
-import { getWorkflowMax, showWorkflowLimitDialog } from '@/modules/automation/automation-limit';
 
 import { useStore } from 'vuex';
 import config from '@/config';
@@ -158,40 +156,15 @@ const {
 } = storeToRefs(automationStore);
 const { getAutomations, changeAutomationFilter } = automationStore;
 
-const { currentTenant } = mapGetters('auth');
-
 const store = useStore();
 const fetchIntegrations = () => store.dispatch('integration/doFetch');
 
-/**
- * Check if tenant has feature flag enabled
- */
-const canAddAutomation = () => {
-  const isFeatureEnabled = FeatureFlag.isFlagEnabled(
-    FeatureFlag.flags.automations,
-  );
-
-  if (!isFeatureEnabled) {
-    const planWorkflowCountMax = getWorkflowMax(
-      currentTenant.value.plan,
-    );
-
-    showWorkflowLimitDialog({ planWorkflowCountMax });
-  }
-
-  return isFeatureEnabled;
-};
-
 // Executions drawer
 const createAutomation = (type) => {
   if (!automationTypes[type].canCreate(store)) {
     return;
   }
 
-  if (!canAddAutomation()) {
-    return;
-  }
-
   openAutomationForm.value = true;
   editAutomation.value = null;
   automationFormType.value = type;