n8n-editor-ui 1.79.0 → 1.80.0

package/dist/assets/{WorkflowExecutionsView-DLBbg4s6.js → WorkflowExecutionsView-IgYJKRy2.js}

@@ -1,8 +1,8 @@
-import { d as defineComponent, U as useRoute, T as useWorkflowsStore, p as useSettingsStore, q as computed, o as onMounted, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, j as createBaseVNode, e as createBlock, k as createTextVNode, t as toDisplayString, l as unref, n as normalizeClass, f as createCommentVNode, V as VIEWS, g as useI18n, m as resolveComponent, a8 as EnterpriseEditionFeature, _ as _export_sfc, b as useRouter, at as useExecutionsStore, a5 as usePageRedirectionHelper, r as ref, H as watch, F as Fragment, A as renderList, f1 as TransitionGroup, f2 as isComponentPublicInstance, al as getResourcePermissions, a4 as useWorkflowHelpers, eV as onBeforeRouteLeave, dO as getNodeViewTab, an as MAIN_HEADER_TABS, bo as useNodeTypesStore, a as useToast, J as useDebounce, bp as useNodeHelpers, x as onBeforeUnmount, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, f3 as NO_NETWORK_ERROR_CODE, aj as useTelemetry, eQ as NEW_WORKFLOW_ID } from "./index-BgTszcKd.js";
-import { _ as _sfc_main$4, C as ConcurrentExecutionsHeader, E as ExecutionsFilter } from "./ConcurrentExecutionsHeader-SdaUSwM5.js";
-import { u as useExecutionHelpers, t as toDayMonth, a as toTime } from "./useExecutionHelpers-OayET-Qz.js";
-import { W as WorkflowExecutionsInfoAccordion } from "./WorkflowExecutionsInfoAccordion-AONJXhOM.js";
-import "./AnnotationTagsDropdown.ee.vue_vue_type_script_setup_true_lang-DKtXGQ8b.js";
+import { d as defineComponent, U as useRoute, T as useWorkflowsStore, p as useSettingsStore, q as computed, o as onMounted, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, j as createBaseVNode, e as createBlock, k as createTextVNode, t as toDisplayString, l as unref, n as normalizeClass, f as createCommentVNode, V as VIEWS, g as useI18n, m as resolveComponent, a8 as EnterpriseEditionFeature, _ as _export_sfc, b as useRouter, at as useExecutionsStore, a5 as usePageRedirectionHelper, r as ref, H as watch, F as Fragment, A as renderList, f1 as TransitionGroup, f2 as isComponentPublicInstance, al as getResourcePermissions, a4 as useWorkflowHelpers, eV as onBeforeRouteLeave, dO as getNodeViewTab, an as MAIN_HEADER_TABS, bo as useNodeTypesStore, a as useToast, J as useDebounce, bp as useNodeHelpers, x as onBeforeUnmount, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, f3 as NO_NETWORK_ERROR_CODE, aj as useTelemetry, eQ as NEW_WORKFLOW_ID } from "./index-RIkMj045.js";
+import { _ as _sfc_main$4, C as ConcurrentExecutionsHeader, E as ExecutionsFilter } from "./ConcurrentExecutionsHeader-BfwpFWPS.js";
+import { u as useExecutionHelpers, t as toDayMonth, a as toTime } from "./useExecutionHelpers-DeMd4c8O.js";
+import { W as WorkflowExecutionsInfoAccordion } from "./WorkflowExecutionsInfoAccordion-CYpfdTlZ.js";
+import "./AnnotationTagsDropdown.ee.vue_vue_type_script_setup_true_lang-HxDJGUtE.js";
 const _hoisted_1$1 = { key: 2 };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowExecutionsCard",

package/dist/assets/{WorkflowHistory-Xzp1cgz9.js → WorkflowHistory-Clbhytld.js}

