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

refactor(editor): Standardize components sections order (no-changelog) (#10540)

Browse Source
This commit is contained in:
Ricardo Espinoza
2024-08-24 09:24:08 -04:00
committed by GitHub
parent 4d48f903af
commit 609bc4d97d
215 changed files with 10387 additions and 10376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
packages/editor-ui/src/components/NodeCredentials.vue
View File

@@ -1,114 +1,3 @@
<template>
<div
v-if="credentialTypesNodeDescriptionDisplayed.length"
:class="['node-credentials', $style.container]"
>
<div
v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
:key="credentialTypeDescription.name"
>
<n8n-input-label
:label="getCredentialsFieldLabel(credentialTypeDescription)"
:bold="false"
size="small"
color="text-dark"
data-test-id="credentials-label"
>
<div v-if="readonly">
<n8n-input
:model-value="getSelectedName(credentialTypeDescription.name)"
disabled
size="small"
data-test-id="node-credentials-select"
/>
</div>
<div
v-else
:class="
getIssues(credentialTypeDescription.name).length && !hideIssues
? $style.hasIssues
: $style.input
"
data-test-id="node-credentials-select"
>
<n8n-select
:model-value="getSelectedId(credentialTypeDescription.name)"
:placeholder="
getSelectPlaceholder(
credentialTypeDescription.name,
getIssues(credentialTypeDescription.name),
)
"
size="small"
@update:model-value="
(value: string) =>
onCredentialSelected(
credentialTypeDescription.name,
value,
showMixedCredentials(credentialTypeDescription),
)
"
@blur="$emit('blur', 'credentials')"
>
<n8n-option
v-for="item in getCredentialOptions(
getAllRelatedCredentialTypes(credentialTypeDescription),
)"
:key="item.id"
:data-test-id="`node-credentials-select-item-${item.id}`"
:label="item.name"
:value="item.id"
>
<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
<n8n-text bold>{{ item.name }}</n8n-text>
<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
</div>
</n8n-option>
<n8n-option
:key="NEW_CREDENTIALS_TEXT"
data-test-id="node-credentials-select-item-new"
:value="NEW_CREDENTIALS_TEXT"
:label="NEW_CREDENTIALS_TEXT"
>
</n8n-option>
</n8n-select>
<div
v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
:class="$style.warning"
>
<n8n-tooltip placement="top">
<template #content>
<TitledList
:title="`${$locale.baseText('nodeCredentials.issues')}:`"
:items="getIssues(credentialTypeDescription.name)"
/>
</template>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>
<div
v-if="
selected[credentialTypeDescription.name] &&
isCredentialExisting(credentialTypeDescription.name)
"
:class="$style.edit"
data-test-id="credential-edit-button"
>
<font-awesome-icon
icon="pen"
class="clickable"
:title="$locale.baseText('nodeCredentials.updateCredential')"
@click="editCredential(credentialTypeDescription.name)"
/>
</div>
</div>
</n8n-input-label>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
@@ -618,6 +507,117 @@ export default defineComponent({
});
</script>
<template>
<div
v-if="credentialTypesNodeDescriptionDisplayed.length"
:class="['node-credentials', $style.container]"
>
<div
v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
:key="credentialTypeDescription.name"
>
<n8n-input-label
:label="getCredentialsFieldLabel(credentialTypeDescription)"
:bold="false"
size="small"
color="text-dark"
data-test-id="credentials-label"
>
<div v-if="readonly">
<n8n-input
:model-value="getSelectedName(credentialTypeDescription.name)"
disabled
size="small"
data-test-id="node-credentials-select"
/>
</div>
<div
v-else
:class="
getIssues(credentialTypeDescription.name).length && !hideIssues
? $style.hasIssues
: $style.input
"
data-test-id="node-credentials-select"
>
<n8n-select
:model-value="getSelectedId(credentialTypeDescription.name)"
:placeholder="
getSelectPlaceholder(
credentialTypeDescription.name,
getIssues(credentialTypeDescription.name),
)
"
size="small"
@update:model-value="
(value: string) =>
onCredentialSelected(
credentialTypeDescription.name,
value,
showMixedCredentials(credentialTypeDescription),
)
"
@blur="$emit('blur', 'credentials')"
>
<n8n-option
v-for="item in getCredentialOptions(
getAllRelatedCredentialTypes(credentialTypeDescription),
)"
:key="item.id"
:data-test-id="`node-credentials-select-item-${item.id}`"
:label="item.name"
:value="item.id"
>
<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
<n8n-text bold>{{ item.name }}</n8n-text>
<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
</div>
</n8n-option>
<n8n-option
:key="NEW_CREDENTIALS_TEXT"
data-test-id="node-credentials-select-item-new"
:value="NEW_CREDENTIALS_TEXT"
:label="NEW_CREDENTIALS_TEXT"
>
</n8n-option>
</n8n-select>
<div
v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
:class="$style.warning"
>
<n8n-tooltip placement="top">
<template #content>
<TitledList
:title="`${$locale.baseText('nodeCredentials.issues')}:`"
:items="getIssues(credentialTypeDescription.name)"
/>
</template>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>
<div
v-if="
selected[credentialTypeDescription.name] &&
isCredentialExisting(credentialTypeDescription.name)
"
:class="$style.edit"
data-test-id="credential-edit-button"
>
<font-awesome-icon
icon="pen"
class="clickable"
:title="$locale.baseText('nodeCredentials.updateCredential')"
@click="editCredential(credentialTypeDescription.name)"
/>
</div>
</div>
</n8n-input-label>
</div>
</div>
</template>
<style lang="scss" module>
.container {
margin-top: var(--spacing-xs);