admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 18:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Fix i18n issues (#3072)

Browse Source 
* 🐛 Fix `defaultLocale` watcher

* ⚡ Improve error handling for headers

* ✏️ Improve naming

* 🐛 Fix hiring banner check

* ⚡ Flatten base text keys

* ⚡ Fix miscorrected key

* ⚡ Implement pluralization

* ✏️ Update docs

* 🚚 Move headers fetching to `App.vue`

* fix hiring banner

* ⚡ Fix missing import

* ✏️ Alphabetize translations

* ⚡ Switch to async check

* feat(editor): Refactor Output Panel + fix i18n issues (#3097)

* update main panel

* finish up tabs

* fix docs link

* add icon

* update node settings

* clean up settings

* add rename modal

* fix component styles

* fix spacing

* truncate name

* remove mixin

* fix spacing

* fix spacing

* hide docs url

* fix bug

* fix renaming

* refactor tabs out

* refactor execute button

* refactor header

* add more views

* fix error view

* fix workflow rename bug

* rename component

* fix small screen bug

* move items, fix positions

* add hover state

* show selector on empty state

* add empty run state

* fix binary view

* 1 item

* add vjs styles

* show empty row for every item

* refactor tabs

* add branch names

* fix spacing

* fix up spacing

* add run selector

* fix positioning

* clean up

* increase width of selector

* fix up spacing

* fix copy button

* fix branch naming; type issues

* fix docs in custom nodes

* add type

* hide items when run selector is shown

* increase selector size

* add select prepend

* clean up a bit

* Add pagination

* add stale icon

* enable stale data in execution run

* Revert "enable stale data in execution run"

8edb68dbffa0aa0d8189117e1a53381cb2c27608

* move metadata to its own state

* fix smaller size

* add scroll buttons

* update tabs on resize

* update stale data on rename

* remove metadata on delete

* hide x

* change title colors

* binary data classes

* remove duplicate css

* add colors

* delete unused keys

* use event bus

* update styles of pagination

* fix ts issues

* fix ts issues

* use chevron icons

* fix design with download button

* add back to canvas button

* add trigger warning disabled

* show trigger warning tooltip

* update button labels for triggers

* update node output message

* fix add-option bug

* add page selector

* fix pagination selector bug

* fix executions bug

* remove hint

* add json colors

* add colors for json

* add color json keys

* fix select options bug

* update keys

* address comments

* update name limit

* align pencil

* update icon size

* update radio buttons height

* address comments

* fix pencil bug

* change buttons alignment

* fully center

* change order of buttons

* add no output message in branch

* scroll to top

* change active state

* fix page size

* all items

* update expression background

* update naming

* align pencil

* update modal background

* add schedule group

* update schedule nodes messages

* use ellpises for last chars

* fix spacing

* fix tabs issue

* fix too far data bug

* fix executions bug

* fix table wrapping

* fix rename bug

* add padding

* handle unkown errors

* add sticky header

* ignore empty input, trim node name

* nudge lightness of color

* center buttons

* update pagination

* set colors of title

* increase table font, fix alignment

* fix pencil bug

* fix spacing

* use date now

* address pagination issues

* delete unused keys

* update keys sort

* fix prepend

* fix radio button position

* Revert "fix radio button position"

ae42781786f2e6dcfb00d1be770b19a67f533bdf

Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
Iván Ovejero
2022-04-11 15:12:13 +02:00
committed by GitHub
parent 94a52b9358
commit 4ae0f5b6fb
45 changed files with 2579 additions and 2039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
packages/editor-ui/src/components/DataDisplay.vue
View File

@@ -1,40 +1,24 @@
<template>
<el-dialog
:visible="!!node"
:visible="!!node || renaming"
:before-close="close"
:custom-class="`classic data-display-wrapper`"
:show-close="false"
custom-class="data-display-wrapper"
width="85%"
append-to-body
@opened="showDocumentHelp = true"
>
<div class="data-display" >
<NodeSettings @valueChanged="valueChanged" />
<RunData />
</div>
<transition name="fade">
<div v-if="nodeType && showDocumentHelp" class="doc-help-wrapper">
<svg id="help-logo" :href="documentationUrl" 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>{{ $locale.baseText('dataDisplay.nodeDocumentation') }}</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>
<div class="text">
{{ $locale.baseText('dataDisplay.needHelp') }} <n8n-link size="small" :to="documentationUrl" :bold="true" @click="onDocumentationUrlClick">{{ $locale.baseText('dataDisplay.openDocumentationFor', { interpolate: { nodeTypeDisplayName: nodeType.displayName } }) }}</n8n-link>
</div>
<n8n-tooltip placement="bottom-start" :value="showTriggerWaitingWarning" :disabled="!showTriggerWaitingWarning" :manual="true">
<div slot="content" :class="$style.triggerWarning">{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}</div>
<div :class="$style.backToCanvas" @click="close">
<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
<n8n-text color="text-xlight" size="medium" :bold="true">{{ $locale.baseText('ndv.backToCanvas') }}</n8n-text>
</div>
</transition>
</n8n-tooltip>
<div class="data-display" v-if="node" >
<NodeSettings :eventBus="settingsEventBus" @valueChanged="valueChanged" @execute="onNodeExecute" />
<RunData @openSettings="openSettings" />
</div>
</el-dialog>
</template>
@@ -55,6 +39,8 @@ import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.vue';
import mixins from 'vue-typed-mixins';
import Vue from 'vue';
import { mapGetters } from 'vuex';
export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
name: 'DataDisplay',
@@ -62,23 +48,24 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
NodeSettings,
RunData,
},
props: {
renaming: {
type: Boolean,
},
},
data () {
return {
basePath: this.$store.getters.getBaseUrl,
showDocumentHelp: false,
settingsEventBus: new Vue(),
triggerWaitingWarningEnabled: false,
};
},
computed: {
documentationUrl (): string {
if (!this.nodeType) {
return '';
}
if (this.nodeType.documentationUrl && this.nodeType.documentationUrl.startsWith('http')) {
return this.nodeType.documentationUrl;
}
return 'https://docs.n8n.io/nodes/' + (this.nodeType.documentationUrl || this.nodeType.name) + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + this.nodeType.name;
...mapGetters(['executionWaitingForWebhook']),
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
showTriggerWaitingWarning(): boolean {
return this.triggerWaitingWarningEnabled && !!this.nodeType && !this.nodeType.group.includes('trigger') && this.workflowRunning && this.executionWaitingForWebhook;
},
node (): INodeUi {
return this.$store.getters.activeNode;
@@ -93,6 +80,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
watch: {
node (node, oldNode) {
if(node && !oldNode) {
this.triggerWaitingWarningEnabled = false;
this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.nodeType, this.getWorkflow()) });
this.$telemetry.track('User opened node modal', { node_type: this.nodeType ? this.nodeType.name : '', workflow_id: this.$store.getters.workflowId });
}
@@ -102,6 +90,17 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
},
},
methods: {
onNodeExecute() {
setTimeout(() => {
if (!this.node || !this.workflowRunning) {
return;
}
this.triggerWaitingWarningEnabled = true;
}, 1000);
},
openSettings() {
this.settingsEventBus.$emit('openSettings');
},
valueChanged (parameterData: IUpdateInformation) {
this.$emit('valueChanged', parameterData);
},
@@ -110,12 +109,9 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
},
close () {
this.$externalHooks().run('dataDisplay.nodeEditingFinished');
this.showDocumentHelp = false;
this.triggerWaitingWarningEnabled = false;
this.$store.commit('setActiveNode', null);
},
onDocumentationUrlClick () {
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType, documentationUrl: this.documentationUrl });
},
},
});
@@ -124,6 +120,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
<style lang="scss">
.data-display-wrapper {
height: 85%;
margin-top: 48px !important;
.el-dialog__header {
padding: 0 !important;
@@ -145,41 +142,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
height: 100%;
}
.doc-help-wrapper {
position: absolute;
right: 0;
transition-delay: 2s;
background-color: #fff;
margin-top: 1%;
box-sizing: border-box;
border: 1px solid #DCDFE6;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 2px 7px 0 rgba(0,0,0,0.15);
min-width: 319px;
height: 40px;
float: right;
padding: 5px;
display: flex;
flex-direction: row;
padding-top: 10px;
padding-right: 12px;
#help-logo {
flex: 1;
}
.text {
margin-left: 5px;
flex: 9;
font-family: "Open Sans";
font-size: 12px;
font-weight: 600;
line-height: 17px;
white-space: nowrap;
}
}
.fade-enter-active, .fade-enter-to, .fade-leave-active {
transition: all .75s ease;
opacity: 1;
@@ -189,3 +151,30 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
opacity: 0;
}
</style>
<style lang="scss" module>
.triggerWarning {
max-width: 180px;
}
.backToCanvas {
position: absolute;
top: -40px;
&:hover {
cursor: pointer;
}
> * {
margin-right: var(--spacing-3xs);
}
}
@media (min-width: $--breakpoint-lg) {
.backToCanvas {
position: fixed;
top: 10px;
left: 20px;
}
}
</style>