mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Add scrolling to API keys list (no-changelog) (#13658)

Browse source
This commit is contained in:
Ricardo Espinoza 2025-03-04 12:43:02 +01:00 committed by GitHub
parent 2a5738aebe
commit 2c03f8640e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 71 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.vue
View file

@ -198,6 +198,16 @@ const onSelect = (value: number) => {
expirationDate.value = ''; expirationDate.value = '';
showExpirationDateSelector.value = false; showExpirationDateSelector.value = false;
}; };
async function handleEnterKey(event: KeyboardEvent) {
if (event.key === 'Enter') {
if (props.mode === 'new') {
await onSave();
} else {
await onEdit();
}
}
}
</script> </script>
<template> <template>
@ -212,7 +222,7 @@ const onSelect = (value: number) => {
:show-close="true" :show-close="true"
> >
<template #content> <template #content>
<div> <div @keyup.enter="handleEnterKey">
<n8n-card v-if="newApiKey" class="mb-4xs"> <n8n-card v-if="newApiKey" class="mb-4xs">
<CopyInput <CopyInput
:label="newApiKey.label" :label="newApiKey.label"

25
packages/frontend/editor-ui/src/views/SettingsApiView.vue
View file

@ -138,17 +138,21 @@ function onEdit(id: string) {
</i18n-t> </i18n-t>
</n8n-text> </n8n-text>
</p> </p>
<div :class="$style.apiKeysContainer">
<template v-if="apiKeysSortByCreationDate.length"> <template v-if="apiKeysSortByCreationDate.length">
<el-row <el-row
v-for="apiKey in apiKeysSortByCreationDate" v-for="(apiKey, index) in apiKeysSortByCreationDate"
:key="apiKey.id" :key="apiKey.id"
:gutter="10" :gutter="10"
:class="$style.destinationItem" :class="[{ [$style.destinationItem]: index !== apiKeysSortByCreationDate.length - 1 }]"
> >
<el-col> <el-col>
<ApiKeyCard :api-key="apiKey" @delete="onDelete" @edit="onEdit" /> <ApiKeyCard :api-key="apiKey" @delete="onDelete" @edit="onEdit" />
</el-col> </el-col>
</el-row> </el-row>
</template>
</div>
<div v-if="isPublicApiEnabled && apiKeysSortByCreationDate.length" :class="$style.BottomHint"> <div v-if="isPublicApiEnabled && apiKeysSortByCreationDate.length" :class="$style.BottomHint">
<N8nText size="small" color="text-light"> <N8nText size="small" color="text-light">
@ -179,14 +183,17 @@ function onEdit(id: string) {
</n8n-link> </n8n-link>
</div> </div>
<div class="mt-m text-right"> <div class="mt-m text-right">
<n8n-button size="large" @click="onCreateApiKey"> <n8n-button
v-if="isPublicApiEnabled && apiKeysSortByCreationDate.length"
size="large"
@click="onCreateApiKey"
>
{{ i18n.baseText('settings.api.create.button') }} {{ i18n.baseText('settings.api.create.button') }}
</n8n-button> </n8n-button>
</div> </div>
</template>
<n8n-action-box <n8n-action-box
v-else-if="!isPublicApiEnabled && cloudPlanStore.userIsTrialing" v-if="!isPublicApiEnabled && cloudPlanStore.userIsTrialing"
data-test-id="public-api-upgrade-cta" data-test-id="public-api-upgrade-cta"
:heading="i18n.baseText('settings.api.trial.upgradePlan.title')" :heading="i18n.baseText('settings.api.trial.upgradePlan.title')"
:description="i18n.baseText('settings.api.trial.upgradePlan.description')" :description="i18n.baseText('settings.api.trial.upgradePlan.description')"
@ -246,5 +253,13 @@ function onEdit(id: string) {
.BottomHint { .BottomHint {
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
margin-top: var(--spacing-s);
}
.apiKeysContainer {
max-height: 45vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
} }
</style> </style>