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

✨ Update credentials modal (#2154)

Browse Source 
* ⚡ Generalize unique entity name generation

* ⚡ Standardize variable names

* redo credentials

* revert some changes, replace got with was

* fix v-if order

* fix v-if order

* update linting

* update gulpfile

* update ssh display name

* update height

* update params

* update info tip sizes

* address design comments

* update google button disabled

* update icon size to 28px

* update design issues

* update info tab design

* address design comments

* update tab size

* update run data spacing

* address comments, update logo design

* fix spacing issues

* clean up store

* fix create new bug

* add loading state

* rename prop

* remove unused prop

* fix select bug

* remove label tag

* update word break

* build

* address design comments

* update font family of button

* update menu opacity

* update text

* update title

* address more comments

* update oauth messages

* add oauth validation

* hide disabled state

* update warning modal

* show button on text input

* clean up cred details

* add validation errors

* fix bug when deleting cred

* Frontend hack to display test button

* Created interfaces for testing and endpoint

* Testing slack node credentials working

* Adding test with node to endpoint for credential testing

* Fixed linting and test detectability

* Adding required for slack token

* Added google sheets credential testing

* update message

* Adding suggestions by Ivan and Mutasem

* Address comments

* keep blurred when focused

* update font weight of errors

* add oauth banner

* remove toast

* Fixed code bug and added telegram credential testing

* scroll to top on success

* clean up duplication

* Fixed telegram trigger node and added tests to typeform

* refactor modal

* add more validation support

* refactor info tab

* scroll to bottom on save, handle cred saving

* refactor save button

* save cred on valid

* save cred on valid

* scroll to top if has error

* add targets on input labels

* delete credentails input

* revert fe changes

* update validation logic

* clean interface

* test credentials

* update banner design

* show testing state

* update x position

* fix issues

* fix focus issues

* clean up validation behavior

* make error relative

* update banner component

* update error spacing

* don't close dialog

* rename button

* update how banners behave

* if has unsaved changes first

* move confirm message

* add success banner

* update time state

* disable transitions

* test on open

* clean up banner behavior

* update banner styling

* capitalize

* update error banner styling to handle long texts

* avoid unnessary content jostling

* add loading label

* show validation warnings when opening modal

* retest cred if not all props req

* update scroll to auto

* add error warning

* update color saturation

* set overflow to auto

* fix bug to get credentials when connected

* round down to minutes

* change tab name

* update casing oauth

* disable credential testing if it has expressions

* label same as title

* add more space between close and save

* remove check on making any changes

* hide close on confirm modals

* don't accept clicks outside dialog

* fix build issues

* undo test changes

* fix table scrollbar logs

* rename modals

* fix bug with same name

* refactor modal

* fix tslint issue

* refactor name

* update name behavior

* update monospace font

* remove comment

* refactor inputs

* refactor error handling

* reduce spacing changes

* fix doc url oauth1 oauth2

* build

* hide infotip if no inputs

* address most comments

* rename file

* fix menu alignment

* gst

* update types

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Mutasem Aldmour
2021-09-11 10:15:36 +02:00
committed by GitHub
parent 63e2bd25c9
commit 3d6b40b852
109 changed files with 3554 additions and 1933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/editor-ui/src/components/Modal.vue
View File

@@ -21,15 +21,20 @@
:title="title"
:class="{ 'dialog-wrapper': true, [size]: true }"
:width="width"
:show-close="showClose"
:custom-class="getCustomClass()"
append-to-body
>
<template v-slot:title>
<slot name="header" />
<slot name="header" v-if="!loading" />
</template>
<div class="modal-content" @keydown.stop @keydown.enter="handleEnter" @keydown.esc="closeDialog">
<slot name="content"/>
<slot v-if="!loading" name="content"/>
<div class="loader" v-else>
<n8n-spinner />
</div>
</div>
<el-row class="modal-footer">
<el-row v-if="!loading" class="modal-footer">
<slot name="footer" :close="closeDialog" />
</el-row>
</el-dialog>
@@ -41,13 +46,14 @@ import Vue from "vue";
const sizeMap: {[size: string]: string} = {
xl: '80%',
lg: '70%',
m: '50%',
default: '50%',
};
export default Vue.extend({
name: "Modal",
props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth', 'visible'],
props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth', 'visible', 'showClose', 'loading', 'classic', 'beforeClose', 'customClass'],
data() {
return {
visibleDrawer: this.drawer,
@@ -86,6 +92,17 @@ export default Vue.extend({
}
},
closeDialog(callback?: () => void) {
if (this.beforeClose) {
this.beforeClose(() => {
this.$store.commit('ui/closeTopModal');
if (typeof callback === 'function') {
callback();
}
});
return;
}
this.$store.commit('ui/closeTopModal');
if (typeof callback === 'function') {
callback();
@@ -98,6 +115,15 @@ export default Vue.extend({
this.visibleDrawer = true;
}, 300); // delayed for closing animation to take effect
},
getCustomClass() {
let classes = this.$props.customClass || '';
if (this.$props.classic) {
classes = `${classes} classic`;
}
return classes;
},
},
computed: {
width(): string {
@@ -123,22 +149,31 @@ export default Vue.extend({
overflow: hidden;
}
.dialog-wrapper {
* {
box-sizing: border-box;
}
.el-dialog__body {
height: 100%;
}
.dialog-wrapper {
&.xl > div, &.md > div {
min-width: 620px;
}
&.lg > div {
height: 80%;
overflow: hidden;
.modal-content {
height: 100%;
}
}
&.sm {
display: flex;
align-items: center;
justify-content: center;
> div {
max-width: 420px;
max-width: 460px;
}
}
}
@@ -146,4 +181,13 @@ export default Vue.extend({
.modal-content > .el-row {
margin-bottom: 15px;
}
.loader {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-tint-1);
font-size: 30px;
height: 80%;
}
</style>