🔀 Merge branch 'Doc-Link-to-Node-Credentials-Modal'

This commit is contained in:
Jan Oberhauser 2020-08-27 10:23:11 +02:00
commit 10ceed39ac
3 changed files with 141 additions and 13 deletions

View file

@ -1,7 +1,29 @@
<template>
<div v-if="dialogVisible" @keydown.stop>
<el-dialog :visible="dialogVisible" append-to-body width="75%" :title="title" :before-close="closeDialog">
<div v-if="dialogVisible" @keydown.stop class="credentials-edit-wrapper">
<el-dialog :visible="dialogVisible" append-to-body width="75%" :title="title" :nodeType="nodeType" :before-close="closeDialog">
<div name="title" class="title-container" slot="title">
<div id="title-left">{{title}}</div>
<div id="title-right">
<div v-if="credentialType" id="docs-container">
<svg id="help-logo" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Node Documentation</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
<g transform="translate(1117.000000, 825.000000)">
<g transform="translate(10.000000, 11.000000)">
<g transform="translate(2.250000, 2.250000)" fill="#FF6150">
<path d="M6,11.25 L7.5,11.25 L7.5,9.75 L6,9.75 L6,11.25 M6.75,2.25 C5.09314575,2.25 3.75,3.59314575 3.75,5.25 L5.25,5.25 C5.25,4.42157288 5.92157288,3.75 6.75,3.75 C7.57842712,3.75 8.25,4.42157288 8.25,5.25 C8.25,6.75 6,6.5625 6,9 L7.5,9 C7.5,7.3125 9.75,7.125 9.75,5.25 C9.75,3.59314575 8.40685425,2.25 6.75,2.25 M1.5,0 L12,0 C12.8284271,0 13.5,0.671572875 13.5,1.5 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L1.5,13.5 C0.671572875,13.5 0,12.8284271 0,12 L0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z"></path>
</g>
<rect x="0" y="0" width="18" height="18"></rect>
</g>
</g>
</g>
</g>
</svg>
<span v-if="credentialType" id="doc-link-text">Need help? <a id="doc-hyperlink" :href="'https://docs.n8n.io/credentials/' + documentationUrl + '/?utm_source=n8n_app&utm_medium=left_nav_menu&utm_campaign=create_new_credentials_modal'" target="_blank">Open credential docs</a></span>
</div>
</div>
</div>
<div class="credential-type-item">
<el-row v-if="!setCredentialType">
<el-col :span="6">
@ -40,9 +62,11 @@ import {
NodeHelpers,
ICredentialType,
INodeProperties,
INodeTypeDescription,
} from 'n8n-workflow';
import mixins from 'vue-typed-mixins';
import { INodeUi } from '../Interface';
export default mixins(
restApi,
@ -85,6 +109,39 @@ export default mixins(
}
}
},
documentationUrl (): string {
if (this.editCredentials) {
const credentialType = this.$store.getters.credentialType(this.editCredentials.type);
if (credentialType.documentationUrl === undefined) {
return credentialType.name;
} else {
return `${credentialType.documentationUrl}`;
}
} else {
if (this.credentialType) {
const credentialType = this.$store.getters.credentialType(this.credentialType);
if (credentialType.documentationUrl === undefined) {
return credentialType.name;
} else {
return `${credentialType.documentationUrl}`;
}
} else {
return '';
}
}
},
node (): INodeUi {
return this.$store.getters.activeNode;
},
nodeType (): INodeTypeDescription | null {
const activeNode = this.node;
if (this.node) {
return this.$store.getters.nodeType(this.node.type);
}
return null;
},
},
watch: {
async dialogVisible (newValue, oldValue): Promise<void> {
@ -245,9 +302,79 @@ export default mixins(
</script>
<style lang="scss">
.credentials-edit-wrapper {
.credential-type-item {
padding-bottom: 1em;
}
.credential-type-item {
padding-bottom: 1em;
@media (min-width: 1200px){
.title-container {
display: flex;
flex-direction: row;
max-width: 100%;
line-height: 17px;
}
#docs-container {
margin-left: auto;
margin-right: 0;
}
}
@media (max-width: 1199px){
.title-container {
display: flex;
flex-direction: column;
max-width: 100%;
line-height: 17px;
}
#docs-container {
margin-top: 10px;
margin-left: 0;
margin-right: auto;
}
}
#title-left {
flex: 7;
font-size: 16px;
font-weight: bold;
color: #7a7a7a;
vertical-align:middle;
}
#title-right {
vertical-align: middle;
flex: 3;
font-family: "Open Sans";
color: #666666;
font-size: 12px;
font-weight: 510;
letter-spacing: 0;
display: flex;
flex-direction: row;
min-width: 40%;
}
#help-logo {
flex: 1;
}
#doc-link-text {
margin-left: 2px;
float: right;
word-break: break-word;
flex: 9;
}
#doc-hyperlink,
#doc-hyperlink:visited,
#doc-hyperlink:focus,
#doc-hyperlink:active {
text-decoration: none;
color: #FF6150;
}
}
</style>

