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"

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

@ -138,55 +138,62 @@ function onEdit(id: string) {
</i18n-t> </i18n-t>
</n8n-text> </n8n-text>
</p> </p>
<template v-if="apiKeysSortByCreationDate.length">
<el-row
v-for="apiKey in apiKeysSortByCreationDate"
:key="apiKey.id"
:gutter="10"
:class="$style.destinationItem"
>
<el-col>
<ApiKeyCard :api-key="apiKey" @delete="onDelete" @edit="onEdit" />
</el-col>
</el-row>
<div v-if="isPublicApiEnabled && apiKeysSortByCreationDate.length" :class="$style.BottomHint"> <div :class="$style.apiKeysContainer">
<N8nText size="small" color="text-light"> <template v-if="apiKeysSortByCreationDate.length">
{{ <el-row
i18n.baseText( v-for="(apiKey, index) in apiKeysSortByCreationDate"
`settings.api.view.${settingsStore.isSwaggerUIEnabled ? 'tryapi' : 'more-details'}`, :key="apiKey.id"
) :gutter="10"
}} :class="[{ [$style.destinationItem]: index !== apiKeysSortByCreationDate.length - 1 }]"
</N8nText>
{{ ' ' }}
<n8n-link
v-if="isSwaggerUIEnabled"
data-test-id="api-playground-link"
:to="apiDocsURL"
:new-window="true"
size="small"
> >
{{ i18n.baseText('settings.api.view.apiPlayground') }} <el-col>
</n8n-link> <ApiKeyCard :api-key="apiKey" @delete="onDelete" @edit="onEdit" />
<n8n-link </el-col>
v-else </el-row>
data-test-id="api-endpoint-docs-link" </template>
:to="apiDocsURL" </div>
:new-window="true"
size="small" <div v-if="isPublicApiEnabled && apiKeysSortByCreationDate.length" :class="$style.BottomHint">
> <N8nText size="small" color="text-light">
{{ i18n.baseText(`settings.api.view.external-docs`) }} {{
</n8n-link> i18n.baseText(
</div> `settings.api.view.${settingsStore.isSwaggerUIEnabled ? 'tryapi' : 'more-details'}`,
<div class="mt-m text-right"> )
<n8n-button size="large" @click="onCreateApiKey"> }}
{{ i18n.baseText('settings.api.create.button') }} </N8nText>
</n8n-button> {{ ' ' }}
</div> <n8n-link
</template> v-if="isSwaggerUIEnabled"
data-test-id="api-playground-link"
:to="apiDocsURL"
:new-window="true"
size="small"
>
{{ i18n.baseText('settings.api.view.apiPlayground') }}
</n8n-link>
<n8n-link
v-else
data-test-id="api-endpoint-docs-link"
:to="apiDocsURL"
:new-window="true"
size="small"
>
{{ i18n.baseText(`settings.api.view.external-docs`) }}
</n8n-link>
</div>
<div class="mt-m text-right">
<n8n-button
v-if="isPublicApiEnabled && apiKeysSortByCreationDate.length"
size="large"
@click="onCreateApiKey"
>
{{ i18n.baseText('settings.api.create.button') }}
</n8n-button>
</div>
<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>