n8n-editor-ui 1.71.3 → 1.72.1

package/dist/assets/{WorkflowsView-Bc1WW7-8.js → WorkflowsView-ClrcrpKc.js}

@@ -1,10 +1,10 @@
-import { R as ResourcesListLayout } from "./ResourcesListLayout-CKArPHiS.js";
-import { jf as arrayMap, jg as getAllKeysIn, jh as baseIteratee, ji as basePickBy, d as defineComponent, a as useToast, b as useRouter, p as useSettingsStore, K as useUIStore, u as useUsersStore, T as useWorkflowsStore, a1 as useProjectsStore, q as computed, am as getResourcePermissions, j2 as dateformat, m as resolveComponent, c as openBlock, e as createBlock, w as withCtx, i as createVNode, n as normalizeClass, k as createTextVNode, t as toDisplayString, l as unref, f as createCommentVNode, j as createBaseVNode, I as withModifiers, jj as ResourceType, ay as withDirectives, iB as _sfc_main$2, az as vShow, h as createElementBlock, g as useI18n, V as VIEWS, ab as WORKFLOW_SHARE_MODAL_KEY, aj as DUPLICATE_MODAL_KEY, ae as MODAL_CONFIRM, jk as PROJECT_MOVE_RESOURCE_MODAL, al as useMessage, ak as useTelemetry, _ as _export_sfc, U as useRoute, a0 as useSourceControlStore, av as usePostHog, aL as useTemplatesStore, D as useTagsStore, a3 as useDocumentTitle, r as ref, a8 as EnterpriseEditionFeature, iu as MORE_ONBOARDING_OPTIONS_EXPERIMENT, H as watch, o as onMounted, iF as N8nHeading, eo as N8nText, jl as N8nCard, jm as N8nIcon, jn as N8nInputLabel, a7 as _sfc_main$3, eB as N8nSelect, F as Fragment, A as renderList, eA as _sfc_main$4 } from "./index-D57HUAs6.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-Def_oRg7.js";
-import { P as ProjectCardBadge } from "./ProjectCardBadge-Dwm_41ZR.js";
-import { P as ProjectHeader } from "./ProjectHeader-DTRxu2oO.js";
-import "./useWorkflowActivate-DibPO-sA.js";
-import "./useGlobalEntityCreation-D_NS7_je.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-BKk7DIWo.js";
+import { i1 as arrayMap, i2 as getAllKeysIn, i3 as baseIteratee, i4 as basePickBy, d as defineComponent, a as useToast, b as useRouter, p as useSettingsStore, K as useUIStore, u as useUsersStore, T as useWorkflowsStore, a1 as useProjectsStore, q as computed, am as getResourcePermissions, hO as dateformat, m as resolveComponent, c as openBlock, e as createBlock, w as withCtx, i as createVNode, n as normalizeClass, k as createTextVNode, t as toDisplayString, l as unref, f as createCommentVNode, j as createBaseVNode, I as withModifiers, i5 as ResourceType, ay as withDirectives, hj as _sfc_main$2, az as vShow, h as createElementBlock, g as useI18n, V as VIEWS, ab as WORKFLOW_SHARE_MODAL_KEY, aj as DUPLICATE_MODAL_KEY, ae as MODAL_CONFIRM, i6 as PROJECT_MOVE_RESOURCE_MODAL, al as useMessage, ak as useTelemetry, _ as _export_sfc, U as useRoute, a0 as useSourceControlStore, av as usePostHog, D as useTagsStore, a3 as useDocumentTitle, r as ref, a8 as EnterpriseEditionFeature, i7 as EASY_AI_WORKFLOW_EXPERIMENT, H as watch, o as onMounted, i8 as N8nIcon, hn as N8nHeading, cN as N8nText, i9 as N8nCard, ia as N8nInputLabel, a7 as _sfc_main$3, d0 as N8nSelect, F as Fragment, A as renderList, c$ as _sfc_main$4, hG as EASY_AI_WORKFLOW_JSON } from "./index-fCEqBD8K.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-BbpMhG1U.js";
+import { P as ProjectCardBadge } from "./ProjectCardBadge-B6a5Tl_X.js";
+import { P as ProjectHeader } from "./ProjectHeader-CUoGk-wO.js";
+import "./useWorkflowActivate-D8cU5eJ_.js";
+import "./useGlobalEntityCreation-DGVSN-Im.js";
 function pickBy(object, predicate) {
   if (object == null) {
     return {};
@@ -98,7 +98,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       );
     });
     async function onClick(event) {
-      if ((event == null ? void 0 : event.ctrlKey) || (event == null ? void 0 : event.metaKey)) {
+      if (event?.ctrlKey || event?.metaKey) {
         const route = router.resolve({
           name: VIEWS.WORKFLOW,
           params: { name: props.data.id }
@@ -314,12 +314,11 @@ const cssModules$1 = {
 };
 const WorkflowCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
 const _hoisted_1 = { class: "text-center mt-s" };
-const _hoisted_2 = ["href"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "mb-s"
 };
-const _hoisted_4 = { class: "mb-s" };
+const _hoisted_3 = { class: "mb-s" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowsView",
   setup(__props) {
@@ -332,7 +331,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const settingsStore = useSettingsStore();
     const posthogStore = usePostHog();
     const projectsStore = useProjectsStore();
-    const templatesStore = useTemplatesStore();
     const telemetry = useTelemetry();
     const uiStore = useUIStore();
     const tagsStore = useTagsStore();
@@ -349,6 +347,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       status: StatusFilter.ALL,
       tags: []
     });
+    const easyAICalloutVisible = ref(true);
     const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
     const currentUser = computed(() => usersStore.currentUser ?? {});
     const allWorkflows = computed(() => workflowsStore.allWorkflows);
@@ -369,26 +368,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         value: StatusFilter.DEACTIVATED
       }
     ]);
-    const userRole = computed(() => {
-      var _a, _b;
-      const role = (_a = usersStore.currentUserCloudInfo) == null ? void 0 : _a.role;
-      if (role) return role;
-      const answers = (_b = usersStore.currentUser) == null ? void 0 : _b.personalizationAnswers;
-      if (answers && "role" in answers) {
-        return answers.role;
-      }
-      return void 0;
-    });
-    const isOnboardingExperimentEnabled = computed(() => {
-      return posthogStore.getVariant(MORE_ONBOARDING_OPTIONS_EXPERIMENT.name) === MORE_ONBOARDING_OPTIONS_EXPERIMENT.variant;
-    });
-    const isSalesUser = computed(() => {
-      return ["Sales", "sales-and-marketing"].includes(userRole.value || "");
+    const showEasyAIWorkflowCallout = computed(() => {
+      const isEasyAIWorkflowExperimentEnabled = posthogStore.getVariant(EASY_AI_WORKFLOW_EXPERIMENT.name) === EASY_AI_WORKFLOW_EXPERIMENT.variant;
+      const easyAIWorkflowOnboardingDone = usersStore.isEasyAIWorkflowOnboardingDone;
+      return isEasyAIWorkflowExperimentEnabled && !easyAIWorkflowOnboardingDone;
     });
     const projectPermissions = computed(() => {
-      var _a, _b;
       return getResourcePermissions(
-        ((_a = projectsStore.currentProject) == null ? void 0 : _a.scopes) ?? ((_b = projectsStore.personalProject) == null ? void 0 : _b.scopes)
+        projectsStore.currentProject?.scopes ?? projectsStore.personalProject?.scopes
       );
     });
     const emptyListDescription = computed(() => {
@@ -404,12 +391,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const iFilters = newFilters;
       if (settingsStore.areTagsEnabled && iFilters.tags.length > 0) {
         matches = matches && iFilters.tags.every(
-          (tag) => {
-            var _a;
-            return (_a = resource.tags) == null ? void 0 : _a.find(
-              (resourceTag) => typeof resourceTag === "object" ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`
-            );
-          }
+          (tag) => resource.tags?.find(
+            (resourceTag) => typeof resourceTag === "object" ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`
+          )
         );
       }
       if (newFilters.status !== "") {
@@ -421,39 +405,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       Object.assign(filters.value, newFilters);
     };
     const addWorkflow = () => {
-      var _a;
       uiStore.nodeViewInitialized = false;
       void router.push({
         name: VIEWS.NEW_WORKFLOW,
-        query: { projectId: (_a = route.params) == null ? void 0 : _a.projectId }
+        query: { projectId: route.params?.projectId }
       });
       telemetry.track("User clicked add workflow button", {
         source: "Workflows list"
       });
       trackEmptyCardClick("blank");
     };
-    const getTemplateRepositoryURL = () => templatesStore.websiteTemplateRepositoryURL;
     const trackEmptyCardClick = (option) => {
       telemetry.track("User clicked empty page option", {
         option
       });
-      if (option === "templates" && isSalesUser.value) {
-        trackCategoryLinkClick("Sales");
-      }
-    };
-    const trackCategoryLinkClick = (category) => {
-      var _a;
-      telemetry.track(`User clicked Browse ${category} Templates`, {
-        role: (_a = usersStore.currentUserCloudInfo) == null ? void 0 : _a.role,
-        active_workflow_count: workflowsStore.activeWorkflows.length
-      });
     };
     const initialize = async () => {
-      var _a;
       loading.value = true;
       await Promise.all([
         usersStore.fetchUsers(),
-        workflowsStore.fetchAllWorkflows((_a = route.params) == null ? void 0 : _a.projectId),
+        workflowsStore.fetchAllWorkflows(route.params?.projectId),
         workflowsStore.fetchActiveWorkflows()
       ]);
       loading.value = false;
@@ -515,10 +486,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     watch(filters, () => saveFiltersOnQueryString(), { deep: true });
     watch(
-      () => {
-        var _a;
-        return (_a = route.params) == null ? void 0 : _a.projectId;
-      },
+      () => route.params?.projectId,
       async () => await initialize()
     );
     onMounted(async () => {
@@ -526,7 +494,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       await setFiltersFromQueryString();
       void usersStore.showPersonalizationSurvey();
     });
+    const openAIWorkflow = async (source) => {
+      dismissEasyAICallout();
+      telemetry.track(
+        "User clicked test AI workflow",
+        {
+          source
+        },
+        { withPostHog: true }
+      );
+      await router.push({
+        name: VIEWS.WORKFLOW_ONBOARDING,
+        params: { id: EASY_AI_WORKFLOW_JSON.meta.templateId }
+      });
+    };
+    const dismissEasyAICallout = () => {
+      easyAICalloutVisible.value = false;
+    };
     return (_ctx, _cache) => {
+      const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_N8nCallout = resolveComponent("N8nCallout");
       return openBlock(), createBlock(ResourcesListLayout, {
         "resource-key": "workflows",
         resources: allWorkflows.value,
@@ -543,6 +530,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         header: withCtx(() => [
           createVNode(ProjectHeader)
         ]),
+        callout: withCtx(() => [
+          showEasyAIWorkflowCallout.value && easyAICalloutVisible.value ? (openBlock(), createBlock(_component_N8nCallout, {
+            key: 0,
+            theme: "secondary",
+            icon: "robot",
+            class: normalizeClass(_ctx.$style["easy-ai-workflow-callout"])
+          }, {
+            trailingContent: withCtx(() => [
+              createBaseVNode("div", {
+                class: normalizeClass(_ctx.$style["callout-trailing-content"])
+              }, [
+                createVNode(_component_n8n_button, {
+                  "data-test-id": "easy-ai-button",
+                  size: "small",
+                  type: "secondary",
+                  onClick: _cache[0] || (_cache[0] = ($event) => openAIWorkflow("callout"))
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("generic.tryNow")), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(N8nIcon), {
+                  size: "small",
+                  icon: "times",
+                  title: unref(i18n).baseText("generic.dismiss"),
+                  class: "clickable",
+                  onClick: dismissEasyAICallout
+                }, null, 8, ["title"])
+              ], 2)
+            ]),
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("workflows.list.easyAI")) + " ", 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : createCommentVNode("", true)
+        ]),
         default: withCtx(({ data, updateItemSize }) => [
           createVNode(WorkflowCard, {
             "data-test-id": "resources-list-item",
@@ -567,8 +591,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            !isOnboardingExperimentEnabled.value ? (openBlock(), createBlock(unref(N8nText), {
-              key: 0,
+            createVNode(unref(N8nText), {
               size: "large",
               color: "text-base"
             }, {
@@ -576,7 +599,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(emptyListDescription.value), 1)
               ]),
               _: 1
-            })) : createCommentVNode("", true)
+            })
           ]),
           !readOnlyEnv.value && projectPermissions.value.workflow.create ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -606,70 +629,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }, 8, ["class"]),
-            isSalesUser.value || isOnboardingExperimentEnabled.value ? (openBlock(), createElementBlock("a", {
+            showEasyAIWorkflowCallout.value ? (openBlock(), createBlock(unref(N8nCard), {
               key: 0,
-              href: "https://docs.n8n.io/courses/#available-courses",
-              class: normalizeClass(_ctx.$style.emptyStateCard),
-              target: "_blank"
-            }, [
-              createVNode(unref(N8nCard), {
-                hoverable: "",
-                "data-test-id": "browse-sales-templates-card",
-                onClick: _cache[0] || (_cache[0] = ($event) => trackEmptyCardClick("courses"))
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(N8nIcon), {
-                    class: normalizeClass(_ctx.$style.emptyStateCardIcon),
-                    icon: "graduation-cap"
-                  }, null, 8, ["class"]),
-                  createVNode(unref(N8nText), {
-                    size: "large",
-                    class: "mt-xs",
-                    color: "text-dark"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.learnN8n")), 1)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              })
-            ], 2)) : createCommentVNode("", true),
-            isSalesUser.value || isOnboardingExperimentEnabled.value ? (openBlock(), createElementBlock("a", {
-              key: 1,
-              href: getTemplateRepositoryURL(),
               class: normalizeClass(_ctx.$style.emptyStateCard),
-              target: "_blank"
-            }, [
-              createVNode(unref(N8nCard), {
-                hoverable: "",
-                "data-test-id": "browse-sales-templates-card",
-                onClick: _cache[1] || (_cache[1] = ($event) => trackEmptyCardClick("templates"))
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(N8nIcon), {
-                    class: normalizeClass(_ctx.$style.emptyStateCardIcon),
-                    icon: "box-open"
-                  }, null, 8, ["class"]),
-                  createVNode(unref(N8nText), {
-                    size: "large",
-                    class: "mt-xs",
-                    color: "text-dark"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.browseTemplates")), 1)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              })
-            ], 10, _hoisted_2)) : createCommentVNode("", true)
+              hoverable: "",
+              "data-test-id": "easy-ai-workflow-card",
+              onClick: _cache[1] || (_cache[1] = ($event) => openAIWorkflow("empty"))
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(N8nIcon), {
+                  class: normalizeClass(_ctx.$style.emptyStateCardIcon),
+                  icon: "robot"
+                }, null, 8, ["class"]),
+                createVNode(unref(N8nText), {
+                  size: "large",
+                  class: "mt-xs pl-2xs pr-2xs",
+                  color: "text-dark"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.easyAI")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["class"])) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true)
         ]),
         filters: withCtx(({ setKeyValue }) => [
-          unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("div", _hoisted_2, [
             createVNode(unref(N8nInputLabel), {
               label: unref(i18n).baseText("workflows.filters.tags"),
               bold: false,
@@ -684,7 +672,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": ($event) => setKeyValue("tags", $event)
             }, null, 8, ["placeholder", "model-value", "onUpdate:modelValue"])
           ])) : createCommentVNode("", true),
-          createBaseVNode("div", _hoisted_4, [
+          createBaseVNode("div", _hoisted_3, [
             createVNode(unref(N8nInputLabel), {
               label: unref(i18n).baseText("workflows.filters.status"),
               bold: false,
@@ -716,11 +704,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const actionsContainer = "_actionsContainer_1gv00_1";
-const emptyStateCard = "_emptyStateCard_1gv00_6";
-const emptyStateCardIcon = "_emptyStateCardIcon_1gv00_19";
+const actionsContainer = "_actionsContainer_1g69p_1";
+const emptyStateCard = "_emptyStateCard_1g69p_17";
+const emptyStateCardIcon = "_emptyStateCardIcon_1g69p_30";
 const style0 = {
   actionsContainer,
+  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_1g69p_6",
+  "callout-trailing-content": "_callout-trailing-content_1g69p_11",
   emptyStateCard,
   emptyStateCardIcon
 };

package/dist/assets/WorkflowsView-D5fBzfD4.css

@@ -0,0 +1,65 @@
+._cardLink_1ahnz_1 {
+  transition: box-shadow 0.3s ease;
+  cursor: pointer;
+  padding: 0;
+  align-items: stretch;
+}
+._cardLink_1ahnz_1:hover {
+  box-shadow: 0 2px 8px rgba(68, 28, 23, 0.1);
+}
+._cardHeading_1ahnz_11 {
+  font-size: var(--font-size-s);
+  word-break: break-word;
+  padding: var(--spacing-s) 0 0 var(--spacing-s);
+}
+._cardHeading_1ahnz_11 span {
+  color: var(--color-text-light);
+}
+._cardDescription_1ahnz_20 {
+  min-height: 19px;
+  display: flex;
+  align-items: center;
+  padding: 0 0 var(--spacing-s) var(--spacing-s);
+}
+._cardActions_1ahnz_27 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  padding: 0 var(--spacing-s) 0 0;
+  cursor: default;
+}._actionsContainer_1g69p_1 {
+  display: flex;
+  justify-content: center;
+}
+._easy-ai-workflow-callout_1g69p_6 {
+  margin-top: var(--spacing-xs);
+  padding-left: var(--spacing-s);
+  padding-right: var(--spacing-m);
+}
+._easy-ai-workflow-callout_1g69p_6 ._callout-trailing-content_1g69p_11 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-m);
+}
+._emptyStateCard_1g69p_17 {
+  width: 192px;
+  text-align: center;
+  display: inline-flex;
+  height: 230px;
+}
+._emptyStateCard_1g69p_17 + ._emptyStateCard_1g69p_17 {
+  margin-left: var(--spacing-s);
+}
+._emptyStateCard_1g69p_17:hover svg {
+  color: var(--color-primary);
+}
+._emptyStateCardIcon_1g69p_30 {
+  font-size: 48px;
+}
+._emptyStateCardIcon_1g69p_30 svg {
+  width: 48px !important;
+  color: var(--color-foreground-dark);
+  transition: color 0.3s ease;
+}