mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
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>
This commit is contained in:
Milorad FIlipović 2022-08-30 11:10:17 +02:00 committed by GitHub
parent b5c831122c
commit 0e8cb74ab3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nNotice/Notice.vue
View file

@ -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;

14
packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
View file

@ -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>

10
packages/editor-ui/src/components/AboutModal.vue
View file

@ -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>

17
packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
View file

@ -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);
}

1
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

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