✨ Update credentials modal (#2154)

* ⚡ 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>

packages/editor-ui/src/components/CredentialsSelectModal.vue

@@ -0,0 +1,107 @@
+<template>
+	<Modal
+		:name="modalName"
+		:eventBus="modalBus"
+		size="sm"
+	>
+		<template slot="header">
+			<h2 :class="$style.title">Add new credential</h2>
+		</template>
+		<template slot="content">
+			<div :class="$style.container">
+				<div :class="$style.subtitle">Select an app or service to connect to</div>
+				<n8n-select
+					filterable
+					defaultFirstOption
+					placeholder="Search for app..."
+					size="xlarge"
+					ref="select"
+					:value="selected"
+					@change="onSelect"
+				>
+					<font-awesome-icon icon="search" slot="prefix" />
+					<n8n-option
+						v-for="credential in allCredentialTypes"
+						:value="credential.name"
+						:key="credential.name"
+						:label="credential.displayName"
+						filterable
+					/>
+				</n8n-select>
+			</div>
+		</template>
+		<template slot="footer">
+			<div :class="$style.footer">
+				<n8n-button
+					label="Continue"
+					float="right"
+					size="large"
+					:disabled="!selected"
+					@click="openCredentialType"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from "vuex";
+
+import Modal from './Modal.vue';
+
+export default Vue.extend({
+	name: 'CredentialsSelectModal',
+	components: {
+		Modal,
+	},
+	mounted() {
+		setTimeout(() => {
+			const element = this.$refs.select as HTMLSelectElement;
+			if (element) {
+				element.focus();
+			}
+		}, 0);
+	},
+	data() {
+		return {
+			modalBus: new Vue(),
+			selected: '',
+		};
+	},
+	computed: {
+		...mapGetters('credentials', ['allCredentialTypes']),
+	},
+	props: {
+		modalName: {
+			type: String,
+		},
+	},
+	methods: {
+		onSelect(type: string) {
+			this.selected = type;
+		},
+		openCredentialType () {
+			this.modalBus.$emit('close');
+			this.$store.dispatch('ui/openNewCredential', { type: this.selected });
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+.container {
+	margin-bottom: var(--spacing-l);
+}
+
+.title {
+	font-size: var(--font-size-xl);
+	line-height: var(--font-line-height-regular);
+}
+
+.subtitle {
+	margin-bottom: var(--spacing-s);
+	font-size: var(--font-size-m);
+	line-height: var(--font-line-height-xloose);
+}
+</style>