refactor: Add Onboarding call prompts (#3682)

* ✨ Implemented initial onboarding call prompt logic

* ✨ Added onboarding call prompt feature environment variable

* ✨ Implemented onboarding session signup modal

* 📈 Added initial telemetry for the onboarding call prompt

* ✔️ Fixing linter error in server.ts

* 💄 Updating onboaring call prompt and modal wording and styling

* ✨ Implemented initial version of fake doors feature

* ✨ Added parameters to onboarding call prompt request

* ✨ Finished implementing fake doors in settings

* 🔨 Updating onboarding call prompt fetching logic (fetching before timeout starts)

* 👌 Updating onboarding call prompt and fake door components based on the front-end review feedback

* ✨ Updated fake doors so they support UI location specification. Added credentials UI fake doors.

* ⚡ Added checkbox to the signup form, improved N8NCheckbox formatting to better handle overflow

* 💄 Moving seignup checkbox label text to i18n file, updating checkbox component css to force text wrap

* ✨ Update API calls to work with the new workflow request and response formats

* 👌 Updating fake door front-end based on the review feedback

* 👌 Updating onboarding call prompt and fake doors UI based in the product feedback

* ✨  Updated onboarding call prompts front-end to work with new endpoints and added new telemetry events

* 🐛 Fixing onboarding call prompts not appearing in first user sessions

* ⚡️ add createdAt to PublicUser

* 👌 Updating onboarding call prompts front-end to work with the latest back-end and addressing latest product review

* ✨ Improving error handling when submitting user emails on signup

* 💄 Updating info text on Logging feature page

* 💄 Updating first onboarding call prompt timeout to 5 minutes

* 💄 Fixing `N8nCheckbox` component font overflow

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -57,6 +57,14 @@
 						<n8n-menu-item index="connection"
 							><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item
 						>
+						<n8n-menu-item
+							v-for="fakeDoor in credentialsFakeDoorFeatures"
+							v-bind:key="fakeDoor.featureName"
+							:index="`coming-soon/${fakeDoor.id}`"
+							:class="$style.tab"
+						>
+							<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
+						</n8n-menu-item>
 						<n8n-menu-item index="details"
 							><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item
 						>
@@ -89,6 +97,9 @@
 						@accessChange="onNodeAccessChange"
 					/>
 				</div>
+				<div v-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
+					<FeatureComingSoon :featureId="activeTab.split('/')[1]"></FeatureComingSoon>
+				</div>
 			</div>
 		</template>
 	</Modal>
@@ -100,6 +111,7 @@ import Vue from 'vue';
 import {
 	ICredentialsDecryptedResponse,
 	ICredentialsResponse,
+	IFakeDoor,
 } from '@/Interface';
 
 import {
@@ -108,6 +120,7 @@ import {
 	ICredentialNodeAccess,
 	ICredentialsDecrypted,
 	ICredentialType,
+	INode,
 	INodeCredentialTestResult,
 	INodeParameters,
 	INodeProperties,
@@ -126,6 +139,7 @@ import CredentialInfo from './CredentialInfo.vue';
 import SaveButton from '../SaveButton.vue';
 import Modal from '../Modal.vue';
 import InlineNameEdit from '../InlineNameEdit.vue';
+import FeatureComingSoon from '../FeatureComingSoon.vue';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -140,6 +154,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		InlineNameEdit,
 		Modal,
 		SaveButton,
+		FeatureComingSoon,
 	},
 	props: {
 		modalName: {
@@ -351,6 +366,9 @@ export default mixins(showMessage, nodeHelpers).extend({
 			}
 			return true;
 		},
+		credentialsFakeDoorFeatures(): IFakeDoor[] {
+			return this.$store.getters['ui/getFakeDoorByLocation']('credentialsModal');
+		},
 	},
 	methods: {
 		async beforeClose() {
@@ -474,6 +492,15 @@ export default mixins(showMessage, nodeHelpers).extend({
 		},
 		onTabSelect(tab: string) {
 			this.activeTab = tab;
+			const tabName: string = tab.replaceAll('coming-soon/', '');
+			const credType: string = this.credentialType ? this.credentialType.name : '';
+			const activeNode: INode | null = this.$store.getters.activeNode;
+
+			this.$telemetry.track('User viewed credential tab', {
+				credential_type: credType,
+				node_type: activeNode ? activeNode.type : null,
+				tab: tabName,
+			});
 		},
 		onNodeAccessChange({name, value}: {name: string, value: boolean}) {
 			this.hasUnsavedChanges = true;