From 915d4a5cb1a4d0686555ea8acf11995365d86c52 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 14:18:16 +0530
Subject: [PATCH] fix: token description size limited

---
 packages/nc-gui/components/account/Token.vue | 179 ++++++++++---------
 1 file changed, 96 insertions(+), 83 deletions(-)

diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index 40b9467d98..725c0c4fd5 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -90,7 +90,7 @@ const deleteToken = async (token: string): Promise<void> => {
 }
 
 const generateToken = async () => {
-  isTokenNameEmpty.value = !selectedTokenData.value.description?.length
+  isTokenNameEmpty.value = !selectedTokenData.value.description?.length || selectedTokenData.value.description?.length > 255
 
   if (isTokenNameEmpty.value) return
   try {
@@ -100,10 +100,9 @@ const generateToken = async () => {
     // message.success(t('msg.success.tokenGenerated'))
     selectedTokenData.value = {}
     await loadTokens()
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    $e('a:api-token:generate')
   }
-  $e('a:api-token:generate')
 }
 
 const copyToken = async (token: string | undefined) => {
@@ -128,6 +127,14 @@ const triggerDeleteModal = (tokenToDelete: string, tokenDescription: string) =>
 
 const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
+const errorMessage = computed(() => {
+  if (!selectedTokenData.value.description?.length) {
+    return 'Token name should not be empty'
+  } else if (selectedTokenData.value.description?.length > 255) {
+    return 'Token name should not be more than 255 characters'
+  }
+})
+
 const handleCancel = () => {
   showNewTokenModal.value = false
   isTokenNameEmpty.value = false
@@ -155,89 +162,95 @@ const handleCancel = () => {
         </NcButton>
       </div>
       <span>Create personal API tokens to use in automation or external apps.</span>
-      <div class="w-[780px] mt-5 border-1 rounded-md">
-        <div class="flex w-full pl-5 bg-gray-50 border-b-1">
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">Token name</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">Creator</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">Token</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-center">Actions</span>
-        </div>
-        <main>
-          <div
-            v-if="showNewTokenModal"
-            class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate"
-          >
-            <div class="flex flex-col w-full">
-              <a-input
-                :ref="descriptionInput"
-                v-model:value="selectedTokenData.description"
-                type="text"
-                class="!rounded-lg !py-2"
-                placeholder="Token Name"
-                data-testid="nc-token-input"
-              />
-              <span v-if="isTokenNameEmpty" class="text-red-500 text-xs font-light mt-1.5 ml-1"
-                >token name should not be empty</span
-              >
+      <div class="w-[780px] mt-5 border-1 rounded-md min-h-[520px]">
+        <div>
+          <div class="flex w-full pl-5 bg-gray-50 border-b-1">
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">Token name</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">Creator</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">Token</span>
+            <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">Actions</span>
+          </div>
+          <main>
+            <div v-if="showNewTokenModal">
+              <div class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate">
+                <div class="flex flex-col w-full">
+                  <a-input
+                    :ref="descriptionInput"
+                    v-model:value="selectedTokenData.description"
+                    type="text"
+                    class="!rounded-lg !py-1"
+                    placeholder="Token Name"
+                    data-testid="nc-token-input"
+                  />
+                  <span v-if="isTokenNameEmpty" class="text-red-500 text-xs font-light mt-1.5 ml-1">{{ errorMessage }} </span>
+                </div>
+                <div class="flex gap-2 justify-start">
+                  <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"
+                  >
+                    {{ $t('general.save') }}
+                  </NcButton>
+                </div>
+              </div>
+              <NcDivider />
             </div>
-            <div class="flex gap-2 justify-start">
-              <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">
-                {{ $t('general.save') }}
-              </NcButton>
+            <div v-if="!tokens.length">
+              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="`${$t('general.no')} ${$t('labels.token')}`" />
             </div>
-          </div>
-          <div v-if="!tokens.length">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="`${$t('general.no')} ${$t('labels.token')}`" />
-          </div>
 
-          <div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
-            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
-              <GeneralTruncateText placement="top" length="25">
-                {{ el.description }}
-              </GeneralTruncateText>
-            </span>
-            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
-              <GeneralTruncateText placement="top" length="20">
-                {{ el.created_by }}
-              </GeneralTruncateText>
-            </span>
-            <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
-              <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="28">
-                {{ el.token }}
-              </GeneralTruncateText>
-              <span v-else>**********************************</span>
-            </span>
-            <!-- ACTIONS -->
-            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
-              <div class="flex justify-center gap-3">
-                <component
-                  :is="iconMap.eyeSlash"
-                  v-if="el.token === selectedToken.id && selectedToken.isShow"
-                  class="hover::cursor-pointer"
-                  @click="hideOrShowToken(el.token as string)"
-                />
-                <component
-                  :is="iconMap.eye"
-                  v-else
-                  class="nc-toggle-token-visibility hover::cursor-pointer"
-                  @click="hideOrShowToken(el.token as string)"
-                />
-                <component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
-                <component
-                  :is="iconMap.delete"
-                  data-testid="nc-token-row-action-icon"
-                  class="nc-delete-icon hover::cursor-pointer"
-                  @click="triggerDeleteModal(el.token as string, el.description as string)"
-                />
-              </div>
-            </span>
-          </div>
-        </main>
+            <div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
+              <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
+                <GeneralTruncateText placement="top" length="20">
+                  {{ el.description }}
+                </GeneralTruncateText>
+              </span>
+              <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
+                <GeneralTruncateText placement="top" length="20">
+                  {{ el.created_by }}
+                </GeneralTruncateText>
+              </span>
+              <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
+                <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
+                  {{ el.token }}
+                </GeneralTruncateText>
+                <span v-else>**************************************</span>
+              </span>
+              <!-- ACTIONS -->
+              <span class="text-gray-500 font-medium text-3.5 w-2/9">
+                <div class="flex justify-end gap-3 pr-5">
+                  <component
+                    :is="iconMap.eyeSlash"
+                    v-if="el.token === selectedToken.id && selectedToken.isShow"
+                    class="hover::cursor-pointer"
+                    @click="hideOrShowToken(el.token as string)"
+                  />
+                  <component
+                    :is="iconMap.eye"
+                    v-else
+                    class="nc-toggle-token-visibility hover::cursor-pointer"
+                    @click="hideOrShowToken(el.token as string)"
+                  />
+                  <component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
+                  <component
+                    :is="iconMap.delete"
+                    data-testid="nc-token-row-action-icon"
+                    class="nc-delete-icon hover::cursor-pointer"
+                    @click="triggerDeleteModal(el.token as string, el.description as string)"
+                  />
+                </div>
+              </span>
+            </div>
+          </main>
+        </div>
       </div>
-      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
+      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-15">
         <a-pagination
           v-model:current="currentPage"
           :total="pagination.total"