💄 Added instance ID to about modal and restyled credentials docs link (#3903)

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

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

Co-authored-by: Oleg Ivaniv <oleg@n8n.io>

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;

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>

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>

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">
+			<span class="ml-4xs">
+				<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
 					{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
 				</n8n-link>
-		</n8n-info-tip>
+			</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);
 	}

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",