feat: stop specific workflow option in workflow state block

src/background/workflowEngine/blocksHandler/handlerWorkflowState.js

@@ -4,15 +4,20 @@ export default async function ({ data, id }) {
   if (data.type === 'stop-current') {
     return {};
   }
-  if (data.type === 'stop-all') {
+  if (['stop-specific', 'stop-all'].includes(data.type)) {
     const ids = [];
+    const isSpecific = data.type === 'stop-specific';
     this.engine.states.getAll.forEach((state) => {
+      const workflowNotIncluded =
+        isSpecific && !data.workflowsToStop.includes(state.workflowId);
+      if (workflowNotIncluded) return;
+
       ids.push(state.id);
     });
 
     for (const stateId of ids) {
       if (stateId === this.engine.id) {
-        stopCurrent = !data.exceptCurrent;
+        stopCurrent = isSpecific ? true : !data.exceptCurrent;
       } else {
         await this.engine.states.stop(stateId);
       }

src/components/newtab/workflow/edit/EditWorkflowState.vue

@@ -30,10 +30,54 @@
     >
       Execpt for the current workflow
     </ui-checkbox>
+    <div
+      v-if="data.type === 'stop-specific'"
+      class="rounded-lg bg-input focus-within:bg-box-transparent-2 transition mt-4"
+    >
+      <div
+        v-if="data.workflowsToStop.length > 0"
+        class="px-4 py-2 overflow-auto scroll"
+        style="max-height: 114px"
+      >
+        <div
+          v-for="item in data.workflowsToStop"
+          :key="item"
+          class="inline-flex mb-1 mr-1 items-center p-1 bg-box-transparent rounded-md text-sm"
+        >
+          <span class="flex-1">
+            {{ selectedWorkflows[item] }}
+          </span>
+          <v-remixicon
+            name="riCloseLine"
+            class="cursor-pointer text-gray-600 dark:text-gray-300"
+            size="20"
+            @click="removeSelectedItem(item)"
+          />
+        </div>
+      </div>
+      <ui-autocomplete
+        :model-value="query"
+        :items="workflows"
+        item-key="id"
+        item-label="name"
+        block
+        @selected="onItemSelected"
+      >
+        <input
+          v-model="query"
+          type="text"
+          placeholder="Select a workflow"
+          class="w-full py-2 px-4 bg-transparent rounded-lg"
+        />
+      </ui-autocomplete>
+    </div>
   </div>
 </template>
 <script setup>
+import { computed, inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useWorkflowStore } from '@/stores/workflow';
+import { useTeamWorkflowStore } from '@/stores/teamWorkflow';
 
 const props = defineProps({
   data: {
@@ -44,6 +88,8 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
+const workflowStore = useWorkflowStore();
+const teamWorkflowStore = useTeamWorkflowStore();
 
 const includeExceptions = ['stop-all'];
 const actions = [
@@ -53,11 +99,52 @@ const actionsItems = {
   stop: [
     { id: 'stop-all', name: 'Stop all workflows' },
     { id: 'stop-current', name: 'Stop current workflow' },
-    // { id: 'stop-specific', name: 'Stop specific workflows' },
+    { id: 'stop-specific', name: 'Stop specific workflows' },
   ],
 };
 
+const query = ref('');
+const selectedWorkflows = ref({});
+const currentWorkflow = inject('workflow', {});
+
+const workflows = computed(() => {
+  let workflowsList = [];
+  const workflow = currentWorkflow.data.value;
+
+  if (workflow.id.startsWith('team')) {
+    workflowsList = teamWorkflowStore.getByTeam(workflow.teamId) || [];
+  } else {
+    workflowsList = workflowStore.getWorkflows;
+  }
+
+  return workflowsList.filter((item) => {
+    const selected = props.data.workflowsToStop.includes(item.id);
+    if (selected) selectedWorkflows.value[item.id] = item.name;
+
+    return !selected;
+  });
+});
+
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }
+function onItemSelected({ item }) {
+  const copy = [...props.data.workflowsToStop];
+  copy.push(item.id);
+
+  selectedWorkflows.value[item.id] = item.name;
+
+  updateData({ workflowsToStop: copy });
+
+  query.value = '';
+}
+function removeSelectedItem(itemId) {
+  const copy = [...props.data.workflowsToStop];
+  const index = props.data.workflowsToStop.indexOf(itemId);
+  copy.splice(index, 1);
+
+  updateData({ workflowsToStop: copy });
+
+  delete selectedWorkflows.value[itemId];
+}
 </script>

src/stores/workflow.js

@@ -56,6 +56,7 @@ const defaultWorkflow = (data = null, options = {}) => {
       insertDefaultColumn: false,
       defaultColumnName: 'column',
     },
+    runCounts: 0,
     version: browser.runtime.getManifest().version,
     globalData: '{\n\t"key": "value"\n}',
   };