View file

@ -9,16 +9,16 @@
</div>
<transition name="fade">
<div v-if="showDocumentHelp && nodeType" class="doc-help-wrapper">
<svg id="help-logo" v-if="showDocumentHelp && nodeType" :href="'https://docs.n8n.io/nodes/' + nodeType.name" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg id="help-logo" v-if="showDocumentHelp && nodeType" :href="'https://docs.n8n.io/nodes/' + nodeType.name" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Node Documentation</title>
<g id="MVP-Onboard-proposal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Node-modal-(docs-link)" transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
<g id="Group" transform="translate(1117.000000, 825.000000)">
<g id="mdi-help-box" transform="translate(10.000000, 11.000000)">
<g id="Icon" transform="translate(2.250000, 2.250000)" fill="#FF6150">
<path d="M6,11.25 L7.5,11.25 L7.5,9.75 L6,9.75 L6,11.25 M6.75,2.25 C5.09314575,2.25 3.75,3.59314575 3.75,5.25 L5.25,5.25 C5.25,4.42157288 5.92157288,3.75 6.75,3.75 C7.57842712,3.75 8.25,4.42157288 8.25,5.25 C8.25,6.75 6,6.5625 6,9 L7.5,9 C7.5,7.3125 9.75,7.125 9.75,5.25 C9.75,3.59314575 8.40685425,2.25 6.75,2.25 M1.5,0 L12,0 C12.8284271,0 13.5,0.671572875 13.5,1.5 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L1.5,13.5 C0.671572875,13.5 0,12.8284271 0,12 L0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Icon-Shape"></path>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
<g transform="translate(1117.000000, 825.000000)">
<g transform="translate(10.000000, 11.000000)">
<g transform="translate(2.250000, 2.250000)" fill="#FF6150">
<path d="M6,11.25 L7.5,11.25 L7.5,9.75 L6,9.75 L6,11.25 M6.75,2.25 C5.09314575,2.25 3.75,3.59314575 3.75,5.25 L5.25,5.25 C5.25,4.42157288 5.92157288,3.75 6.75,3.75 C7.57842712,3.75 8.25,4.42157288 8.25,5.25 C8.25,6.75 6,6.5625 6,9 L7.5,9 C7.5,7.3125 9.75,7.125 9.75,5.25 C9.75,3.59314575 8.40685425,2.25 6.75,2.25 M1.5,0 L12,0 C12.8284271,0 13.5,0.671572875 13.5,1.5 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L1.5,13.5 C0.671572875,13.5 0,12.8284271 0,12 L0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z"></path>
</g>
<rect id="ViewBox" x="0" y="0" width="18" height="18"></rect>
<rect x="0" y="0" width="18" height="18"></rect>
</g>
</g>
</g>

View file

@ -19,6 +19,7 @@ export class GmailOAuth2Api implements ICredentialType {
'googleOAuth2Api',
];
displayName = 'Gmail OAuth2 API';
documentationUrl = 'google';
properties = [
{
displayName: 'Scope',