perf(editor): Prevent excessive fetch requests from workflows list (no-changelog) (#14093)

This commit is contained in:
Milorad FIlipović
2025-03-21 11:23:14 +01:00
committed by GitHub
parent ced8bcdd0c
commit 7e8179b848

View File

@@ -62,6 +62,9 @@ import { useFoldersStore } from '@/stores/folders.store';
import { useFolders } from '@/composables/useFolders';
import { useUsageStore } from '@/stores/usage.store';
const SEARCH_DEBOUNCE_TIME = 300;
const FILTERS_DEBOUNCE_TIME = 100;
interface Filters extends BaseFilters {
status: string | boolean;
tags: string[];
@@ -348,6 +351,13 @@ sourceControlStore.$onAction(({ name, after }) => {
after(async () => await initialize());
});
const onWorkflowDeleted = async () => {
await Promise.all([
fetchWorkflows(),
foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId as string | undefined),
]);
};
const onFolderDeleted = async (payload: {
folderId: string;
workflowCount: number;
@@ -356,6 +366,9 @@ const onFolderDeleted = async (payload: {
const folderInfo = foldersStore.getCachedFolder(payload.folderId);
foldersStore.deleteFoldersFromCache([payload.folderId, folderInfo?.parentFolder ?? '']);
// If the deleted folder is the current folder, navigate to the parent folder
await foldersStore.fetchTotalWorkflowsAndFoldersCount(
route.params.projectId as string | undefined,
);
if (currentFolderId.value === payload.folderId) {
void router.push({
@@ -410,6 +423,7 @@ const initialize = async () => {
fetchWorkflows(),
workflowsStore.fetchActiveWorkflows(),
usageStore.getLicenseInfo(),
foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId as string | undefined),
]);
breadcrumbsLoading.value = false;
workflowsAndFolders.value = resourcesPage;
@@ -428,6 +442,7 @@ const fetchWorkflows = async () => {
const delayedLoading = debounce(() => {
loading.value = true;
}, 300);
const routeProjectId = route.params?.projectId as string | undefined;
const homeProjectFilter = filters.value.homeProject || undefined;
const parentFolder = (route.params?.folderId as string) || undefined;
@@ -473,8 +488,6 @@ const fetchWorkflows = async () => {
breadcrumbsLoading.value = false;
}
await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId);
workflowsAndFolders.value = fetchedResources;
return fetchedResources;
} catch (error) {
@@ -507,14 +520,14 @@ const onSortUpdated = async (sort: string) => {
const onFiltersUpdated = async () => {
currentPage.value = 1;
saveFiltersOnQueryString();
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
};
const onSearchUpdated = async (search: string) => {
currentPage.value = 1;
saveFiltersOnQueryString();
if (search) {
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
await callDebounced(fetchWorkflows, { debounceTime: SEARCH_DEBOUNCE_TIME, trailing: true });
} else {
// No need to debounce when clearing search
await fetchWorkflows();
@@ -523,12 +536,12 @@ const onSearchUpdated = async (search: string) => {
const setCurrentPage = async (page: number) => {
currentPage.value = page;
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
};
const setPageSize = async (size: number) => {
pageSize.value = size;
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
};
const onClickTag = async (tagId: string) => {
@@ -1300,7 +1313,7 @@ const onCreateWorkflowClick = () => {
:workflow-list-event-bus="workflowListEventBus"
:read-only="readOnlyEnv"
@click:tag="onClickTag"
@workflow:deleted="fetchWorkflows"
@workflow:deleted="onWorkflowDeleted"
@workflow:moved="fetchWorkflows"
@workflow:duplicated="fetchWorkflows"
@workflow:active-toggle="onWorkflowActiveToggle"