@@ -1,6 +1,6 @@
-import { d as defineComponent, r as ref, q as computed, o as onMounted, c as openBlock, h as createElementBlock, s as renderSlot, j as createBaseVNode, t as toDisplayString, i as createVNode, w as withCtx, k as createTextVNode, e as createBlock, l as unref, f as createCommentVNode, n as normalizeClass, I as withModifiers, g as useI18n, m as resolveComponent, gs as dateformat, _ as _export_sfc, F as Fragment, A as renderList, aG as get, R as defineStore, Z as useRootStore, p as useSettingsStore, T as useWorkflowsStore, fJ as getNewWorkflow, U as useRoute, b as useRouter, a as useToast, a5 as usePageRedirectionHelper, K as useUIStore, aw as onBeforeMount, V as VIEWS, bn as watchEffect, f_ as telemetry, al as getResourcePermissions, ap as h, hZ as WORKFLOW_HISTORY_VERSION_RESTORE } from "./index-BgTszcKd.js";
-import { W as WorkflowPreview } from "./WorkflowPreview-CLrfHawQ.js";
-import { F as FileSaver_minExports } from "./FileSaver.min-BYPjeNsQ.js";
+import { d as defineComponent, r as ref, q as computed, o as onMounted, c as openBlock, h as createElementBlock, s as renderSlot, j as createBaseVNode, t as toDisplayString, i as createVNode, w as withCtx, k as createTextVNode, e as createBlock, l as unref, f as createCommentVNode, n as normalizeClass, I as withModifiers, g as useI18n, m as resolveComponent, gs as dateformat, _ as _export_sfc, F as Fragment, A as renderList, aG as get, R as defineStore, Z as useRootStore, p as useSettingsStore, T as useWorkflowsStore, fJ as getNewWorkflow, U as useRoute, b as useRouter, a as useToast, a5 as usePageRedirectionHelper, K as useUIStore, aw as onBeforeMount, V as VIEWS, bn as watchEffect, f_ as telemetry, al as getResourcePermissions, ap as h, hZ as WORKFLOW_HISTORY_VERSION_RESTORE } from "./index-RIkMj045.js";
+import { W as WorkflowPreview } from "./WorkflowPreview-CR_8gGVk.js";
+import { F as FileSaver_minExports } from "./FileSaver.min-BRpBjOSK.js";
 const _hoisted_1$2 = ["datetime"];
 const _hoisted_2$1 = ["value"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({

package/dist/assets/{WorkflowOnboardingView-CM5jKrBr.js → WorkflowOnboardingView-BfwDAozz.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, aC as useLoadingService, aM as useTemplatesStore, T as useWorkflowsStore, b as useRouter, U as useRoute, o as onMounted, V as VIEWS, c as openBlock, h as createElementBlock, g as useI18n } from "./index-BgTszcKd.js";
+import { d as defineComponent, aC as useLoadingService, aM as useTemplatesStore, T as useWorkflowsStore, b as useRouter, U as useRoute, o as onMounted, V as VIEWS, c as openBlock, h as createElementBlock, g as useI18n } from "./index-RIkMj045.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowOnboardingView",
   setup(__props) {

package/dist/assets/{WorkflowPreview-CLrfHawQ.js → WorkflowPreview-CR_8gGVk.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, a as useToast, at as useExecutionsStore, r as ref, q as computed, o as onMounted, x as onBeforeUnmount, H as watch, c as openBlock, h as createElementBlock, n as normalizeClass, i as createVNode, f as createCommentVNode, j as createBaseVNode, m as resolveComponent, g as useI18n, _ as _export_sfc } from "./index-BgTszcKd.js";
+import { d as defineComponent, a as useToast, at as useExecutionsStore, r as ref, q as computed, o as onMounted, x as onBeforeUnmount, H as watch, c as openBlock, h as createElementBlock, n as normalizeClass, i as createVNode, f as createCommentVNode, j as createBaseVNode, m as resolveComponent, g as useI18n, _ as _export_sfc } from "./index-RIkMj045.js";
 const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowPreview",

package/dist/assets/{WorkflowsView-B8QO2U4z.js → WorkflowsView-DhJmVrpz.js}

@@ -1,10 +1,10 @@
-import { R as ResourcesListLayout, p as pickBy } from "./ResourcesListLayout-qO3XuEfV.js";
-import { d as defineComponent, a as useToast, b as useRouter, p as useSettingsStore, K as useUIStore, u as useUsersStore, T as useWorkflowsStore, a1 as useProjectsStore, q as computed, al as getResourcePermissions, gs as dateformat, m as resolveComponent, c as openBlock, e as createBlock, w as withCtx, i as createVNode, n as normalizeClass, k as createTextVNode, t as toDisplayString, l as unref, f as createCommentVNode, j as createBaseVNode, I as withModifiers, i6 as ResourceType, ax as withDirectives, fB as _sfc_main$2, ay as vShow, h as createElementBlock, g as useI18n, V as VIEWS, ab as WORKFLOW_SHARE_MODAL_KEY, ai as DUPLICATE_MODAL_KEY, ae as MODAL_CONFIRM, i7 as PROJECT_MOVE_RESOURCE_MODAL, ak as useMessage, aj as useTelemetry, _ as _export_sfc, U as useRoute, a0 as useSourceControlStore, au as usePostHog, D as useTagsStore, a3 as useDocumentTitle, r as ref, a8 as EnterpriseEditionFeature, i8 as EASY_AI_WORKFLOW_EXPERIMENT, H as watch, o as onMounted, i9 as N8nIcon, fF as N8nHeading, ci as N8nText, ia as N8nCard, fT as N8nInputLabel, a7 as _sfc_main$3, cw as N8nSelect, F as Fragment, A as renderList, cC as _sfc_main$4, bU as AI_CREDITS_EXPERIMENT } from "./index-BgTszcKd.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-CcQuszbk.js";
-import { P as ProjectCardBadge } from "./ProjectCardBadge-COQxXr59.js";
-import { P as ProjectHeader } from "./ProjectHeader-CE7TnWTW.js";
-import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-BEjLgBYH.js";
-import "./useWorkflowActivate-B4fObrrf.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-D9faOv_l.js";
+import { d as defineComponent, a as useToast, b as useRouter, p as useSettingsStore, K as useUIStore, u as useUsersStore, T as useWorkflowsStore, a1 as useProjectsStore, q as computed, al as getResourcePermissions, gs as dateformat, m as resolveComponent, c as openBlock, e as createBlock, w as withCtx, i as createVNode, n as normalizeClass, k as createTextVNode, t as toDisplayString, l as unref, f as createCommentVNode, j as createBaseVNode, I as withModifiers, i6 as ResourceType, ax as withDirectives, fB as _sfc_main$2, ay as vShow, h as createElementBlock, g as useI18n, V as VIEWS, ab as WORKFLOW_SHARE_MODAL_KEY, ai as DUPLICATE_MODAL_KEY, ae as MODAL_CONFIRM, i7 as PROJECT_MOVE_RESOURCE_MODAL, ak as useMessage, aj as useTelemetry, _ as _export_sfc, U as useRoute, a0 as useSourceControlStore, au as usePostHog, D as useTagsStore, a3 as useDocumentTitle, J as useDebounce, r as ref, i8 as DEFAULT_WORKFLOW_PAGE_SIZE, a8 as EnterpriseEditionFeature, i9 as EASY_AI_WORKFLOW_EXPERIMENT, H as watch, o as onMounted, x as onBeforeUnmount, ia as N8nIcon, fF as N8nHeading, ci as N8nText, ib as N8nCard, fT as N8nInputLabel, a7 as _sfc_main$3, cw as N8nSelect, F as Fragment, A as renderList, cC as _sfc_main$4, C as createEventBus, bU as AI_CREDITS_EXPERIMENT } from "./index-RIkMj045.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-Bd_Lvcdj.js";
+import { P as ProjectCardBadge } from "./ProjectCardBadge-J4JiadWD.js";
+import { P as ProjectHeader } from "./ProjectHeader-1XMrORbM.js";
+import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-DR9xMMTB.js";
+import "./useWorkflowActivate-DJ8wir2K.js";
 const _hoisted_1$1 = { key: 0 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowCard",
@@ -21,9 +21,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       homeProject: {},
       versionId: ""
     }) },
-    readOnly: { type: Boolean, default: false }
+    readOnly: { type: Boolean, default: false },
+    workflowListEventBus: { default: void 0 }
   },
-  emits: ["expand:tags", "click:tag"],
+  emits: ["expand:tags", "click:tag", "workflow:deleted", "workflow:active-toggle"],
   setup(__props, { emit: __emit }) {
     const WORKFLOW_LIST_ITEM_ACTIONS = {
       OPEN: "open",
@@ -119,7 +120,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               name: props.data.name,
               tags: (props.data.tags ?? []).map(
                 (tag) => typeof tag !== "string" && "id" in tag ? tag.id : tag
-              )
+              ),
+              externalEventBus: props.workflowListEventBus
             }
           });
           break;
