n8n-editor-ui 1.78.0 → 1.80.0

package/dist/assets/{ResourcesListLayout-D2ZxA1Uw.js → ResourcesListLayout-D9faOv_l.js}

@@ -1,16 +1,4 @@
-import { hR as arrayMap, hS as getAllKeysIn, hT as baseIteratee, hU as basePickBy, _ as _export_sfc, c as openBlock, h as createElementBlock, s as renderSlot, j as createBaseVNode, n as normalizeClass, d as defineComponent, f as createCommentVNode, r as ref, a1 as useProjectsStore, q as computed, H as watch, aw as onBeforeMount, e as createBlock, w as withCtx, i as createVNode, ax as withDirectives, ay as vShow, k as createTextVNode, t as toDisplayString, l as unref, a8 as EnterpriseEditionFeature, hV as ProjectSharing, g as useI18n, m as resolveComponent, U as useRoute, J as useDebounce, u as useUsersStore, o as onMounted, y as nextTick, aZ as normalizeProps, a_ as guardReactiveProps, F as Fragment, A as renderList, aj as useTelemetry } from "./index-BwoviwZU.js";
-function pickBy(object, predicate) {
-  if (object == null) {
-    return {};
-  }
-  var props = arrayMap(getAllKeysIn(object), function(prop) {
-    return [prop];
-  });
-  predicate = baseIteratee(predicate);
-  return basePickBy(object, props, function(value, path) {
-    return predicate(value, path[0]);
-  });
-}
+import { _ as _export_sfc, c as openBlock, h as createElementBlock, s as renderSlot, j as createBaseVNode, n as normalizeClass, d as defineComponent, f as createCommentVNode, a1 as useProjectsStore, q as computed, H as watch, aw as onBeforeMount, e as createBlock, w as withCtx, i as createVNode, ax as withDirectives, ay as vShow, k as createTextVNode, t as toDisplayString, l as unref, a8 as EnterpriseEditionFeature, hT as ProjectSharing, g as useI18n, m as resolveComponent, U as useRoute, b as useRouter, J as useDebounce, u as useUsersStore, r as ref, o as onMounted, y as nextTick, aZ as normalizeProps, a_ as guardReactiveProps, F as Fragment, A as renderList, aj as useTelemetry } from "./index-RIkMj045.js";
 const wrapper$1 = "_wrapper_1x8n3_123";
 const content = "_content_1x8n3_139";
 const style0$3 = {
@@ -90,9 +78,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const selectedProject = ref(null);
     const projectsStore = useProjectsStore();
     const i18n = useI18n();
+    const selectedProject = computed({
+      get: () => {
+        return projectsStore.availableProjects.find(
+          (project) => project.id === props.modelValue.homeProject
+        ) ?? null;
+      },
+      set: (value) => setKeyValue("homeProject", value?.id ?? "")
+    });
     const filtersLength = computed(() => {
       let length = 0;
       props.keys.forEach((key) => {
@@ -137,9 +132,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     onBeforeMount(async () => {
       await projectsStore.getAvailableProjects();
-      selectedProject.value = projectsStore.availableProjects.find(
-        (project) => project.id === props.modelValue.homeProject
-      ) ?? null;
     });
     return (_ctx, _cache) => {
       const _component_n8n_badge = resolveComponent("n8n-badge");
@@ -164,6 +156,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               withDirectives(createVNode(_component_n8n_badge, {
                 class: normalizeClass(_ctx.$style["filter-button-count"]),
+                "data-test-id": "resources-list-filters-count",
                 theme: "primary"
               }, {
                 default: withCtx(() => [
@@ -252,6 +245,10 @@ const _hoisted_3 = {
   key: 0,
   class: "mt-xs"
 };
+const _hoisted_4 = {
+  key: 0,
+  class: "resource-list-loading"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ResourcesListLayout",
   props: {
@@ -267,30 +264,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showFiltersDropdown: { type: Boolean, default: true },
     sortFns: { default: () => ({}) },
     sortOptions: { default: () => ["lastUpdated", "lastCreated", "nameAsc", "nameDesc"] },
-    type: { default: "list" },
+    type: { default: "list-full" },
     typeProps: { default: () => ({ itemSize: 80 }) },
-    loading: { type: Boolean, default: true }
+    loading: { type: Boolean, default: true },
+    customPageSize: { default: 25 },
+    availablePageSizeOptions: { default: () => [10, 25, 50, 100] },
+    totalItems: { default: 0 },
+    resourcesRefreshing: { type: Boolean, default: false },
+    dontPerformSortingAndFiltering: { type: Boolean, default: false }
   },
-  emits: ["update:filters", "click:add", "sort"],
+  emits: ["update:filters", "click:add", "update:current-page", "update:page-size", "sort", "update:search"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
     const route = useRoute();
+    const router = useRouter();
     const i18n = useI18n();
     const { callDebounced } = useDebounce();
     const usersStore = useUsersStore();
     const telemetry = useTelemetry();
+    const props = __props;
     const sortBy = ref(props.sortOptions[0]);
     const hasFilters = ref(false);
-    const filtersModel = ref(props.filters);
     const currentPage = ref(1);
-    const rowsPerPage = ref(25);
+    const rowsPerPage = ref(props.customPageSize);
     const resettingFilters = ref(false);
     const search2 = ref(null);
+    const emit = __emit;
+    const filtersModel = computed({
+      get: () => props.filters,
+      set: (newValue) => emit("update:filters", newValue)
+    });
+    const showEmptyState = computed(() => {
+      return props.resources.length === 0 && // Don't show empty state if resources are refreshing or if filters are being set
+      !hasFilters.value && !filtersModel.value.search && !props.resourcesRefreshing;
+    });
     const filterKeys = computed(() => {
       return Object.keys(filtersModel.value);
     });
     const filteredAndSortedResources = computed(() => {
+      if (props.dontPerformSortingAndFiltering) {
+        return props.resources;
+      }
       const filtered = props.resources.filter((resource) => {
         let matches = true;
         if (filtersModel.value.homeProject) {
@@ -320,6 +333,78 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     });
+    watch(
+      () => props.filters,
+      (value) => {
+        filtersModel.value = value;
+        if (hasAppliedFilters()) {
+          hasFilters.value = true;
+        }
+      }
+    );
+    watch(
+      () => filtersModel.value.homeProject,
+      () => {
+        sendFiltersTelemetry("homeProject");
+      }
+    );
+    watch(
+      () => filtersModel.value.tags,
+      () => {
+        sendFiltersTelemetry("tags");
+      }
+    );
+    watch(
+      () => filtersModel.value.type,
+      () => {
+        sendFiltersTelemetry("type");
+      }
+    );
+    watch(
+      () => filtersModel.value.search,
+      () => callDebounced(sendFiltersTelemetry, { debounceTime: 1e3, trailing: true }, "search")
+    );
+    watch(
+      () => filtersModel.value.setupNeeded,
+      () => {
+        sendFiltersTelemetry("setupNeeded");
+      }
+    );
+    watch(
+      () => filtersModel.value.incomplete,
+      () => {
+        sendFiltersTelemetry("incomplete");
+      }
+    );
+    watch(
+      () => sortBy.value,
+      (newValue) => {
+        emit("sort", newValue);
+        sendSortingTelemetry();
+      }
+    );
+    watch(
+      () => route?.params?.projectId,
+      async () => {
+        await resetFilters();
+      }
+    );
+    watch(
+      () => props.resources,
+      async () => {
+        await nextTick();
+        focusSearchInput();
+      }
+    );
+    onMounted(async () => {
+      await loadPaginationFromQueryString();
+      await props.initialize();
+      await nextTick();
+      focusSearchInput();
+      if (hasAppliedFilters()) {
+        hasFilters.value = true;
+      }
+    });
     const focusSearchInput = () => {
       if (search2.value) {
         search2.value.focus();
@@ -337,11 +422,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return props.filters[key] !== "";
       });
     };
-    const setRowsPerPage = (numberOfRowsPerPage) => {
+    const setRowsPerPage = async (numberOfRowsPerPage) => {
       rowsPerPage.value = numberOfRowsPerPage;
+      await savePaginationToQueryString();
+      emit("update:page-size", numberOfRowsPerPage);
     };
-    const setCurrentPage = (page) => {
+    const setCurrentPage = async (page) => {
       currentPage.value = page;
+      await savePaginationToQueryString();
+      emit("update:current-page", page);
     };
     __expose({
       currentPage,
@@ -376,11 +465,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onUpdateFilters = (e) => {
       emit("update:filters", e);
     };
-    const resetFilters = () => {
+    const resetFilters = async () => {
       Object.keys(filtersModel.value).forEach((key) => {
         filtersModel.value[key] = Array.isArray(filtersModel.value[key]) ? [] : "";
       });
+      await setCurrentPage(1);
       resettingFilters.value = true;
+      hasFilters.value = false;
       sendFiltersTelemetry("reset");
       emit("update:filters", filtersModel.value);
     };
@@ -406,69 +497,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const onSearch = (s) => {
       filtersModel.value.search = s;
-      emit("update:filters", filtersModel.value);
+      emit("update:search", s);
     };
-    watch(
-      () => props.filters,
-      (value) => {
-        filtersModel.value = value;
-      }
-    );
-    watch(
-      () => filtersModel.value.homeProject,
-      () => {
-        sendFiltersTelemetry("homeProject");
-      }
-    );
-    watch(
-      () => filtersModel.value.tags,
-      () => {
-        sendFiltersTelemetry("tags");
+    const findNearestPageSize = (size) => {
+      return props.availablePageSizeOptions.reduce(
+        (prev, curr) => Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev
+      );
+    };
+    const savePaginationToQueryString = async () => {
+      if (props.type !== "list-paginated") {
+        return;
       }
-    );
-    watch(
-      () => filtersModel.value.type,
-      () => {
-        sendFiltersTelemetry("type");
+      const currentQuery = { ...route.query };
+      if (currentPage.value !== 1) {
+        currentQuery.page = currentPage.value.toString();
+      } else {
+        delete currentQuery.page;
       }
-    );
-    watch(
-      () => filtersModel.value.search,
-      () => callDebounced(sendFiltersTelemetry, { debounceTime: 1e3, trailing: true }, "search")
-    );
-    watch(
-      () => filtersModel.value.setupNeeded,
-      () => {
-        sendFiltersTelemetry("setupNeeded");
+      if (rowsPerPage.value !== props.customPageSize) {
+        currentQuery.pageSize = rowsPerPage.value.toString();
+      } else {
+        delete currentQuery.pageSize;
       }
-    );
-    watch(
-      () => filtersModel.value.incomplete,
-      () => {
-        sendFiltersTelemetry("incomplete");
+      await router.replace({
+        query: Object.keys(currentQuery).length ? currentQuery : void 0
+      });
+    };
+    const loadPaginationFromQueryString = async () => {
+      if (props.type !== "list-paginated") {
+        return;
       }
-    );
-    watch(
-      () => sortBy.value,
-      (newValue) => {
-        emit("sort", newValue);
-        sendSortingTelemetry();
+      const query = router.currentRoute.value.query;
+      if (query.page) {
+        await setCurrentPage(parseInt(query.page, 10));
       }
-    );
-    watch(
-      () => route?.params?.projectId,
-      () => {
-        resetFilters();
+      if (query.pageSize) {
+        const parsedSize = parseInt(query.pageSize, 10);
+        await setRowsPerPage(findNearestPageSize(parsedSize));
       }
-    );
-    onMounted(async () => {
-      await props.initialize();
-      await nextTick();
-      focusSearchInput();
-      if (hasAppliedFilters()) {
-        hasFilters.value = true;
+      if (query.sort) {
+        sortBy.value = query.sort;
       }
-    });
+    };
     return (_ctx, _cache) => {
       const _component_n8n_loading = resolveComponent("n8n-loading");
       const _component_n8n_action_box = resolveComponent("n8n-action-box");
@@ -479,6 +549,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_n8n_link = resolveComponent("n8n-link");
       const _component_n8n_info_tip = resolveComponent("n8n-info-tip");
       const _component_n8n_recycle_scroller = resolveComponent("n8n-recycle-scroller");
+      const _component_el_pagination = resolveComponent("el-pagination");
       const _component_n8n_datatable = resolveComponent("n8n-datatable");
       const _component_n8n_text = resolveComponent("n8n-text");
       return openBlock(), createBlock(PageViewLayout, null, {
@@ -492,7 +563,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "shrink-last": false
             })
           ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            _ctx.resources.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            showEmptyState.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
                 createVNode(_component_n8n_action_box, {
                   "data-test-id": "empty-resources-list",
@@ -597,16 +668,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ], 512)), [
                   [vShow, hasFilters.value]
                 ]) : createCommentVNode("", true),
-                _cache[1] || (_cache[1] = createBaseVNode("div", { class: "pb-xs" }, null, -1))
+                _cache[3] || (_cache[3] = createBaseVNode("div", { class: "pb-xs" }, null, -1))
               ]),
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "preamble", {}, void 0, true),
-                filteredAndSortedResources.value.length > 0 ? (openBlock(), createElementBlock("div", {
-                  key: 0,
+                _ctx.resourcesRefreshing ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  createVNode(_component_n8n_loading, {
+                    rows: rowsPerPage.value,
+                    "shrink-last": false
+                  }, null, 8, ["rows"])
+                ])) : filteredAndSortedResources.value.length > 0 ? (openBlock(), createElementBlock("div", {
+                  key: 1,
                   ref: "listWrapperRef",
+                  "data-test-id": "resources-list-wrapper",
                   class: normalizeClass(_ctx.$style.listWrapper)
                 }, [
-                  _ctx.type === "list" ? (openBlock(), createBlock(_component_n8n_recycle_scroller, {
+                  _ctx.type === "list-full" ? (openBlock(), createBlock(_component_n8n_recycle_scroller, {
                     key: 0,
                     "data-test-id": "resources-list",
                     items: filteredAndSortedResources.value,
@@ -620,9 +697,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, void 0, true)
                     ]),
                     _: 3
-                  }, 8, ["items", "item-size"])) : createCommentVNode("", true),
-                  _ctx.type === "datatable" ? (openBlock(), createBlock(_component_n8n_datatable, {
+                  }, 8, ["items", "item-size"])) : _ctx.type === "list-paginated" ? (openBlock(), createElementBlock("div", {
                     key: 1,
+                    class: normalizeClass(_ctx.$style.paginatedListWrapper)
+                  }, [
+                    createBaseVNode("div", {
+                      class: normalizeClass(_ctx.$style.listItems)
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.resources, (item, index) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: index,
+                          class: normalizeClass(_ctx.$style.listItem)
+                        }, [
+                          renderSlot(_ctx.$slots, "item", {
+                            item,
+                            index
+                          }, () => [
+                            createTextVNode(toDisplayString(item), 1)
+                          ], true)
+                        ], 2);
+                      }), 128))
+                    ], 2),
+                    createBaseVNode("div", {
+                      class: normalizeClass(_ctx.$style.listPagination)
+                    }, [
+                      createVNode(_component_el_pagination, {
+                        "current-page": currentPage.value,
+                        "onUpdate:currentPage": [
+                          _cache[1] || (_cache[1] = ($event) => currentPage.value = $event),
+                          setCurrentPage
+                        ],
+                        "page-size": rowsPerPage.value,
+                        "onUpdate:pageSize": _cache[2] || (_cache[2] = ($event) => rowsPerPage.value = $event),
+                        background: "",
+                        total: _ctx.totalItems,
+                        "page-sizes": _ctx.availablePageSizeOptions,
+                        layout: "total, prev, pager, next, sizes",
+                        "data-test-id": "resources-list-pagination",
+                        onSizeChange: setRowsPerPage
+                      }, null, 8, ["current-page", "page-size", "total", "page-sizes"])
+                    ], 2)
+                  ], 2)) : createCommentVNode("", true),
+                  _ctx.type === "datatable" ? (openBlock(), createBlock(_component_n8n_datatable, {
+                    key: 2,
                     "data-test-id": "resources-table",
                     class: normalizeClass(_ctx.$style.datatable),
                     columns: getColumns(),
@@ -641,7 +758,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     _: 3
                   }, 8, ["class", "columns", "rows", "current-page", "rows-per-page"])) : createCommentVNode("", true)
                 ], 2)) : (openBlock(), createBlock(_component_n8n_text, {
-                  key: 1,
+                  key: 2,
                   color: "text-base",
                   size: "medium",
                   "data-test-id": "resources-list-empty"
@@ -662,23 +779,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const filters = "_filters_12sb3_123";
-const search = "_search_12sb3_149";
-const listWrapper = "_listWrapper_12sb3_158";
-const datatable = "_datatable_12sb3_173";
+const filters = "_filters_1mm9j_123";
+const search = "_search_1mm9j_149";
+const listWrapper = "_listWrapper_1mm9j_158";
+const paginatedListWrapper = "_paginatedListWrapper_1mm9j_164";
+const listPagination = "_listPagination_1mm9j_172";
+const datatable = "_datatable_1mm9j_199";
 const style0 = {
-  "filters-row": "_filters-row_12sb3_123",
+  "filters-row": "_filters-row_1mm9j_123",
   filters,
   search,
   listWrapper,
-  "sort-and-filter": "_sort-and-filter_12sb3_164",
+  paginatedListWrapper,
+  listPagination,
+  "sort-and-filter": "_sort-and-filter_1mm9j_190",
   datatable
 };
 const cssModules = {
   "$style": style0
 };
-const ResourcesListLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-a1cfe06a"]]);
+const ResourcesListLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-62487419"]]);
 export {
-  ResourcesListLayout as R,
-  pickBy as p
+  ResourcesListLayout as R
 };

package/dist/assets/{ResourcesListLayout-CvrwoZYS.css → ResourcesListLayout-uz7NOpr0.css}

@@ -546,14 +546,14 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._filters-row_12sb3_123 {
+._filters-row_1mm9j_123 {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-._filters_12sb3_123 {
+._filters_1mm9j_123 {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -562,36 +562,60 @@
   width: 100%;
 }
 @media screen and (max-width: 767px) {
-._filters_12sb3_123 {
+._filters_1mm9j_123 {
     grid-template-columns: 1fr auto;
     grid-auto-flow: row;
 }
-._filters_12sb3_123 > *:last-child {
+._filters_1mm9j_123 > *:last-child {
     grid-column: auto;
 }
 }
-._search_12sb3_149 {
+._search_1mm9j_149 {
   max-width: 240px;
 }
 @media screen and (max-width: 991px) {
-._search_12sb3_149 {
+._search_1mm9j_149 {
     max-width: 100%;
 }
 }
-._listWrapper_12sb3_158 {
+._listWrapper_1mm9j_158 {
   position: absolute;
   height: 100%;
   width: 100%;
 }
-._sort-and-filter_12sb3_164 {
+._paginatedListWrapper_1mm9j_164 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+  gap: var(--spacing-m);
+}
+._listPagination_1mm9j_172 {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--spacing-l);
+}
+._listPagination_1mm9j_172 .el-pagination__sizes {
+  height: 100%;
+  position: relative;
+  top: -1px;
+}
+._listPagination_1mm9j_172 .el-pagination__sizes input {
+  height: 100%;
+  min-height: 28px;
+}
+._listPagination_1mm9j_172 .el-pagination__sizes .el-input__suffix {
+  width: var(--spacing-m);
+}
+._sort-and-filter_1mm9j_190 {
   white-space: nowrap;
 }
 @media screen and (max-width: 991px) {
-._sort-and-filter_12sb3_164 {
+._sort-and-filter_1mm9j_190 {
     width: 100%;
 }
 }
-._datatable_12sb3_173 {
+._datatable_1mm9j_199 {
   padding-bottom: var(--spacing-s);
 }/* BEM support Func
  -------------------------- */
@@ -715,7 +739,7 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-.resource-list-loading[data-v-a1cfe06a] {
+.resource-list-loading[data-v-62487419] {
   position: relative;
   height: 0;
   width: 100%;
@@ -723,22 +747,22 @@
   /*
   Show the loading skeleton only if the loading takes longer than 300ms
   */
-  animation: 0.01s linear 0.3s forwards changeVisibility-a1cfe06a;
+  animation: 0.01s linear 0.3s forwards changeVisibility-62487419;
 }
-.resource-list-loading[data-v-a1cfe06a] .el-skeleton {
+.resource-list-loading[data-v-62487419] .el-skeleton {
   position: absolute;
   height: 100%;
   width: 100%;
   overflow: hidden;
 }
-.resource-list-loading[data-v-a1cfe06a] .el-skeleton > div > div:first-child .el-skeleton__item {
+.resource-list-loading[data-v-62487419] .el-skeleton > div > div:first-child .el-skeleton__item {
   height: 42px;
   margin: 0;
 }
-.resource-list-loading[data-v-a1cfe06a] .el-skeleton .el-skeleton__item {
+.resource-list-loading[data-v-62487419] .el-skeleton .el-skeleton__item {
   height: 69px;
 }
-@keyframes changeVisibility-a1cfe06a {
+@keyframes changeVisibility-62487419 {
 from {
     height: 0;
 }