507 lines
19 KiB
JavaScript
Executable File
507 lines
19 KiB
JavaScript
Executable File
import { d as defineComponent, a2 as useRoute, r as ref, x as computed, V as VIEWS, c as useI18n, a7 as watch, e as createBlock, g as openBlock, g8 as N8nTabs, aG as useTemplateRef, h as createElementBlock, n as normalizeClass, X as renderSlot, i as createVNode, l as unref, e6 as N8nActionToggle, w as withCtx, aa as _sfc_main$3, _ as _export_sfc, b as useRouter, au as useProjectsStore, af as useSourceControlStore, v as useSettingsStore, Q as useUIStore, aF as ProjectTypes, fj as isIconOrEmoji, aB as getResourcePermissions, g9 as useElementSize, ga as useResizeObserver, j as createBaseVNode, f as createCommentVNode, fk as __unplugin_components_0, m as N8nHeading, k as createTextVNode, t as toDisplayString, p as N8nText, q as N8nButton, K as mergeProps, a9 as Tooltip, gb as PROJECT_DATA_STORES } from "./index-CeNA_ukL.js";
|
|
import { u as useProjectPages } from "./useProjectPages-xv6Eq2Y5.js";
|
|
function processDynamicTab(tab, projectId) {
|
|
if (!tab.dynamicRoute) {
|
|
return tab;
|
|
}
|
|
const tabRoute = {
|
|
name: tab.dynamicRoute.name
|
|
};
|
|
if (tab.dynamicRoute.includeProjectId && projectId) {
|
|
tabRoute.params = { projectId };
|
|
}
|
|
const { dynamicRoute, ...tabWithoutDynamic } = tab;
|
|
return {
|
|
...tabWithoutDynamic,
|
|
to: tabRoute
|
|
};
|
|
}
|
|
function processDynamicTabs(tabs, projectId) {
|
|
return tabs.map((tab) => processDynamicTab(tab, projectId));
|
|
}
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "ProjectTabs",
|
|
props: {
|
|
showSettings: { type: Boolean, default: false },
|
|
showExecutions: { type: Boolean, default: true },
|
|
pageType: { default: "project" },
|
|
additionalTabs: { default: () => [] }
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const locale = useI18n();
|
|
const route = useRoute();
|
|
const selectedTab = ref("");
|
|
const selectedTabLabel = computed(() => selectedTab.value ? String(selectedTab.value) : "");
|
|
const projectId = computed(() => {
|
|
return Array.isArray(route?.params?.projectId) ? route.params.projectId[0] : route?.params?.projectId;
|
|
});
|
|
const getRouteConfigs = () => {
|
|
if (projectId.value) {
|
|
return {
|
|
workflows: {
|
|
name: VIEWS.PROJECTS_WORKFLOWS,
|
|
params: { projectId: projectId.value }
|
|
},
|
|
credentials: {
|
|
name: VIEWS.PROJECTS_CREDENTIALS,
|
|
params: { projectId: projectId.value }
|
|
},
|
|
executions: {
|
|
name: VIEWS.PROJECTS_EXECUTIONS,
|
|
params: { projectId: projectId.value }
|
|
}
|
|
};
|
|
}
|
|
if (props.pageType === "shared") {
|
|
return {
|
|
workflows: { name: VIEWS.SHARED_WORKFLOWS },
|
|
credentials: { name: VIEWS.SHARED_CREDENTIALS },
|
|
executions: { name: VIEWS.NOT_FOUND }
|
|
};
|
|
}
|
|
return {
|
|
workflows: { name: VIEWS.WORKFLOWS },
|
|
credentials: { name: VIEWS.CREDENTIALS },
|
|
executions: { name: VIEWS.EXECUTIONS }
|
|
};
|
|
};
|
|
const createTab = (label, routeKey, routes) => {
|
|
return {
|
|
label: locale.baseText(label),
|
|
value: routes[routeKey].name,
|
|
to: routes[routeKey]
|
|
};
|
|
};
|
|
const options = computed(() => {
|
|
const routes = getRouteConfigs();
|
|
const tabs = [
|
|
createTab("mainSidebar.workflows", "workflows", routes),
|
|
createTab("mainSidebar.credentials", "credentials", routes)
|
|
];
|
|
if (props.showExecutions) {
|
|
tabs.push(createTab("mainSidebar.executions", "executions", routes));
|
|
}
|
|
if (props.additionalTabs?.length) {
|
|
const processedAdditionalTabs = processDynamicTabs(props.additionalTabs, projectId.value);
|
|
tabs.push(...processedAdditionalTabs);
|
|
}
|
|
if (props.showSettings) {
|
|
tabs.push({
|
|
label: locale.baseText("projects.settings"),
|
|
value: VIEWS.PROJECT_SETTINGS,
|
|
to: { name: VIEWS.PROJECT_SETTINGS, params: { projectId: projectId.value } }
|
|
});
|
|
}
|
|
return tabs;
|
|
});
|
|
watch(
|
|
() => route?.name,
|
|
() => {
|
|
selectedTab.value = route.name === VIEWS.PROJECTS_FOLDERS ? VIEWS.PROJECTS_WORKFLOWS : route.name;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
function onSelectTab(value) {
|
|
selectedTab.value = value;
|
|
}
|
|
return (_ctx, _cache) => {
|
|
const _component_N8nTabs = N8nTabs;
|
|
return openBlock(), createBlock(_component_N8nTabs, {
|
|
"model-value": selectedTabLabel.value,
|
|
options: options.value,
|
|
"data-test-id": "project-tabs",
|
|
"onUpdate:modelValue": onSelectTab
|
|
}, null, 8, ["model-value", "options"]);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "ProjectCreateResource",
|
|
props: {
|
|
actions: {},
|
|
disabled: { type: Boolean },
|
|
type: {}
|
|
},
|
|
emits: ["action"],
|
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
const emit = __emit;
|
|
const actionToggleRef = useTemplateRef("actionToggleRef");
|
|
__expose({
|
|
openActionToggle: (isOpen) => actionToggleRef.value?.openActionToggle(isOpen)
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([_ctx.$style.buttonGroup])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
createVNode(unref(N8nActionToggle), {
|
|
ref_key: "actionToggleRef",
|
|
ref: actionToggleRef,
|
|
"data-test-id": "add-resource",
|
|
actions: _ctx.actions,
|
|
placement: "bottom-end",
|
|
teleported: false,
|
|
onAction: _cache[0] || (_cache[0] = ($event) => emit("action", $event))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(_sfc_main$3), {
|
|
disabled: _ctx.disabled,
|
|
class: normalizeClass([_ctx.$style.buttonGroupDropdown]),
|
|
icon: "chevron-down",
|
|
type: _ctx.type ?? "primary"
|
|
}, null, 8, ["disabled", "class", "type"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["actions"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
const buttonGroup = "_buttonGroup_aulto_123";
|
|
const buttonGroupDropdown = "_buttonGroupDropdown_aulto_137";
|
|
const style0$1 = {
|
|
buttonGroup,
|
|
buttonGroupDropdown
|
|
};
|
|
const cssModules$1 = {
|
|
"$style": style0$1
|
|
};
|
|
const ProjectCreateResource = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
|
|
const truncateTextToFitWidth = (text, availableWidth, fontSizeInPixels) => {
|
|
if (!text || availableWidth <= 0) {
|
|
return "";
|
|
}
|
|
const averageCharWidth = 0.55 * fontSizeInPixels;
|
|
const maxLengthToDisplay = Math.floor(availableWidth / averageCharWidth);
|
|
if (text.length <= maxLengthToDisplay) {
|
|
return "";
|
|
}
|
|
const truncated = text.slice(0, maxLengthToDisplay);
|
|
const lastSpaceIndex = truncated.lastIndexOf(" ");
|
|
return truncated.slice(0, lastSpaceIndex === -1 ? maxLengthToDisplay : lastSpaceIndex) + "...";
|
|
};
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "ProjectHeader",
|
|
emits: ["createFolder"],
|
|
setup(__props, { emit: __emit }) {
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const i18n = useI18n();
|
|
const projectsStore = useProjectsStore();
|
|
const sourceControlStore = useSourceControlStore();
|
|
const settingsStore = useSettingsStore();
|
|
const uiStore = useUIStore();
|
|
const projectPages = useProjectPages();
|
|
const emit = __emit;
|
|
const headerIcon = computed(() => {
|
|
if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
|
|
return { type: "icon", value: "user" };
|
|
} else if (projectsStore.currentProject?.name) {
|
|
return isIconOrEmoji(projectsStore.currentProject.icon) ? projectsStore.currentProject.icon : { type: "icon", value: "layers" };
|
|
} else {
|
|
return { type: "icon", value: "house" };
|
|
}
|
|
});
|
|
const projectName = computed(() => {
|
|
if (!projectsStore.currentProject) {
|
|
if (projectPages.isSharedSubPage) {
|
|
return i18n.baseText("projects.header.shared.title");
|
|
} else if (projectPages.isOverviewSubPage) {
|
|
return i18n.baseText("projects.menu.overview");
|
|
}
|
|
return null;
|
|
} else if (projectsStore.currentProject.type === ProjectTypes.Personal) {
|
|
return i18n.baseText("projects.menu.personal");
|
|
} else {
|
|
return projectsStore.currentProject.name;
|
|
}
|
|
});
|
|
const projectPermissions = computed(
|
|
() => getResourcePermissions(projectsStore.currentProject?.scopes).project
|
|
);
|
|
const showSettings = computed(
|
|
() => !!route?.params?.projectId && !!projectPermissions.value.update && projectsStore.currentProject?.type === ProjectTypes.Team
|
|
);
|
|
const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
|
|
const isPersonalProject = computed(() => {
|
|
return homeProject.value?.type === ProjectTypes.Personal;
|
|
});
|
|
const showFolders = computed(() => {
|
|
return settingsStore.isFoldersFeatureEnabled && [VIEWS.PROJECTS_WORKFLOWS, VIEWS.PROJECTS_FOLDERS].includes(route.name);
|
|
});
|
|
const customProjectTabs = computed(() => {
|
|
let tabType;
|
|
if (projectPages.isSharedSubPage) {
|
|
tabType = "shared";
|
|
} else if (projectPages.isOverviewSubPage) {
|
|
tabType = "overview";
|
|
} else {
|
|
tabType = "project";
|
|
}
|
|
const activeModules = Object.keys(uiStore.moduleTabs[tabType]).filter(
|
|
settingsStore.isModuleActive
|
|
);
|
|
return activeModules.flatMap((module) => uiStore.moduleTabs[tabType][module]);
|
|
});
|
|
const ACTION_TYPES = {
|
|
WORKFLOW: "workflow",
|
|
CREDENTIAL: "credential",
|
|
FOLDER: "folder",
|
|
DATA_STORE: "dataStore"
|
|
};
|
|
const createWorkflowButton = computed(() => ({
|
|
value: ACTION_TYPES.WORKFLOW,
|
|
label: i18n.baseText("projects.header.create.workflow"),
|
|
icon: sourceControlStore.preferences.branchReadOnly ? "lock" : void 0,
|
|
size: "mini",
|
|
disabled: sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(homeProject.value?.scopes).workflow.create
|
|
}));
|
|
const menu = computed(() => {
|
|
const items = [
|
|
{
|
|
value: ACTION_TYPES.CREDENTIAL,
|
|
label: i18n.baseText("projects.header.create.credential"),
|
|
disabled: sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(homeProject.value?.scopes).credential.create
|
|
}
|
|
];
|
|
if (showFolders.value) {
|
|
items.push({
|
|
value: ACTION_TYPES.FOLDER,
|
|
label: i18n.baseText("projects.header.create.folder"),
|
|
disabled: sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(homeProject.value?.scopes).folder.create
|
|
});
|
|
}
|
|
if (settingsStore.isDataStoreFeatureEnabled) {
|
|
items.push({
|
|
value: ACTION_TYPES.DATA_STORE,
|
|
label: i18n.baseText("dataStore.add.button.label"),
|
|
disabled: sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(homeProject.value?.scopes)?.dataStore?.create
|
|
});
|
|
}
|
|
return items;
|
|
});
|
|
const showProjectIcon = computed(() => {
|
|
return !projectPages.isOverviewSubPage && !projectPages.isSharedSubPage && !isPersonalProject.value;
|
|
});
|
|
const actions2 = {
|
|
[ACTION_TYPES.WORKFLOW]: (projectId) => {
|
|
void router.push({
|
|
name: VIEWS.NEW_WORKFLOW,
|
|
query: {
|
|
projectId,
|
|
parentFolderId: route.params.folderId
|
|
}
|
|
});
|
|
},
|
|
[ACTION_TYPES.CREDENTIAL]: (projectId) => {
|
|
void router.push({
|
|
name: VIEWS.PROJECTS_CREDENTIALS,
|
|
params: {
|
|
projectId,
|
|
credentialId: "create"
|
|
}
|
|
});
|
|
},
|
|
[ACTION_TYPES.FOLDER]: () => {
|
|
emit("createFolder");
|
|
},
|
|
[ACTION_TYPES.DATA_STORE]: (projectId) => {
|
|
void router.push({
|
|
name: PROJECT_DATA_STORES,
|
|
params: { projectId, new: "new" }
|
|
});
|
|
}
|
|
};
|
|
const pageType = computed(() => {
|
|
if (projectPages.isSharedSubPage) {
|
|
return "shared";
|
|
} else if (projectPages.isOverviewSubPage) {
|
|
return "overview";
|
|
} else {
|
|
return "project";
|
|
}
|
|
});
|
|
const sectionDescription = computed(() => {
|
|
if (projectPages.isSharedSubPage) {
|
|
return i18n.baseText("projects.header.shared.subtitle");
|
|
} else if (projectPages.isOverviewSubPage) {
|
|
return i18n.baseText("projects.header.overview.subtitle");
|
|
} else if (isPersonalProject.value) {
|
|
return i18n.baseText("projects.header.personal.subtitle");
|
|
}
|
|
return null;
|
|
});
|
|
const projectDescription = computed(() => {
|
|
if (projectPages.isProjectsSubPage) {
|
|
return projectsStore.currentProject?.description;
|
|
}
|
|
return null;
|
|
});
|
|
const projectHeaderRef = ref(null);
|
|
const { width: projectHeaderWidth } = useElementSize(projectHeaderRef);
|
|
const headerActionsRef = ref(null);
|
|
const { width: headerActionsWidth } = useElementSize(headerActionsRef);
|
|
const projectSubtitleFontSizeInPxs = ref(null);
|
|
useResizeObserver(projectHeaderRef, () => {
|
|
if (!projectHeaderRef.value) {
|
|
return;
|
|
}
|
|
const projectSubtitleEl = projectHeaderRef.value.querySelector(
|
|
'span[data-test-id="project-subtitle"]'
|
|
);
|
|
if (projectSubtitleEl) {
|
|
const computedStyle = window.getComputedStyle(projectSubtitleEl);
|
|
projectSubtitleFontSizeInPxs.value = parseFloat(computedStyle.fontSize);
|
|
}
|
|
});
|
|
const projectDescriptionTruncated = computed(() => {
|
|
if (!projectDescription.value) {
|
|
return "";
|
|
}
|
|
const availableTextWidth = projectHeaderWidth.value - headerActionsWidth.value;
|
|
const fontSizeInPixels = projectSubtitleFontSizeInPxs.value ?? 14;
|
|
return truncateTextToFitWidth(projectDescription.value, availableTextWidth, fontSizeInPixels);
|
|
});
|
|
const onSelect = (action) => {
|
|
const executableAction = actions2[action];
|
|
if (!homeProject.value) {
|
|
return;
|
|
}
|
|
executableAction(homeProject.value.id);
|
|
};
|
|
return (_ctx, _cache) => {
|
|
const _component_N8nHeading = N8nHeading;
|
|
const _component_N8nText = N8nText;
|
|
return openBlock(), createElementBlock("div", null, [
|
|
createBaseVNode("div", {
|
|
ref_key: "projectHeaderRef",
|
|
ref: projectHeaderRef,
|
|
class: normalizeClass(_ctx.$style.projectHeader)
|
|
}, [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.projectDetails)
|
|
}, [
|
|
showProjectIcon.value ? (openBlock(), createBlock(__unplugin_components_0, {
|
|
key: 0,
|
|
icon: headerIcon.value,
|
|
"border-less": true,
|
|
size: "medium"
|
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.headerActions)
|
|
}, [
|
|
projectName.value ? (openBlock(), createBlock(_component_N8nHeading, {
|
|
key: 0,
|
|
bold: "",
|
|
tag: "h2",
|
|
size: "xlarge",
|
|
"data-test-id": "project-name"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(projectName.value), 1)
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true),
|
|
sectionDescription.value ? (openBlock(), createBlock(_component_N8nText, {
|
|
key: 1,
|
|
color: "text-light",
|
|
"data-test-id": "project-subtitle"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(sectionDescription.value), 1)
|
|
]),
|
|
_: 1
|
|
})) : projectDescription.value ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(_ctx.$style.projectDescriptionWrapper)
|
|
}, [
|
|
createVNode(_component_N8nText, {
|
|
color: "text-light",
|
|
"data-test-id": "project-subtitle"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(projectDescriptionTruncated.value || projectDescription.value), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
projectDescriptionTruncated.value ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.tooltip)
|
|
}, [
|
|
createVNode(_component_N8nText, { color: "text-light" }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(projectDescription.value), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2)) : createCommentVNode("", true)
|
|
], 2)) : createCommentVNode("", true)
|
|
], 2)
|
|
], 2),
|
|
unref(route).name !== unref(VIEWS).PROJECT_SETTINGS ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref_key: "headerActionsRef",
|
|
ref: headerActionsRef,
|
|
class: normalizeClass([_ctx.$style.headerActions])
|
|
}, [
|
|
createVNode(unref(Tooltip), {
|
|
disabled: !unref(sourceControlStore).preferences.branchReadOnly,
|
|
content: unref(i18n).baseText("readOnlyEnv.cantAdd.any")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(ProjectCreateResource, {
|
|
"data-test-id": "add-resource-buttons",
|
|
actions: menu.value,
|
|
disabled: unref(sourceControlStore).preferences.branchReadOnly,
|
|
onAction: onSelect
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(N8nButton), mergeProps({ "data-test-id": "add-resource-workflow" }, createWorkflowButton.value, {
|
|
onClick: _cache[0] || (_cache[0] = ($event) => onSelect(ACTION_TYPES.WORKFLOW))
|
|
}), null, 16)
|
|
]),
|
|
_: 1
|
|
}, 8, ["actions", "disabled"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled", "content"])
|
|
], 2)) : createCommentVNode("", true)
|
|
], 2),
|
|
renderSlot(_ctx.$slots, "default"),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.actions)
|
|
}, [
|
|
createVNode(_sfc_main$2, {
|
|
"page-type": pageType.value,
|
|
"show-executions": !unref(projectPages).isSharedSubPage,
|
|
"show-settings": showSettings.value,
|
|
"additional-tabs": customProjectTabs.value
|
|
}, null, 8, ["page-type", "show-executions", "show-settings", "additional-tabs"])
|
|
], 2)
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
const projectHeader = "_projectHeader_u6cmv_123";
|
|
const projectDetails = "_projectDetails_u6cmv_131";
|
|
const actions = "_actions_u6cmv_136";
|
|
const projectDescriptionWrapper = "_projectDescriptionWrapper_u6cmv_140";
|
|
const tooltip = "_tooltip_u6cmv_144";
|
|
const headerActions = "_headerActions_u6cmv_167";
|
|
const style0 = {
|
|
projectHeader,
|
|
projectDetails,
|
|
actions,
|
|
projectDescriptionWrapper,
|
|
tooltip,
|
|
headerActions
|
|
};
|
|
const cssModules = {
|
|
"$style": style0
|
|
};
|
|
const ProjectHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
export {
|
|
ProjectHeader as P
|
|
};
|