fix: ui changes in links modal

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

@@ -34,6 +34,9 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value
     v-model="vModel"
     class="h-full w-full outline-none p-2 bg-transparent"
     :placeholder="isEditColumn ? $t('labels.optional') : ''"
+    :class="{
+      'px-1': isExpandedFormOpen,
+    }"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop

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

@@ -86,6 +86,7 @@ onClickOutside(inputWrapperRef, (e) => {
         :class="{
           'p-2': editEnabled,
           'py-1 h-full': isForm,
+          'px-1': isExpandedFormOpen,
         }"
         :style="{
           minHeight: `${height}px`,

packages/nc-gui/components/general/UserIcon.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import type { UserType } from 'nocodb-sdk'
 const props = defineProps<{
   size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge'
   name?: string
+  user: UserType
 }>()
 
-const { user } = useGlobal()
+const user = toRef(props, 'user')
 
 const backgroundColor = computed(() => (user.value?.id ? stringToColour(user.value?.id) : '#FFFFFF'))
 

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -8,7 +8,9 @@ const { loadCommentsAndLogs, commentsAndLogs, saveComment, comment, updateCommen
 
 const commentsWrapperEl = ref<HTMLDivElement>()
 
-await loadCommentsAndLogs()
+onMounted(async () => {
+  await loadCommentsAndLogs()
+})
 
 const { user } = useGlobal()
 
@@ -161,10 +163,10 @@ const processedAudit = (log: string) => {
               <div class="flex flex-col p-4 gap-3">
                 <div class="flex justify-between">
                   <div class="flex items-center gap-2">
-                    <GeneralUserIcon size="base" :name="log.display_name ?? log.user" />
+                    <GeneralUserIcon size="base" :name="log.display_name ?? log.user" :user="log" />
                     <div class="flex flex-col">
                       <span class="truncate font-bold max-w-42">
-                        {{ log.display_name ?? log.user.split('@')[0].slice(0, 2) ?? 'Shared base' }}
+                        {{ log.display_name ?? log.user.split('@')[0] ?? 'Shared base' }}
                       </span>
                       <div v-if="log.id !== editLog?.id" class="text-xs text-gray-500">
                         {{ log.created_at !== log.updated_at ? `Edited ${timeAgo(log.updated_at)}` : timeAgo(log.created_at) }}

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -168,25 +168,36 @@ const onDuplicateRow = () => {
   }, 500)
 }
 
+const save = async () => {
+  if (isNew.value) {
+    const data = await _save(rowState.value)
+    await syncLTARRefs(data)
+    reloadTrigger?.trigger()
+  } else {
+    await _save()
+    reloadTrigger?.trigger()
+  }
+}
+
+const isPreventChangeModalOpen = ref(false)
+
+const discardPreventModal = () => {
+  emits('next')
+  isPreventChangeModalOpen.value = false
+}
+
 const onNext = async () => {
   if (changedColumns.value.size > 0) {
-    await Modal.confirm({
-      title: 'Do you want to save the changes?',
-      okText: 'Save',
-      cancelText: 'Discard',
-      onOk: async () => {
-        await save()
-        emits('next')
-      },
-      onCancel: () => {
-        emits('next')
-      },
-    })
+    isPreventChangeModalOpen.value = true
   } else {
     emits('next')
   }
 }
 
+const saveChanges = async () => {
+  await save()
+  emits('next')
+}
 const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 
 // override reload trigger and use it to reload grid and the form itself
@@ -230,18 +241,6 @@ const addNewRow = () => {
     isExpanded.value = true
   }, 500)
 }
-
-const save = async () => {
-  if (isNew.value) {
-    const data = await _save(rowState.value)
-    await syncLTARRefs(data)
-    reloadTrigger?.trigger()
-  } else {
-    await _save()
-    reloadTrigger?.trigger()
-  }
-}
-
 // attach keyboard listeners to switch between rows
 // using alt + left/right arrow keys
 useActiveKeyupListener(
@@ -372,7 +371,7 @@ export default {
     <div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6">
       <div class="flex h-8 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">
         <template v-if="!isMobileMode">
-          <div class="flex gap-3">
+          <div class="flex gap-3 w-100">
             <div class="flex gap-2">
               <NcButton
                 v-if="props.showNextPrevIcons"
@@ -393,7 +392,7 @@ export default {
                 <MdiChevronDown class="text-md" />
               </NcButton>
             </div>
-            <div v-if="displayValue" class="flex items-center truncate max-w-32 font-bold text-gray-800 text-xl">
+            <div v-if="displayValue" class="flex items-center truncate font-bold text-gray-800 text-xl">
               {{ displayValue }}
             </div>
           </div>
@@ -614,6 +613,7 @@ export default {
                 type="primary"
                 size="medium"
                 class="nc-expand-form-save-btn !xs:(text-base)"
+                :disabled="changedColumns.size === 0"
                 @click="save"
               >
                 <div class="xs:px-1">Save</div>
@@ -644,6 +644,22 @@ export default {
       </span>
     </template>
   </GeneralDeleteModal>
+
+  <!-- Prevent unsaved change modal -->
+  <NcModal v-model:visible="isPreventChangeModalOpen" size="small">
+    <template #header>
+      <div class="flex flex-row items-center gap-x-2">Do you want to save the changes ?</div>
+    </template>
+    <div class="mt-2">
+      <div class="flex flex-row justify-end gap-x-2 mt-6">
+        <NcButton type="secondary" @click="discardPreventModal">{{ $t('general.quit') }}</NcButton>
+
+        <NcButton key="submit" type="primary" label="Rename Table" loading-label="Renaming Table" @click="saveChanges">
+          {{ $t('activity.saveAndQuit') }}
+        </NcButton>
+      </div>
+    </div>
+  </NcModal>
 </template>
 
 <style lang="scss">

packages/nc-gui/lang/en.json

@@ -39,6 +39,7 @@
     }
   },
   "general": {
+    "quit": "Quit",
     "home": "Home",
     "load": "Load",
     "open": "Open",
@@ -400,6 +401,7 @@
     "addHeader": "Add Header",
     "enterDefaultUrlOptional": "Enter default URL (Optional)",
     "negative": "Negative",
+    "discard": "Discard",
     "default": "Default",
     "defaultNumberPercent": "Default Number (%)",
     "durationFormat": "Duration Format",
@@ -624,6 +626,7 @@
     "deleteProject": "Delete Project",
     "refreshProject": "Refresh projects",
     "saveProject": "Save Project",
+    "saveAndQuit": "Save & Quit",
     "deleteKanbanStack": "Delete stack?",
     "createProjectExtended": {
       "extDB": "Create By Connecting <br>To An External Database",