mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
feat(editor): Add functionality to create folders (#13473)
This commit is contained in:
Milorad FIlipović
GitHub
parent
f381a24145
commit
2cb9d9e29f
|
|
@ -340,12 +340,12 @@ const handleTooltipClose = () => {
|
|||
|
||||
.item,
|
||||
.item * {
|
||||
color: var(--color-text-light);
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.item a:hover * {
|
||||
color: var(--color-text-base);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
|
|
@ -359,7 +359,7 @@ const handleTooltipClose = () => {
|
|||
|
||||
.separator {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--prim-gray-670);
|
||||
color: var(--color-foreground-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ import type {
|
|||
import type { BulkCommand, Undoable } from '@/models/history';
|
||||
|
||||
import type { ProjectSharingData } from '@/types/projects.types';
|
||||
import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
|
||||
|
||||
export * from '@n8n/design-system/types';
|
||||
|
||||
|
|
@ -243,6 +244,7 @@ export interface IWorkflowDataUpdate {
|
|||
|
||||
export interface IWorkflowDataCreate extends IWorkflowDataUpdate {
|
||||
projectId?: string;
|
||||
parentFolderId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -333,6 +335,7 @@ export type WorkflowListItem = Omit<
|
|||
export type FolderShortInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
parentFolder?: string;
|
||||
};
|
||||
|
||||
export type BaseFolderItem = BaseResource & {
|
||||
|
|
@ -349,8 +352,21 @@ export interface FolderListItem extends BaseFolderItem {
|
|||
resource: 'folder';
|
||||
}
|
||||
|
||||
export type FolderPathItem = PathItem & { parentFolder?: string };
|
||||
|
||||
export type WorkflowListResource = WorkflowListItem | FolderListItem;
|
||||
|
||||
export type FolderCreateResponse = Omit<
|
||||
FolderListItem,
|
||||
'workflowCount' | 'tags' | 'sharedWithProjects' | 'homeProject'
|
||||
>;
|
||||
|
||||
export type FolderTreeResponseItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
children: FolderTreeResponseItem[];
|
||||
};
|
||||
|
||||
// Identical to cli.Interfaces.ts
|
||||
export interface IWorkflowShortResponse {
|
||||
id: string;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import type {
|
||||
FolderCreateResponse,
|
||||
FolderTreeResponseItem,
|
||||
IExecutionResponse,
|
||||
IExecutionsCurrentSummaryExtended,
|
||||
IRestApiContext,
|
||||
|
|
@ -84,3 +86,27 @@ export async function getExecutionData(context: IRestApiContext, executionId: st
|
|||
`/executions/${executionId}`,
|
||||
);
|
||||
}
|
||||
|
||||
export async function createFolder(
|
||||
context: IRestApiContext,
|
||||
projectId: string,
|
||||
name: string,
|
||||
parentFolderId?: string,
|
||||
): Promise<FolderCreateResponse> {
|
||||
return await makeRestApiRequest(context, 'POST', `/projects/${projectId}/folders`, {
|
||||
name,
|
||||
parentFolderId,
|
||||
});
|
||||
}
|
||||
|
||||
export async function getFolderPath(
|
||||
context: IRestApiContext,
|
||||
projectId: string,
|
||||
folderId: string,
|
||||
): Promise<FolderTreeResponseItem[]> {
|
||||
return await makeRestApiRequest(
|
||||
context,
|
||||
'GET',
|
||||
`/projects/${projectId}/folders/${folderId}/tree`,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,8 @@ const save = async (): Promise<void> => {
|
|||
return;
|
||||
}
|
||||
|
||||
const parentFolderId = router.currentRoute.value.params.folderId as string | undefined;
|
||||
|
||||
const currentWorkflowId = props.data.id;
|
||||
isSaving.value = true;
|
||||
|
||||
|
|
@ -102,6 +104,7 @@ const save = async (): Promise<void> => {
|
|||
resetWebhookUrls: true,
|
||||
openInNewWindow: true,
|
||||
resetNodeIds: true,
|
||||
parentFolderId,
|
||||
});
|
||||
|
||||
if (saved) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import type { FolderPathItem } from '@/Interface';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import { ProjectTypes } from '@/types/projects.types';
|
||||
import type { UserAction } from '@n8n/design-system/types';
|
||||
import { type PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
|
||||
import { computed } from 'vue';
|
||||
|
||||
type Props = {
|
||||
actions: UserAction[];
|
||||
breadcrumbs: {
|
||||
visibleItems: FolderPathItem[];
|
||||
hiddenItems: FolderPathItem[];
|
||||
};
|
||||
};
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
itemSelected: [item: PathItem];
|
||||
action: [action: string];
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const currentProject = computed(() => projectsStore.currentProject);
|
||||
|
||||
const projectName = computed(() => {
|
||||
if (currentProject.value?.type === ProjectTypes.Personal) {
|
||||
return i18n.baseText('projects.menu.personal');
|
||||
}
|
||||
return currentProject.value?.name;
|
||||
});
|
||||
|
||||
const onItemSelect = (item: PathItem) => {
|
||||
emit('itemSelected', item);
|
||||
};
|
||||
|
||||
const onAction = (action: string) => {
|
||||
emit('action', action);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<n8n-breadcrumbs
|
||||
v-if="breadcrumbs.visibleItems"
|
||||
:items="breadcrumbs.visibleItems"
|
||||
:highlight-last-item="false"
|
||||
:path-truncated="breadcrumbs.visibleItems[0].parentFolder"
|
||||
:hidden-items="breadcrumbs.hiddenItems"
|
||||
data-test-id="folder-card-breadcrumbs"
|
||||
@item-selected="onItemSelect"
|
||||
>
|
||||
<template v-if="currentProject" #prepend>
|
||||
<div :class="$style['home-project']">
|
||||
<n8n-link :to="`/projects/${currentProject.id}`">
|
||||
<N8nText size="large" color="text-base">{{ projectName }}</N8nText>
|
||||
</n8n-link>
|
||||
</div>
|
||||
</template>
|
||||
</n8n-breadcrumbs>
|
||||
<n8n-action-toggle
|
||||
v-if="breadcrumbs.visibleItems"
|
||||
:actions="actions"
|
||||
theme="dark"
|
||||
data-test-id="folder-breadcrumbs-actions"
|
||||
@action="onAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-project {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover * {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
|
|||
import FolderCard from './FolderCard.vue';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import type { FolderResource } from '../layouts/ResourcesListLayout.vue';
|
||||
import type { UserAction } from '@/Interface';
|
||||
import type { FolderPathItem, UserAction } from '@/Interface';
|
||||
|
||||
vi.mock('vue-router', () => {
|
||||
const push = vi.fn();
|
||||
|
|
@ -61,6 +61,11 @@ const PARENT_FOLDER: FolderResource = {
|
|||
},
|
||||
} as const satisfies FolderResource;
|
||||
|
||||
const DEFAULT_BREADCRUMBS: { visibleItems: FolderPathItem[]; hiddenItems: FolderPathItem[] } = {
|
||||
visibleItems: [{ id: '1', label: 'Parent 2' }],
|
||||
hiddenItems: [{ id: '2', label: 'Parent 1', parentFolder: '1' }],
|
||||
};
|
||||
|
||||
const renderComponent = createComponentRenderer(FolderCard, {
|
||||
props: {
|
||||
data: DEFAULT_FOLDER,
|
||||
|
|
@ -68,6 +73,7 @@ const renderComponent = createComponentRenderer(FolderCard, {
|
|||
{ label: 'Open', value: 'open', disabled: false },
|
||||
{ label: 'Delete', value: 'delete', disabled: false },
|
||||
] as const satisfies UserAction[],
|
||||
breadcrumbs: DEFAULT_BREADCRUMBS,
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
|
|
@ -145,6 +151,10 @@ describe('FolderCard', () => {
|
|||
},
|
||||
parentFolder: PARENT_FOLDER,
|
||||
},
|
||||
breadcrumbs: {
|
||||
visibleItems: [{ id: PARENT_FOLDER.id, label: PARENT_FOLDER.name, parentFolder: '1' }],
|
||||
hiddenItems: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(getByTestId('folder-card-icon')).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -7,11 +7,15 @@ import { useI18n } from '@/composables/useI18n';
|
|||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { VIEWS } from '@/constants';
|
||||
import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
|
||||
import type { UserAction } from '@/Interface';
|
||||
import type { FolderPathItem, UserAction } from '@/Interface';
|
||||
|
||||
type Props = {
|
||||
data: FolderResource;
|
||||
actions: UserAction[];
|
||||
breadcrumbs: {
|
||||
visibleItems: FolderPathItem[];
|
||||
hiddenItems: FolderPathItem[];
|
||||
};
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
|
@ -27,18 +31,6 @@ const emit = defineEmits<{
|
|||
folderOpened: [{ folder: FolderResource }];
|
||||
}>();
|
||||
|
||||
const breadCrumbsItems = computed(() => {
|
||||
if (props.data.parentFolder) {
|
||||
return [
|
||||
{
|
||||
id: props.data.parentFolder.id,
|
||||
label: props.data.parentFolder.name,
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const projectIcon = computed<ProjectIcon>(() => {
|
||||
const defaultIcon: ProjectIcon = { type: 'icon', value: 'layer-group' };
|
||||
if (props.data.homeProject?.type === ProjectTypes.Personal) {
|
||||
|
|
@ -109,7 +101,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
|
|||
<n8n-text
|
||||
size="small"
|
||||
color="text-light"
|
||||
:class="$style['info-cell']"
|
||||
:class="[$style['info-cell'], $style['info-cell--workflow-count']]"
|
||||
data-test-id="folder-card-workflow-count"
|
||||
>
|
||||
{{ data.workflowCount }} {{ i18n.baseText('generic.workflows') }}
|
||||
|
|
@ -117,7 +109,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
|
|||
<n8n-text
|
||||
size="small"
|
||||
color="text-light"
|
||||
:class="$style['info-cell']"
|
||||
:class="[$style['info-cell'], $style['info-cell--updated']]"
|
||||
data-test-id="folder-card-last-updated"
|
||||
>
|
||||
{{ i18n.baseText('workerList.item.lastUpdated') }}
|
||||
|
|
@ -126,7 +118,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
|
|||
<n8n-text
|
||||
size="small"
|
||||
color="text-light"
|
||||
:class="$style['info-cell']"
|
||||
:class="[$style['info-cell'], $style['info-cell--created']]"
|
||||
data-test-id="folder-card-created"
|
||||
>
|
||||
{{ i18n.baseText('workflows.item.created') }}
|
||||
|
|
@ -136,9 +128,11 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
|
|||
</template>
|
||||
<template #append>
|
||||
<div :class="$style['card-actions']" @click.prevent>
|
||||
<div :class="$style.breadcrumbs">
|
||||
<n8n-breadcrumbs
|
||||
:items="breadCrumbsItems"
|
||||
:path-truncated="true"
|
||||
:items="breadcrumbs.visibleItems"
|
||||
:hidden-items="breadcrumbs.hiddenItems"
|
||||
:path-truncated="breadcrumbs.visibleItems[0]?.parentFolder"
|
||||
:show-border="true"
|
||||
:highlight-last-item="false"
|
||||
theme="small"
|
||||
|
|
@ -156,6 +150,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
|
|||
</div>
|
||||
</template>
|
||||
</n8n-breadcrumbs>
|
||||
</div>
|
||||
<n8n-action-toggle
|
||||
v-if="actions.length"
|
||||
:actions="actions"
|
||||
|
|
@ -214,4 +209,23 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
|
|||
gap: var(--spacing-3xs);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
@include mixins.breakpoint('sm-and-down') {
|
||||
.card {
|
||||
flex-wrap: wrap;
|
||||
|
||||
:global(.n8n-card-append) {
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-3xs);
|
||||
padding-left: 40px;
|
||||
}
|
||||
.card-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.info-cell--created {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { ProjectTypes } from '@/types/projects.types';
|
|||
import { VIEWS } from '@/constants';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { waitFor, within } from '@testing-library/vue';
|
||||
import { useSettingsStore } from '@/stores/settings.store';
|
||||
|
||||
const mockPush = vi.fn();
|
||||
vi.mock('vue-router', async () => {
|
||||
|
|
@ -43,14 +44,17 @@ const renderComponent = createComponentRenderer(ProjectHeader, {
|
|||
|
||||
let route: ReturnType<typeof router.useRoute>;
|
||||
let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
|
||||
let settingsStore: ReturnType<typeof mockedStore<typeof useSettingsStore>>;
|
||||
|
||||
describe('ProjectHeader', () => {
|
||||
beforeEach(() => {
|
||||
createTestingPinia();
|
||||
route = router.useRoute();
|
||||
projectsStore = mockedStore(useProjectsStore);
|
||||
settingsStore = mockedStore(useSettingsStore);
|
||||
|
||||
projectsStore.teamProjectsLimit = -1;
|
||||
settingsStore.settings.folders = { enabled: false };
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import type { UserAction } from '@n8n/design-system';
|
||||
import { N8nButton, N8nTooltip } from '@n8n/design-system';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { type ProjectIcon, ProjectTypes } from '@/types/projects.types';
|
||||
|
|
@ -10,12 +11,18 @@ import { getResourcePermissions } from '@/permissions';
|
|||
import { VIEWS } from '@/constants';
|
||||
import { useSourceControlStore } from '@/stores/sourceControl.store';
|
||||
import ProjectCreateResource from '@/components/Projects/ProjectCreateResource.vue';
|
||||
import { useSettingsStore } from '@/stores/settings.store';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
const projectsStore = useProjectsStore();
|
||||
const sourceControlStore = useSourceControlStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const emit = defineEmits<{
|
||||
createFolder: [];
|
||||
}>();
|
||||
|
||||
const headerIcon = computed((): ProjectIcon => {
|
||||
if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
|
||||
|
|
@ -49,31 +56,43 @@ const showSettings = computed(
|
|||
);
|
||||
|
||||
const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
|
||||
const isFoldersFeatureEnabled = computed(() => settingsStore.settings.folders.enabled);
|
||||
|
||||
const ACTION_TYPES = {
|
||||
WORKFLOW: 'workflow',
|
||||
CREDENTIAL: 'credential',
|
||||
FOLDER: 'folder',
|
||||
} as const;
|
||||
type ActionTypes = (typeof ACTION_TYPES)[keyof typeof ACTION_TYPES];
|
||||
|
||||
const createWorkflowButton = computed(() => ({
|
||||
value: ACTION_TYPES.WORKFLOW,
|
||||
label: 'Create Workflow',
|
||||
label: i18n.baseText('projects.header.create.workflow'),
|
||||
icon: sourceControlStore.preferences.branchReadOnly ? 'lock' : undefined,
|
||||
size: 'mini' as const,
|
||||
disabled:
|
||||
sourceControlStore.preferences.branchReadOnly ||
|
||||
!getResourcePermissions(homeProject.value?.scopes).workflow.create,
|
||||
}));
|
||||
const menu = computed(() => [
|
||||
const menu = computed(() => {
|
||||
const items: UserAction[] = [
|
||||
{
|
||||
value: ACTION_TYPES.CREDENTIAL,
|
||||
label: 'Create credential',
|
||||
label: i18n.baseText('projects.header.create.credential'),
|
||||
disabled:
|
||||
sourceControlStore.preferences.branchReadOnly ||
|
||||
!getResourcePermissions(homeProject.value?.scopes).credential.create,
|
||||
},
|
||||
]);
|
||||
];
|
||||
if (isFoldersFeatureEnabled.value) {
|
||||
items.push({
|
||||
value: ACTION_TYPES.FOLDER,
|
||||
label: i18n.baseText('projects.header.create.folder'),
|
||||
disabled: false,
|
||||
});
|
||||
}
|
||||
return items;
|
||||
});
|
||||
|
||||
const actions: Record<ActionTypes, (projectId: string) => void> = {
|
||||
[ACTION_TYPES.WORKFLOW]: (projectId: string) => {
|
||||
|
|
@ -81,6 +100,7 @@ const actions: Record<ActionTypes, (projectId: string) => void> = {
|
|||
name: VIEWS.NEW_WORKFLOW,
|
||||
query: {
|
||||
projectId,
|
||||
parentFolderId: route.params.folderId as string,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
|
@ -93,6 +113,9 @@ const actions: Record<ActionTypes, (projectId: string) => void> = {
|
|||
},
|
||||
});
|
||||
},
|
||||
[ACTION_TYPES.FOLDER]: async () => {
|
||||
emit('createFolder');
|
||||
},
|
||||
} as const;
|
||||
|
||||
const onSelect = (action: string) => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { IUser } from '@/Interface';
|
||||
import type { FolderPathItem, IUser } from '@/Interface';
|
||||
import {
|
||||
DUPLICATE_MODAL_KEY,
|
||||
MODAL_CONFIRM,
|
||||
|
|
@ -39,6 +39,10 @@ const WORKFLOW_LIST_ITEM_ACTIONS = {
|
|||
const props = withDefaults(
|
||||
defineProps<{
|
||||
data: WorkflowResource;
|
||||
breadcrumbs: {
|
||||
visibleItems: FolderPathItem[];
|
||||
hiddenItems: FolderPathItem[];
|
||||
};
|
||||
readOnly?: boolean;
|
||||
workflowListEventBus?: EventBus;
|
||||
}>(),
|
||||
|
|
@ -115,18 +119,6 @@ const formattedCreatedAtDate = computed(() => {
|
|||
);
|
||||
});
|
||||
|
||||
const breadCrumbsItems = computed(() => {
|
||||
if (props.data.parentFolder) {
|
||||
return [
|
||||
{
|
||||
id: props.data.parentFolder.id,
|
||||
label: props.data.parentFolder.name,
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const projectIcon = computed<CardProjectIcon>(() => {
|
||||
const defaultIcon: CardProjectIcon = { type: 'icon', value: 'layer-group' };
|
||||
if (props.data.homeProject?.type === ProjectTypes.Personal) {
|
||||
|
|
@ -306,10 +298,11 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
|
|||
:resource-type-label="resourceTypeLabel"
|
||||
:personal-project="projectsStore.personalProject"
|
||||
/>
|
||||
<div v-else :class="$style.breadcrumbs">
|
||||
<n8n-breadcrumbs
|
||||
v-else
|
||||
:items="breadCrumbsItems"
|
||||
:path-truncated="true"
|
||||
:items="breadcrumbs.visibleItems"
|
||||
:hidden-items="breadcrumbs.hiddenItems"
|
||||
:path-truncated="breadcrumbs.visibleItems[0]?.parentFolder"
|
||||
:show-border="true"
|
||||
:highlight-last-item="false"
|
||||
theme="small"
|
||||
|
|
@ -326,6 +319,7 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
|
|||
</div>
|
||||
</template>
|
||||
</n8n-breadcrumbs>
|
||||
</div>
|
||||
<WorkflowActivator
|
||||
class="mr-s"
|
||||
:workflow-active="data.active"
|
||||
|
|
@ -405,8 +399,15 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
|
|||
padding: 0 var(--spacing-s) var(--spacing-s);
|
||||
}
|
||||
|
||||
.cardBadge {
|
||||
.cardBadge,
|
||||
.breadcrumbs {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.breakpoint('xs-only') {
|
||||
.breadcrumbs > div {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -555,6 +555,7 @@ const loadPaginationFromQueryString = async () => {
|
|||
/>
|
||||
</n8n-select>
|
||||
</div>
|
||||
<div :class="$style['sort-and-filter']">
|
||||
<ResourceFiltersDropdown
|
||||
v-if="showFiltersDropdown"
|
||||
:keys="filterKeys"
|
||||
|
|
@ -569,9 +570,10 @@ const loadPaginationFromQueryString = async () => {
|
|||
<slot name="filters" v-bind="resourceFiltersSlotProps" />
|
||||
</template>
|
||||
</ResourceFiltersDropdown>
|
||||
</div>
|
||||
<slot name="add-button"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="callout"></slot>
|
||||
|
||||
|
|
@ -680,19 +682,20 @@ const loadPaginationFromQueryString = async () => {
|
|||
justify-content: end;
|
||||
width: 100%;
|
||||
|
||||
@include mixins.breakpoint('xs-only') {
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-auto-flow: row;
|
||||
|
||||
> *:last-child {
|
||||
grid-column: auto;
|
||||
.sort-and-filter {
|
||||
display: flex;
|
||||
gap: var(--spacing-2xs);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include mixins.breakpoint('xs-only') {
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: unset;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
// max-width: 240px;
|
||||
|
||||
@include mixins.breakpoint('sm-and-down') {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import type {
|
|||
ITag,
|
||||
IUpdateInformation,
|
||||
IWorkflowData,
|
||||
IWorkflowDataCreate,
|
||||
IWorkflowDataUpdate,
|
||||
IWorkflowDb,
|
||||
TargetItem,
|
||||
|
|
@ -811,9 +812,10 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
|
|||
|
||||
const isLoading = useCanvasStore().isLoading;
|
||||
const currentWorkflow = id || (router.currentRoute.value.params.name as string);
|
||||
const parentFolderId = router.currentRoute.value.query.parentFolderId as string;
|
||||
|
||||
if (!currentWorkflow || ['new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(currentWorkflow)) {
|
||||
return await saveAsNewWorkflow({ name, tags }, redirect);
|
||||
return await saveAsNewWorkflow({ name, tags, parentFolderId }, redirect);
|
||||
}
|
||||
|
||||
// Workflow exists already so update it
|
||||
|
|
@ -914,6 +916,7 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
|
|||
resetWebhookUrls,
|
||||
resetNodeIds,
|
||||
openInNewWindow,
|
||||
parentFolderId,
|
||||
data,
|
||||
}: {
|
||||
name?: string;
|
||||
|
|
@ -921,14 +924,15 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
|
|||
resetWebhookUrls?: boolean;
|
||||
openInNewWindow?: boolean;
|
||||
resetNodeIds?: boolean;
|
||||
data?: IWorkflowDataUpdate;
|
||||
parentFolderId?: string;
|
||||
data?: IWorkflowDataCreate;
|
||||
} = {},
|
||||
redirect = true,
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
uiStore.addActiveAction('workflowSaving');
|
||||
|
||||
const workflowDataRequest: IWorkflowDataUpdate = data || (await getWorkflowDataToSave());
|
||||
const workflowDataRequest: IWorkflowDataCreate = data || (await getWorkflowDataToSave());
|
||||
const changedNodes = {} as IDataObject;
|
||||
|
||||
if (resetNodeIds) {
|
||||
|
|
@ -957,6 +961,10 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
|
|||
if (tags) {
|
||||
workflowDataRequest.tags = tags;
|
||||
}
|
||||
|
||||
if (parentFolderId) {
|
||||
workflowDataRequest.parentFolderId = parentFolderId;
|
||||
}
|
||||
const workflowData = await workflowsStore.createNewWorkflow(workflowDataRequest);
|
||||
|
||||
workflowsStore.addWorkflow(workflowData);
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export const MIN_WORKFLOW_NAME_LENGTH = 1;
|
|||
export const MAX_WORKFLOW_NAME_LENGTH = 128;
|
||||
export const DUPLICATE_POSTFFIX = ' copy';
|
||||
export const NODE_OUTPUT_DEFAULT_KEY = '_NODE_OUTPUT_DEFAULT_KEY_';
|
||||
export const DEFAULT_WORKFLOW_PAGE_SIZE = 10;
|
||||
export const DEFAULT_WORKFLOW_PAGE_SIZE = 50;
|
||||
|
||||
// tags
|
||||
export const MAX_TAG_NAME_LENGTH = 24;
|
||||
|
|
@ -667,6 +667,7 @@ export const enum STORES {
|
|||
PROJECTS = 'projects',
|
||||
API_KEYS = 'apiKeys',
|
||||
TEST_DEFINITION = 'testDefinition',
|
||||
FOLDERS = 'folders',
|
||||
}
|
||||
|
||||
export const enum SignInType {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
"generic.cancel": "Cancel",
|
||||
"generic.close": "Close",
|
||||
"generic.confirm": "Confirm",
|
||||
"generic.create": "Create",
|
||||
"generic.deleteWorkflowError": "Problem deleting workflow",
|
||||
"generic.filtersApplied": "Filters are currently applied.",
|
||||
"generic.field": "field",
|
||||
|
|
@ -885,6 +886,12 @@
|
|||
"forms.resourceFiltersDropdown.owner": "Owner",
|
||||
"forms.resourceFiltersDropdown.owner.placeholder": "Filter by owner",
|
||||
"forms.resourceFiltersDropdown.reset": "Reset all",
|
||||
"folders.add": "Add folder",
|
||||
"folders.add.here.message": "Create a new folder here",
|
||||
"folders.add.to.parent.message": "Create folder in \"{parent}\"",
|
||||
"folders.add.success.title": "Folder created",
|
||||
"folders.add.success.message": "<a href=\"{link}\">Open {name}</a> now",
|
||||
"folders.add.invalidName.message": "Please provide a valid folder name",
|
||||
"generic.oauth1Api": "OAuth1 API",
|
||||
"generic.oauth2Api": "OAuth2 API",
|
||||
"genericHelpers.loading": "Loading",
|
||||
|
|
@ -2596,6 +2603,9 @@
|
|||
"settings.mfa.updateConfiguration": "MFA configuration updated",
|
||||
"settings.mfa.invalidAuthenticatorCode": "Invalid authenticator code",
|
||||
"projects.header.subtitle": "All the workflows, credentials and executions you have access to",
|
||||
"projects.header.create.workflow": "Create Workflow",
|
||||
"projects.header.create.credential": "Create Credential",
|
||||
"projects.header.create.folder": "Create Folder",
|
||||
"projects.create": "Create",
|
||||
"projects.create.personal": "Create in personal",
|
||||
"projects.create.team": "Create in project",
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ import {
|
|||
faFlask,
|
||||
faFolder,
|
||||
faFolderOpen,
|
||||
faFolderPlus,
|
||||
faFont,
|
||||
faGlobeAmericas,
|
||||
faGift,
|
||||
|
|
@ -255,6 +256,7 @@ export const FontAwesomePlugin: Plugin = {
|
|||
addIcon(faFlask);
|
||||
addIcon(faFolder);
|
||||
addIcon(faFolderOpen);
|
||||
addIcon(faFolderPlus);
|
||||
addIcon(faFont);
|
||||
addIcon(faGift);
|
||||
addIcon(faGlobe);
|
||||
|
|
|
|||
102
packages/frontend/editor-ui/src/stores/folders.store.ts
Normal file
102
packages/frontend/editor-ui/src/stores/folders.store.ts
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { STORES } from '@/constants';
|
||||
import type { FolderCreateResponse, FolderShortInfo, FolderTreeResponseItem } from '@/Interface';
|
||||
import * as workflowsApi from '@/api/workflows';
|
||||
import { useRootStore } from './root.store';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export const useFoldersStore = defineStore(STORES.FOLDERS, () => {
|
||||
const rootStore = useRootStore();
|
||||
|
||||
const totalWorkflowCount = ref<number>(0);
|
||||
|
||||
/**
|
||||
* Cache visited folders so we can build breadcrumbs paths without fetching them from the server
|
||||
*/
|
||||
const breadcrumbsCache = ref<Record<string, FolderShortInfo>>({});
|
||||
|
||||
const cacheFolders = (folders: FolderShortInfo[]) => {
|
||||
folders.forEach((folder) => {
|
||||
if (!breadcrumbsCache.value[folder.id]) {
|
||||
breadcrumbsCache.value[folder.id] = {
|
||||
id: folder.id,
|
||||
name: folder.name,
|
||||
parentFolder: folder.parentFolder,
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getCachedFolder = (folderId: string) => {
|
||||
return breadcrumbsCache.value[folderId];
|
||||
};
|
||||
|
||||
async function createFolder(
|
||||
name: string,
|
||||
projectId: string,
|
||||
parentFolderId?: string,
|
||||
): Promise<FolderCreateResponse> {
|
||||
return await workflowsApi.createFolder(
|
||||
rootStore.restApiContext,
|
||||
projectId,
|
||||
name,
|
||||
parentFolderId,
|
||||
);
|
||||
}
|
||||
|
||||
async function getFolderPath(
|
||||
projectId: string,
|
||||
folderId: string,
|
||||
): Promise<FolderTreeResponseItem[]> {
|
||||
const tree = await workflowsApi.getFolderPath(rootStore.restApiContext, projectId, folderId);
|
||||
const forCache = extractFoldersForCache(tree);
|
||||
cacheFolders(forCache);
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
function extractFoldersForCache(
|
||||
items: FolderTreeResponseItem[],
|
||||
parentFolderId?: string,
|
||||
): FolderShortInfo[] {
|
||||
let result: FolderShortInfo[] = [];
|
||||
|
||||
items.forEach((item) => {
|
||||
// Add current item to result
|
||||
result.push({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
parentFolder: parentFolderId,
|
||||
});
|
||||
|
||||
// Process children recursively
|
||||
if (item.children && item.children.length > 0) {
|
||||
const childFolders = extractFoldersForCache(item.children, item.id);
|
||||
result = [...result, ...childFolders];
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
async function fetchTotalWorkflowsAndFoldersCount(projectId?: string): Promise<number> {
|
||||
const { count } = await workflowsApi.getWorkflowsAndFolders(
|
||||
rootStore.restApiContext,
|
||||
{ projectId },
|
||||
{ skip: 0, take: 1 },
|
||||
true,
|
||||
);
|
||||
totalWorkflowCount.value = count;
|
||||
return count;
|
||||
}
|
||||
|
||||
return {
|
||||
fetchTotalWorkflowsAndFoldersCount,
|
||||
breadcrumbsCache,
|
||||
cacheFolders,
|
||||
getCachedFolder,
|
||||
createFolder,
|
||||
getFolderPath,
|
||||
totalWorkflowCount,
|
||||
};
|
||||
});
|
||||
|
|
@ -515,7 +515,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
|
|||
Object.keys(options).length ? options : undefined,
|
||||
includeFolders ? includeFolders : undefined,
|
||||
);
|
||||
|
||||
totalWorkflowCount.value = count;
|
||||
// Also set fetched workflows to store
|
||||
// When fetching workflows from overview page, they don't have resource property
|
||||
|
|
@ -552,7 +551,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
|
|||
return workflowData;
|
||||
}
|
||||
|
||||
async function getNewWorkflowData(name?: string, projectId?: string): Promise<INewWorkflowData> {
|
||||
async function getNewWorkflowData(
|
||||
name?: string,
|
||||
projectId?: string,
|
||||
parentFolderId?: string,
|
||||
): Promise<INewWorkflowData> {
|
||||
let workflowData = {
|
||||
name: '',
|
||||
settings: { ...defaults.settings },
|
||||
|
|
@ -561,6 +564,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
|
|||
const data: IDataObject = {
|
||||
name,
|
||||
projectId,
|
||||
parentFolderId,
|
||||
};
|
||||
|
||||
workflowData = await workflowsApi.getNewWorkflow(
|
||||
|
|
|
|||
|
|
@ -385,7 +385,11 @@ async function initializeRoute(force = false) {
|
|||
async function initializeWorkspaceForNewWorkflow() {
|
||||
resetWorkspace();
|
||||
|
||||
await workflowsStore.getNewWorkflowData(undefined, projectsStore.currentProjectId);
|
||||
await workflowsStore.getNewWorkflowData(
|
||||
undefined,
|
||||
projectsStore.currentProjectId,
|
||||
route.query.parentFolderId as string | undefined,
|
||||
);
|
||||
workflowsStore.makeNewWorkflowShareable();
|
||||
|
||||
uiStore.nodeViewInitialized = true;
|
||||
|
|
@ -483,9 +487,10 @@ async function openTemplateFromWorkflowJSON(workflow: WorkflowDataWithTemplateId
|
|||
|
||||
isBlankRedirect.value = true;
|
||||
const templateId = workflow.meta.templateId;
|
||||
const parentFolderId = route.query.parentFolderId as string | undefined;
|
||||
await router.replace({
|
||||
name: VIEWS.NEW_WORKFLOW,
|
||||
query: { templateId },
|
||||
query: { templateId, parentFolderId },
|
||||
});
|
||||
|
||||
await importTemplate({ id: templateId, name: workflow.name, workflow });
|
||||
|
|
|
|||
|
|
@ -61,6 +61,9 @@ describe('ProjectSettings', () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
folders: {
|
||||
enabled: false,
|
||||
},
|
||||
} as FrontendSettings);
|
||||
projectsStore.setCurrentProject({
|
||||
id: '123',
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
|
|||
import { useTagsStore } from '@/stores/tags.store';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import * as usersApi from '@/api/users';
|
||||
import { useFoldersStore } from '@/stores/folders.store';
|
||||
|
||||
vi.mock('@/api/projects.api');
|
||||
vi.mock('@/api/users');
|
||||
|
|
@ -40,6 +41,8 @@ const router = createRouter({
|
|||
});
|
||||
|
||||
let pinia: ReturnType<typeof createTestingPinia>;
|
||||
let foldersStore: ReturnType<typeof mockedStore<typeof useFoldersStore>>;
|
||||
let workflowsStore: ReturnType<typeof mockedStore<typeof useWorkflowsStore>>;
|
||||
|
||||
const renderComponent = createComponentRenderer(WorkflowsView, {
|
||||
global: {
|
||||
|
|
@ -56,13 +59,18 @@ describe('WorkflowsView', () => {
|
|||
await router.push('/');
|
||||
await router.isReady();
|
||||
pinia = createTestingPinia({ initialState });
|
||||
foldersStore = mockedStore(useFoldersStore);
|
||||
workflowsStore = mockedStore(useWorkflowsStore);
|
||||
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
|
||||
foldersStore.totalWorkflowCount = 0;
|
||||
foldersStore.fetchTotalWorkflowsAndFoldersCount.mockResolvedValue(0);
|
||||
});
|
||||
|
||||
describe('should show empty state', () => {
|
||||
it('for non setup user', async () => {
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
const { getByText } = renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
expect(getByText('👋 Welcome!')).toBeVisible();
|
||||
|
|
@ -72,10 +80,6 @@ describe('WorkflowsView', () => {
|
|||
const userStore = mockedStore(useUsersStore);
|
||||
userStore.currentUser = { firstName: 'John' } as IUser;
|
||||
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
|
||||
const { getByText } = renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
|
||||
|
|
@ -83,18 +87,10 @@ describe('WorkflowsView', () => {
|
|||
});
|
||||
|
||||
describe('when onboardingExperiment -> False', () => {
|
||||
beforeEach(() => {
|
||||
pinia = createTestingPinia({ initialState });
|
||||
});
|
||||
|
||||
it('for readOnlyEnvironment', async () => {
|
||||
const sourceControl = mockedStore(useSourceControlStore);
|
||||
sourceControl.preferences.branchReadOnly = true;
|
||||
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
|
||||
const { getByText } = renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
|
||||
|
|
@ -103,10 +99,6 @@ describe('WorkflowsView', () => {
|
|||
});
|
||||
|
||||
it('for noPermission', async () => {
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
|
||||
const { getByText } = renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
expect(getByText('There are currently no workflows to view')).toBeInTheDocument();
|
||||
|
|
@ -115,9 +107,6 @@ describe('WorkflowsView', () => {
|
|||
it('for user with create scope', async () => {
|
||||
const projectsStore = mockedStore(useProjectsStore);
|
||||
projectsStore.currentProject = { scopes: ['workflow:create'] } as Project;
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
|
||||
const { getByText } = renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
|
|
@ -129,10 +118,6 @@ describe('WorkflowsView', () => {
|
|||
const projectsStore = mockedStore(useProjectsStore);
|
||||
projectsStore.currentProject = { scopes: ['workflow:create'] } as Project;
|
||||
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
|
||||
const { getByTestId } = renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
|
||||
|
|
@ -145,10 +130,6 @@ describe('WorkflowsView', () => {
|
|||
});
|
||||
|
||||
describe('filters', () => {
|
||||
beforeEach(async () => {
|
||||
pinia = createTestingPinia({ initialState });
|
||||
});
|
||||
|
||||
it('should set tag filter based on query parameters', async () => {
|
||||
await router.replace({ query: { tags: 'test-tag' } });
|
||||
|
||||
|
|
@ -159,7 +140,6 @@ describe('WorkflowsView', () => {
|
|||
tagStore.tagsById = {
|
||||
'test-tag': TEST_TAG,
|
||||
};
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
|
||||
renderComponent({ pinia });
|
||||
|
|
@ -180,7 +160,6 @@ describe('WorkflowsView', () => {
|
|||
it('should set search filter based on query parameters', async () => {
|
||||
await router.replace({ query: { search: 'one' } });
|
||||
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
|
||||
renderComponent({ pinia });
|
||||
|
|
@ -201,7 +180,6 @@ describe('WorkflowsView', () => {
|
|||
it('should set status filter based on query parameters', async () => {
|
||||
await router.replace({ query: { status: 'true' } });
|
||||
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
|
||||
renderComponent({ pinia });
|
||||
|
|
@ -222,7 +200,6 @@ describe('WorkflowsView', () => {
|
|||
it('should reset filters', async () => {
|
||||
await router.replace({ query: { status: 'true' } });
|
||||
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
|
||||
const { queryByTestId, getByTestId } = renderComponent({ pinia });
|
||||
|
|
@ -240,7 +217,6 @@ describe('WorkflowsView', () => {
|
|||
|
||||
it('should remove incomplete properties', async () => {
|
||||
await router.replace({ query: { tags: '' } });
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
renderComponent({ pinia });
|
||||
await waitAllPromises();
|
||||
|
|
@ -249,7 +225,6 @@ describe('WorkflowsView', () => {
|
|||
|
||||
it('should remove invalid tags', async () => {
|
||||
await router.replace({ query: { tags: 'non-existing-tag' } });
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
const tagStore = mockedStore(useTagsStore);
|
||||
tagStore.allTags = [{ id: 'test-tag', name: 'tag' }];
|
||||
|
|
@ -259,13 +234,20 @@ describe('WorkflowsView', () => {
|
|||
});
|
||||
});
|
||||
|
||||
it('should reinitialize on source control pullWorkfolder', async () => {
|
||||
vi.spyOn(usersApi, 'getUsers').mockResolvedValue([]);
|
||||
describe('source control', () => {
|
||||
beforeEach(async () => {
|
||||
pinia = createTestingPinia({ initialState, stubActions: false });
|
||||
const userStore = mockedStore(useUsersStore);
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
foldersStore = mockedStore(useFoldersStore);
|
||||
foldersStore.totalWorkflowCount = 0;
|
||||
foldersStore.fetchTotalWorkflowsAndFoldersCount.mockResolvedValue(0);
|
||||
workflowsStore = mockedStore(useWorkflowsStore);
|
||||
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
|
||||
workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
|
||||
});
|
||||
it('should reinitialize on source control pullWorkfolder', async () => {
|
||||
vi.spyOn(usersApi, 'getUsers').mockResolvedValue([]);
|
||||
const userStore = mockedStore(useUsersStore);
|
||||
|
||||
const sourceControl = useSourceControlStore();
|
||||
|
||||
|
|
@ -274,8 +256,18 @@ describe('WorkflowsView', () => {
|
|||
await sourceControl.pullWorkfolder(true);
|
||||
expect(userStore.fetchUsers).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Folders', () => {
|
||||
beforeEach(async () => {
|
||||
await router.push('/');
|
||||
await router.isReady();
|
||||
pinia = createTestingPinia({ initialState });
|
||||
foldersStore = mockedStore(useFoldersStore);
|
||||
workflowsStore = mockedStore(useWorkflowsStore);
|
||||
});
|
||||
|
||||
it('should render workflow and folder cards', async () => {
|
||||
const TEST_WORKFLOW_RESOURCE: WorkflowListResource = {
|
||||
resource: 'workflow',
|
||||
id: '1',
|
||||
|
|
@ -308,11 +300,13 @@ describe('WorkflowsView', () => {
|
|||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
};
|
||||
|
||||
it('should render workflow and folder cards', async () => {
|
||||
// mock router resolve:
|
||||
router.resolve = vi.fn().mockResolvedValue({
|
||||
href: '/projects/1/folders/1',
|
||||
});
|
||||
const workflowsStore = mockedStore(useWorkflowsStore);
|
||||
foldersStore.totalWorkflowCount = 2;
|
||||
workflowsStore.fetchWorkflowsPage.mockResolvedValue([
|
||||
TEST_WORKFLOW_RESOURCE,
|
||||
TEST_FOLDER_RESOURCE,
|
||||
|
|
|
|||
|
|
@ -15,8 +15,15 @@ import {
|
|||
EnterpriseEditionFeature,
|
||||
VIEWS,
|
||||
DEFAULT_WORKFLOW_PAGE_SIZE,
|
||||
MODAL_CONFIRM,
|
||||
} from '@/constants';
|
||||
import type { IUser, UserAction, WorkflowListResource, WorkflowListItem } from '@/Interface';
|
||||
import type {
|
||||
IUser,
|
||||
UserAction,
|
||||
WorkflowListResource,
|
||||
WorkflowListItem,
|
||||
FolderPathItem,
|
||||
} from '@/Interface';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useSettingsStore } from '@/stores/settings.store';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
|
|
@ -44,9 +51,12 @@ import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
|
|||
import { useDebounce } from '@/composables/useDebounce';
|
||||
import { createEventBus } from '@n8n/utils/event-bus';
|
||||
import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
|
||||
import { ProjectTypes } from '@/types/projects.types';
|
||||
import { type ProjectSharingData, ProjectTypes } from '@/types/projects.types';
|
||||
import { FOLDER_LIST_ITEM_ACTIONS } from '@/components/Folders/constants';
|
||||
import { debounce } from 'lodash-es';
|
||||
import { useMessage } from '@/composables/useMessage';
|
||||
import { useToast } from '@/composables/useToast';
|
||||
import { useFoldersStore } from '@/stores/folders.store';
|
||||
|
||||
interface Filters extends BaseFilters {
|
||||
status: string | boolean;
|
||||
|
|
@ -70,6 +80,8 @@ const WORKFLOWS_SORT_MAP = {
|
|||
const i18n = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const message = useMessage();
|
||||
const toast = useToast();
|
||||
|
||||
const sourceControlStore = useSourceControlStore();
|
||||
const usersStore = useUsersStore();
|
||||
|
|
@ -80,10 +92,13 @@ const projectsStore = useProjectsStore();
|
|||
const telemetry = useTelemetry();
|
||||
const uiStore = useUIStore();
|
||||
const tagsStore = useTagsStore();
|
||||
const foldersStore = useFoldersStore();
|
||||
|
||||
const documentTitle = useDocumentTitle();
|
||||
const { callDebounced } = useDebounce();
|
||||
|
||||
const loading = ref(false);
|
||||
const breadcrumbsLoading = ref(false);
|
||||
const filters = ref<Filters>({
|
||||
search: '',
|
||||
homeProject: '',
|
||||
|
|
@ -97,27 +112,34 @@ const workflowsAndFolders = ref<WorkflowListResource[]>([]);
|
|||
|
||||
const easyAICalloutVisible = ref(true);
|
||||
|
||||
const currentFolder = ref<FolderResource | undefined>(undefined);
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(DEFAULT_WORKFLOW_PAGE_SIZE);
|
||||
const currentSort = ref('updatedAt:desc');
|
||||
|
||||
const folderCardActions = ref<UserAction[]>([
|
||||
const currentFolderId = ref<string | null>(null);
|
||||
|
||||
/**
|
||||
* Folder actions
|
||||
* These can appear on the list header, and then they are applied to current folder
|
||||
* or on each folder card, and then they are applied to the clicked folder
|
||||
* 'onlyAvailableOn' is used to specify where the action should be available, if not specified it will be available on both
|
||||
*/
|
||||
const folderActions = ref<Array<UserAction & { onlyAvailableOn?: 'mainBreadcrumbs' | 'card' }>>([
|
||||
{
|
||||
label: 'Open',
|
||||
value: FOLDER_LIST_ITEM_ACTIONS.OPEN,
|
||||
disabled: false,
|
||||
onlyAvailableOn: 'card',
|
||||
},
|
||||
{
|
||||
label: 'Create Folder',
|
||||
value: FOLDER_LIST_ITEM_ACTIONS.CREATE,
|
||||
disabled: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: 'Create Workflow',
|
||||
value: FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW,
|
||||
disabled: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: 'Rename',
|
||||
|
|
@ -145,7 +167,16 @@ const folderCardActions = ref<UserAction[]>([
|
|||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const folderCardActions = computed(() =>
|
||||
folderActions.value.filter(
|
||||
(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'card',
|
||||
),
|
||||
);
|
||||
const mainBreadcrumbsActions = computed(() =>
|
||||
folderActions.value.filter(
|
||||
(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'mainBreadcrumbs',
|
||||
),
|
||||
);
|
||||
const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
|
||||
const foldersEnabled = computed(() => settingsStore.settings.folders.enabled);
|
||||
const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
|
||||
|
|
@ -153,17 +184,10 @@ const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
|
|||
const isShareable = computed(
|
||||
() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
|
||||
);
|
||||
|
||||
const showFolders = computed(() => foldersEnabled.value && !isOverviewPage.value);
|
||||
|
||||
const mainBreadcrumbsItems = computed<PathItem[] | undefined>(() => {
|
||||
if (!showFolders.value || !currentFolder.value) return;
|
||||
const items: PathItem[] = [];
|
||||
items.push({
|
||||
id: currentFolder.value.id,
|
||||
label: currentFolder.value.name,
|
||||
});
|
||||
return items;
|
||||
const currentFolder = computed(() => {
|
||||
return currentFolderId.value ? foldersStore.breadcrumbsCache[currentFolderId.value] : null;
|
||||
});
|
||||
|
||||
const currentProject = computed(() => projectsStore.currentProject);
|
||||
|
|
@ -175,6 +199,13 @@ const projectName = computed(() => {
|
|||
return currentProject.value?.name;
|
||||
});
|
||||
|
||||
const currentParentName = computed(() => {
|
||||
if (currentFolder.value) {
|
||||
return currentFolder.value.name;
|
||||
}
|
||||
return projectName.value;
|
||||
});
|
||||
|
||||
const workflowListResources = computed<Resource[]>(() => {
|
||||
const resources: Resource[] = (workflowsAndFolders.value || []).map((resource) => {
|
||||
if (resource.resource === 'folder') {
|
||||
|
|
@ -190,7 +221,6 @@ const workflowListResources = computed<Resource[]>(() => {
|
|||
parentFolder: resource.parentFolder,
|
||||
} as FolderResource;
|
||||
} else {
|
||||
// TODO: Once new endpoint is in place, we'll have to explicitly check for resource type
|
||||
return {
|
||||
resourceType: 'workflow',
|
||||
id: resource.id,
|
||||
|
|
@ -249,6 +279,10 @@ const emptyListDescription = computed(() => {
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* WATCHERS AND STORE SUBSCRIPTIONS
|
||||
*/
|
||||
|
||||
watch(
|
||||
() => route.params?.projectId,
|
||||
async () => {
|
||||
|
|
@ -259,14 +293,20 @@ watch(
|
|||
watch(
|
||||
() => route.params?.folderId,
|
||||
async (newVal) => {
|
||||
if (!newVal) {
|
||||
currentFolder.value = undefined;
|
||||
}
|
||||
currentFolderId.value = newVal as string;
|
||||
await fetchWorkflows();
|
||||
},
|
||||
);
|
||||
|
||||
// Lifecycle hooks
|
||||
sourceControlStore.$onAction(({ name, after }) => {
|
||||
if (name !== 'pullWorkfolder') return;
|
||||
after(async () => await initialize());
|
||||
});
|
||||
|
||||
/**
|
||||
* LIFE-CYCLE HOOKS
|
||||
*/
|
||||
|
||||
onMounted(async () => {
|
||||
documentTitle.set(i18n.baseText('workflows.heading'));
|
||||
void usersStore.showPersonalizationSurvey();
|
||||
|
|
@ -280,7 +320,90 @@ onBeforeUnmount(() => {
|
|||
workflowListEventBus.off('workflow-duplicated', fetchWorkflows);
|
||||
});
|
||||
|
||||
// Methods
|
||||
/**
|
||||
* METHODS
|
||||
*/
|
||||
|
||||
// Main component fetch methods
|
||||
const initialize = async () => {
|
||||
loading.value = true;
|
||||
await setFiltersFromQueryString();
|
||||
if (!route.params.folderId) {
|
||||
currentFolderId.value = null;
|
||||
}
|
||||
const [, resourcesPage] = await Promise.all([
|
||||
usersStore.fetchUsers(),
|
||||
fetchWorkflows(),
|
||||
workflowsStore.fetchActiveWorkflows(),
|
||||
]);
|
||||
breadcrumbsLoading.value = false;
|
||||
workflowsAndFolders.value = resourcesPage;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches:
|
||||
* - Current workflows and folders page
|
||||
* - Total count of workflows and folders in the current project
|
||||
* - Path to the current folder (if not cached)
|
||||
*/
|
||||
const fetchWorkflows = async () => {
|
||||
// We debounce here so that fast enough fetches don't trigger
|
||||
// the placeholder graphics for a few milliseconds, which would cause a flicker
|
||||
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;
|
||||
|
||||
const fetchedResources = await workflowsStore.fetchWorkflowsPage(
|
||||
routeProjectId ?? homeProjectFilter,
|
||||
currentPage.value,
|
||||
pageSize.value,
|
||||
currentSort.value,
|
||||
{
|
||||
name: filters.value.search || undefined,
|
||||
active: filters.value.status ? Boolean(filters.value.status) : undefined,
|
||||
tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
|
||||
parentFolderId: parentFolder ?? '0', // 0 is the root folder in the API
|
||||
},
|
||||
showFolders.value,
|
||||
);
|
||||
foldersStore.cacheFolders(
|
||||
fetchedResources
|
||||
.filter((resource) => resource.resource === 'folder')
|
||||
.map((r) => ({ id: r.id, name: r.name, parentFolder: r.parentFolder?.id })),
|
||||
);
|
||||
const isCurrentFolderCached = foldersStore.breadcrumbsCache[parentFolder ?? ''] !== undefined;
|
||||
const needToFetchFolderPath = parentFolder && !isCurrentFolderCached && routeProjectId;
|
||||
if (needToFetchFolderPath) {
|
||||
breadcrumbsLoading.value = true;
|
||||
await foldersStore.getFolderPath(routeProjectId, parentFolder);
|
||||
currentFolderId.value = parentFolder;
|
||||
breadcrumbsLoading.value = false;
|
||||
}
|
||||
await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId);
|
||||
|
||||
delayedLoading.cancel();
|
||||
workflowsAndFolders.value = fetchedResources;
|
||||
loading.value = false;
|
||||
return fetchedResources;
|
||||
};
|
||||
|
||||
// Filter and sort methods
|
||||
|
||||
const onSortUpdated = async (sort: string) => {
|
||||
currentSort.value =
|
||||
WORKFLOWS_SORT_MAP[sort as keyof typeof WORKFLOWS_SORT_MAP] ?? 'updatedAt:desc';
|
||||
if (currentSort.value !== 'updatedAt:desc') {
|
||||
void router.replace({ query: { ...route.query, sort } });
|
||||
} else {
|
||||
void router.replace({ query: { ...route.query, sort: undefined } });
|
||||
}
|
||||
await fetchWorkflows();
|
||||
};
|
||||
|
||||
const onFiltersUpdated = async () => {
|
||||
currentPage.value = 1;
|
||||
saveFiltersOnQueryString();
|
||||
|
|
@ -298,38 +421,6 @@ const onSearchUpdated = async (search: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
const addWorkflow = () => {
|
||||
uiStore.nodeViewInitialized = false;
|
||||
void router.push({
|
||||
name: VIEWS.NEW_WORKFLOW,
|
||||
query: { projectId: route.params?.projectId },
|
||||
});
|
||||
|
||||
telemetry.track('User clicked add workflow button', {
|
||||
source: 'Workflows list',
|
||||
});
|
||||
trackEmptyCardClick('blank');
|
||||
};
|
||||
|
||||
const trackEmptyCardClick = (option: 'blank' | 'templates' | 'courses') => {
|
||||
telemetry.track('User clicked empty page option', {
|
||||
option,
|
||||
});
|
||||
};
|
||||
|
||||
const initialize = async () => {
|
||||
loading.value = true;
|
||||
currentFolder.value = undefined;
|
||||
await setFiltersFromQueryString();
|
||||
const [, resourcesPage] = await Promise.all([
|
||||
usersStore.fetchUsers(),
|
||||
fetchWorkflows(),
|
||||
workflowsStore.fetchActiveWorkflows(),
|
||||
]);
|
||||
workflowsAndFolders.value = resourcesPage;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const setCurrentPage = async (page: number) => {
|
||||
currentPage.value = page;
|
||||
await fetchWorkflows();
|
||||
|
|
@ -340,38 +431,6 @@ const setPageSize = async (size: number) => {
|
|||
await fetchWorkflows();
|
||||
};
|
||||
|
||||
const fetchWorkflows = async () => {
|
||||
// We debounce here so that fast enough fetches don't trigger
|
||||
// the placeholder graphics for a few milliseconds, which would cause a flicker
|
||||
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) || '0';
|
||||
|
||||
const fetchedResources = await workflowsStore.fetchWorkflowsPage(
|
||||
routeProjectId ?? homeProjectFilter,
|
||||
currentPage.value,
|
||||
pageSize.value,
|
||||
currentSort.value,
|
||||
{
|
||||
name: filters.value.search || undefined,
|
||||
active: filters.value.status ? Boolean(filters.value.status) : undefined,
|
||||
tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
|
||||
parentFolderId: parentFolder,
|
||||
},
|
||||
showFolders.value,
|
||||
);
|
||||
// @ts-expect-error - Once we have an endpoint to fetch the path based on Id, we should remove this and fetch the path from the endpoint
|
||||
currentFolder.value = fetchedResources[0]?.parentFolder;
|
||||
|
||||
delayedLoading.cancel();
|
||||
workflowsAndFolders.value = fetchedResources;
|
||||
loading.value = false;
|
||||
return fetchedResources;
|
||||
};
|
||||
|
||||
const onClickTag = async (tagId: string) => {
|
||||
if (!filters.value.tags.includes(tagId)) {
|
||||
filters.value.tags.push(tagId);
|
||||
|
|
@ -381,6 +440,8 @@ const onClickTag = async (tagId: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
// Query string methods
|
||||
|
||||
const saveFiltersOnQueryString = () => {
|
||||
// Get current query parameters
|
||||
const currentQuery = { ...route.query };
|
||||
|
|
@ -415,10 +476,6 @@ const saveFiltersOnQueryString = () => {
|
|||
});
|
||||
};
|
||||
|
||||
function isValidProjectId(projectId: string) {
|
||||
return projectsStore.availableProjects.some((project) => project.id === projectId);
|
||||
}
|
||||
|
||||
const setFiltersFromQueryString = async () => {
|
||||
const newQuery: LocationQueryRaw = { ...route.query };
|
||||
const { tags, status, search, homeProject, sort } = route.query ?? {};
|
||||
|
|
@ -486,11 +543,31 @@ const setFiltersFromQueryString = async () => {
|
|||
void router.replace({ query: newQuery });
|
||||
};
|
||||
|
||||
sourceControlStore.$onAction(({ name, after }) => {
|
||||
if (name !== 'pullWorkfolder') return;
|
||||
after(async () => await initialize());
|
||||
// Misc methods
|
||||
|
||||
const addWorkflow = () => {
|
||||
uiStore.nodeViewInitialized = false;
|
||||
void router.push({
|
||||
name: VIEWS.NEW_WORKFLOW,
|
||||
query: { projectId: route.params?.projectId, parentFolderId: route.params?.folderId },
|
||||
});
|
||||
|
||||
telemetry.track('User clicked add workflow button', {
|
||||
source: 'Workflows list',
|
||||
});
|
||||
trackEmptyCardClick('blank');
|
||||
};
|
||||
|
||||
const trackEmptyCardClick = (option: 'blank' | 'templates' | 'courses') => {
|
||||
telemetry.track('User clicked empty page option', {
|
||||
option,
|
||||
});
|
||||
};
|
||||
|
||||
function isValidProjectId(projectId: string) {
|
||||
return projectsStore.availableProjects.some((project) => project.id === projectId);
|
||||
}
|
||||
|
||||
const openAIWorkflow = async (source: string) => {
|
||||
dismissEasyAICallout();
|
||||
telemetry.track(
|
||||
|
|
@ -512,7 +589,7 @@ const openAIWorkflow = async (source: string) => {
|
|||
await router.push({
|
||||
name: VIEWS.TEMPLATE_IMPORT,
|
||||
params: { id: easyAiWorkflowJson.meta.templateId },
|
||||
query: { fromJson: 'true' },
|
||||
query: { fromJson: 'true', parentFolderId: route.params.folderId },
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -520,17 +597,6 @@ const dismissEasyAICallout = () => {
|
|||
easyAICalloutVisible.value = false;
|
||||
};
|
||||
|
||||
const onSortUpdated = async (sort: string) => {
|
||||
currentSort.value =
|
||||
WORKFLOWS_SORT_MAP[sort as keyof typeof WORKFLOWS_SORT_MAP] ?? 'updatedAt:desc';
|
||||
if (currentSort.value !== 'updatedAt:desc') {
|
||||
void router.replace({ query: { ...route.query, sort } });
|
||||
} else {
|
||||
void router.replace({ query: { ...route.query, sort: undefined } });
|
||||
}
|
||||
await fetchWorkflows();
|
||||
};
|
||||
|
||||
const onWorkflowActiveToggle = (data: { id: string; active: boolean }) => {
|
||||
const workflow: WorkflowListItem | undefined = workflowsAndFolders.value.find(
|
||||
(w): w is WorkflowListItem => w.id === data.id,
|
||||
|
|
@ -539,8 +605,219 @@ const onWorkflowActiveToggle = (data: { id: string; active: boolean }) => {
|
|||
workflow.active = data.active;
|
||||
};
|
||||
|
||||
const onFolderOpened = (data: { folder: FolderResource }) => {
|
||||
currentFolder.value = data.folder;
|
||||
// Breadcrumbs methods
|
||||
|
||||
/**
|
||||
* Breadcrumbs: Calculate visible and hidden items for both main breadcrumbs and card breadcrumbs
|
||||
* We do this here and pass to each component to avoid recalculating in each card
|
||||
*/
|
||||
const visibleBreadcrumbsItems = computed<FolderPathItem[]>(() => {
|
||||
if (!currentFolder.value) return [];
|
||||
const items: FolderPathItem[] = [];
|
||||
const parent = foldersStore.getCachedFolder(currentFolder.value.parentFolder ?? '');
|
||||
if (parent) {
|
||||
items.push({
|
||||
id: parent.id,
|
||||
label: parent.name,
|
||||
href: `/projects/${route.params.projectId}/folders/${parent.id}/workflows`,
|
||||
parentFolder: parent.parentFolder,
|
||||
});
|
||||
}
|
||||
items.push({
|
||||
id: currentFolder.value.id,
|
||||
label: currentFolder.value.name,
|
||||
parentFolder: parent?.parentFolder,
|
||||
});
|
||||
return items;
|
||||
});
|
||||
|
||||
const hiddenBreadcrumbsItems = computed<FolderPathItem[]>(() => {
|
||||
const lastVisibleParent: FolderPathItem =
|
||||
visibleBreadcrumbsItems.value[visibleBreadcrumbsItems.value.length - 1];
|
||||
if (!lastVisibleParent) return [];
|
||||
const items: FolderPathItem[] = [];
|
||||
// Go through all the parent folders and add them to the hidden items
|
||||
let parentFolder = lastVisibleParent.parentFolder;
|
||||
while (parentFolder) {
|
||||
const parent = foldersStore.getCachedFolder(parentFolder);
|
||||
|
||||
if (!parent) break;
|
||||
items.unshift({
|
||||
id: parent.id,
|
||||
label: parent.name,
|
||||
href: `/projects/${route.params.projectId}/folders/${parent.id}/workflows`,
|
||||
parentFolder: parent.parentFolder,
|
||||
});
|
||||
parentFolder = parent.parentFolder;
|
||||
}
|
||||
return items;
|
||||
});
|
||||
|
||||
/**
|
||||
* Main breadcrumbs items that show on top of the list
|
||||
* These show path to the current folder with up to 2 parents visible
|
||||
*/
|
||||
const mainBreadcrumbs = computed(() => {
|
||||
return {
|
||||
visibleItems: visibleBreadcrumbsItems.value,
|
||||
hiddenItems: hiddenBreadcrumbsItems.value,
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Card breadcrumbs items that show on workflow and folder cards
|
||||
* These show path to the current folder with up to one parent visible
|
||||
*/
|
||||
const cardBreadcrumbs = computed(() => {
|
||||
const visibleItems = visibleBreadcrumbsItems.value;
|
||||
const hiddenItems = hiddenBreadcrumbsItems.value;
|
||||
if (visibleItems.length > 1) {
|
||||
return {
|
||||
visibleItems: [visibleItems[visibleItems.length - 1]],
|
||||
hiddenItems: [...hiddenItems, ...visibleItems.slice(0, visibleItems.length - 1)],
|
||||
};
|
||||
}
|
||||
return {
|
||||
visibleItems,
|
||||
hiddenItems,
|
||||
};
|
||||
});
|
||||
|
||||
const onBreadcrumbItemClick = (item: PathItem) => {
|
||||
if (item.href) {
|
||||
loading.value = true;
|
||||
void router
|
||||
.push(item.href)
|
||||
.then(() => {
|
||||
currentFolderId.value = item.id;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.showError(error, 'Error navigating to folder');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Folder actions
|
||||
|
||||
// Main header action handlers
|
||||
// These render next to the breadcrumbs and are applied to the current folder/project
|
||||
const onBreadCrumbsAction = async (action: string) => {
|
||||
switch (action) {
|
||||
case FOLDER_LIST_ITEM_ACTIONS.CREATE:
|
||||
if (!route.params.projectId) return;
|
||||
const currentParent = currentFolder.value?.name || projectName.value;
|
||||
if (!currentParent) return;
|
||||
await createFolder({
|
||||
id: (route.params.folderId as string) ?? '-1',
|
||||
name: currentParent,
|
||||
type: currentFolder.value ? 'folder' : 'project',
|
||||
});
|
||||
break;
|
||||
case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
|
||||
addWorkflow();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Folder card action handlers
|
||||
// These render on each folder card and are applied to the clicked folder
|
||||
const onFolderCardAction = async (payload: { action: string; folderId: string }) => {
|
||||
const clickedFolder = foldersStore.getCachedFolder(payload.folderId);
|
||||
if (!clickedFolder) return;
|
||||
switch (payload.action) {
|
||||
case FOLDER_LIST_ITEM_ACTIONS.CREATE:
|
||||
await createFolder({
|
||||
id: clickedFolder.id,
|
||||
name: clickedFolder.name,
|
||||
type: 'folder',
|
||||
});
|
||||
break;
|
||||
case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
|
||||
currentFolderId.value = clickedFolder.id;
|
||||
void router.push({
|
||||
name: VIEWS.NEW_WORKFLOW,
|
||||
query: { projectId: route.params?.projectId, parentFolderId: clickedFolder.id },
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Reusable action handlers
|
||||
// Both action handlers ultimately call these methods once folder to apply action to is determined
|
||||
const createFolder = async (parent: { id: string; name: string; type: 'project' | 'folder' }) => {
|
||||
const promptResponsePromise = message.prompt(
|
||||
i18n.baseText('folders.add.to.parent.message', { interpolate: { parent: parent.name } }),
|
||||
{
|
||||
confirmButtonText: i18n.baseText('generic.create'),
|
||||
cancelButtonText: i18n.baseText('generic.cancel'),
|
||||
inputErrorMessage: i18n.baseText('folders.add.invalidName.message'),
|
||||
inputValue: '',
|
||||
inputPattern: /^[a-zA-Z0-9-_ ]{1,100}$/,
|
||||
customClass: 'add-folder-modal',
|
||||
},
|
||||
);
|
||||
const promptResponse = await promptResponsePromise;
|
||||
if (promptResponse.action === MODAL_CONFIRM) {
|
||||
const folderName = promptResponse.value;
|
||||
try {
|
||||
const newFolder = await foldersStore.createFolder(
|
||||
folderName,
|
||||
route.params.projectId as string,
|
||||
parent.type === 'folder' ? parent.id : undefined,
|
||||
);
|
||||
|
||||
let newFolderURL = `/projects/${route.params.projectId}`;
|
||||
if (newFolder.parentFolder) {
|
||||
newFolderURL = `/projects/${route.params.projectId}/folders/${newFolder.id}/workflows`;
|
||||
}
|
||||
toast.showMessage({
|
||||
title: i18n.baseText('folders.add.success.title'),
|
||||
message: i18n.baseText('folders.add.success.message', {
|
||||
interpolate: {
|
||||
link: newFolderURL,
|
||||
name: newFolder.name,
|
||||
},
|
||||
}),
|
||||
type: 'success',
|
||||
});
|
||||
// If we are on an empty list, just add the new folder to the list
|
||||
if (!workflowsAndFolders.value.length) {
|
||||
workflowsAndFolders.value = [
|
||||
{
|
||||
id: newFolder.id,
|
||||
name: newFolder.name,
|
||||
resource: 'folder',
|
||||
createdAt: newFolder.createdAt,
|
||||
updatedAt: newFolder.updatedAt,
|
||||
homeProject: projectsStore.currentProject as ProjectSharingData,
|
||||
sharedWithProjects: [],
|
||||
workflowCount: 0,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
// Else fetch again with same filters & pagination applied
|
||||
await fetchWorkflows();
|
||||
}
|
||||
} catch (error) {
|
||||
toast.showError(error, 'Error creating folder');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const createFolderInCurrent = async () => {
|
||||
if (!route.params.projectId) return;
|
||||
const currentParent = currentFolder.value?.name || projectName.value;
|
||||
if (!currentParent) return;
|
||||
await createFolder({
|
||||
id: (route.params.folderId as string) ?? '-1',
|
||||
name: currentParent,
|
||||
type: currentFolder.value ? 'folder' : 'project',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -556,7 +833,7 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
|
|||
:disabled="readOnlyEnv || !projectPermissions.workflow.create"
|
||||
:loading="false"
|
||||
:resources-refreshing="loading"
|
||||
:custom-page-size="10"
|
||||
:custom-page-size="DEFAULT_WORKFLOW_PAGE_SIZE"
|
||||
:total-items="workflowsStore.totalWorkflowCount"
|
||||
:dont-perform-sorting-and-filtering="true"
|
||||
@click:add="addWorkflow"
|
||||
|
|
@ -567,7 +844,28 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
|
|||
@sort="onSortUpdated"
|
||||
>
|
||||
<template #header>
|
||||
<ProjectHeader />
|
||||
<ProjectHeader @create-folder="createFolderInCurrent" />
|
||||
</template>
|
||||
<template v-if="showFolders" #add-button>
|
||||
<N8nTooltip placement="top">
|
||||
<template #content>
|
||||
{{
|
||||
currentParentName
|
||||
? i18n.baseText('folders.add.to.parent.message', {
|
||||
interpolate: { parent: currentParentName },
|
||||
})
|
||||
: i18n.baseText('folders.add.here.message')
|
||||
}}
|
||||
</template>
|
||||
<N8nButton
|
||||
size="large"
|
||||
icon="folder-plus"
|
||||
type="tertiary"
|
||||
data-test-id="add-folder-button"
|
||||
:class="$style['add-folder-button']"
|
||||
@click="createFolderInCurrent"
|
||||
/>
|
||||
</N8nTooltip>
|
||||
</template>
|
||||
<template #callout>
|
||||
<N8nCallout
|
||||
|
|
@ -599,35 +897,33 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
|
|||
</N8nCallout>
|
||||
</template>
|
||||
<template #breadcrumbs>
|
||||
<n8n-breadcrumbs
|
||||
v-if="mainBreadcrumbsItems"
|
||||
:items="mainBreadcrumbsItems"
|
||||
:highlight-last-item="false"
|
||||
:path-truncated="currentFolder !== undefined"
|
||||
data-test-id="folder-card-breadcrumbs"
|
||||
>
|
||||
<template v-if="currentProject" #prepend>
|
||||
<div :class="$style['home-project']">
|
||||
<n8n-link :to="`/projects/${currentProject.id}`">
|
||||
<N8nText size="large" color="text-base">{{ projectName }}</N8nText>
|
||||
</n8n-link>
|
||||
<div v-if="breadcrumbsLoading" :class="$style['breadcrumbs-loading']">
|
||||
<n8n-loading :loading="breadcrumbsLoading" :rows="1" variant="p" />
|
||||
</div>
|
||||
<div v-else-if="showFolders && currentFolder" :class="$style['breadcrumbs-container']">
|
||||
<FolderBreadcrumbs
|
||||
:breadcrumbs="mainBreadcrumbs"
|
||||
:actions="mainBreadcrumbsActions"
|
||||
@item-selected="onBreadcrumbItemClick"
|
||||
@action="onBreadCrumbsAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n8n-breadcrumbs>
|
||||
</template>
|
||||
<template #item="{ item: data }">
|
||||
<FolderCard
|
||||
v-if="(data as FolderResource | WorkflowResource).resourceType === 'folder'"
|
||||
:data="data as FolderResource"
|
||||
:actions="folderCardActions"
|
||||
:breadcrumbs="cardBreadcrumbs"
|
||||
class="mb-2xs"
|
||||
@folder-opened="onFolderOpened"
|
||||
@action="onFolderCardAction"
|
||||
/>
|
||||
<WorkflowCard
|
||||
v-else
|
||||
data-test-id="resources-list-item"
|
||||
class="mb-2xs"
|
||||
:data="data as WorkflowResource"
|
||||
:breadcrumbs="cardBreadcrumbs"
|
||||
:workflow-list-event-bus="workflowListEventBus"
|
||||
:read-only="readOnlyEnv"
|
||||
@click:tag="onClickTag"
|
||||
|
|
@ -770,8 +1066,36 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
|
|||
}
|
||||
}
|
||||
|
||||
.home-project {
|
||||
.add-folder-button {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.breadcrumbs-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.breadcrumbs-loading {
|
||||
:global(.el-skeleton__item) {
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.add-folder-modal {
|
||||
width: 500px;
|
||||
padding-bottom: 0;
|
||||
.el-message-box__message {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
.el-message-box__btns {
|
||||
padding: 0 var(--spacing-l) var(--spacing-l);
|
||||
}
|
||||
.el-message-box__content {
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue