mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Migrate debounce mixin to useDebounce composable (no-changelog) (#8244)

Browse Source
This commit is contained in:
Alex Grozav
2024-01-08 14:00:49 +02:00
committed by GitHub
parent 8affdf680d
commit 8c8caac4e8
19 changed files with 136 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/editor-ui/src/components/BreakpointsObserver.vue
View File

@@ -17,14 +17,17 @@ import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/co
* xl >= 1920
*/
import { debounceHelper } from '@/mixins/debounce';
import { useUIStore } from '@/stores/ui.store';
import { getBannerRowHeight } from '@/utils/htmlUtils';
import { useDebounce } from '@/composables/useDebounce';
export default defineComponent({
name: 'BreakpointsObserver',
mixins: [debounceHelper],
props: ['valueXS', 'valueXL', 'valueLG', 'valueMD', 'valueSM', 'valueDefault'],
setup() {
const { callDebounced } = useDebounce();
return { callDebounced };
},
data() {
return {
width: window.innerWidth,
@@ -83,7 +86,7 @@ export default defineComponent({
},
methods: {
onResize() {
void this.callDebounced('onResizeEnd', { debounceTime: 50 });
void this.callDebounced(this.onResizeEnd, { debounceTime: 50 });
},
async onResizeEnd() {
this.width = window.innerWidth;

9
packages/editor-ui/src/components/ExecutionFilter.vue
View File

@@ -1,6 +1,5 @@
<script lang="ts" setup>
import { computed, reactive, onBeforeMount, ref } from 'vue';
import debounce from 'lodash/debounce';
import type {
ExecutionFilterType,
ExecutionFilterMetadata,
@@ -11,10 +10,10 @@ import TagsDropdown from '@/components/TagsDropdown.vue';
import { getObjectKeys, isEmpty } from '@/utils/typesUtils';
import { EnterpriseEditionFeature } from '@/constants';
import { useSettingsStore } from '@/stores/settings.store';
import { useUsageStore } from '@/stores/usage.store';
import { useUIStore } from '@/stores/ui.store';
import { useTelemetry } from '@/composables/useTelemetry';
import type { Placement } from '@floating-ui/core';
import { useDebounce } from '@/composables/useDebounce';
export type ExecutionFilterProps = {
workflows?: IWorkflowShortResponse[];
@@ -25,8 +24,8 @@ export type ExecutionFilterProps = {
const DATE_TIME_MASK = 'YYYY-MM-DD HH:mm';
const settingsStore = useSettingsStore();
const usageStore = useUsageStore();
const uiStore = useUIStore();
const { debounce } = useDebounce();
const telemetry = useTelemetry();
@@ -37,7 +36,9 @@ const props = withDefaults(defineProps<ExecutionFilterProps>(), {
const emit = defineEmits<{
(event: 'filterChanged', value: ExecutionFilterType): void;
}>();
const debouncedEmit = debounce(emit, 500);
const debouncedEmit = debounce(emit, {
debounceTime: 500,
});
const isCustomDataFilterTracked = ref(false);
const isAdvancedExecutionFilterEnabled = computed(() =>

8
packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
View File

@@ -58,7 +58,6 @@ import { v4 as uuid } from 'uuid';
import type { Route } from 'vue-router';
import { executionHelpers } from '@/mixins/executionsHelpers';
import { range as _range } from 'lodash-es';
import { debounceHelper } from '@/mixins/debounce';
import { NO_NETWORK_ERROR_CODE } from '@/utils/apiUtils';
import { getNodeViewTab } from '@/utils/canvasUtils';
import { workflowHelpers } from '@/mixins/workflowHelpers';
@@ -69,6 +68,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useTagsStore } from '@/stores/tags.store';
import { executionFilterToQueryFilter } from '@/utils/executionUtils';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useDebounce } from '@/composables/useDebounce';
// Number of execution pages that are fetched before temporary execution card is shown
const MAX_LOADING_ATTEMPTS = 5;
@@ -80,12 +80,14 @@ export default defineComponent({
components: {
ExecutionsSidebar,
},
mixins: [executionHelpers, debounceHelper, workflowHelpers],
mixins: [executionHelpers, workflowHelpers],
setup() {
const externalHooks = useExternalHooks();
const { callDebounced } = useDebounce();
return {
externalHooks,
callDebounced,
...useToast(),
...useMessage(),
};
@@ -231,7 +233,7 @@ export default defineComponent({
},
async onLoadMore(): Promise<void> {
if (!this.loadingMore) {
await this.callDebounced('loadMore', { debounceTime: 1000 });
await this.callDebounced(this.loadMore, { debounceTime: 1000 });
}
},
async loadMore(limit = 20): Promise<void> {

9
packages/editor-ui/src/components/ExpressionEdit.vue
View File

@@ -89,11 +89,11 @@ import type { IVariableItemSelected } from '@/Interface';
import { EXPRESSIONS_DOCS_URL } from '@/constants';
import { debounceHelper } from '@/mixins/debounce';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
import { useDebounce } from '@/composables/useDebounce';
import type { Segment } from '@/types/expressions';
@@ -104,7 +104,6 @@ export default defineComponent({
ExpressionEditorModalOutput,
VariableSelector,
},
mixins: [debounceHelper],
props: {
dialogVisible: {
type: Boolean,
@@ -137,8 +136,10 @@ export default defineComponent({
},
setup() {
const externalHooks = useExternalHooks();
const { callDebounced } = useDebounce();
return {
callDebounced,
externalHooks,
};
},
@@ -194,7 +195,9 @@ export default defineComponent({
this.updateDisplayValue();
this.$emit('update:modelValue', this.latestValue);
} else {
void this.callDebounced('updateDisplayValue', { debounceTime: 500 });
void this.callDebounced(this.updateDisplayValue, {
debounceTime: 500,
});
}
},

4
packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
View File

@@ -18,7 +18,7 @@ import {
DEFAULT_OPERATOR_VALUE,
} from './constants';
import { useI18n } from '@/composables/useI18n';
import { useDebounceHelper } from '@/composables/useDebounce';
import { useDebounce } from '@/composables/useDebounce';
import Condition from './Condition.vue';
import CombinatorSelect from './CombinatorSelect.vue';
import { resolveParameter } from '@/mixins/workflowHelpers';
@@ -39,7 +39,7 @@ const emit = defineEmits<{
const i18n = useI18n();
const ndvStore = useNDVStore();
const { callDebounced } = useDebounceHelper();
const { callDebounced } = useDebounce();
function createCondition(): FilterConditionValue {
return { id: uuid(), leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR_VALUE };

8
packages/editor-ui/src/components/MainSidebar.vue
View File

@@ -107,7 +107,6 @@ import GiftNotificationIcon from './GiftNotificationIcon.vue';
import { useMessage } from '@/composables/useMessage';
import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
import { userHelpers } from '@/mixins/userHelpers';
import { debounceHelper } from '@/mixins/debounce';
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useCloudPlanStore } from '@/stores/cloudPlan.store';
@@ -123,6 +122,7 @@ import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
import MainSidebarSourceControl from '@/components/MainSidebarSourceControl.vue';
import { hasPermission } from '@/rbac/permissions';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useDebounce } from '@/composables/useDebounce';
export default defineComponent({
name: 'MainSidebar',
@@ -131,12 +131,14 @@ export default defineComponent({
ExecutionsUsage,
MainSidebarSourceControl,
},
mixins: [userHelpers, debounceHelper],
mixins: [userHelpers],
setup(props, ctx) {
const externalHooks = useExternalHooks();
const { callDebounced } = useDebounce();
return {
externalHooks,
callDebounced,
...useMessage(),
};
},
@@ -497,7 +499,7 @@ export default defineComponent({
return defaultSettingsRoute;
},
onResize(event: UIEvent) {
void this.callDebounced('onResizeEnd', { debounceTime: 100 }, event);
void this.callDebounced(this.onResizeEnd, { debounceTime: 100 }, event);
},
async onResizeEnd(event: UIEvent) {
const browserWidth = (event.target as Window).outerWidth;

10
packages/editor-ui/src/components/NDVDraggablePanels.vue
View File

@@ -53,10 +53,10 @@ import type { INodeTypeDescription } from 'n8n-workflow';
import PanelDragButton from './PanelDragButton.vue';
import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '@/constants';
import { debounceHelper } from '@/mixins/debounce';
import { useNDVStore } from '@/stores/ndv.store';
import { ndvEventBus } from '@/event-bus';
import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue';
import { useDebounce } from '@/composables/useDebounce';
const SIDE_MARGIN = 24;
const SIDE_PANELS_MARGIN = 80;
@@ -78,7 +78,6 @@ export default defineComponent({
PanelDragButton,
NDVFloatingNodes,
},
mixins: [debounceHelper],
props: {
isDraggable: {
type: Boolean,
@@ -94,6 +93,11 @@ export default defineComponent({
default: () => ({}),
},
},
setup() {
const { callDebounced } = useDebounce();
return { callDebounced };
},
data(): {
windowWidth: number;
isDragging: boolean;
@@ -343,7 +347,7 @@ export default defineComponent({
},
onResizeDebounced(data: { direction: string; x: number; width: number }) {
if (this.initialized) {
void this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data);
void this.callDebounced(this.onResize, { debounceTime: 10, trailing: true }, data);
}
},
onResize({ direction, x, width }: { direction: string; x: number; width: number }) {

9
packages/editor-ui/src/components/Node.vue
View File

@@ -176,7 +176,6 @@ import TitledList from '@/components/TitledList.vue';
import { get } from 'lodash-es';
import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
import type { INodeUi, XYPosition } from '@/Interface';
import { debounceHelper } from '@/mixins/debounce';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
@@ -187,6 +186,7 @@ import { type ContextMenuTarget, useContextMenu } from '@/composables/useContext
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { usePinnedData } from '@/composables/usePinnedData';
import { useDebounce } from '@/composables/useDebounce';
export default defineComponent({
name: 'Node',
@@ -195,7 +195,7 @@ export default defineComponent({
FontAwesomeIcon,
NodeIcon,
},
mixins: [nodeBase, workflowHelpers, debounceHelper],
mixins: [nodeBase, workflowHelpers],
props: {
isProductionExecutionPreview: {
type: Boolean,
@@ -217,8 +217,9 @@ export default defineComponent({
const nodeHelpers = useNodeHelpers();
const node = workflowsStore.getNodeByName(props.name);
const pinnedData = usePinnedData(node);
const { callDebounced } = useDebounce();
return { contextMenu, externalHooks, nodeHelpers, pinnedData };
return { contextMenu, externalHooks, nodeHelpers, pinnedData, callDebounced };
},
computed: {
...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
@@ -679,7 +680,7 @@ export default defineComponent({
},
onClick(event: MouseEvent) {
void this.callDebounced('onClickDebounced', { debounceTime: 50, trailing: true }, event);
void this.callDebounced(this.onClickDebounced, { debounceTime: 50, trailing: true }, event);
},
onClickDebounced(event: MouseEvent) {

8
packages/editor-ui/src/components/ParameterInput.vue
View File

@@ -508,7 +508,6 @@ import { isResourceLocatorValue } from '@/utils/typeGuards';
import { CUSTOM_API_CALL_KEY, HTML_NODE_TYPE, NODES_USING_CODE_NODE_EDITOR } from '@/constants';
import type { PropType } from 'vue';
import { debounceHelper } from '@/mixins/debounce';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -522,6 +521,7 @@ import { useI18n } from '@/composables/useI18n';
import type { N8nInput } from 'n8n-design-system';
import { isCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useDebounce } from '@/composables/useDebounce';
type Picker = { $emit: (arg0: string, arg1: Date) => void };
@@ -540,7 +540,7 @@ export default defineComponent({
ResourceLocator,
TextEdit,
},
mixins: [workflowHelpers, debounceHelper],
mixins: [workflowHelpers],
props: {
additionalExpressionData: {
type: Object as PropType<IDataObject>,
@@ -612,11 +612,13 @@ export default defineComponent({
const externalHooks = useExternalHooks();
const i18n = useI18n();
const nodeHelpers = useNodeHelpers();
const { callDebounced } = useDebounce();
return {
externalHooks,
i18n,
nodeHelpers,
callDebounced,
};
},
data() {
@@ -1243,7 +1245,7 @@ export default defineComponent({
this.$emit('textInput', parameterData);
},
valueChangedDebounced(value: NodeParameterValueType | {} | Date) {
void this.callDebounced('valueChanged', { debounceTime: 100 }, value);
void this.callDebounced(this.valueChanged, { debounceTime: 100 }, value);
},
onUpdateTextInput(value: string) {
this.valueChanged(value);

14
packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
View File

@@ -148,7 +148,6 @@ import type { IResourceLocatorReqParams, IResourceLocatorResultExpanded } from '
import DraggableTarget from '@/components/DraggableTarget.vue';
import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue';
import ParameterIssues from '@/components/ParameterIssues.vue';
import { debounceHelper } from '@/mixins/debounce';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import { useRootStore } from '@/stores/n8nRoot.store';
import { useNDVStore } from '@/stores/ndv.store';
@@ -174,6 +173,7 @@ import { mapStores } from 'pinia';
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
import { useDebounce } from '@/composables/useDebounce';
interface IResourceLocatorQuery {
results: INodeListSearchItems[];
@@ -190,7 +190,7 @@ export default defineComponent({
ParameterIssues,
ResourceLocatorDropdown,
},
mixins: [debounceHelper, workflowHelpers],
mixins: [workflowHelpers],
props: {
parameter: {
type: Object as PropType<INodeProperties>,
@@ -267,6 +267,11 @@ export default defineComponent({
width: 0,
};
},
setup() {
const { callDebounced } = useDebounce();
return { callDebounced };
},
computed: {
...mapStores(useNodeTypesStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
appName(): string {
@@ -636,7 +641,10 @@ export default defineComponent({
}
},
loadResourcesDebounced() {
void this.callDebounced('loadResources', { debounceTime: 1000, trailing: true });
void this.callDebounced(this.loadResources, {
debounceTime: 1000,
trailing: true,
});
},
setResponse(paramsKey: string, props: Partial<IResourceLocatorQuery>) {
this.cachedResponses = {

7
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View File

@@ -191,13 +191,13 @@ import type { IUser } from '@/Interface';
import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
import { EnterpriseEditionFeature } from '@/constants';
import { debounceHelper } from '@/mixins/debounce';
import ResourceOwnershipSelect from '@/components/forms/ResourceOwnershipSelect.ee.vue';
import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
import { useSettingsStore } from '@/stores/settings.store';
import { useUsersStore } from '@/stores/users.store';
import type { N8nInput, DatatableColumn } from 'n8n-design-system';
import { useI18n } from '@/composables/useI18n';
import { useDebounce } from '@/composables/useDebounce';
export interface IResource {
id: string;
@@ -227,7 +227,6 @@ export default defineComponent({
ResourceOwnershipSelect,
ResourceFiltersDropdown,
},
mixins: [debounceHelper],
props: {
resourceKey: {
type: String,
@@ -289,9 +288,11 @@ export default defineComponent({
},
setup() {
const i18n = useI18n();
const { callDebounced } = useDebounce();
return {
i18n,
callDebounced,
};
},
data() {
@@ -406,7 +407,7 @@ export default defineComponent({
},
'filtersModel.search'() {
void this.callDebounced(
'sendFiltersTelemetry',
this.sendFiltersTelemetry,
{ debounceTime: 1000, trailing: true },
'search',
);