|
|
|
@ -45,6 +45,8 @@ const pagination = reactive({
|
|
|
|
|
pageSize: 10, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const isLoadingAllTokens = ref(true) |
|
|
|
|
|
|
|
|
|
const setDefaultTokenName = () => { |
|
|
|
|
selectedTokenData.value.description = extractNextDefaultName( |
|
|
|
|
[...allTokens.value.map((el) => el?.description || '')], |
|
|
|
@ -94,7 +96,7 @@ const updateAllTokens = (type: 'delete' | 'add', token: IApiTokenInfo) => {
|
|
|
|
|
setDefaultTokenName() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loadTokens = async (page = currentPage.value, limit = currentLimit.value) => { |
|
|
|
|
const loadTokens = async (page = currentPage.value, limit = currentLimit.value, hideShowNewToken = false) => { |
|
|
|
|
currentPage.value = page |
|
|
|
|
try { |
|
|
|
|
const response: any = await api.orgTokens.list({ |
|
|
|
@ -103,18 +105,30 @@ const loadTokens = async (page = currentPage.value, limit = currentLimit.value)
|
|
|
|
|
offset: searchText.value.length === 0 ? (page - 1) * limit : 0, |
|
|
|
|
}, |
|
|
|
|
} as RequestParams) |
|
|
|
|
if (!response) return |
|
|
|
|
if (!response) { |
|
|
|
|
isLoadingAllTokens.value = false |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
pagination.total = response.pageInfo.totalRows ?? 0 |
|
|
|
|
pagination.pageSize = 10 |
|
|
|
|
|
|
|
|
|
tokens.value = response.list as IApiTokenInfo[] |
|
|
|
|
|
|
|
|
|
if (hideShowNewToken) { |
|
|
|
|
showNewTokenModal.value = false |
|
|
|
|
selectedTokenData.value = {} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (!allTokens.value.length) { |
|
|
|
|
await loadAllTokens(pagination.total) |
|
|
|
|
} |
|
|
|
|
} catch (e: any) { |
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
|
} finally { |
|
|
|
|
if (isLoadingAllTokens.value) { |
|
|
|
|
isLoadingAllTokens.value = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -159,11 +173,10 @@ const generateToken = async () => {
|
|
|
|
|
if (!isValidTokenName.value) return |
|
|
|
|
try { |
|
|
|
|
const token = await api.orgTokens.create(selectedTokenData.value) |
|
|
|
|
showNewTokenModal.value = false |
|
|
|
|
|
|
|
|
|
// Token generated successfully |
|
|
|
|
// message.success(t('msg.success.tokenGenerated')) |
|
|
|
|
selectedTokenData.value = {} |
|
|
|
|
await loadTokens() |
|
|
|
|
await loadTokens(currentPage.value, currentLimit.value, true) |
|
|
|
|
|
|
|
|
|
updateAllTokens('add', token as IApiTokenInfo) |
|
|
|
|
} catch (e: any) { |
|
|
|
@ -216,7 +229,7 @@ const handleCancel = () => {
|
|
|
|
|
<div class="max-w-202 mx-auto px-4 h-full" data-testid="nc-token-list"> |
|
|
|
|
<div class="py-2 flex gap-4 items-baseline justify-between"> |
|
|
|
|
<h6 class="text-2xl text-left font-bold" data-rec="true">{{ $t('title.apiTokens') }}</h6> |
|
|
|
|
<NcTooltip :disabled="!(isEeUI && tokens.length)"> |
|
|
|
|
<NcTooltip v-if="tokens.length" :disabled="!(isEeUI && tokens.length)"> |
|
|
|
|
<template #title>{{ $t('labels.tokenLimit') }}</template> |
|
|
|
|
<NcButton |
|
|
|
|
:disabled="showNewTokenModal || (isEeUI && tokens.length)" |
|
|
|
@ -237,7 +250,7 @@ const handleCancel = () => {
|
|
|
|
|
</NcTooltip> |
|
|
|
|
</div> |
|
|
|
|
<span data-rec="true">{{ $t('msg.apiTokenCreate') }}</span> |
|
|
|
|
<div class="mt-5 h-[calc(100%-13rem)]"> |
|
|
|
|
<div v-if="!isLoadingAllTokens && (tokens.length || showNewTokenModal)" class="mt-5 h-[calc(100%-13rem)]"> |
|
|
|
|
<div class="h-full w-full !overflow-hidden rounded-md"> |
|
|
|
|
<div class="flex w-full pl-5 bg-gray-50 border-1 rounded-t-md"> |
|
|
|
|
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9" data-rec="true">{{ $t('title.tokenName') }}</span> |
|
|
|
@ -268,6 +281,7 @@ const handleCancel = () => {
|
|
|
|
|
class="!rounded-lg !py-1" |
|
|
|
|
placeholder="Token Name" |
|
|
|
|
data-testid="nc-token-input" |
|
|
|
|
:disabled="isLoading" |
|
|
|
|
@press-enter="generateToken" |
|
|
|
|
/> |
|
|
|
|
<span v-if="!isValidTokenName" class="text-red-500 text-xs font-light mt-1.5 ml-1" data-rec="true" |
|
|
|
@ -278,13 +292,7 @@ const handleCancel = () => {
|
|
|
|
|
<NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel"> |
|
|
|
|
{{ $t('general.cancel') }} |
|
|
|
|
</NcButton> |
|
|
|
|
<NcButton |
|
|
|
|
type="primary" |
|
|
|
|
size="sm" |
|
|
|
|
:is-loading="isLoading" |
|
|
|
|
data-testid="nc-token-save-btn" |
|
|
|
|
@click="generateToken" |
|
|
|
|
> |
|
|
|
|
<NcButton type="primary" size="sm" :loading="isLoading" data-testid="nc-token-save-btn" @click="generateToken"> |
|
|
|
|
{{ $t('general.save') }} |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
@ -351,6 +359,25 @@ const handleCancel = () => {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-else-if="!isLoadingAllTokens && !tokens.length && !showNewTokenModal" |
|
|
|
|
class="max-w-[40rem] border px-3 py-6 flex flex-col items-center justify-center gap-6 text-center" |
|
|
|
|
> |
|
|
|
|
<img src="~assets/img/placeholder/api-tokens.png" class="!w-[22rem] flex-none" /> |
|
|
|
|
|
|
|
|
|
<div class="text-2xl text-gray-800 font-bold">{{ $t('placeholder.noTokenCreated') }}</div> |
|
|
|
|
<div class="text-sm text-gray-700"> |
|
|
|
|
{{ $t('placeholder.noTokenCreatedLabel') }} |
|
|
|
|
</div> |
|
|
|
|
<NcButton class="!rounded-lg !py-3 !h-10" data-testid="nc-token-create" type="primary" @click="showNewTokenModal = true"> |
|
|
|
|
<span class="hidden md:block" data-rec="true"> |
|
|
|
|
{{ $t('title.createNewToken') }} |
|
|
|
|
</span> |
|
|
|
|
<span class="flex items-center justify-center md:hidden" data-rec="true"> |
|
|
|
|
<component :is="iconMap.plus" /> |
|
|
|
|
</span> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-5"> |
|
|
|
|
<a-pagination |
|
|
|
|