feat(nc-gui): webhook and api token placeholder

packages/nc-gui/components/account/Token.vue

@@ -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

packages/nc-gui/components/smartsheet/details/Webhooks.vue

@@ -197,10 +197,11 @@ watch(
       </NcButton>
     </div>
     <div v-if="!selectedHookId && !isDraftMode" class="flex flex-col h-full w-full items-center">
-      <div v-if="hooks.length === 0" class="flex flex-col px-1.5 py-2.5 ml-1 h-full justify-center items-center gap-y-6">
-        <GeneralIcon icon="webhook" class="flex text-5xl h-10" style="-webkit-text-stroke: 0.5px" />
-        <div class="flex text-gray-600 font-medium text-lg">{{ $t('msg.createWebhookMsg1') }}</div>
-        <div class="flex flex-col items-center">
+      <div v-if="hooks.length === 0" class="flex flex-col px-1.5 py-2.5 ml-1 h-full items-center gap-y-6 text-center">
+        <img src="~assets/img/placeholder/webhooks.png" class="!w-[24rem] flex-none" />
+
+        <div class="flex text-gray-700 font-bold text-2xl">{{ $t('msg.createWebhookMsg1') }}</div>
+        <div class="flex flex-col items-center ext-gray-700">
           <div class="flex">{{ $t('msg.createWebhookMsg2') }}</div>
           <div class="flex">{{ $t('msg.createWebhookMsg3') }}</div>
         </div>

packages/nc-gui/lang/en.json

@@ -398,6 +398,7 @@
     "findRowByScanningCode": "Find record by scanning a QR or Barcode",
     "tokenManagement": "Token Management",
     "addNewToken": "Add new token",
+    "createNewToken": "Create new token",
     "accountSettings": "Account Settings",
     "resetPasswordMenu": "Reset Password",
     "tokens": "Tokens",
@@ -961,7 +962,9 @@
     "value": "Value",
     "key": "Key",
     "createTable": "Create your First Table!",
-    "createTableLabel": "From scratch or import or connect to external database"
+    "createTableLabel": "From scratch or import or connect to external database",
+    "noTokenCreated":"No API Tokens created",
+    "noTokenCreatedLabel" :"Looks like you haven’t generated any API tokens yet."
   },
   "msg": {
     "clickToCopyFieldId": "Click to copy Field Id",