feat(editor): Enhance Node Creator actions view (#5954)

* WIP

* WIP

* Extract actions into composable

* WIP: Preserve categories when searching

* WIP

* WIP: Tweak styles

* WIP: Refactor node creator

* WIP: Finish Node Creator node view/subcategories refactor

* WIP: Finished actions refactor

* Cleanup & Lintfix

* WIP: Improve memory managment

* Fix interactions

* WIP

* WIP: Keyboard navigation

* Improve keyboard navigation and memory managment

* Finished view refactor

* FIx custom api calls and activation callouts

* Fix actions tracking and cleanup

* Product review fixes

* Telemetry fixes

* Fix node creator e2es

* Set action name font size and actionsEmpty font weight

* Fix failing credentials spec

* Make sure to select first action item when switching from nodes panel to actions panel

* Add actions panel e2e tests

* Cleanup

* Fix actions generation and cleanup

* Add correct Learn More link and adjust displaying of trigger icon

* Change trigger icon condition to use nodeType group

* Cleanup nodeTypesUtils and snapshots and lintfixes

* Lint fixes

* Refine logic to show trigger icon in node creator

* Add unit tests & clean up

* Add `003_auto_insert_action` experiment, hide empty sections for opposite root view

* Lintfix

* Do not show empty category tooltips and only show activation callout in triger root view

* Fix no-results node creator view

* Spacings tweaks and root rendering logic adjustment

* Add unit tests

* Lint and e2e fixes

* Revert CLI changes, fix unit tests

* Remove useless comments

* Sync master, replace $externalHooks mixin

* Lint fix

* Focus first action when panel slides in, not category

* Address PR comments

* Lint fix

* Remove `setAddedNodeActionParameters` optional track param

* Further simplify setAddedNodeActionParameters

* Fix pnpn lock file

* Fix types imports

* Fix 13-pinning spec
This commit is contained in:
OlegIvaniv
2023-04-26 09:18:10 +02:00
committed by GitHub
parent 6335e0938d
commit 390841bbf0
54 changed files with 3489 additions and 2450 deletions

View File

@@ -25,7 +25,6 @@ import type {
INodeCredentials,
INodeListSearchItems,
NodeParameterValueType,
INodeActionTypeDescription,
IDisplayOptions,
IExecutionsSummary,
FeatureFlags,
@@ -36,7 +35,11 @@ import type {
WorkflowSettings,
} from 'n8n-workflow';
import type { SignInType } from './constants';
import type { FAKE_DOOR_FEATURES, TRIGGER_NODE_FILTER, REGULAR_NODE_FILTER } from './constants';
import type {
FAKE_DOOR_FEATURES,
TRIGGER_NODE_CREATOR_VIEW,
REGULAR_NODE_CREATOR_VIEW,
} from './constants';
import type { BulkCommand, Undoable } from '@/models/history';
import type { PartialBy } from '@/utils/typeHelpers';
@@ -707,67 +710,85 @@ export interface ITimeoutHMS {
export type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR';
export interface ISubcategoryItemProps {
subcategory: string;
description: string;
key?: string;
iconType: string;
export type ExtractActionKeys<T> = T extends SimplifiedNodeType ? T['name'] : never;
export type ActionsRecord<T extends SimplifiedNodeType[]> = {
[K in ExtractActionKeys<T[number]>]: ActionTypeDescription[];
};
export interface SimplifiedNodeType
extends Pick<
INodeTypeDescription,
'displayName' | 'description' | 'name' | 'group' | 'icon' | 'iconUrl' | 'codex' | 'defaults'
> {}
export interface SubcategoryItemProps {
description?: string;
iconType?: string;
icon?: string;
title?: string;
subcategory?: string;
defaults?: INodeParameters;
forceIncludeNodes?: string[];
}
export interface ViewItemProps {
withTopBorder: boolean;
title: string;
description: string;
icon: string;
}
export interface INodeItemProps {
subcategory: string;
nodeType: INodeTypeDescription;
export interface LabelItemProps {
key: string;
}
export interface ActionTypeDescription extends SimplifiedNodeType {
displayOptions?: IDisplayOptions;
values?: IDataObject;
actionKey: string;
codex: {
label: string;
categories: string[];
};
}
export interface IActionItemProps {
subcategory: string;
nodeType: INodeActionTypeDescription;
}
export interface ICategoryItemProps {
expanded: boolean;
category: string;
export interface CategoryItemProps {
name: string;
count: number;
}
export interface CreateElementBase {
uuid?: string;
key: string;
includedByTrigger?: boolean;
includedByRegular?: boolean;
}
export interface NodeCreateElement extends CreateElementBase {
type: 'node';
category?: string[];
properties: INodeItemProps;
subcategory: string;
properties: SimplifiedNodeType;
}
export interface CategoryCreateElement extends CreateElementBase {
type: 'category';
properties: ICategoryItemProps;
subcategory: string;
properties: CategoryItemProps;
}
export interface SubcategoryCreateElement extends CreateElementBase {
type: 'subcategory';
properties: ISubcategoryItemProps;
properties: SubcategoryItemProps;
}
export interface ViewCreateElement extends CreateElementBase {
type: 'view';
properties: ViewItemProps;
}
export interface LabelCreateElement extends CreateElementBase {
type: 'label';
subcategory: string;
properties: LabelItemProps;
}
export interface ActionCreateElement extends CreateElementBase {
type: 'action';
category: string;
properties: IActionItemProps;
subcategory: string;
properties: ActionTypeDescription;
}
export type INodeCreateElement =
@@ -775,18 +796,12 @@ export type INodeCreateElement =
| CategoryCreateElement
| SubcategoryCreateElement
| ViewCreateElement
| LabelCreateElement
| ActionCreateElement;
export interface ICategoriesWithNodes {
[category: string]: {
[subcategory: string]: {
regularCount: number;
triggerCount: number;
nodes: INodeCreateElement[];
};
};
export interface SubcategorizedNodeTypes {
[subcategory: string]: INodeCreateElement[];
}
export interface ITag {
id: string;
name: string;
@@ -1072,7 +1087,7 @@ export type IFakeDoorLocation =
| 'credentialsModal'
| 'workflowShareModal';
export type INodeFilterType = typeof REGULAR_NODE_FILTER | typeof TRIGGER_NODE_FILTER;
export type NodeFilterType = typeof REGULAR_NODE_CREATOR_VIEW | typeof TRIGGER_NODE_CREATOR_VIEW;
export type NodeCreatorOpenSource =
| ''
@@ -1087,8 +1102,8 @@ export type NodeCreatorOpenSource =
export interface INodeCreatorState {
itemsFilter: string;
showScrim: boolean;
rootViewHistory: INodeFilterType[];
selectedView: INodeFilterType;
rootViewHistory: NodeFilterType[];
selectedView: NodeFilterType;
openSource: NodeCreatorOpenSource;
}