From 0e8cb74ab3e8e026372551d99da09c2e2825ef75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <miloradfilipovic19@gmail.com>
Date: Tue, 30 Aug 2022 11:10:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Added=20instance=20ID=20to=20abo?=
 =?UTF-8?q?ut=20modal=20and=20restyled=20credentials=20docs=20link=20(#390?=
 =?UTF-8?q?3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(editor): Added instance ID to about modal and restyled credentials docs link

* :lipstick: Use Notice component instead of Callout in CredentialConfig, remove unused imports
* :lipstick: Use css var for n8n-notice component and override it for credential configs to get rid of additional margins
* :white_check_mark: Update n8n-notice snapshots

Co-authored-by: Oleg Ivaniv <oleg@n8n.io>
---
 .../src/components/N8nNotice/Notice.vue         |  2 +-
 .../__tests__/__snapshots__/Notice.spec.ts.snap | 14 +++++++-------
 .../editor-ui/src/components/AboutModal.vue     | 10 ++++++++++
 .../CredentialEdit/CredentialConfig.vue         | 17 +++++++++--------
 .../editor-ui/src/plugins/i18n/locales/en.json  |  1 +
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 6f0681dbb..740e0d0ef 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -105,7 +105,7 @@ export default Vue.extend({
 	font-size: var(--font-size-2xs);
 	display: flex;
 	color: var(--custom-font-black);
-	margin: var(--spacing-s) 0;
+	margin: var(--notice-margin, var(--spacing-s) 0);
 	padding: var(--spacing-2xs);
 	background-color: var(--background-color);
 	border-width: 1px 1px 1px 7px;
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index d39ad415d..ea1dcc047 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -1,31 +1,31 @@
 // Vitest Snapshot v1
 
 exports[`components > N8nNotice > props > content > should render HTML 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_e2gnm_1 _warning_e2gnm_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_e2gnm_43\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_e2gnm_1 _warning_e2gnm_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\">This is a notice.</span></n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_e2gnm_43\\">This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_e2gnm_1 _warning_e2gnm_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\"> This is a notice.</span></n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_e2gnm_43\\"> This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_e2gnm_1 _warning_e2gnm_18\\">
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
   </div>
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index ba9408e91..8c5792687 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -34,6 +34,14 @@
 						</n8n-link>
 					</el-col>
 				</el-row>
+				<el-row>
+					<el-col :span="8" class="info-name">
+						<n8n-text>{{ $locale.baseText('about.instanceID') }}</n8n-text>
+					</el-col>
+					<el-col :span="16">
+						<n8n-text>{{ instanceId }}</n8n-text>
+					</el-col>
+				</el-row>
 			</div>
 		</template>
 
@@ -64,6 +72,7 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapGetters('settings', ['versionCli']),
+		...mapGetters(['instanceId']),
 	},
 	methods: {
 		closeDialog() {
@@ -76,5 +85,6 @@ export default Vue.extend({
 <style module lang="scss">
 .container > * {
 	margin-bottom: var(--spacing-s);
+	overflow-wrap: break-word;
 }
 </style>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index c77034622..814eab0ac 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -38,12 +38,14 @@
 			@click="$emit('retest')"
 		/>
 
-		<n8n-info-tip v-if="documentationUrl && credentialProperties.length">
+		<n8n-notice v-if="documentationUrl && credentialProperties.length" theme="warning">
 			{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
-			<n8n-link :to="documentationUrl" size="small" :bold="true" @click="onDocumentationUrlClick">
-				{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
-			</n8n-link>
-		</n8n-info-tip>
+			<span class="ml-4xs">
+				<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
+					{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
+				</n8n-link>
+			</span>
+		</n8n-notice>
 
 		<CopyInput
 			v-if="isOAuthType && credentialProperties.length"
@@ -73,10 +75,9 @@
 </template>
 
 <script lang="ts">
-import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
+import { ICredentialType } from 'n8n-workflow';
 import { getAppNameFromCredType, isCommunityPackageName } from '../helpers';
 
-import Vue from 'vue';
 import Banner from '../Banner.vue';
 import CopyInput from '../CopyInput.vue';
 import CredentialInputs from './CredentialInputs.vue';
@@ -84,7 +85,6 @@ import OauthButton from './OauthButton.vue';
 import { restApi } from '@/components/mixins/restApi';
 import { addCredentialTranslation } from '@/plugins/i18n';
 import mixins from 'vue-typed-mixins';
-import { NPM_PACKAGE_DOCS_BASE_URL } from '@/constants';
 
 export default mixins(restApi).extend({
 	name: 'CredentialConfig',
@@ -217,6 +217,7 @@ export default mixins(restApi).extend({
 
 <style lang="scss" module>
 .container {
+	--notice-margin: 0;
 	> * {
 		margin-bottom: var(--spacing-l);
 	}
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index e2cc5c008..2ae0e167d 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -26,6 +26,7 @@
 	"about.n8nLicense": "Sustainable Use License + n8n Enterprise License",
 	"about.n8nVersion": "n8n Version",
 	"about.sourceCode": "Source Code",
+	"about.instanceID": "Instance ID",
 	"activationModal.butYouCanSeeThem": "but you can see them in the",
 	"activationModal.dontShowAgain": "Don't show again",
 	"activationModal.executionList": "execution list",