n8n-editor-ui
Version:
Workflow Editor UI for n8n
137 lines (136 loc) • 6.23 kB
JavaScript
import { C as computed, Cn as toDisplayString, Gt as unref, It as ref, M as createVNode, P as defineComponent, T as createBlock, bt as withCtx, et as openBlock, j as createTextVNode, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
import { _t as useI18n } from "./_MapCache-ficiegRb.js";
import { Sn as N8nButton_default, xn as N8nText_default, yn as N8nHeading_default } from "./src-DgvumQTi.js";
import "./en-CF30SCh2.js";
import "./preload-helper-CR0ecmWK.js";
import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
import { T as createEventBus } from "./truncate-B1HVeveJ.js";
import { O as useTelemetry } from "./builder.store-sBTWwxRU.js";
import "./empty-BuGRxzl4.js";
import "./dialog-D5O6wJX0.js";
import "./sanitize-html-Cc45ZKm8.js";
import "./CalendarDate-zWqgZMlk.js";
import "./path-browserify-BtCDmZ3_.js";
import { Yr as PROVIDER_CREDENTIAL_TYPE_MAP } from "./constants-BbpucWL4.js";
import "./merge-k8vSyyXH.js";
import "./_baseOrderBy-B_6CV8x6.js";
import "./dateformat-CM9k0--B.js";
import "./useDebounce-Bnb8W2LR.js";
import { t as Modal_default } from "./Modal-CaRDt4OG.js";
import { t as CredentialIcon_default } from "./CredentialIcon-FEnE25SA.js";
import { m as providerDisplayNames } from "./constants-DLTaaipl.js";
import { t as CredentialPicker_default } from "./CredentialPicker-C5gvgCLr.js";
var CredentialSelectorModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "CredentialSelectorModal",
props: {
modalName: {},
data: {}
},
setup(__props) {
const props = __props;
const i18n = useI18n();
const telemetry = useTelemetry();
const modalBus = ref(createEventBus());
const selectedCredentialId = ref(props.data.initialValue);
const credentialType = computed(() => PROVIDER_CREDENTIAL_TYPE_MAP[props.data.provider]);
function onCredentialSelect(credentialId) {
selectedCredentialId.value = credentialId;
}
function onCredentialDeselect() {
selectedCredentialId.value = null;
}
function onDeleteCredential(credentialId) {
if (!selectedCredentialId.value || credentialId !== selectedCredentialId.value) return;
selectedCredentialId.value = null;
if (credentialId === props.data.initialValue) props.data.onSelect(props.data.provider, null);
}
function onCredentialModalOpened(credentialId) {
telemetry.track("User opened Credential modal", {
credential_type: credentialType.value,
source: "chat",
new_credential: !credentialId,
workflow_id: null
});
}
function onConfirm() {
if (selectedCredentialId.value) {
props.data.onSelect(props.data.provider, selectedCredentialId.value);
modalBus.value.emit("close");
}
}
function onCancel() {
modalBus.value.emit("close");
}
return (_ctx, _cache) => {
return openBlock(), createBlock(Modal_default, {
name: _ctx.modalName,
"event-bus": modalBus.value,
width: "50%",
center: true,
"max-width": "460px",
"min-height": "250px"
}, {
header: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.header) }, [createVNode(CredentialIcon_default, {
"credential-type-name": unref(PROVIDER_CREDENTIAL_TYPE_MAP)[_ctx.data.provider],
size: 24,
class: normalizeClass(_ctx.$style.icon)
}, null, 8, ["credential-type-name", "class"]), createVNode(unref(N8nHeading_default), {
size: "medium",
tag: "h2",
class: normalizeClass(_ctx.$style.title)
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("chatHub.credentials.selector.title", { interpolate: { provider: unref(providerDisplayNames)[_ctx.data.provider] } })), 1)]),
_: 1
}, 8, ["class"])], 2)]),
content: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [createVNode(unref(N8nText_default), {
size: "small",
color: "text-base"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("chatHub.credentials.selector.chooseOrCreate", { interpolate: { provider: unref(providerDisplayNames)[_ctx.data.provider] } })), 1)]),
_: 1
}), createBaseVNode("div", { class: normalizeClass(_ctx.$style.credentialContainer) }, [createVNode(CredentialPicker_default, {
class: normalizeClass(_ctx.$style.credentialPicker),
"app-name": unref(providerDisplayNames)[_ctx.data.provider],
"credential-type": credentialType.value,
"selected-credential-id": selectedCredentialId.value,
"show-delete": true,
"hide-create-new": true,
onCredentialSelected: onCredentialSelect,
onCredentialDeselected: onCredentialDeselect,
onCredentialDeleted: onDeleteCredential,
onCredentialModalOpened
}, null, 8, [
"class",
"app-name",
"credential-type",
"selected-credential-id"
])], 2)], 2)]),
footer: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.footer) }, [createVNode(unref(N8nButton_default), {
type: "tertiary",
onClick: onCancel
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("chatHub.credentials.selector.cancel")), 1)]),
_: 1
}), createVNode(unref(N8nButton_default), {
type: "primary",
disabled: !selectedCredentialId.value,
onClick: onConfirm
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("chatHub.credentials.selector.confirm")), 1)]),
_: 1
}, 8, ["disabled"])], 2)]),
_: 1
}, 8, ["name", "event-bus"]);
};
}
});
var CredentialSelectorModal_vue_vue_type_style_index_0_lang_module_default = {
content: "_content_1edrp_123",
footer: "_footer_1edrp_130",
header: "_header_1edrp_138",
icon: "_icon_1edrp_144",
credentialContainer: "_credentialContainer_1edrp_149",
credentialPicker: "_credentialPicker_1edrp_156"
};
var CredentialSelectorModal_default = /* @__PURE__ */ __plugin_vue_export_helper_default(CredentialSelectorModal_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": CredentialSelectorModal_vue_vue_type_style_index_0_lang_module_default }]]);
export { CredentialSelectorModal_default as default };