Merge pull request #7222 from nocodb/develop

packages/nc-gui/assets/style.scss

@@ -36,6 +36,9 @@ body {
   overflow-y: visible !important;
 }
 
+.rc-virtual-list-holder-inner {
+  @apply !px-1.5
+}
 .ant-layout-header {
   height: var(--topbar-height) !important;
 }
@@ -225,6 +228,10 @@ a {
     @apply !rounded-md;
   }
 }
+// select dropdown border style
+.ant-select-dropdown {
+  @apply border-1 border-gray-200
+}
 
 // menu item styling
 .nc-menu-item {
@@ -426,7 +433,10 @@ a {
 
 .ant-dropdown-menu-submenu {
   @apply !py-0;
-
+
+  &.ant-dropdown-menu-submenu-popup{
+    @apply border-1 border-gray-200
+  }
   .ant-dropdown-menu,
   .ant-menu {
     @apply m-0 p-0;
@@ -438,7 +448,7 @@ a {
 }
 
 .ant-dropdown-menu {
-  @apply !p-0 !rounded;
+  @apply !p-0 !rounded-lg;
 }
 
 .ant-tabs-dropdown-menu-title-content {
@@ -498,8 +508,18 @@ a {
   @apply p-4;
 }
 
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover,
 .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  @apply bg-primary bg-opacity-20;
+  @apply bg-gray-300 bg-opacity-20;
+}
+
+/* Hide the element with id nc-selected-item-icon */
+.ant-select-selection-item #nc-selected-item-icon {
+  @apply hidden;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  @apply bg-transparent;
 }
 
 .ant-select-selection-search-input:focus {
@@ -584,7 +604,7 @@ a {
 }
 
 .ant-popover-inner {
-  padding: 0 !important;
+  @apply rounded-lg !p-0;
 }
 .ant-popover-inner-content {
   @apply !px-1.5 !py-1 text-xs;

packages/nc-gui/components.d.ts

@@ -49,6 +49,7 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopover: typeof import('ant-design-vue/es')['Popover']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']

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

@@ -3,6 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import type { ApiTokenType, RequestParams } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, isEeUI, ref, useApi, useCopy, useNuxtApp } from '#imports'
+import { extractNextDefaultName } from '~/helpers/parsers/parserHelpers'
 
 const { api, isLoading } = useApi()
 
@@ -18,6 +19,8 @@ interface IApiTokenInfo extends ApiTokenType {
 
 const tokens = ref<IApiTokenInfo[]>([])
 
+const allTokens = ref<IApiTokenInfo[]>([])
+
 const selectedToken = reactive({
   isShow: false,
   id: '',
@@ -29,7 +32,7 @@ const showNewTokenModal = ref(false)
 
 const currentLimit = ref(10)
 
-const defaultTokenName = t('labels.untitledToken')
+const defaultTokenName = t('labels.token')
 
 const selectedTokenData = ref<ApiTokenType>({
   description: defaultTokenName,
@@ -42,6 +45,13 @@ const pagination = reactive({
   pageSize: 10,
 })
 
+const setDefaultTokenName = () => {
+  selectedTokenData.value.description = extractNextDefaultName(
+    [...allTokens.value.map((el) => el?.description || '')],
+    defaultTokenName,
+  )
+}
+
 const hideOrShowToken = (tokenId: string) => {
   if (selectedToken.isShow && selectedToken.id === tokenId) {
     selectedToken.isShow = false
@@ -52,6 +62,38 @@ const hideOrShowToken = (tokenId: string) => {
   }
 }
 
+// To set default next token name we should need to fetch all token first
+const loadAllTokens = async (limit = pagination.total) => {
+  try {
+    const response: any = await api.orgTokens.list({
+      query: {
+        limit,
+      },
+    } as RequestParams)
+    if (!response) return
+
+    allTokens.value = response.list as IApiTokenInfo[]
+    setDefaultTokenName()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+// This will update allTokens local value instead of fetching all tokens on each operation (add|delete)
+const updateAllTokens = (type: 'delete' | 'add', token: IApiTokenInfo) => {
+  switch (type) {
+    case 'add': {
+      allTokens.value = [...allTokens.value, token]
+      break
+    }
+    case 'delete': {
+      allTokens.value = [...allTokens.value.filter((t) => t.token !== token.token)]
+      break
+    }
+  }
+  setDefaultTokenName()
+}
+
 const loadTokens = async (page = currentPage.value, limit = currentLimit.value) => {
   currentPage.value = page
   try {
@@ -67,6 +109,10 @@ const loadTokens = async (page = currentPage.value, limit = currentLimit.value)
     pagination.pageSize = 10
 
     tokens.value = response.list as IApiTokenInfo[]
+
+    if (!allTokens.value.length) {
+      await loadAllTokens(pagination.total)
+    }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -84,6 +130,11 @@ const deleteToken = async (token: string): Promise<void> => {
     await api.orgTokens.delete(token)
     // message.success(t('msg.success.tokenDeleted'))
     await loadTokens()
+
+    updateAllTokens('delete', {
+      token,
+    } as IApiTokenInfo)
+
     if (!tokens.value.length && currentPage.value !== 1) {
       currentPage.value--
       loadTokens(currentPage.value)
@@ -107,16 +158,17 @@ const generateToken = async () => {
 
   if (!isValidTokenName.value) return
   try {
-    await api.orgTokens.create(selectedTokenData.value)
+    const token = await api.orgTokens.create(selectedTokenData.value)
     showNewTokenModal.value = false
     // Token generated successfully
     // message.success(t('msg.success.tokenGenerated'))
     selectedTokenData.value = {}
     await loadTokens()
+
+    updateAllTokens('add', token as IApiTokenInfo)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {
-    selectedTokenData.value.description = defaultTokenName
     $e('a:api-token:generate')
   }
 }

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

@@ -215,14 +215,23 @@ const openDeleteModal = (user: UserType) => {
                 v-model:value="el.roles"
                 class="w-55 nc-user-roles"
                 :dropdown-match-select-width="false"
+                dropdown-class-name="max-w-64"
                 @change="updateRole(el.id, el.roles as string)"
               >
                 <a-select-option
                   class="nc-users-list-role-option"
                   :value="OrgUserRoles.CREATOR"
                   :label="$t(`objects.roleType.orgLevelCreator`)"
                 >
-                  <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                  <div class="flex items-center gap-1 justify-between">
+                    <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                    <GeneralIcon
+                      v-if="el?.roles === OrgUserRoles.CREATOR"
+                      id="nc-selected-item-icon"
+                      icon="check"
+                      class="w-4 h-4 text-primary"
+                    />
+                  </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgCreator') }}
                   </span>
@@ -233,7 +242,15 @@ const openDeleteModal = (user: UserType) => {
                   :value="OrgUserRoles.VIEWER"
                   :label="$t(`objects.roleType.orgLevelViewer`)"
                 >
-                  <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                  <div class="flex items-center gap-1 justify-between">
+                    <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                    <GeneralIcon
+                      v-if="el.roles === OrgUserRoles.VIEWER"
+                      id="nc-selected-item-icon"
+                      icon="check"
+                      class="w-4 h-4 text-primary"
+                    />
+                  </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgViewer') }}
                   </span>

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

@@ -192,13 +192,27 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                 <div class="flex flex-col w-2/4">
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
+
+                    <a-select
+                      v-model:value="usersData.role"
+                      class="nc-user-roles"
+                      dropdown-class-name="nc-dropdown-user-role !px-2"
+                    >
                       <a-select-option
                         class="nc-role-option"
                         :value="OrgUserRoles.CREATOR"
                         :label="$t(`objects.roleType.orgLevelCreator`)"
                       >
-                        <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                        <div class="flex items-center gap-1 justify-between">
+                          <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                          <GeneralIcon
+                            v-if="usersData.role === OrgUserRoles.CREATOR"
+                            id="nc-selected-item-icon"
+                            icon="check"
+                            class="w-4 h-4 text-primary"
+                          />
+                        </div>
+
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgCreator') }}
                         </span>
@@ -209,7 +223,15 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                         :value="OrgUserRoles.VIEWER"
                         :label="$t(`objects.roleType.orgLevelViewer`)"
                       >
-                        <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                        <div class="flex items-center gap-1 justify-between">
+                          <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                          <GeneralIcon
+                            v-if="usersData.role === OrgUserRoles.VIEWER"
+                            id="nc-selected-item-icon"
+                            icon="check"
+                            class="w-4 h-4 text-primary"
+                          />
+                        </div>
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgViewer') }}
                         </span>

packages/nc-gui/components/api-client/Headers.vue

@@ -91,6 +91,7 @@ const filterOption = (input: string, option: Option) => option.value.toUpperCase
                 :options="headerList"
                 :placeholder="$t('placeholder.key')"
                 :filter-option="filterOption"
+                dropdown-class-name="border-1 border-gray-200"
               />
             </a-form-item>
           </td>

packages/nc-gui/components/cell/DatePicker.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { isDateMonthFormat } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   CellClickHookInj,
@@ -10,8 +11,13 @@ import {
   computed,
   inject,
   isDrawerOrModalExist,
+  onClickOutside,
+  onMounted,
+  onUnmounted,
   parseProp,
   ref,
+  useGlobal,
+  useI18n,
   useSelectedCellKeyupListener,
   watch,
 } from '#imports'
@@ -22,6 +28,7 @@ interface Props {
 }
 
 const { modelValue, isPk } = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
 
 const { t } = useI18n()
@@ -42,6 +49,8 @@ const isDateInvalid = ref(false)
 
 const dateFormat = computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
 
+const picker = computed(() => (isDateMonthFormat(dateFormat.value) ? 'month' : ''))
+
 const localState = computed({
   get() {
     if (!modelValue) {
@@ -53,14 +62,21 @@ const localState = computed({
       return undefined
     }
 
-    return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)
+    const format = picker.value === 'month' ? dateFormat : 'YYYY-MM-DD'
+
+    return dayjs(/^\d+$/.test(modelValue) ? +modelValue : modelValue, format)
   },
   set(val?: dayjs.Dayjs) {
     if (!val) {
       emit('update:modelValue', null)
       return
     }
 
+    if (picker.value === 'month') {
+      // reset day to 1st
+      val = dayjs(val).date(1)
+    }
+
     if (val.isValid()) {
       emit('update:modelValue', val?.format('YYYY-MM-DD'))
     }
@@ -197,12 +213,15 @@ const updateOpen = (next: boolean) => {
 }
 
 const cellClickHook = inject(CellClickHookInj, null)
+
 const cellClickHandler = () => {
   open.value = (active.value || editable.value) && !open.value
 }
+
 onMounted(() => {
   cellClickHook?.on(cellClickHandler)
 })
+
 onUnmounted(() => {
   cellClickHook?.on(cellClickHandler)
 })
@@ -218,14 +237,15 @@ const clickHandler = () => {
 <template>
   <a-date-picker
     v-model:value="localState"
+    :picker="picker"
     :bordered="false"
     class="!w-full !px-1 !border-none"
     :class="{ 'nc-null': modelValue === null && showNull }"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-date  children:border-1 children:border-gray-200  ${open ? 'active' : ''} `"
     :open="isOpen"
     @click="clickHandler"
     @update:open="updateOpen"