UI/UX fixes - 2

packages/nc-gui/assets/style.scss

@@ -43,10 +43,6 @@ body {
   height: var(--topbar-height) !important;
 }
 
-.anticon-check-circle {
-  @apply !relative top-[-1px] left-0;
-}
-
 html,
 body,
 #__nuxt,
@@ -701,4 +697,7 @@ input[type='number'] {
 
 .ant-message-notice-content {
   @apply !rounded-md;
+  .ant-message-custom-content{
+    @apply flex items-center
+  }
 }

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

@@ -357,7 +357,7 @@ const selectedOpts = computed(() => {
       }"
     >
       <template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
-        <a-tag class="rounded-tag" :color="selectedOpt.color">
+        <a-tag class="rounded-tag max-w-full" :color="selectedOpt.color">
           <span
             :style="{
               'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
@@ -367,7 +367,21 @@ const selectedOpts = computed(() => {
             }"
             :class="{ 'text-sm': isKanban }"
           >
-            {{ selectedOpt.title }}
+            <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+              <template #title>
+                {{ selectedOpt.title }}
+              </template>
+              <span
+                class="text-ellipsis overflow-hidden"
+                :style="{
+                  wordBreak: 'keep-all',
+                  whiteSpace: 'nowrap',
+                  display: 'inline',
+                }"
+              >
+                {{ selectedOpt.title }}
+              </span>
+            </NcTooltip>
           </span>
         </a-tag>
       </template>
@@ -402,7 +416,7 @@ const selectedOpts = computed(() => {
         :class="`nc-select-option-${column.title}-${op.title}`"
         @click.stop
       >
-        <a-tag class="rounded-tag" :color="op.color">
+        <a-tag class="rounded-tag max-w-full" :color="op.color">
           <span
             :style="{
               'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
@@ -412,7 +426,21 @@ const selectedOpts = computed(() => {
             }"
             :class="{ 'text-sm': isKanban }"
           >
-            {{ op.title }}
+            <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+              <template #title>
+                {{ op.title }}
+              </template>
+              <span
+                class="text-ellipsis overflow-hidden"
+                :style="{
+                  wordBreak: 'keep-all',
+                  whiteSpace: 'nowrap',
+                  display: 'inline',
+                }"
+              >
+                {{ op.title }}
+              </span>
+            </NcTooltip>
           </span>
         </a-tag>
       </a-select-option>
@@ -530,3 +558,10 @@ const selectedOpts = computed(() => {
   @apply !text-xs;
 }
 </style>
+
+<style lang="scss">
+.ant-select-item-option-content,
+.ant-select-item-option-state {
+  @apply !flex !items-center;
+}
+</style>

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

@@ -263,8 +263,8 @@ const selectedOpt = computed(() => {
 
 <template>
   <div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu">
-    <div v-if="!(active || isEditable)">
-      <a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color">
+    <div v-if="!(active || isEditable)" class="w-full">
+      <a-tag v-if="selectedOpt" class="rounded-tag max-w-full" :color="selectedOpt.color">
         <span
           :style="{
             'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
@@ -274,7 +274,21 @@ const selectedOpt = computed(() => {
           }"
           :class="{ 'text-sm': isKanban }"
         >
-          {{ selectedOpt.title }}
+          <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+            <template #title>
+              {{ selectedOpt.title }}
+            </template>
+            <span
+              class="text-ellipsis overflow-hidden"
+              :style="{
+                wordBreak: 'keep-all',
+                whiteSpace: 'nowrap',
+                display: 'inline',
+              }"
+            >
+              {{ selectedOpt.title }}
+            </span>
+          </NcTooltip>
         </span>
       </a-tag>
     </div>
@@ -305,7 +319,7 @@ const selectedOpt = computed(() => {
         :class="`nc-select-option-${column.title}-${op.title}`"
         @click.stop
       >
-        <a-tag class="rounded-tag" :color="op.color">
+        <a-tag class="rounded-tag max-w-full" :color="op.color">
           <span
             :style="{
               'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
@@ -315,7 +329,21 @@ const selectedOpt = computed(() => {
             }"
             :class="{ 'text-sm': isKanban }"
           >
-            {{ op.title }}
+            <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+              <template #title>
+                {{ op.title }}
+              </template>
+              <span
+                class="text-ellipsis overflow-hidden"
+                :style="{
+                  wordBreak: 'keep-all',
+                  whiteSpace: 'nowrap',
+                  display: 'inline',
+                }"
+              >
+                {{ op.title }}
+              </span>
+            </NcTooltip>
           </span>
         </a-tag>
       </a-select-option>
@@ -342,6 +370,7 @@ const selectedOpt = computed(() => {
 
 :deep(.ant-select-clear) {
   opacity: 1;
+  border-radius: 100%;
 }
 
 .nc-single-select:not(.read-only) {
@@ -363,3 +392,9 @@ const selectedOpt = computed(() => {
   @apply block;
 }
 </style>
+
+<style lang="scss">
+.ant-select-item-option-content {
+  @apply !flex !items-center;
+}
+</style>

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

@@ -239,7 +239,7 @@ watch(editEnabled, () => {
       <NcTooltip
         v-if="!isVisible"
         placement="bottom"
-        class="!absolute right-0 bottom-1 nc-text-area-expand-btn"
+        class="!absolute right-0 bottom-1 hidden nc-text-area-expand-btn"
         :class="{ 'right-0 bottom-1': editEnabled, '!bottom-0': !isRichMode }"
       >
         <template #title>{{ $t('title.expand') }}</template>

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -402,10 +402,10 @@ const getRowId = (row: RowType) => {
   >
     <div
       ref="kanbanContainerRef"
-      class="nc-kanban-container flex mt-4 pb-4 px-4 overflow-y-hidden w-full nc-scrollbar-x-md"
+      class="nc-kanban-container flex mt-4 pb-4 px-4 overflow-y-hidden w-full nc-scrollbar-x-lg"
       :style="{
-        minHeight: 'calc(100vh - var(--topbar-height) - 3.5rem)',
-        maxHeight: 'calc(100vh - var(--topbar-height) - 3.5rem)',
+        minHeight: 'calc(100vh - var(--topbar-height) - 4.1rem)',
+        maxHeight: 'calc(100vh - var(--topbar-height) - 4.1rem)',
       }"
     >
       <div v-if="isViewDataLoading" class="flex flex-row min-h-full gap-x-2">

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-import { UITypes } from 'nocodb-sdk'
+import dayjs from 'dayjs'
+import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
@@ -139,7 +140,7 @@ const onScroll = (e: Event) => {
 
 // a method to parse group key if grouped column type is LTAR or Lookup
 // in these 2 scenario it will return json array or `___` separated value
-const parseKey = (group) => {
+const parseKey = (group: Group) => {
   let key = group.key.toString()
 
   // parse json array key if it's a lookup or link to another record
@@ -151,6 +152,21 @@ const parseKey = (group) => {
       return key.split('___')
     }
   }
+
+  // show the groupBy dateTime field title format as like cell format
+  if (key && group.column?.uidt === UITypes.DateTime && dayjs(key).isValid()) {
+    const dateFormat = parseProp(group.column?.meta)?.date_format ?? dateFormats[0]
+    const timeFormat = parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
+
+    const dateTimeFormat = `${dateFormat} ${timeFormat}`
+
+    return [dayjs(key).utc().local().format(dateTimeFormat)]
+  }
+
+  // show the groupBy time field title format as like cell format
+  if (key && group.column?.uidt === UITypes.Time && dayjs(key).isValid()) {
+    return [dayjs(key).format(timeFormats[0])]
+  }
   return [key]
 }
 

packages/nc-gui/components/smartsheet/grid/GroupByTable.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { UITypes, isLinksOrLTAR } from 'nocodb-sdk'
 import Table from './Table.vue'
-import { IsGroupByInj, computed, ref } from '#imports'
+import { IsGroupByInj, computed, ref, rowDefaultData } from '#imports'
 import type { Group, Row } from '#imports'
 
 const props = defineProps<{
@@ -38,7 +38,7 @@ const view = inject(ActiveViewInj, ref())
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
-function addEmptyRow(group: Group, addAfter?: number) {
+function addEmptyRow(group: Group, addAfter?: number, metaValue = meta.value) {
   if (group.nested || !group.rows) return
 
   addAfter = addAfter ?? group.rows.length
@@ -57,6 +57,7 @@ function addEmptyRow(group: Group, addAfter?: number) {
 
   group.rows.splice(addAfter, 0, {
     row: {
+      ...rowDefaultData(metaValue?.columns),
       ...setGroup,
     },
     oldRow: {},

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -448,7 +448,8 @@ const closeAddColumnDropdown = (scrollToLastCol = false) => {
 }
 
 async function openNewRecordHandler() {
-  const newRow = addEmptyRow()
+  // skip update row when it is `New record form`
+  const newRow = addEmptyRow(dataRef.value.length, true)
   if (newRow) expandForm?.(newRow, undefined, true)
 }
 
@@ -697,8 +698,17 @@ function scrollToRow(row?: number) {
   scrollToCell?.()
 }
 
-function addEmptyRow(row?: number) {
+async function saveEmptyRow(rowObj: Row) {
+  await updateOrSaveRow?.(rowObj)
+}
+
+function addEmptyRow(row?: number, skipUpdate: boolean = false) {
   const rowObj = callAddEmptyRow?.(row)
+
+  if (!skipUpdate && rowObj) {
+    saveEmptyRow(rowObj)
+  }
+
   nextTick().then(() => {
     scrollToRow(row ?? dataRef.value.length - 1)
   })
@@ -1484,7 +1494,6 @@ onKeyStroke('ArrowDown', onDown)
                     >
                       <div class="items-center flex gap-1 min-w-[60px]">
                         <div
-                          v-if="!readOnly || isMobileMode"
                           class="nc-row-no sm:min-w-4 text-xs text-gray-500"
                           :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
                         >
@@ -1696,7 +1705,7 @@ onKeyStroke('ArrowDown', onDown)
             </NcMenuItem>
 
             <NcMenuItem
-              v-if="contextMenuTarget"
+              v-if="contextMenuTarget && hasEditPermission"
               class="nc-base-menu-item"
               data-testid="context-menu-item-paste"
               :disabled="isSystemColumn(fields[contextMenuTarget.col])"

packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

@@ -90,7 +90,7 @@ const openedBaseUrl = computed(() => {
           'max-w-none': isSharedBase && !isMobileMode,
         }"
       >
-        <NcTooltip class="truncate nc-active-table-title max-w-full">
+        <NcTooltip class="truncate nc-active-table-title max-w-full" show-on-truncate-only>
           <template #title>
             {{ activeTable?.title }}
           </template>

packages/nc-gui/components/webhook/Editor.vue

@@ -500,6 +500,9 @@ watch(
     if (props.hook) {
       setHook(props.hook)
       onEventChange()
+    } else {
+      // Set the default hook title only when creating a new hook.
+      hookRef.title = getDefaultHookName(hooks.value)
     }
   },
   { immediate: true },
@@ -513,7 +516,6 @@ onMounted(async () => {
   } else {
     hookRef.eventOperation = eventList.value[0].value.join(' ')
   }
-  hookRef.title = getDefaultHookName(hooks.value)
 
   onNotificationTypeChange()
 

packages/nc-gui/composables/useData.ts

@@ -9,6 +9,7 @@ import {
   findIndexByPk,
   message,
   populateInsertObject,
+  rowDefaultData,
   rowPkData,
   storeToRefs,
   until,
@@ -53,9 +54,9 @@ export function useData(args: {
     },
   })
 
-  function addEmptyRow(addAfter = formattedData.value.length) {
+  function addEmptyRow(addAfter = formattedData.value.length, metaValue = meta.value) {
     formattedData.value.splice(addAfter, 0, {
-      row: {},
+      row: { ...rowDefaultData(metaValue?.columns) },
       oldRow: {},
       rowMeta: { new: true },
     })

packages/nc-gui/utils/dataUtils.ts

@@ -1,4 +1,4 @@
-import { RelationTypes, UITypes } from 'nocodb-sdk'
+import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import type { Row } from 'lib'
 import { isColumnRequiredAndNull } from './columnUtils'
@@ -86,3 +86,23 @@ export async function populateInsertObject({
 
   return { missingRequiredColumns, insertObj }
 }
+
+// a function to get default values of row
+export const rowDefaultData = (columns: ColumnType[] = []) => {
+  const defaultData: Record<string, string> = columns.reduce<Record<string, any>>((acc: Record<string, any>, col: ColumnType) => {
+    //  avoid setting default value for system col, virtual col, rollup, formula, barcode, qrcode, links, ltar
+    if (
+      !isSystemColumn(col) &&
+      !isVirtualCol(col) &&
+      !isLinksOrLTAR({ uidt: col.uidt! }) &&
+      ![UITypes.Rollup, UITypes.Lookup, UITypes.Formula, UITypes.Barcode, UITypes.QrCode].includes(col.uidt) &&
+      col?.cdf
+    ) {
+      const defaultValue = col.cdf
+      acc[col.title!] = typeof defaultValue === 'string' ? defaultValue.replace(/^'/, '').replace(/'$/, '') : defaultValue
+    }
+    return acc
+  }, {} as Record<string, any>)
+
+  return defaultData
+}