Repository: n8n-io/n8n
File: packages/frontend/editor-ui/src/features/core/dataTable/DataTableView.vue (Vue)

Code before:
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { N8nActionBox } from '@n8n/design-system';
import ResourcesListLayout from '@/app/components/layouts/ResourcesListLayout.vue';

const i18n = useI18n();
const route = useRoute();
const router = useRouter();
const projectPages = useProjectPages();
const { callDebounced } = useDebounce();
const documentTitle = useDocumentTitle();
const toast = useToast();

const dataTableStore = useDataTableStore();
const insightsStore = useInsightsStore();
const projectsStore = useProjectsStore();
const sourceControlStore = useSourceControlStore();
const uiStore = useUIStore();

const loading = ref(true);

const currentPage = ref(1);
const pageSize = ref(DEFAULT_DATA_TABLE_PAGE_SIZE);

const SEARCH_DEBOUNCE_TIME = 300;

const filters = ref<BaseFilters>({
	search: '',
	homeProject: '',
});

const dataTableResources = computed<DataTableResource[]>(() =>
	dataTableStore.dataTables.map((ds) => {
		return {
			...ds,
			resourceType: 'dataTable',
		};
	}),
);

const totalCount = computed(() => dataTableStore.totalCount);

const currentProject = computed(() => {
	if (projectPages.isOverviewSubPage) {
		return projectsStore.personalProject;
	}
	return projectsStore.currentProject;
});

const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);

Review comment (suggestion):
It looks like we can use `getDebounceTime` from '@/app/constants/durations' to not hardcode it here: `getDebounceTime(DEBOUNCE_TIME.INPUT.SEARCH)`

Code after:
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { N8nActionBox } from '@n8n/design-system';
import ResourcesListLayout from '@/app/components/layouts/ResourcesListLayout.vue';
import { DEBOUNCE_TIME, getDebounceTime } from '@/app/constants';

const i18n = useI18n();
const route = useRoute();
const router = useRouter();
const projectPages = useProjectPages();
const { callDebounced } = useDebounce();
const documentTitle = useDocumentTitle();
const toast = useToast();

const dataTableStore = useDataTableStore();
const insightsStore = useInsightsStore();
const projectsStore = useProjectsStore();
const sourceControlStore = useSourceControlStore();
const uiStore = useUIStore();

const loading = ref(true);

const currentPage = ref(1);
const pageSize = ref(DEFAULT_DATA_TABLE_PAGE_SIZE);

const SEARCH_DEBOUNCE_TIME = getDebounceTime(DEBOUNCE_TIME.INPUT.SEARCH);
// Sorting by size involves potentially expensive extra DB queries so we
// disallow defaulting to these values
const PERSIST_KEY_EXCLUSIONS = ['sizeAsc', 'sizeDesc'] satisfies Array<
	keyof typeof DATA_TABLE_SORT_MAP
>;

const filters = ref<BaseFilters>({
	search: '',
	homeProject: '',
});

const dataTableResources = computed<DataTableResource[]>(() =>
	dataTableStore.dataTables.map((ds) => {
		return {
			...ds,
			resourceType: 'dataTable',
		};
	}),
);

const totalCount = computed(() => dataTableStore.totalCount);

const currentProject = computed(() => {
	if (projectPages.isOverviewSubPage) {