admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +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

115
packages/editor-ui/src/components/CredentialsList.vue
View File

@@ -1,7 +1,5 @@
<template>
<div v-if="dialogVisible">
<credentials-edit :dialogVisible="credentialEditDialogVisible" @closeDialog="closeCredentialEditDialog" @credentialsUpdated="reloadCredentialList" @credentialsCreated="reloadCredentialList" :setCredentialType="editCredentials && editCredentials.type" :editCredentials="editCredentials"></credentials-edit>
<el-dialog :visible="dialogVisible" append-to-body width="80%" title="Credentials" :before-close="closeDialog">
<div class="text-very-light">
Your saved credentials:
@@ -17,13 +15,9 @@
/>
</div>
<el-table :data="credentials" :default-sort = "{prop: 'name', order: 'ascending'}" stripe @row-click="editCredential" max-height="450" v-loading="isDataLoading">
<el-table :data="credentialsToDisplay" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential">
<el-table-column property="name" label="Name" class-name="clickable" sortable></el-table-column>
<el-table-column property="type" label="Type" class-name="clickable" sortable>
<template slot-scope="scope">
{{credentialTypeDisplayNames[scope.row.type]}}
</template>
</el-table-column>
<el-table-column property="type" label="Type" class-name="clickable" sortable></el-table-column>
<el-table-column property="createdAt" label="Created" class-name="clickable" sortable></el-table-column>
<el-table-column property="updatedAt" label="Updated" class-name="clickable" sortable></el-table-column>
<el-table-column
@@ -43,136 +37,89 @@
<script lang="ts">
import { externalHooks } from '@/components/mixins/externalHooks';
import { restApi } from '@/components/mixins/restApi';
import { ICredentialsResponse } from '@/Interface';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import CredentialsEdit from '@/components/CredentialsEdit.vue';
import { genericHelpers } from '@/components/mixins/genericHelpers';
import { mapGetters } from "vuex";
import mixins from 'vue-typed-mixins';
import { convertToDisplayDate } from './helpers';
export default mixins(
externalHooks,
genericHelpers,
nodeHelpers,
restApi,
showMessage,
).extend({
name: 'CredentialsList',
props: [
'dialogVisible',
],
components: {
CredentialsEdit,
},
data () {
return {
credentialEditDialogVisible: false,
credentialTypeDisplayNames: {} as { [key: string]: string; },
credentials: [] as ICredentialsResponse[],
displayAddCredentials: false,
editCredentials: null as ICredentialsResponse | null,
isDataLoading: false,
};
computed: {
...mapGetters('credentials', ['allCredentials']),
credentialsToDisplay() {
return this.allCredentials.reduce((accu: ICredentialsResponse[], cred: ICredentialsResponse) => {
const type = this.$store.getters['credentials/getCredentialTypeByName'](cred.type);
if (type) {
accu.push({
...cred,
type: type.displayName,
createdAt: convertToDisplayDate(cred.createdAt as number),
updatedAt: convertToDisplayDate(cred.updatedAt as number),
});
}
return accu;
}, []);
},
},
watch: {
dialogVisible (newValue) {
if (newValue) {
this.loadCredentials();
this.loadCredentialTypes();
}
this.$externalHooks().run('credentialsList.dialogVisibleChanged', { dialogVisible: newValue });
},
},
methods: {
closeCredentialEditDialog () {
this.credentialEditDialogVisible = false;
},
closeDialog () {
// Handle the close externally as the visible parameter is an external prop
// and is so not allowed to be changed here.
this.$emit('closeDialog');
return false;
},
createCredential () {
this.editCredentials = null;
this.credentialEditDialogVisible = true;
this.$store.dispatch('ui/openCredentialsSelectModal');
},
editCredential (credential: ICredentialsResponse) {
const editCredentials = {
id: credential.id,
name: credential.name,
type: credential.type,
} as ICredentialsResponse;
this.editCredentials = editCredentials;
this.credentialEditDialogVisible = true;
},
reloadCredentialList () {
this.loadCredentials();
},
loadCredentialTypes () {
if (Object.keys(this.credentialTypeDisplayNames).length !== 0) {
// Data is already loaded
return;
}
if (this.$store.getters.allCredentialTypes === null) {
// Data is not ready yet to be loaded
return;
}
for (const credentialType of this.$store.getters.allCredentialTypes) {
this.credentialTypeDisplayNames[credentialType.name] = credentialType.displayName;
}
},
loadCredentials () {
this.isDataLoading = true;
try {
this.credentials = JSON.parse(JSON.stringify(this.$store.getters.allCredentials));
} catch (error) {
this.$showError(error, 'Problem loading credentials', 'There was a problem loading the credentials:');
this.isDataLoading = false;
return;
}
this.credentials.forEach((credentialData: ICredentialsResponse) => {
credentialData.createdAt = this.convertToDisplayDate(credentialData.createdAt as number);
credentialData.updatedAt = this.convertToDisplayDate(credentialData.updatedAt as number);
});
this.isDataLoading = false;
this.$store.dispatch('ui/openExisitngCredential', { id: credential.id});
},
async deleteCredential (credential: ICredentialsResponse) {
const deleteConfirmed = await this.confirmMessage(`Are you sure you want to delete "${credential.name}" credentials?`, 'Delete Credentials?', 'warning', 'Yes, delete!');
const deleteConfirmed = await this.confirmMessage(`Are you sure you want to delete "${credential.name}" credentials?`, 'Delete Credentials?', null, 'Yes, delete!');
if (deleteConfirmed === false) {
return;
}
try {
await this.restApi().deleteCredentials(credential.id!);
await this.$store.dispatch('credentials/deleteCredential', {id: credential.id});
} catch (error) {
this.$showError(error, 'Problem deleting credentials', 'There was a problem deleting the credentials:');
return;
}
// Remove also from local store
this.$store.commit('removeCredentials', credential);
// Now that the credentials got removed check if any nodes used them
this.updateNodesCredentialsIssues();
this.$showMessage({
title: 'Credentials deleted',
message: `The credential "${credential.name}" got deleted!`,
message: `The credential "${credential.name}" was deleted!`,
type: 'success',
});
// Refresh list
this.loadCredentials();
},
},
});