@@ -171,6 +173,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         title: locale.baseText("mainSidebar.showMessage.handleSelect1.title"),
         type: "success"
       });
+      emit("workflow:deleted");
     }
     function moveResource() {
       uiStore.openModalWithData({
@@ -178,10 +181,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         data: {
           resource: props.data,
           resourceType: ResourceType.Workflow,
-          resourceTypeLabel: resourceTypeLabel.value
+          resourceTypeLabel: resourceTypeLabel.value,
+          eventBus: props.workflowListEventBus
         }
       });
     }
+    const emitWorkflowActiveToggle = (value) => {
+      emit("workflow:active-toggle", value);
+    };
     return (_ctx, _cache) => {
       const _component_N8nBadge = resolveComponent("N8nBadge");
       const _component_n8n_heading = resolveComponent("n8n-heading");
@@ -235,7 +242,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               "workflow-active": _ctx.data.active,
               "workflow-id": _ctx.data.id,
               "workflow-permissions": workflowPermissions.value,
-              "data-test-id": "workflow-card-activator"
+              "data-test-id": "workflow-card-activator",
+              "onUpdate:workflowActive": emitWorkflowActiveToggle
             }, null, 8, ["workflow-active", "workflow-id", "workflow-permissions"]),
             createVNode(_component_n8n_action_toggle, {
               actions: actions.value,
@@ -313,6 +321,17 @@ const _hoisted_3 = { class: "mb-s" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowsView",
   setup(__props) {
+    const StatusFilter = {
+      ACTIVE: true,
+      DEACTIVATED: false,
+      ALL: ""
+    };
+    const WORKFLOWS_SORT_MAP = {
+      lastUpdated: "updatedAt:desc",
+      lastCreated: "createdAt:desc",
+      nameAsc: "name:asc",
+      nameDesc: "name:desc"
+    };
     const i18n = useI18n();
     const route = useRoute();
     const router = useRouter();
@@ -326,11 +345,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const uiStore = useUIStore();
     const tagsStore = useTagsStore();
     const documentTitle = useDocumentTitle();
-    const StatusFilter = {
-      ACTIVE: true,
-      DEACTIVATED: false,
-      ALL: ""
-    };
+    const { callDebounced } = useDebounce();
     const loading = ref(false);
     const filters = ref({
       search: "",
@@ -338,13 +353,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       status: StatusFilter.ALL,
       tags: []
     });
+    const workflowListEventBus = createEventBus();
+    const workflows = ref([]);
     const easyAICalloutVisible = ref(true);
+    const currentPage = ref(1);
+    const pageSize = ref(DEFAULT_WORKFLOW_PAGE_SIZE);
+    const currentSort = ref("updatedAt:desc");
     const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
     const currentUser = computed(() => usersStore.currentUser ?? {});
-    const allWorkflows = computed(() => workflowsStore.allWorkflows);
     const isShareable = computed(
       () => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing]
     );
+    const workflowResources = computed(
+      () => workflows.value.map((workflow) => ({
+        id: workflow.id,
+        name: workflow.name,
+        value: "",
+        active: workflow.active,
+        updatedAt: workflow.updatedAt.toString(),
+        createdAt: workflow.createdAt.toString(),
+        homeProject: workflow.homeProject,
+        scopes: workflow.scopes,
+        type: "workflow",
+        sharedWithProjects: workflow.sharedWithProjects,
+        readOnly: !getResourcePermissions(workflow.scopes).workflow.update,
+        tags: workflow.tags
+      }))
+    );
     const statusFilterOptions = computed(() => [
       {
         label: i18n.baseText("workflows.filters.status.all"),
@@ -378,22 +413,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return i18n.baseText("workflows.empty.description");
       }
     });
-    const onFilter = (resource, newFilters, matches) => {
-      const iFilters = newFilters;
-      if (settingsStore.areTagsEnabled && iFilters.tags.length > 0) {
-        matches = matches && iFilters.tags.every(
-          (tag) => resource.tags?.find(
-            (resourceTag) => typeof resourceTag === "object" ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`
-          )
-        );
-      }
-      if (newFilters.status !== "") {
-        matches = matches && resource.active === newFilters.status;
+    watch(
+      () => route.params?.projectId,
+      async () => {
+        await initialize();
       }
-      return matches;
+    );
+    onMounted(async () => {
+      documentTitle.set(i18n.baseText("workflows.heading"));
+      void usersStore.showPersonalizationSurvey();
+      workflowListEventBus.on("resource-moved", fetchWorkflows);
+      workflowListEventBus.on("workflow-duplicated", fetchWorkflows);
+    });
+    onBeforeUnmount(() => {
+      workflowListEventBus.off("resource-moved", fetchWorkflows);
+      workflowListEventBus.off("workflow-duplicated", fetchWorkflows);
+    });
+    const onFiltersUpdated = async () => {
+      currentPage.value = 1;
+      saveFiltersOnQueryString();
+      await fetchWorkflows();
     };
-    const onFiltersUpdated = (newFilters) => {
-      Object.assign(filters.value, newFilters);
+    const onSearchUpdated = async (search) => {
+      currentPage.value = 1;
+      saveFiltersOnQueryString();
+      if (search) {
+        await callDebounced(fetchWorkflows, { debounceTime: 500, trailing: true });
+      } else {
+        await fetchWorkflows();
+      }
     };
     const addWorkflow = () => {
       uiStore.nodeViewInitialized = false;
@@ -413,78 +461,132 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const initialize = async () => {
       loading.value = true;
-      await Promise.all([
+      await setFiltersFromQueryString();
+      const [, workflowsPage] = await Promise.all([
         usersStore.fetchUsers(),
-        workflowsStore.fetchAllWorkflows(route.params?.projectId),
+        fetchWorkflows(),
         workflowsStore.fetchActiveWorkflows()
       ]);
+      workflows.value = workflowsPage;
+      loading.value = false;
+    };
+    const setCurrentPage = async (page) => {
+      currentPage.value = page;
+      await fetchWorkflows();
+    };
+    const setPageSize = async (size) => {
+      pageSize.value = size;
+      await fetchWorkflows();
+    };
+    const fetchWorkflows = async () => {
+      loading.value = true;
+      const routeProjectId = route.params?.projectId;
+      const homeProjectFilter = filters.value.homeProject || void 0;
+      const fetchedWorkflows = await workflowsStore.fetchWorkflowsPage(
+        routeProjectId ?? homeProjectFilter,
+        currentPage.value,
+        pageSize.value,
+        currentSort.value,
+        {
+          name: filters.value.search || void 0,
+          active: filters.value.status ? Boolean(filters.value.status) : void 0,
+          tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name)
+        }
+      );
+      workflows.value = fetchedWorkflows;
       loading.value = false;
+      return fetchedWorkflows;
     };
-    const onClickTag = (tagId) => {
+    const onClickTag = async (tagId) => {
       if (!filters.value.tags.includes(tagId)) {
         filters.value.tags.push(tagId);
+        currentPage.value = 1;
+        saveFiltersOnQueryString();
+        await fetchWorkflows();
       }
     };
     const saveFiltersOnQueryString = () => {
-      const query = {};
+      const currentQuery = { ...route.query };
       if (filters.value.search) {
-        query.search = filters.value.search;
+        currentQuery.search = filters.value.search;
+      } else {
+        delete currentQuery.search;
       }
       if (typeof filters.value.status !== "string") {
-        query.status = filters.value.status.toString();
+        currentQuery.status = filters.value.status.toString();
+      } else {
+        delete currentQuery.status;
       }
       if (filters.value.tags.length) {
-        query.tags = filters.value.tags.join(",");
+        currentQuery.tags = filters.value.tags.join(",");
+      } else {
+        delete currentQuery.tags;
       }
       if (filters.value.homeProject) {
-        query.homeProject = filters.value.homeProject;
+        currentQuery.homeProject = filters.value.homeProject;
+      } else {
+        delete currentQuery.homeProject;
       }
       void router.replace({
-        query: Object.keys(query).length ? query : void 0
+        query: Object.keys(currentQuery).length ? currentQuery : void 0
       });
     };
     function isValidProjectId(projectId) {
       return projectsStore.availableProjects.some((project) => project.id === projectId);
     }
     const setFiltersFromQueryString = async () => {
-      const { tags, status, search, homeProject } = route.query ?? {};
-      const filtersToApply = {};
-      if (homeProject && typeof homeProject === "string") {
+      const newQuery = { ...route.query };
+      const { tags, status, search, homeProject, sort } = route.query ?? {};
+      const isValidString = (value) => typeof value === "string" && value.trim().length > 0;
+      if (isValidString(homeProject)) {
         await projectsStore.getAvailableProjects();
         if (isValidProjectId(homeProject)) {
-          filtersToApply.homeProject = homeProject;
+          newQuery.homeProject = homeProject;
+          filters.value.homeProject = homeProject;
+        } else {
+          delete newQuery.homeProject;
         }
+      } else {
+        delete newQuery.homeProject;
       }
-      if (search && typeof search === "string") {
-        filtersToApply.search = search;
+      if (isValidString(search)) {
+        newQuery.search = search;
+        filters.value.search = search;
+      } else {
+        delete newQuery.search;
       }
-      if (tags && typeof tags === "string") {
+      if (isValidString(tags)) {
         await tagsStore.fetchAll();
-        const currentTags = tagsStore.allTags.map((tag) => tag.id);
-        filtersToApply.tags = tags.split(",").filter((tag) => currentTags.includes(tag));
+        const validTags = tags.split(",").filter((tag) => tagsStore.allTags.map((t) => t.id).includes(tag));
+        if (validTags.length) {
+          newQuery.tags = validTags.join(",");
+          filters.value.tags = validTags;
+        } else {
+          delete newQuery.tags;
+        }
+      } else {
+        delete newQuery.tags;
       }
-      if (status && typeof status === "string" && [StatusFilter.ACTIVE.toString(), StatusFilter.DEACTIVATED.toString()].includes(status)) {
-        filtersToApply.status = status === "true";
+      const validStatusValues = [StatusFilter.ACTIVE.toString(), StatusFilter.DEACTIVATED.toString()];
+      if (isValidString(status) && validStatusValues.includes(status)) {
+        newQuery.status = status;
+        filters.value.status = status === "true";
+      } else {
+        delete newQuery.status;
       }
-      if (Object.keys(filtersToApply).length) {
-        Object.assign(filters.value, filtersToApply);
+      if (isValidString(sort)) {
+        const newSort = WORKFLOWS_SORT_MAP[sort] ?? "updatedAt:desc";
+        newQuery.sort = sort;
+        currentSort.value = newSort;
+      } else {
+        delete newQuery.sort;
       }
-      void router.replace({ query: pickBy(route.query) });
+      void router.replace({ query: newQuery });
     };
     sourceControlStore.$onAction(({ name, after }) => {
       if (name !== "pullWorkfolder") return;
       after(async () => await initialize());
     });
-    watch(filters, () => saveFiltersOnQueryString(), { deep: true });
-    watch(
-      () => route.params?.projectId,
-      async () => await initialize()
-    );
-    onMounted(async () => {
-      documentTitle.set(i18n.baseText("workflows.heading"));
-      await setFiltersFromQueryString();
-      void usersStore.showPersonalizationSurvey();
-    });
     const openAIWorkflow = async (source) => {
       dismissEasyAICallout();
       telemetry.track(
@@ -508,21 +610,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const dismissEasyAICallout = () => {
       easyAICalloutVisible.value = false;
     };
+    const onSortUpdated = async (sort) => {
+      currentSort.value = WORKFLOWS_SORT_MAP[sort] ?? "updatedAt:desc";
+      if (currentSort.value !== "updatedAt:desc") {
+        void router.replace({ query: { ...route.query, sort } });
+      } else {
+        void router.replace({ query: { ...route.query, sort: void 0 } });
+      }
+      await fetchWorkflows();
+    };
+    const onWorkflowActiveToggle = (data) => {
+      const workflow = workflows.value.find((w) => w.id === data.id);
+      if (!workflow) return;
+      workflow.active = data.active;
+    };
     return (_ctx, _cache) => {
       const _component_n8n_button = resolveComponent("n8n-button");
       const _component_N8nCallout = resolveComponent("N8nCallout");
       return openBlock(), createBlock(ResourcesListLayout, {
-        "resource-key": "workflows",
-        resources: allWorkflows.value,
         filters: filters.value,
-        "additional-filters-handler": onFilter,
+        "onUpdate:filters": [
+          _cache[2] || (_cache[2] = ($event) => filters.value = $event),
+          onFiltersUpdated
+        ],
+        "resource-key": "workflows",
+        type: "list-paginated",
+        resources: workflowResources.value,
         "type-props": { itemSize: 80 },
         shareable: isShareable.value,
         initialize,
         disabled: readOnlyEnv.value || !projectPermissions.value.workflow.create,
-        loading: loading.value,
+        loading: false,
+        "resources-refreshing": loading.value,
+        "custom-page-size": 10,
+        "total-items": unref(workflowsStore).totalWorkflowCount,
+        "dont-perform-sorting-and-filtering": true,
         "onClick:add": addWorkflow,
-        "onUpdate:filters": onFiltersUpdated
+        "onUpdate:search": onSearchUpdated,
+        "onUpdate:currentPage": setCurrentPage,
+        "onUpdate:pageSize": setPageSize,
+        onSort: onSortUpdated
       }, {
         header: withCtx(() => [
           createVNode(ProjectHeader)
@@ -564,15 +691,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["class"])) : createCommentVNode("", true)
         ]),
-        default: withCtx(({ data, updateItemSize }) => [
+        item: withCtx(({ item: data }) => [
           createVNode(WorkflowCard, {
             "data-test-id": "resources-list-item",
             class: "mb-2xs",
             data,
+            "workflow-list-event-bus": unref(workflowListEventBus),
             "read-only": readOnlyEnv.value,
-            "onExpand:tags": ($event) => updateItemSize(data),
-            "onClick:tag": onClickTag
-          }, null, 8, ["data", "read-only", "onExpand:tags"])
+            "onClick:tag": onClickTag,
+            "onWorkflow:deleted": fetchWorkflows,
+            "onWorkflow:moved": fetchWorkflows,
+            "onWorkflow:duplicated": fetchWorkflows,
+            "onWorkflow:activeToggle": onWorkflowActiveToggle
+          }, null, 8, ["data", "workflow-list-event-bus", "read-only"])
         ]),
         empty: withCtx(() => [
           createBaseVNode("div", _hoisted_1, [
@@ -697,7 +828,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["resources", "filters", "shareable", "disabled", "loading"]);
+      }, 8, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "total-items"]);
     };
   }
 });

package/dist/assets/{easyAiWorkflowUtils-BEjLgBYH.js → easyAiWorkflowUtils-DR9xMMTB.js}

@@ -1,4 +1,4 @@
-import { bh as NodeConnectionType } from "./index-BgTszcKd.js";
+import { bh as NodeConnectionType } from "./index-RIkMj045.js";
 const getEasyAiWorkflowJson = ({
   isInstanceInAiFreeCreditsExperiment,
   withOpenAiFreeCredits

package/dist/assets/{global-link-actions-CmKpJf6C.js → global-link-actions-BnYGl3Vl.js}

@@ -1,4 +1,4 @@
-import { C as createEventBus } from "./index-BgTszcKd.js";
+import { C as createEventBus } from "./index-RIkMj045.js";
 const globalLinkActionsEventBus = createEventBus();
 export {
   globalLinkActionsEventBus as g

package/dist/assets/{import-curl-Dm0tXAal.js → import-curl-Bkz3KGtP.js}

@@ -1,4 +1,4 @@
-import { C as createEventBus } from "./index-BgTszcKd.js";
+import { C as createEventBus } from "./index-RIkMj045.js";
 const importCurlEventBus = createEventBus();
 export {
   importCurlEventBus as i