From 5b332c5c5b639a6bbd7cb2fa42cc6d23a0cd11ac Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:47 +0000
Subject: [PATCH 01/36] feat(nc-gui): form field in right pannel setup

---
 .../nc-gui/components/smartsheet/Form.vue     | 940 +++++++++---------
 1 file changed, 467 insertions(+), 473 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b64ab3f9e635..12a42c0667a6 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -190,6 +190,15 @@ const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).s
 
 const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value.logo_url)))
 
+const activeField = computed({
+  get: () => {
+    return visibleColumns.value.find((c) => c.title === activeRow.value) || null
+  },
+  set: (val) => {
+    console.log('value', val)
+  },
+})
+
 const updateView = useDebounceFn(
   () => {
     updateFormView(formViewData.value)
@@ -598,7 +607,8 @@ onClickOutside(draggableRef, (e) => {
   if (
     (e.target as HTMLElement)?.closest(
       '.nc-dropdown-single-select-cell, .nc-dropdown-multi-select-cell, .nc-dropdown-user-select-cell, .nc-form-rich-text-field',
-    )
+    ) ||
+    (activeField && (e.target as HTMLElement)?.closest('.nc-form-left-drawer'))
   ) {
     return
   }
@@ -673,6 +683,7 @@ watch(activeRow, (newValue) => {
 
 watch([focusLabel, activeRow], () => {
   if (activeRow && focusLabel.value) {
+    console.log('focus input')
     focusLabel.value?.focus()
   }
 })
@@ -1090,17 +1101,17 @@ useEventListener(
                   >
                     <template #item="{ element }">
                       <div
-                        class="nc-editable nc-form-focus-element item relative bg-white"
+                        class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
                         :class="[
                           `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                           {
                             'rounded-2xl overflow-hidden border-2 my-1': isEditable,
                           },
                           {
-                            'p-4 lg:p-6 border-transparent my-0': !isEditable,
+                            'border-transparent my-0': !isEditable,
                           },
                           {
-                            'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6 cursor-pointer':
+                            'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) cursor-pointer':
                               activeRow !== element.title && isEditable,
                           },
 
@@ -1115,135 +1126,30 @@ useEventListener(
                         data-testid="nc-form-fields"
                         @click.stop="onFormItemClick(element)"
                       >
-                        <div v-if="activeRow !== element.title">
-                          <div class="text-sm font-semibold text-gray-800">
-                            <span data-testid="nc-form-input-label">
-                              {{ element.label || element.title }}
-                            </span>
-                            <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                              >&nbsp;*</span
-                            >
-                          </div>
-
-                          <LazyCellRichText
-                            v-if="element.description"
-                            :value="element.description"
-                            is-form-field
-                            read-only
-                            sync-value-change
-                            class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
-                            data-testid="nc-form-help-text"
-                            @update:value="updateColMeta(element)"
-                          />
+                        <div class="text-sm font-semibold text-gray-800">
+                          <span data-testid="nc-form-input-label">
+                            {{ element.label || element.title }}
+                          </span>
+                          <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
+                            >&nbsp;*</span
+                          >
                         </div>
 
-                        <!-- Field Header  -->
-                        <div
-                          v-if="activeRow === element.title"
-                          class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50 border-b-1 border-gray-200"
-                        >
-                          <component
-                            :is="iconMap.drag"
-                            class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600"
-                          />
-                          <div class="flex-1 flex items-center max-w-[calc(100%_-_152px)]">
-                            <SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" />
-                            <SmartsheetHeaderCellIcon v-else :column-meta="element" />
-
-                            <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
-                              <template #title>
-                                <div class="text-center">
-                                  {{ element.title }}
-                                </div>
-                              </template>
-                              <span data-testid="nc-form-input-label">
-                                {{ element.title }}
-                              </span>
-                            </NcTooltip>
-                            <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                              >&nbsp;*</span
-                            >
-                          </div>
-                          <a-form-item class="!my-0">
-                            <div class="flex gap-2 items-center">
-                              <span
-                                class="nc-form-input-required text-gray-500 mr-2"
-                                data-testid="nc-form-input-required"
-                                @click.stop="
-                                  () => {
-                                    element.required = !element.required
-                                    updateColMeta(element)
-                                  }
-                                "
-                              >
-                                {{ $t('general.required') }}
-                              </span>
-                              <a-switch
-                                v-model:checked="element.required"
-                                v-e="['a:form-view:field:mark-required']"
-                                size="small"
-                                @change="updateColMeta(element)"
-                              />
-                            </div>
-                          </a-form-item>
-                        </div>
+                        <LazyCellRichText
+                          v-if="element.description"
+                          :value="element.description"
+                          is-form-field
+                          read-only
+                          sync-value-change
+                          class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
+                          data-testid="nc-form-help-text"
+                          @update:value="updateColMeta(element)"
+                        />
 
                         <!-- Field Body  -->
 
-                        <div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''">
-                          <template v-if="activeRow === element.title">
-                            <a-form-item class="my-0 !mb-2">
-                              <a-textarea
-                                ref="focusLabel"
-                                v-model:value="element.label"
-                                :rows="1"
-                                auto-size
-                                hide-details
-                                class="form-meta-input nc-form-input-label"
-                                data-testid="nc-form-input-label"
-                                :placeholder="$t('msg.info.formInput')"
-                                @keydown.enter.prevent
-                                @change="updateColMeta(element)"
-                              />
-                            </a-form-item>
-
-                            <a-form-item class="my-0 !mb-3">
-                              <LazyCellRichText
-                                v-model:value="element.description"
-                                :placeholder="$t('msg.info.formHelpText')"
-                                class="form-meta-input nc-form-input-help-text"
-                                is-form-field
-                                data-testid="nc-form-input-help-text"
-                                @update:value="updateColMeta(element)"
-                            /></a-form-item>
-
-                            <a-form-item
-                              v-if="columnSupportsScanning(element.uidt)"
-                              class="!my-0 !mb-3 nc-form-input-enable-scanner-form-item"
-                            >
-                              <div class="flex space-x-4 items-center">
-                                <a-switch
-                                  v-model:checked="element.enable_scanner"
-                                  v-e="['a:form-view:field:mark-enable-scanner']"
-                                  size="small"
-                                  @change="updateColMeta(element)"
-                                />
-                                <span
-                                  class="text-gray-500 nc-form-input-enable-scanner"
-                                  data-testid="nc-form-input-enable-scanner"
-                                  @click="
-                                    () => {
-                                      element.general.enable_scanner = !element.general.enable_scanner
-                                      updateColMeta(element)
-                                    }
-                                  "
-                                >
-                                  {{ $t('general.enableScanner') }}
-                                </span>
-                              </div>
-                            </a-form-item>
-                          </template>
-                          <div :class="activeRow !== element.title ? 'mt-2' : ''">
+                        <div class="nc-form-field-body">
+                          <div class="mt-2">
                             <a-form-item
                               :name="element.title"
                               class="!my-0 nc-input-required-error nc-form-input-item"
@@ -1285,68 +1191,6 @@ useEventListener(
                             </a-form-item>
                           </div>
                         </div>
-
-                        <!-- Field Settings  -->
-                        <div
-                          v-if="activeRow === element.title && isSelectTypeCol(element.uidt)"
-                          class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3 bg-gray-50"
-                        >
-                          <!-- Layout  -->
-                          <div v-if="isSelectTypeCol(element.uidt)">
-                            <div>Layout</div>
-
-                            <a-radio-group
-                              :value="!!element.meta.isList"
-                              class="nc-form-field-layout !mt-2"
-                              @update:value="
-                                (value) => {
-                                  element.meta.isList = value
-                                  updateColMeta(element)
-                                }
-                              "
-                            >
-                              <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
-                              <a-radio :value="true">{{ $t('general.list') }}</a-radio>
-                            </a-radio-group>
-                          </div>
-                          <!-- Todo: Show on conditions,... -->
-                          <!-- eslint-disable vue/no-constant-condition -->
-                          <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
-                            <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
-                            <div>
-                              <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
-                              <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
-                            </div>
-                          </div>
-
-                          <!-- Limit options -->
-                          <div
-                            v-if="isSelectTypeCol(element.uidt)"
-                            class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white"
-                          >
-                            <div class="flex items-center gap-3">
-                              <a-switch
-                                v-model:checked="element.meta.isLimitOption"
-                                v-e="['a:form-view:field:limit-options']"
-                                size="small"
-                                class="nc-form-switch-focus"
-                                @change="updateColMeta(element)"
-                              />
-                              <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
-                            </div>
-                            <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
-                              <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                              <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
-                                <LazySmartsheetFormLimitOptions
-                                  v-model:model-value="element.meta.limitOptions"
-                                  :column="element"
-                                  :is-required="isRequired(element, element.required)"
-                                  @update:model-value="updateColMeta(element)"
-                                ></LazySmartsheetFormLimitOptions>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
                       </div>
                     </template>
 
@@ -1399,212 +1243,361 @@ useEventListener(
             </div>
           </div>
           <div class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
-            <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
-              <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
-                <div class="flex flex-wrap justify-between items-center gap-2">
-                  <div class="flex gap-3">
-                    <div class="text-base font-bold text-gray-900">
-                      {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
-                    </div>
-                    <NcBadge color="border-gray-200">
-                      {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
-                    </NcBadge>
-                  </div>
+            <div v-if="activeField">
+              <!-- header -->
+              <div class="px-3 py-2 flex items-center border-b border-gray-200">
+                <div class="text-lg">
+                  <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(activeField)" :column-meta="activeField" />
+                  <SmartsheetHeaderCellIcon v-else :column-meta="activeField" />
+                </div>
 
-                  <a-dropdown
-                    v-if="isUIAllowed('fieldAdd')"
-                    v-model:visible="showColumnDropdown"
-                    :trigger="['click']"
-                    overlay-class-name="nc-dropdown-form-add-column"
-                  >
-                    <NcButton
-                      type="secondary"
+                <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
+                  <template #title>
+                    <div class="text-center">
+                      {{ activeField.title }}
+                    </div>
+                  </template>
+                  <span data-testid="nc-form-input-label">
+                    {{ activeField.title }}
+                  </span>
+                </NcTooltip>
+                <span v-if="isRequired(activeField, activeField.required)" class="text-red-500 text-base leading-[18px]"
+                  >&nbsp;*</span
+                >
+              </div>
+              <!-- Form text -->
+              <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
+                <div class="text-base font-bold">Form Text</div>
+
+                <a-textarea
+                  ref="focusLabel"
+                  v-model:value="activeField.label"
+                  :rows="1"
+                  auto-size
+                  hide-details
+                  class="form-meta-input nc-form-input-label"
+                  data-testid="nc-form-input-label"
+                  :placeholder="$t('msg.info.formInput')"
+                  @keydown.enter.prevent
+                  @change="updateColMeta(activeField)"
+                />
+
+                <LazyCellRichText
+                  v-model:value="activeField.description"
+                  :placeholder="$t('msg.info.formHelpText')"
+                  class="form-meta-input nc-form-input-help-text"
+                  is-form-field
+                  data-testid="nc-form-input-help-text"
+                  @update:value="updateColMeta(activeField)"
+                />
+
+                <div v-if="columnSupportsScanning(activeField.uidt)" class="!my-0 nc-form-input-enable-scanner-form-item">
+                  <div class="flex space-x-4 items-center">
+                    <a-switch
+                      v-model:checked="activeField.enable_scanner"
+                      v-e="['a:form-view:field:mark-enable-scanner']"
                       size="small"
-                      class="nc-form-add-field"
-                      data-testid="nc-form-add-field"
-                      @click.stop="showColumnDropdown = true"
+                      @change="updateColMeta(activeField)"
+                    />
+                    <span
+                      class="text-gray-500 nc-form-input-enable-scanner"
+                      data-testid="nc-form-input-enable-scanner"
+                      @click="
+                        () => {
+                          activeField.general.enable_scanner = !activeField.general.enable_scanner
+                          updateColMeta(activeField)
+                        }
+                      "
                     >
-                      <div class="flex gap-2 items-center">
-                        <component :is="iconMap.plus" class="w-4 h-4" />
-                        <span> {{ $t('activity.addFieldFromFormView') }} </span>
-                      </div>
-                    </NcButton>
+                      {{ $t('general.enableScanner') }}
+                    </span>
+                  </div>
+                </div>
+              </div>
 
-                    <template #overlay>
-                      <SmartsheetColumnEditOrAddProvider
-                        v-if="showColumnDropdown"
-                        @submit="submitCallback"
-                        @cancel="showColumnDropdown = false"
-                        @click.stop
-                        @keydown.stop
-                      />
-                    </template>
-                  </a-dropdown>
+              <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
+                <div class="text-base font-bold">Field Settings</div>
+                <div class="flex gap-2 items-center">
+                  <span
+                    class="nc-form-input-required text-gray-500 mr-2"
+                    data-testid="nc-form-input-required"
+                    @click.stop="
+                      () => {
+                        activeField.required = !activeField.required
+                        updateColMeta(activeField)
+                      }
+                    "
+                  >
+                    {{ $t('general.required') }}
+                  </span>
+                  <a-switch
+                    v-model:checked="activeField.required"
+                    v-e="['a:form-view:field:mark-required']"
+                    size="small"
+                    @change="updateColMeta(activeField)"
+                  />
                 </div>
-                <div>
-                  <a-input
-                    v-model:value="searchQuery"
-                    class="!h-9 !px-3 !py-1 !rounded-lg"
-                    :placeholder="`${$t('placeholder.searchFields')}...`"
-                    name="nc-form-field-search-input"
-                    data-testid="nc-form-field-search-input"
+                <!-- Layout  -->
+                <div v-if="isSelectTypeCol(activeField.uidt)">
+                  <div>Layout</div>
+
+                  <a-radio-group
+                    :value="!!activeField.meta.isList"
+                    class="nc-form-field-layout !mt-2"
+                    @update:value="
+                      (value) => {
+                        activeField.meta.isList = value
+                        updateColMeta(activeField)
+                      }
+                    "
                   >
-                    <template #prefix>
-                      <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
-                    </template>
-                    <template #suffix>
-                      <GeneralIcon
-                        v-if="searchQuery.length > 0"
-                        icon="close"
-                        class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
-                        data-testid="nc-form-field-clear-search"
-                        @click="searchQuery = ''"
-                      />
-                    </template>
-                  </a-input>
+                    <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                    <a-radio :value="true">{{ $t('general.list') }}</a-radio>
+                  </a-radio-group>
                 </div>
-                <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
-                  <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
-                    {{ $t('title.noFieldsFound') }}
+                <!-- Todo: Show on conditions,... -->
+                <!-- eslint-disable vue/no-constant-condition -->
+                <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
+                  <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
+                  <div>
+                    <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                    <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                   </div>
-                  <template v-if="localColumns.length">
-                    <div
-                      key="nc-form-show-all-fields"
-                      class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
-                      data-testid="nc-form-show-all-fields"
-                      @click.stop
-                    >
-                      <div class="w-4 h-4 flex-none mx-2"></div>
-                      <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
-                        <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
-                        <div class="flex items-center px-2">
-                          <a-switch
-                            :checked="visibleColumns.length === localColumns.length"
-                            size="small"
-                            class="nc-switch"
-                            @change="handleAddOrRemoveAllColumns"
-                          />
-                        </div>
+                </div>
+
+                <!-- Limit options -->
+                <div v-if="isSelectTypeCol(activeField.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
+                  <div class="flex items-center gap-3">
+                    <a-switch
+                      v-model:checked="activeField.meta.isLimitOption"
+                      v-e="['a:form-view:field:limit-options']"
+                      size="small"
+                      class="nc-form-switch-focus"
+                      @change="updateColMeta(activeField)"
+                    />
+                    <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                  </div>
+                  <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
+                    <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                    <div v-if="activeField.meta.isLimitOption" class="mt-5 max-w-[80%]">
+                      <LazySmartsheetFormLimitOptions
+                        v-model:model-value="activeField.meta.limitOptions"
+                        :column="activeField"
+                        :is-required="isRequired(activeField, activeField.required)"
+                        @update:model-value="updateColMeta(activeField)"
+                      ></LazySmartsheetFormLimitOptions>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <template v-else>
+              <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
+                <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
+                  <div class="flex flex-wrap justify-between items-center gap-2">
+                    <div class="flex gap-3">
+                      <div class="text-base font-bold text-gray-900">
+                        {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
                       </div>
+                      <NcBadge color="border-gray-200">
+                        {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
+                      </NcBadge>
                     </div>
-                    <Draggable
-                      :list="localColumns"
-                      item-key="id"
-                      ghost-class="nc-form-field-ghost"
-                      :style="{ height: 'calc(100% - 64px)' }"
-                      :disabled="isLocked || !isEditable"
-                      @change="onMove($event)"
-                      @start="drag = true"
-                      @end="drag = false"
+
+                    <a-dropdown
+                      v-if="isUIAllowed('fieldAdd')"
+                      v-model:visible="showColumnDropdown"
+                      :trigger="['click']"
+                      overlay-class-name="nc-dropdown-form-add-column"
                     >
-                      <template #item="{ element: field }">
-                        <div
-                          v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
-                          :key="field.id"
-                          class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
-                          :class="[
-                            `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
-                            `${activeRow === field.title ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
-                          ]"
-                          :data-testid="`nc-form-field-item-${field.title}`"
-                        >
-                          <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
-                          <div
-                            class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
-                            @click="showOrHideColumn(field, !field.show, true)"
-                          >
-                            <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
-                            <SmartsheetHeaderCellIcon v-else :column-meta="field" />
-                            <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
-                              <div class="w-full flex items-center">
-                                <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
-                                  <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
-                                    <template #title>
-                                      <div class="text-center">
-                                        {{ field.title }}
-                                      </div>
-                                    </template>
-                                    <span data-testid="nc-field-title"> {{ field.title }} </span>
-                                  </NcTooltip>
-                                </div>
-                                <div v-if="field.label?.trim()" class="truncate inline-flex text-xs font-normal text-gray-700">
-                                  <span>&nbsp;(</span>
-                                  <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
-                                    <template #title>
-                                      <div class="text-center">
-                                        {{ field.label }}
-                                      </div>
-                                    </template>
-                                    <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
-                                  </NcTooltip>
-                                  <span>)</span>
-                                </div>
-                                <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
-                                  >&nbsp;*</span
-                                >
-                              </div>
-                            </div>
+                      <NcButton
+                        type="secondary"
+                        size="small"
+                        class="nc-form-add-field"
+                        data-testid="nc-form-add-field"
+                        @click.stop="showColumnDropdown = true"
+                      >
+                        <div class="flex gap-2 items-center">
+                          <component :is="iconMap.plus" class="w-4 h-4" />
+                          <span> {{ $t('activity.addFieldFromFormView') }} </span>
+                        </div>
+                      </NcButton>
+
+                      <template #overlay>
+                        <SmartsheetColumnEditOrAddProvider
+                          v-if="showColumnDropdown"
+                          @submit="submitCallback"
+                          @cancel="showColumnDropdown = false"
+                          @click.stop
+                          @keydown.stop
+                        />
+                      </template>
+                    </a-dropdown>
+                  </div>
+                  <div>
+                    <a-input
+                      v-model:value="searchQuery"
+                      class="!h-9 !px-3 !py-1 !rounded-lg"
+                      :placeholder="`${$t('placeholder.searchFields')}...`"
+                      name="nc-form-field-search-input"
+                      data-testid="nc-form-field-search-input"
+                    >
+                      <template #prefix>
+                        <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
+                      </template>
+                      <template #suffix>
+                        <GeneralIcon
+                          v-if="searchQuery.length > 0"
+                          icon="close"
+                          class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
+                          data-testid="nc-form-field-clear-search"
+                          @click="searchQuery = ''"
+                        />
+                      </template>
+                    </a-input>
+                  </div>
+                  <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
+                    <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
+                      {{ $t('title.noFieldsFound') }}
+                    </div>
+                    <template v-if="localColumns.length">
+                      <div
+                        key="nc-form-show-all-fields"
+                        class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
+                        data-testid="nc-form-show-all-fields"
+                        @click.stop
+                      >
+                        <div class="w-4 h-4 flex-none mx-2"></div>
+                        <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
+                          <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
+                          <div class="flex items-center px-2">
                             <a-switch
-                              :checked="!!field.show"
-                              :disabled="field.required || isLocked || !isEditable"
-                              class="nc-switch"
+                              :checked="visibleColumns.length === localColumns.length"
                               size="small"
+                              class="nc-switch"
+                              @change="handleAddOrRemoveAllColumns"
                             />
                           </div>
                         </div>
-                      </template>
-                      <template
-                        v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
-                        #footer
+                      </div>
+                      <Draggable
+                        :list="localColumns"
+                        item-key="id"
+                        ghost-class="nc-form-field-ghost"
+                        :style="{ height: 'calc(100% - 64px)' }"
+                        :disabled="isLocked || !isEditable"
+                        @change="onMove($event)"
+                        @start="drag = true"
+                        @end="drag = false"
                       >
-                        <div class="px-0.5 py-2 text-gray-500 text-center">
-                          {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
-                        </div>
-                      </template>
-                    </Draggable>
-                  </template>
-                </div>
-              </Pane>
-              <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
-                <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
-                  <!-- Appearance Settings -->
-                  <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
-
-                  <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
-                    <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
-                    <div class="flex justify-start">
-                      <LazyGeneralColorPicker
-                        :model-value="(formViewData.meta as Record<string,any>).background_color"
-                        :colors="[
-                          '#FFFFFF',
-                          '#FFDBD9',
-                          '#FEE6D6',
-                          '#FFF0D1',
-                          '#D4F7E0',
-                          '#D7F2FF',
-                          '#FED8F4',
-                          '#E5D4F5',
-                          '#FFCFE6',
-                        ]"
-                        color-box-border
-                        is-new-design
-                        class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
-                        @input="handleChangeBackground"
-                      />
-                    </div>
+                        <template #item="{ element: field }">
+                          <div
+                            v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
+                            :key="field.id"
+                            class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
+                            :class="[
+                              `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
+                              `${activeRow === field.title ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
+                            ]"
+                            :data-testid="`nc-form-field-item-${field.title}`"
+                          >
+                            <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                            <div
+                              class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
+                              @click="showOrHideColumn(field, !field.show, true)"
+                            >
+                              <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                              <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+                              <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
+                                <div class="w-full flex items-center">
+                                  <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
+                                    <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
+                                      <template #title>
+                                        <div class="text-center">
+                                          {{ field.title }}
+                                        </div>
+                                      </template>
+                                      <span data-testid="nc-field-title"> {{ field.title }} </span>
+                                    </NcTooltip>
+                                  </div>
+                                  <div v-if="field.label?.trim()" class="truncate inline-flex text-xs font-normal text-gray-700">
+                                    <span>&nbsp;(</span>
+                                    <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
+                                      <template #title>
+                                        <div class="text-center">
+                                          {{ field.label }}
+                                        </div>
+                                      </template>
+                                      <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
+                                    </NcTooltip>
+                                    <span>)</span>
+                                  </div>
+                                  <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
+                                    >&nbsp;*</span
+                                  >
+                                </div>
+                              </div>
+                              <a-switch
+                                :checked="!!field.show"
+                                :disabled="field.required || isLocked || !isEditable"
+                                class="nc-switch"
+                                size="small"
+                              />
+                            </div>
+                          </div>
+                        </template>
+                        <template
+                          v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
+                          #footer
+                        >
+                          <div class="px-0.5 py-2 text-gray-500 text-center">
+                            {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
+                          </div>
+                        </template>
+                      </Draggable>
+                    </template>
                   </div>
+                </Pane>
+                <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
+                  <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
+                    <!-- Appearance Settings -->
+                    <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
+
+                    <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
+                      <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
+                      <div class="flex justify-start">
+                        <LazyGeneralColorPicker
+                          :model-value="(formViewData.meta as Record<string,any>).background_color"
+                          :colors="[
+                            '#FFFFFF',
+                            '#FFDBD9',
+                            '#FEE6D6',
+                            '#FFF0D1',
+                            '#D4F7E0',
+                            '#D7F2FF',
+                            '#FED8F4',
+                            '#E5D4F5',
+                            '#FFCFE6',
+                          ]"
+                          color-box-border
+                          is-new-design
+                          class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
+                          @input="handleChangeBackground"
+                        />
+                      </div>
+                    </div>
 
-                  <div class="flex items-center">
-                    <!-- Hide NocoDB Branding -->
-                    <a-switch
-                      v-if="isEeUI"
-                      v-e="[`a:form-view:hide-branding`]"
-                      :checked="parseProp(formViewData.meta)?.hide_branding"
-                      size="small"
-                      class="nc-form-hide-branding"
-                      data-testid="nc-form-hide-branding"
-                      :disabled="isLocked || !isEditable"
-                      @change="
+                    <div class="flex items-center">
+                      <!-- Hide NocoDB Branding -->
+                      <a-switch
+                        v-if="isEeUI"
+                        v-e="[`a:form-view:hide-branding`]"
+                        :checked="parseProp(formViewData.meta)?.hide_branding"
+                        size="small"
+                        class="nc-form-hide-branding"
+                        data-testid="nc-form-hide-branding"
+                        :disabled="isLocked || !isEditable"
+                        @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1612,27 +1605,27 @@ useEventListener(
                         updateView()
                       }
                     "
-                    />
-                    <NcTooltip v-else placement="top">
-                      <template #title>
-                        <div class="text-center">
-                          {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                        </div>
-                      </template>
-                      <a-switch :checked="false" size="small" :disabled="true" />
-                    </NcTooltip>
-                    <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
-                  </div>
-                  <div class="flex items-center">
-                    <!-- Hide Banner -->
-                    <a-switch
-                      v-e="[`a:form-view:hide-banner`]"
-                      :checked="parseProp(formViewData.meta)?.hide_banner"
-                      size="small"
-                      class="nc-form-hide-banner"
-                      data-testid="nc-form-hide-banner"
-                      :disabled="isLocked || !isEditable"
-                      @change="
+                      />
+                      <NcTooltip v-else placement="top">
+                        <template #title>
+                          <div class="text-center">
+                            {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                          </div>
+                        </template>
+                        <a-switch :checked="false" size="small" :disabled="true" />
+                      </NcTooltip>
+                      <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
+                    </div>
+                    <div class="flex items-center">
+                      <!-- Hide Banner -->
+                      <a-switch
+                        v-e="[`a:form-view:hide-banner`]"
+                        :checked="parseProp(formViewData.meta)?.hide_banner"
+                        size="small"
+                        class="nc-form-hide-banner"
+                        data-testid="nc-form-hide-banner"
+                        :disabled="isLocked || !isEditable"
+                        @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1640,93 +1633,94 @@ useEventListener(
                         updateView()
                       }
                     "
-                    />
-
-                    <span class="ml-4">{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
-                  </div>
-                </div>
+                      />
 
-                <div class="p-4 flex flex-col space-y-4">
-                  <!-- Post Form Submission Settings -->
-                  <div class="text-base font-bold text-gray-900">
-                    {{ $t('msg.info.postFormSubmissionSettings') }}
+                      <span class="ml-4">{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
+                    </div>
                   </div>
 
-                  <!-- Show this message -->
-                  <div>
-                    <div class="text-gray-800 mb-2">
-                      {{ $t('msg.info.formDisplayMessage') }}
+                  <div class="p-4 flex flex-col space-y-4">
+                    <!-- Post Form Submission Settings -->
+                    <div class="text-base font-bold text-gray-900">
+                      {{ $t('msg.info.postFormSubmissionSettings') }}
                     </div>
-                    <a-form-item class="!my-0">
-                      <LazyCellRichText
-                        v-if="!isLocked && isEditable"
-                        v-model:value="formViewData.success_msg"
-                        class="nc-form-after-submit-msg"
-                        :is-form-field="true"
-                        data-testid="nc-form-after-submit-msg"
-                        @update:value="updateView" />
-                      <LazyCellRichText
-                        v-else
-                        :value="formViewData.success_msg"
-                        class="nc-form-after-submit-msg"
-                        is-form-field
-                        read-only
-                        data-testid="nc-form-after-submit-msg"
-                    /></a-form-item>
-                  </div>
 
-                  <!-- Other options -->
-                  <div class="flex flex-col gap-3">
-                    <div class="flex items-center">
-                      <!-- Show "Submit Another Form" button -->
-                      <a-switch
-                        v-model:checked="formViewData.submit_another_form"
-                        v-e="[`a:form-view:submit-another-form`]"
-                        size="small"
-                        class="nc-form-checkbox-submit-another-form"
-                        data-testid="nc-form-checkbox-submit-another-form"
-                        :disabled="isLocked || !isEditable"
-                        @change="updateView"
-                      />
-                      <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
+                    <!-- Show this message -->
+                    <div>
+                      <div class="text-gray-800 mb-2">
+                        {{ $t('msg.info.formDisplayMessage') }}
+                      </div>
+                      <a-form-item class="!my-0">
+                        <LazyCellRichText
+                          v-if="!isLocked && isEditable"
+                          v-model:value="formViewData.success_msg"
+                          class="nc-form-after-submit-msg"
+                          :is-form-field="true"
+                          data-testid="nc-form-after-submit-msg"
+                          @update:value="updateView" />
+                        <LazyCellRichText
+                          v-else
+                          :value="formViewData.success_msg"
+                          class="nc-form-after-submit-msg"
+                          is-form-field
+                          read-only
+                          data-testid="nc-form-after-submit-msg"
+                      /></a-form-item>
                     </div>
 
-                    <div class="flex items-center">
-                      <!-- Show a blank form after 5 seconds -->
-                      <a-switch
-                        v-model:checked="formViewData.show_blank_form"
-                        v-e="[`a:form-view:show-blank-form`]"
-                        size="small"
-                        class="nc-form-checkbox-show-blank-form"
-                        data-testid="nc-form-checkbox-show-blank-form"
-                        :disabled="isLocked || !isEditable"
-                        @change="updateView"
-                      />
+                    <!-- Other options -->
+                    <div class="flex flex-col gap-3">
+                      <div class="flex items-center">
+                        <!-- Show "Submit Another Form" button -->
+                        <a-switch
+                          v-model:checked="formViewData.submit_another_form"
+                          v-e="[`a:form-view:submit-another-form`]"
+                          size="small"
+                          class="nc-form-checkbox-submit-another-form"
+                          data-testid="nc-form-checkbox-submit-another-form"
+                          :disabled="isLocked || !isEditable"
+                          @change="updateView"
+                        />
+                        <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
+                      </div>
 
-                      <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
-                    </div>
+                      <div class="flex items-center">
+                        <!-- Show a blank form after 5 seconds -->
+                        <a-switch
+                          v-model:checked="formViewData.show_blank_form"
+                          v-e="[`a:form-view:show-blank-form`]"
+                          size="small"
+                          class="nc-form-checkbox-show-blank-form"
+                          data-testid="nc-form-checkbox-show-blank-form"
+                          :disabled="isLocked || !isEditable"
+                          @change="updateView"
+                        />
 
-                    <div class="flex items-center">
-                      <a-switch
-                        v-model:checked="emailMe"
-                        v-e="[`a:form-view:email-me`]"
-                        size="small"
-                        class="nc-form-checkbox-send-email"
-                        data-testid="nc-form-checkbox-send-email"
-                        :disabled="isLocked || !isEditable"
-                        @change="onEmailChange"
-                      />
+                        <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
+                      </div>
+
+                      <div class="flex items-center">
+                        <a-switch
+                          v-model:checked="emailMe"
+                          v-e="[`a:form-view:email-me`]"
+                          size="small"
+                          class="nc-form-checkbox-send-email"
+                          data-testid="nc-form-checkbox-send-email"
+                          :disabled="isLocked || !isEditable"
+                          @change="onEmailChange"
+                        />
 
-                      <!-- Email me at <email> -->
-                      <span class="ml-4">
-                        {{ $t('msg.info.emailForm') }}
-                        <span class="text-bold text-gray-600">{{ user?.email }}</span>
-                      </span>
+                        <!-- Email me at <email> -->
+                        <span class="ml-4">
+                          {{ $t('msg.info.emailForm') }}
+                          <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Pane>
-            </Splitpanes>
+                </Pane>
+              </Splitpanes>
+            </template>
           </div>
         </template>
       </div>

From c5a02bd1f19d8af5421830e1e8ed42224d1be608 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:48 +0000
Subject: [PATCH 02/36] fix(nc-gui): inline form field reorder issue

---
 .../nc-gui/components/smartsheet/Form.vue     | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 12a42c0667a6..9e01bc7e63db 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -306,11 +306,7 @@ async function onMove(event: any, isVisibleFormFields = false) {
 
   if (isVisibleFormFields) {
     element = localColumns.value[localColumns.value?.findIndex((c) => c.fk_column_id === element.fk_column_id)]
-    newIndex = localColumns.value.findIndex(
-      (c) =>
-        c.fk_column_id ===
-        visibleColumns.value[newIndex > oldIndex ? newIndex - 1 : newIndex < oldIndex ? newIndex + 1 : newIndex].fk_column_id,
-    )
+    newIndex = localColumns.value.findIndex((c) => c.fk_column_id === visibleColumns.value[newIndex].fk_column_id)
   }
   if (!localColumns.value.length || localColumns.value.length === 1) {
     element.order = 1
@@ -326,7 +322,7 @@ async function onMove(event: any, isVisibleFormFields = false) {
 
   fields.value[fieldIndex] = element as any
 
-  localColumns.value = localColumns.value.sort((a, b) => {
+  localColumns.value = [...localColumns.value].sort((a, b) => {
     if (a.order !== undefined && b.order !== undefined) {
       return a.order - b.order
     }
@@ -1088,7 +1084,7 @@ useEventListener(
 
                   <Draggable
                     ref="draggableRef"
-                    :list="visibleColumns"
+                    :model-value="visibleColumns"
                     item-key="fk_column_id"
                     draggable=".item"
                     handle=".nc-form-field-drag-handler"
@@ -1105,7 +1101,7 @@ useEventListener(
                         :class="[
                           `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                           {
-                            'rounded-2xl overflow-hidden border-2 my-1': isEditable,
+                            'rounded-2xl border-2 my-1': isEditable,
                           },
                           {
                             'border-transparent my-0': !isEditable,
@@ -1126,6 +1122,18 @@ useEventListener(
                         data-testid="nc-form-fields"
                         @click.stop="onFormItemClick(element)"
                       >
+                        <div v-if="activeRow === element.title" class="absolute -left-3 top-6">
+                          <NcButton
+                            type="primary"
+                            size="small"
+                            class="nc-form-field-drag-handler !cursor-move !p-1 !min-w-6 !h-auto !rounded"
+                          >
+                            <component
+                              :is="iconMap.drag"
+                              class="nc-form-field-drag-handler flex-none !h-4 !w-4 text-white font-bold"
+                            />
+                          </NcButton>
+                        </div>
                         <div class="text-sm font-semibold text-gray-800">
                           <span data-testid="nc-form-input-label">
                             {{ element.label || element.title }}

From 56c586ac0935f3ccddbd34ae8f7c6d56a263164b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:48 +0000
Subject: [PATCH 03/36] fix(nc-gui): make edit form field right panel
 scrollable

---
 .../nc-gui/components/smartsheet/Form.vue     | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 9e01bc7e63db..31adced8fc8d 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1250,13 +1250,22 @@ useEventListener(
               </a-card>
             </div>
           </div>
-          <div class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
+          <div
+            class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200"
+            :class="{
+              'overflow-y-auto nc-form-scrollbar': activeField,
+            }"
+          >
             <div v-if="activeField">
               <!-- header -->
               <div class="px-3 py-2 flex items-center border-b border-gray-200">
-                <div class="text-lg">
-                  <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(activeField)" :column-meta="activeField" />
-                  <SmartsheetHeaderCellIcon v-else :column-meta="activeField" />
+                <div class="text-lg flex items-center">
+                  <SmartsheetHeaderVirtualCellIcon
+                    v-if="isVirtualCol(activeField)"
+                    :column-meta="activeField"
+                    class="!w-5 !h-5"
+                  />
+                  <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="!w-5 !h-5" />
                 </div>
 
                 <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
@@ -1385,9 +1394,9 @@ useEventListener(
                     />
                     <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
                   </div>
-                  <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
+                  <div class="pl-10 mt-2 flex-1">
                     <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                    <div v-if="activeField.meta.isLimitOption" class="mt-5 max-w-[80%]">
+                    <div v-if="activeField.meta.isLimitOption" class="mt-5">
                       <LazySmartsheetFormLimitOptions
                         v-model:model-value="activeField.meta.limitOptions"
                         :column="activeField"

From ff185f6d3a49821f5bf417164a480b8cd8e07166 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:48 +0000
Subject: [PATCH 04/36] fix(nc-gui): form field limit option hide btn focus box
 shadow style issue

---
 packages/nc-gui/components/smartsheet/form/LimitOptions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index c12b9ba4c546..4f4e92df6ae0 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -162,7 +162,7 @@ const showOrHideAll = (showAll: boolean) => {
     </div>
 
     <div v-if="vModel.length" class="flex items-stretch gap-2 pr-2 pl-3 py-1.5 rounded-t-lg border-1 border-b-0 border-gray-200">
-      <NcTooltip class="truncate max-w-full" :disabled="!isRequired">
+      <NcTooltip :disabled="!isRequired">
         <template #title> {{ $t('msg.info.preventHideAllOptions') }} </template>
 
         <NcButton

From 29ea75318a464a279c337387ac8352cacd37a42a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:48 +0000
Subject: [PATCH 05/36] fix(nc-gui): add support to edit form column in form
 view builder

---
 .../nc-gui/components/smartsheet/Form.vue     | 73 +++++++++++++------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 31adced8fc8d..83f5e664496f 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -604,7 +604,7 @@ onClickOutside(draggableRef, (e) => {
     (e.target as HTMLElement)?.closest(
       '.nc-dropdown-single-select-cell, .nc-dropdown-multi-select-cell, .nc-dropdown-user-select-cell, .nc-form-rich-text-field',
     ) ||
-    (activeField && (e.target as HTMLElement)?.closest('.nc-form-left-drawer'))
+    (activeField && (e.target as HTMLElement)?.closest('.nc-form-left-drawer, .nc-dropdown-form-add-column'))
   ) {
     return
   }
@@ -679,7 +679,6 @@ watch(activeRow, (newValue) => {
 
 watch([focusLabel, activeRow], () => {
   if (activeRow && focusLabel.value) {
-    console.log('focus input')
     focusLabel.value?.focus()
   }
 })
@@ -1267,20 +1266,47 @@ useEventListener(
                   />
                   <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="!w-5 !h-5" />
                 </div>
+                <a-dropdown
+                  v-if="isUIAllowed('fieldEdit')"
+                  v-model:visible="showColumnDropdown"
+                  :trigger="['click']"
+                  overlay-class-name="nc-dropdown-form-edit-column"
+                  disabled
+                >
+                  <div
+                    class="flex items-center space-x-1 px-1 py-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"
+                    :class="showColumnDropdown ? 'text-brand-500' : 'text-gray-800'"
+                  >
+                    <NcTooltip show-on-truncate-only>
+                      <template #title>
+                        <div class="text-center">
+                          {{ activeField.title }}
+                        </div>
+                      </template>
 
-                <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
-                  <template #title>
-                    <div class="text-center">
-                      {{ activeField.title }}
-                    </div>
+                      <div class="text-sm !leading-5 font-semibold select-none" data-testid="nc-form-input-label">
+                        {{ activeField.title }}
+                      </div>
+                    </NcTooltip>
+
+                    <component
+                      :is="iconMap.chevronDown"
+                      class="w-4 h-4"
+                      :style="{ transform: showColumnDropdown ? 'rotate(180deg)' : undefined }"
+                    />
+                  </div>
+
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAddProvider
+                      v-if="showColumnDropdown"
+                      :column="activeField"
+                      @submit="submitCallback"
+                      @cancel="showColumnDropdown = false"
+                      @click.stop
+                      @keydown.stop
+                    />
                   </template>
-                  <span data-testid="nc-form-input-label">
-                    {{ activeField.title }}
-                  </span>
-                </NcTooltip>
-                <span v-if="isRequired(activeField, activeField.required)" class="text-red-500 text-base leading-[18px]"
-                  >&nbsp;*</span
-                >
+                </a-dropdown>
               </div>
               <!-- Form text -->
               <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
@@ -1332,11 +1358,18 @@ useEventListener(
                 </div>
               </div>
 
+              <!-- Field Settings -->
               <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
                 <div class="text-base font-bold">Field Settings</div>
-                <div class="flex gap-2 items-center">
+                <div class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white flex items-center gap-3">
+                  <a-switch
+                    v-model:checked="activeField.required"
+                    v-e="['a:form-view:field:mark-required']"
+                    size="small"
+                    @change="updateColMeta(activeField)"
+                  />
                   <span
-                    class="nc-form-input-required text-gray-500 mr-2"
+                    class="nc-form-input-required text-gray-800 font-medium"
                     data-testid="nc-form-input-required"
                     @click.stop="
                       () => {
@@ -1347,12 +1380,6 @@ useEventListener(
                   >
                     {{ $t('general.required') }}
                   </span>
-                  <a-switch
-                    v-model:checked="activeField.required"
-                    v-e="['a:form-view:field:mark-required']"
-                    size="small"
-                    @change="updateColMeta(activeField)"
-                  />
                 </div>
                 <!-- Layout  -->
                 <div v-if="isSelectTypeCol(activeField.uidt)">
@@ -1868,7 +1895,7 @@ useEventListener(
 }
 
 .nc-form-scrollbar {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
+  @apply scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
   &::-webkit-scrollbar-thumb:hover {
     @apply !scrollbar-thumb-gray-300;
   }

From 6404dfc7c11e39fecc8c92dd5345603cc7b9e1ee Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:48 +0000
Subject: [PATCH 06/36] feat(nc-gui): added form field header menu dropdown

---
 packages/nc-gui/components/cell/RichText.vue  |   2 +-
 .../components/smartsheet/form/FieldMenu.vue  | 249 ++++++++++++++++++
 2 files changed, 250 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/smartsheet/form/FieldMenu.vue

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 422bea455fe8..c7030871c3ac 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -343,7 +343,7 @@ useEventListener(
 
 .nc-textarea-rich-editor {
   .tiptap p.is-editor-empty:first-child::before {
-    color: #6a7184;
+    color: #9aa2af;
     content: attr(data-placeholder);
     float: left;
     height: 0;
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
new file mode 100644
index 000000000000..fd11fb3cc6b5
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import type { ColumnReqType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { computed } from 'vue'
+import {
+  ActiveViewInj,
+  ColumnInj,
+  IsLockedInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  SmartsheetStoreEvents,
+  iconMap,
+  inject,
+  message,
+  useI18n,
+  useMetas,
+  useNuxtApp,
+  useSmartsheetStoreOrThrow,
+  toRefs,
+} from '#imports'
+
+const props = defineProps<{ column: Record<string, any>; isRequired?: boolean; isOpen: boolean }>()
+
+const emit = defineEmits(['edit', 'showOrHideColumn', 'update:isOpen'])
+
+const { column, isRequired } = toRefs(props)
+
+const isOpen = useVModel(props, 'isOpen', emit)
+
+const { eventBus } = useSmartsheetStoreOrThrow()
+
+const reloadDataHook = inject(ReloadViewDataHookInj)
+
+const meta = inject(MetaInj, ref())
+
+const view = inject(ActiveViewInj, ref())
+
+const isLocked = inject(IsLockedInj)
+
+const { $api, $e } = useNuxtApp()
+
+const { t } = useI18n()
+
+const { getMeta } = useMetas()
+
+const showDeleteColumnModal = ref(false)
+
+const isDuplicateDlgOpen = ref(false)
+const selectedColumnExtra = ref<any>()
+const duplicateDialogRef = ref<any>()
+
+const duplicateVirtualColumn = async () => {
+  let columnCreatePayload = {}
+
+  // generate duplicate column title
+  const duplicateColumnTitle = getUniqueColumnName(`${column!.value.title} copy`, meta!.value!.columns!)
+
+  columnCreatePayload = {
+    ...column!.value!,
+    ...(column!.value.colOptions ?? {}),
+    title: duplicateColumnTitle,
+    column_name: duplicateColumnTitle.replace(/\s/g, '_'),
+    id: undefined,
+    colOptions: undefined,
+    order: undefined,
+    system: false,
+  }
+
+  try {
+    const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list
+
+    const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id)
+    let newColumnOrder
+    if (currentColumnIndex === gridViewColumnList.length - 1) {
+      newColumnOrder = gridViewColumnList[currentColumnIndex].order! + 1
+    } else {
+      newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1].order!) / 2
+    }
+
+    await $api.dbTableColumn.create(meta!.value!.id!, {
+      ...columnCreatePayload,
+      pv: false,
+      view_id: view.value!.id as string,
+      column_order: {
+        order: newColumnOrder,
+        view_id: view.value!.id as string,
+      },
+    } as ColumnReqType)
+    await getMeta(meta!.value!.id!, true)
+
+    eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD)
+    reloadDataHook?.trigger()
+
+    // message.success(t('msg.success.columnDuplicated'))
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+  // closing dropdown
+  isOpen.value = false
+}
+
+const openDuplicateDlg = async () => {
+  if (!column?.value) return
+  if (
+    column.value.uidt &&
+    [
+      UITypes.Lookup,
+      UITypes.Rollup,
+      UITypes.CreatedTime,
+      UITypes.LastModifiedTime,
+      UITypes.CreatedBy,
+      UITypes.LastModifiedBy,
+    ].includes(column.value.uidt as UITypes)
+  ) {
+    duplicateVirtualColumn()
+  } else {
+    const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list
+
+    const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id)
+    let newColumnOrder
+    if (currentColumnIndex === gridViewColumnList.length - 1) {
+      newColumnOrder = gridViewColumnList[currentColumnIndex].order! + 1
+    } else {
+      newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1].order!) / 2
+    }
+
+    selectedColumnExtra.value = {
+      pv: false,
+      view_id: view.value!.id as string,
+      column_order: {
+        order: newColumnOrder,
+        view_id: view.value!.id as string,
+      },
+    }
+
+    if (column.value.uidt === UITypes.Formula) {
+      nextTick(() => {
+        duplicateDialogRef?.value?.duplicate()
+      })
+    } else {
+      isDuplicateDlgOpen.value = true
+    }
+
+    isOpen.value = false
+  }
+}
+
+// hide the field in view
+const hideField = async () => {
+  if (isRequired) return
+  isOpen.value = false
+  emit('showOrHideColumn')
+}
+
+const handleDelete = () => {
+  // closing the dropdown
+  // when modal opens
+  isOpen.value = false
+  showDeleteColumnModal.value = true
+}
+
+const onEditPress = () => {
+  isOpen.value = false
+  emit('edit')
+}
+
+const isDeleteAllowed = computed(() => {
+  return column?.value && !column.value.system
+})
+const isDuplicateAllowed = computed(() => {
+  return column?.value && !column.value.system
+})
+</script>
+
+<template>
+  <a-dropdown
+    v-if="!isLocked"
+    v-model:visible="isOpen"
+    :trigger="['click']"
+    placement="bottomRight"
+    overlay-class-name="nc-dropdown-form-column-operations !border-1 rounded-lg !shadow-xl"
+    @click.stop="isOpen = !isOpen"
+  >
+    <div>
+      <GeneralIcon icon="arrowDown" class="text-grey h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2" />
+    </div>
+    <template #overlay>
+      <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
+        <NcMenuItem @click="onEditPress">
+          <div class="nc-column-edit nc-header-menu-item">
+            <component :is="iconMap.ncEdit" class="text-gray-700" />
+            <!-- Edit -->
+            {{ $t('general.edit') }}
+          </div>
+        </NcMenuItem>
+
+        <NcMenuItem v-if="false" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">
+          <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
+            <component :is="iconMap.duplicate" class="text-gray-700" />
+            <!-- Duplicate -->
+            {{ t('general.duplicate') }}
+          </div>
+        </NcMenuItem>
+
+        <NcMenuItem :disabled="isRequired" @click="hideField">
+          <div v-e="['a:field:hide']" class="nc-column-insert-before nc-header-menu-item">
+            <component :is="iconMap.eye" class="text-gray-700 !w-3.75 !h-3.75" />
+            <!-- Hide Field -->
+            {{ $t('general.hideField') }}
+          </div>
+        </NcMenuItem>
+
+        <a-divider v-if="!column?.pv" class="!my-0" />
+
+        <NcMenuItem v-if="!column?.pv" :disabled="!isDeleteAllowed" class="!hover:bg-red-50" @click="handleDelete">
+          <div class="nc-column-delete nc-header-menu-item text-red-600">
+            <component :is="iconMap.delete" />
+            <!-- Delete -->
+            {{ $t('general.delete') }}
+          </div>
+        </NcMenuItem>
+      </NcMenu>
+    </template>
+  </a-dropdown>
+  <SmartsheetHeaderDeleteColumnModal v-model:visible="showDeleteColumnModal" />
+  <DlgColumnDuplicate
+    v-if="column"
+    ref="duplicateDialogRef"
+    v-model="isDuplicateDlgOpen"
+    :column="column"
+    :extra="selectedColumnExtra"
+  />
+</template>
+
+<style scoped>
+.nc-header-menu-item {
+  @apply text-dropdown flex items-center gap-2;
+}
+
+.nc-column-options {
+  .nc-icons {
+    @apply !w-5 !h-5;
+  }
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !hover:text-black text-gray-700;
+}
+</style>

From 87d4d341267545af3d3d3f0f287b111b5ef733b6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:49 +0000
Subject: [PATCH 07/36] fix(nc-gui): tab issue in form builder

---
 .../nc-gui/components/smartsheet/Form.vue     | 79 +++----------------
 1 file changed, 11 insertions(+), 68 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 83f5e664496f..8f340f9b7139 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -137,8 +137,6 @@ const submitted = ref(false)
 
 const activeRow = ref('')
 
-const isTabPressed = ref(false)
-
 const isLoadingFormView = ref(false)
 
 const showCropper = ref(false)
@@ -190,14 +188,7 @@ const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).s
 
 const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value.logo_url)))
 
-const activeField = computed({
-  get: () => {
-    return visibleColumns.value.find((c) => c.title === activeRow.value) || null
-  },
-  set: (val) => {
-    console.log('value', val)
-  },
-})
+const activeField = computed(() => visibleColumns.value.find((c) => c.title === activeRow.value) || null)
 
 const updateView = useDebounceFn(
   () => {
@@ -482,7 +473,6 @@ const onFormItemClick = (element: any) => {
   if (isLocked.value || !isEditable) return
 
   activeRow.value = element.title
-  isTabPressed.value = false
 }
 
 const handleChangeBackground = (color: string) => {
@@ -610,7 +600,6 @@ onClickOutside(draggableRef, (e) => {
   }
 
   activeRow.value = ''
-  isTabPressed.value = false
 })
 
 onMounted(async () => {
@@ -683,41 +672,6 @@ watch([focusLabel, activeRow], () => {
   }
 })
 
-useEventListener(
-  formRef,
-  'focusout',
-  (e: FocusEvent) => {
-    const nextActiveFieldTitle =
-      (e?.relatedTarget as HTMLElement)?.getAttribute('data-title') ||
-      (e?.relatedTarget as HTMLElement)?.offsetParent?.closest('.nc-form-focus-element')?.getAttribute('data-title') ||
-      (e?.relatedTarget as HTMLElement)?.closest('.nc-form-focus-element')?.getAttribute('data-title')
-    if (
-      (activeRow.value || [NcForm.heading, NcForm.subheading].includes(nextActiveFieldTitle as NcForm)) &&
-      nextActiveFieldTitle &&
-      activeRow.value !== nextActiveFieldTitle
-    ) {
-      if (isTabPressed.value) {
-        activeRow.value = nextActiveFieldTitle
-      }
-    }
-    isTabPressed.value = false
-  },
-  true,
-)
-
-useEventListener(
-  formRef,
-  'keydown',
-  (e: KeyboardEvent) => {
-    if (e.key === 'Tab') {
-      isTabPressed.value = true
-    } else {
-      isTabPressed.value = false
-    }
-  },
-  true,
-)
-
 useEventListener(
   document,
   'keydown',
@@ -1162,17 +1116,7 @@ useEventListener(
                               class="!my-0 nc-input-required-error nc-form-input-item"
                               :rules="formElementValidationRules(element)"
                             >
-                              <LazySmartsheetDivDataCell
-                                class="relative"
-                                @click.stop="
-                                  () => {
-                                    isTabPressed = false
-                                    if (activeRow !== element.title) {
-                                      activeRow = ''
-                                    }
-                                  }
-                                "
-                              >
+                              <LazySmartsheetDivDataCell class="relative" @click.stop>
                                 <LazySmartsheetVirtualCell
                                   v-if="isVirtualCol(element)"
                                   v-model="formState[element.title]"
@@ -1257,15 +1201,9 @@ useEventListener(
           >
             <div v-if="activeField">
               <!-- header -->
-              <div class="px-3 py-2 flex items-center border-b border-gray-200">
-                <div class="text-lg flex items-center">
-                  <SmartsheetHeaderVirtualCellIcon
-                    v-if="isVirtualCol(activeField)"
-                    :column-meta="activeField"
-                    class="!w-5 !h-5"
-                  />
-                  <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="!w-5 !h-5" />
-                </div>
+              <div class="px-3 py-2 flex items-center border-b border-gray-200 font-medium">
+                <div class="font-medium">{{ $t('objects.viewType.form') }}</div>
+                <div class="px-1.75 text-gray-500">/</div>
                 <a-dropdown
                   v-if="isUIAllowed('fieldEdit')"
                   v-model:visible="showColumnDropdown"
@@ -1274,9 +1212,14 @@ useEventListener(
                   disabled
                 >
                   <div
-                    class="flex items-center space-x-1 px-1 py-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"
+                    class="flex items-center space-x-1 pr-1 py-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"
                     :class="showColumnDropdown ? 'text-brand-500' : 'text-gray-800'"
                   >
+                    <div class="flex items-center">
+                      <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(activeField)" :column-meta="activeField" />
+                      <SmartsheetHeaderCellIcon v-else :column-meta="activeField" />
+                    </div>
+
                     <NcTooltip show-on-truncate-only>
                       <template #title>
                         <div class="text-center">

From c7281c9c0d0b2471acfd55c197b32c4254ac8888 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:49 +0000
Subject: [PATCH 08/36] feat(nc-gui): add support to edit column from form
 builder itself

---
 .../nc-gui/components/smartsheet/Form.vue     | 127 ++++++++++--------
 .../components/smartsheet/form/FieldMenu.vue  |  33 ++++-
 2 files changed, 96 insertions(+), 64 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 8f340f9b7139..d04c4e3ae6f6 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -15,6 +15,7 @@ import {
   isLinksOrLTAR,
   isSelectTypeCol,
   isVirtualCol,
+  type ColumnType,
 } from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
@@ -127,7 +128,11 @@ const draggableRef = ref()
 
 const systemFieldsIds = ref<Record<string, any>[]>([])
 
-const showColumnDropdown = ref(false)
+const showColumnMenuDropdown = ref(false)
+
+const showEditColumnDropdown = ref(false)
+
+const showAddColumnDropdown = ref(false)
 
 const drag = ref(false)
 
@@ -188,7 +193,18 @@ const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).s
 
 const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value.logo_url)))
 
-const activeField = computed(() => visibleColumns.value.find((c) => c.title === activeRow.value) || null)
+const activeField = computed(() => visibleColumns.value.find((c) => c.id === activeRow.value) || null)
+
+const activeColumn = computed(() => {
+  if (meta.value && activeField.value) {
+    if (meta.value.columnsById && (meta.value.columnsById as Record<string, ColumnType>)[activeField.value?.fk_column_id]) {
+      return (meta.value.columnsById as Record<string, ColumnType>)[activeField.value.fk_column_id]
+    } else if (meta.value.columns) {
+      return meta.value.columns.find((c) => c.id === activeField.value?.fk_column_id) ?? null
+    }
+  }
+  return null
+})
 
 const updateView = useDebounceFn(
   () => {
@@ -449,10 +465,14 @@ function onEmailChange() {
   updateView()
 }
 
-async function submitCallback() {
+async function submitEditOrAddCallback(type: 'add' | 'edit') {
   await loadFormView()
   setFormData()
-  showColumnDropdown.value = false
+  if (type === 'add') {
+    showAddColumnDropdown.value = false
+  } else {
+    showEditColumnDropdown.value = false
+  }
 }
 
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
@@ -472,7 +492,7 @@ const columnSupportsScanning = (elementType: UITypes) =>
 const onFormItemClick = (element: any) => {
   if (isLocked.value || !isEditable) return
 
-  activeRow.value = element.title
+  activeRow.value = element.id
 }
 
 const handleChangeBackground = (color: string) => {
@@ -594,7 +614,10 @@ onClickOutside(draggableRef, (e) => {
     (e.target as HTMLElement)?.closest(
       '.nc-dropdown-single-select-cell, .nc-dropdown-multi-select-cell, .nc-dropdown-user-select-cell, .nc-form-rich-text-field',
     ) ||
-    (activeField && (e.target as HTMLElement)?.closest('.nc-form-left-drawer, .nc-dropdown-form-add-column'))
+    (activeField &&
+      (e.target as HTMLElement)?.closest(
+        '.nc-form-left-drawer, .nc-dropdown-form-add-column, .nc-dropdown-form-edit-column, .nc-dropdown-form-column-operations, .ant-select-dropdown, .ant-dropdown',
+      ))
   ) {
     return
   }
@@ -654,15 +677,18 @@ watch(
   },
 )
 
-watch(activeRow, (newValue) => {
+watch(activeField, (newValue) => {
   if (newValue) {
-    const field = document.querySelector(`.nc-form-field-item-${CSS.escape(newValue?.replaceAll(' ', ''))}`)
+    const field = document.querySelector(`.nc-form-field-item-${CSS.escape(newValue?.title?.replaceAll(' ', ''))}`)
 
     if (field) {
       setTimeout(() => {
         field?.scrollIntoView({ behavior: 'smooth', block: 'center' })
       }, 50)
     }
+  } else {
+    showColumnMenuDropdown.value = false
+    showEditColumnDropdown.value = false
   }
 })
 
@@ -962,7 +988,7 @@ useEventListener(
                           '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                         },
                       ]"
-                      @click.stop="onFormItemClick({ title: NcForm.heading })"
+                      @click.stop="onFormItemClick({ id: NcForm.heading })"
                     >
                       <a-form-item v-if="isEditable" class="!my-0">
                         <a-textarea
@@ -1011,7 +1037,7 @@ useEventListener(
                           '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                         },
                       ]"
-                      @click.stop="onFormItemClick({ title: NcForm.subheading })"
+                      @click.stop="onFormItemClick({ id: NcForm.subheading })"
                     >
                       <LazyCellRichText
                         v-if="isEditable && !isLocked"
@@ -1061,11 +1087,11 @@ useEventListener(
                           },
                           {
                             'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) cursor-pointer':
-                              activeRow !== element.title && isEditable,
+                              activeRow !== element.id && isEditable,
                           },
 
                           {
-                            'border-brand-500': activeRow === element.title,
+                            'border-brand-500': activeRow === element.id,
                           },
                           {
                             '!hover:bg-white !ring-0 !cursor-auto': isLocked,
@@ -1075,7 +1101,7 @@ useEventListener(
                         data-testid="nc-form-fields"
                         @click.stop="onFormItemClick(element)"
                       >
-                        <div v-if="activeRow === element.title" class="absolute -left-3 top-6">
+                        <div v-if="activeRow === element.id" class="absolute -left-3 top-6">
                           <NcButton
                             type="primary"
                             size="small"
@@ -1193,64 +1219,49 @@ useEventListener(
               </a-card>
             </div>
           </div>
+          <!-- Right Panel-->
           <div
             class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200"
             :class="{
               'overflow-y-auto nc-form-scrollbar': activeField,
             }"
           >
-            <div v-if="activeField">
+            <!-- Form Field Settings -->
+            <div v-if="activeField && activeColumn">
               <!-- header -->
               <div class="px-3 py-2 flex items-center border-b border-gray-200 font-medium">
-                <div class="font-medium">{{ $t('objects.viewType.form') }}</div>
-                <div class="px-1.75 text-gray-500">/</div>
+                <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
+                  {{ $t('objects.viewType.form') }}
+                </div>
+                <div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
+
+                <SmartsheetFormFieldMenu
+                  v-model:is-open="showColumnMenuDropdown"
+                  :column="activeColumn"
+                  :form-column="activeField"
+                  :is-required="isRequired(activeField, activeField.required)"
+                  @edit="showEditColumnDropdown = true"
+                />
                 <a-dropdown
-                  v-if="isUIAllowed('fieldEdit')"
-                  v-model:visible="showColumnDropdown"
+                  v-model:visible="showEditColumnDropdown"
                   :trigger="['click']"
                   overlay-class-name="nc-dropdown-form-edit-column"
-                  disabled
+                  :disabled="!isUIAllowed('fieldEdit')"
                 >
-                  <div
-                    class="flex items-center space-x-1 pr-1 py-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"
-                    :class="showColumnDropdown ? 'text-brand-500' : 'text-gray-800'"
-                  >
-                    <div class="flex items-center">
-                      <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(activeField)" :column-meta="activeField" />
-                      <SmartsheetHeaderCellIcon v-else :column-meta="activeField" />
-                    </div>
-
-                    <NcTooltip show-on-truncate-only>
-                      <template #title>
-                        <div class="text-center">
-                          {{ activeField.title }}
-                        </div>
-                      </template>
-
-                      <div class="text-sm !leading-5 font-semibold select-none" data-testid="nc-form-input-label">
-                        {{ activeField.title }}
-                      </div>
-                    </NcTooltip>
-
-                    <component
-                      :is="iconMap.chevronDown"
-                      class="w-4 h-4"
-                      :style="{ transform: showColumnDropdown ? 'rotate(180deg)' : undefined }"
-                    />
-                  </div>
-
+                  <div />
                   <template #overlay>
                     <SmartsheetColumnEditOrAddProvider
-                      v-if="showColumnDropdown"
-                      :column="activeField"
-                      @submit="submitCallback"
-                      @cancel="showColumnDropdown = false"
+                      v-if="showEditColumnDropdown"
+                      :column="activeColumn"
+                      @submit="submitEditOrAddCallback('edit')"
+                      @cancel="showEditColumnDropdown = false"
                       @click.stop
                       @keydown.stop
                     />
                   </template>
                 </a-dropdown>
               </div>
+
               <!-- Form text -->
               <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
                 <div class="text-base font-bold">Form Text</div>
@@ -1378,6 +1389,8 @@ useEventListener(
                 </div>
               </div>
             </div>
+
+            <!-- Form Settings -->
             <template v-else>
               <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
                 <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
@@ -1393,7 +1406,7 @@ useEventListener(
 
                     <a-dropdown
                       v-if="isUIAllowed('fieldAdd')"
-                      v-model:visible="showColumnDropdown"
+                      v-model:visible="showAddColumnDropdown"
                       :trigger="['click']"
                       overlay-class-name="nc-dropdown-form-add-column"
                     >
@@ -1402,7 +1415,7 @@ useEventListener(
                         size="small"
                         class="nc-form-add-field"
                         data-testid="nc-form-add-field"
-                        @click.stop="showColumnDropdown = true"
+                        @click.stop="showAddColumnDropdown = true"
                       >
                         <div class="flex gap-2 items-center">
                           <component :is="iconMap.plus" class="w-4 h-4" />
@@ -1412,9 +1425,9 @@ useEventListener(
 
                       <template #overlay>
                         <SmartsheetColumnEditOrAddProvider
-                          v-if="showColumnDropdown"
-                          @submit="submitCallback"
-                          @cancel="showColumnDropdown = false"
+                          v-if="showAddColumnDropdown"
+                          @submit="submitEditOrAddCallback('add')"
+                          @cancel="showAddColumnDropdown = false"
                           @click.stop
                           @keydown.stop
                         />
@@ -1484,7 +1497,7 @@ useEventListener(
                             class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
                             :class="[
                               `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
-                              `${activeRow === field.title ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
+                              `${activeRow === field.id ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
                             ]"
                             :data-testid="`nc-form-field-item-${field.title}`"
                           >
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index fd11fb3cc6b5..2bc1553038ad 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ColumnReqType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
+import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { computed } from 'vue'
 import {
   ActiveViewInj,
@@ -19,7 +19,7 @@ import {
   toRefs,
 } from '#imports'
 
-const props = defineProps<{ column: Record<string, any>; isRequired?: boolean; isOpen: boolean }>()
+const props = defineProps<{ column: ColumnType; formColumn: Record<string, any>; isRequired?: boolean; isOpen: boolean }>()
 
 const emit = defineEmits(['edit', 'showOrHideColumn', 'update:isOpen'])
 
@@ -37,6 +37,8 @@ const view = inject(ActiveViewInj, ref())
 
 const isLocked = inject(IsLockedInj)
 
+provide(ColumnInj, column)
+
 const { $api, $e } = useNuxtApp()
 
 const { t } = useI18n()
@@ -177,12 +179,29 @@ const isDuplicateAllowed = computed(() => {
     v-if="!isLocked"
     v-model:visible="isOpen"
     :trigger="['click']"
-    placement="bottomRight"
+    placement="bottomLeft"
     overlay-class-name="nc-dropdown-form-column-operations !border-1 rounded-lg !shadow-xl"
     @click.stop="isOpen = !isOpen"
   >
-    <div>
-      <GeneralIcon icon="arrowDown" class="text-grey h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2" />
+    <div class="flex items-center space-x-1 pr-1 py-1.5 hover:bg-gray-50 rounded-lg cursor-pointer text-gray-800">
+      <div class="flex items-center">
+        <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" :column-meta="column" />
+        <SmartsheetHeaderCellIcon v-else :column-meta="column" />
+      </div>
+
+      <NcTooltip show-on-truncate-only>
+        <template #title>
+          <div class="text-center">
+            {{ column.title }}
+          </div>
+        </template>
+
+        <div class="text-sm !leading-5 font-semibold select-none" data-testid="nc-form-input-label">
+          {{ column.title }}
+        </div>
+      </NcTooltip>
+
+      <component :is="iconMap.chevronDown" class="w-4 h-4" :style="{ transform: isOpen ? 'rotate(180deg)' : undefined }" />
     </div>
     <template #overlay>
       <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
@@ -222,7 +241,7 @@ const isDuplicateAllowed = computed(() => {
       </NcMenu>
     </template>
   </a-dropdown>
-  <SmartsheetHeaderDeleteColumnModal v-model:visible="showDeleteColumnModal" />
+  <SmartsheetHeaderDeleteColumnModal v-model:visible="showDeleteColumnModal" class="nc-form-column-delete-dropdown" />
   <DlgColumnDuplicate
     v-if="column"
     ref="duplicateDialogRef"

From bc94a4cdf9b1d9ab3c78876d8fa960cb6dc317cf Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:49 +0000
Subject: [PATCH 09/36] fix(nc-gui): wrong virtual cell icon in column delete
 modal

---
 .../components/smartsheet/header/DeleteColumnModal.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue b/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
index ef0296c24ba4..23a72ba876e8 100644
--- a/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
+++ b/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { LinkToAnotherRecordType } from 'nocodb-sdk'
-import { RelationTypes, isLinksOrLTAR } from 'nocodb-sdk'
+import { RelationTypes, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'
 
 const props = defineProps<{
   visible: boolean
+  onDeleteColumn?: () => void
 }>()
 
 const emits = defineEmits(['update:visible'])
@@ -46,6 +47,10 @@ const onDelete = async () => {
 
     $e('a:column:delete')
     visible.value = false
+
+    if (typeof props.onDeleteColumn === 'function') {
+      props.onDeleteColumn()
+    }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {
@@ -58,7 +63,8 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.column')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="column" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <SmartsheetHeaderCellIcon class="nc-view-icon"></SmartsheetHeaderCellIcon>
+        <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" class="nc-view-icon"></SmartsheetHeaderVirtualCellIcon>
+        <SmartsheetHeaderCellIcon v-else class="nc-view-icon"></SmartsheetHeaderCellIcon>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.5"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"

From a3acf196e2d2bb7a631b53355fea75278be55ea5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:49 +0000
Subject: [PATCH 10/36] feat(nc-gui): column edit, hide, delete option in form
 builder field settings

---
 .../nc-gui/components/smartsheet/Form.vue     | 38 ++++++++---
 .../components/smartsheet/form/FieldMenu.vue  | 64 ++++++++++---------
 2 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index d04c4e3ae6f6..ddd2466c84bc 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -339,12 +339,12 @@ async function onMove(event: any, isVisibleFormFields = false) {
   $e('a:form-view:reorder')
 }
 
-async function showOrHideColumn(column: Record<string, any>, show: boolean, isSidePannel = false) {
+async function showOrHideColumn(column: Record<string, any>, show: boolean, isFormSettings = false) {
   if (isLocked.value || !isEditable) return
 
   if (shouldSkipColumn(column)) {
     // Required field can't be moved
-    !isSidePannel && message.info(t('msg.info.requriedFieldsCantBeMoved'))
+    !isFormSettings && message.info(t('msg.info.requriedFieldsCantBeMoved'))
     return
   }
   const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === column.fk_column_id)
@@ -363,6 +363,9 @@ async function showOrHideColumn(column: Record<string, any>, show: boolean, isSi
       $e('a:form-view:hide-columns')
     }
   }
+  if (!show && !isFormSettings && activeRow.value) {
+    activeRow.value = ''
+  }
 }
 
 function shouldSkipColumn(col: Record<string, any>) {
@@ -465,14 +468,23 @@ function onEmailChange() {
   updateView()
 }
 
-async function submitEditOrAddCallback(type: 'add' | 'edit') {
-  await loadFormView()
-  setFormData()
+async function submitEditOrAddOrDeleteColumnCallback(type: 'add' | 'edit' | 'delete', oldColumn?: ColumnType) {
   if (type === 'add') {
     showAddColumnDropdown.value = false
-  } else {
+  } else if (type === 'edit') {
     showEditColumnDropdown.value = false
   }
+
+  if (activeField.value && (type === 'delete' || activeField.value.uidt !== activeColumn.value?.uidt)) {
+    // Reset the formstate if column type is changed or if column is deleted
+    delete formState.value[activeField.value.title]
+    if (isVirtualCol(activeField.value)) {
+      delete state.value[activeField.value.title]
+    }
+  }
+
+  await loadFormView()
+  setFormData()
 }
 
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
@@ -616,7 +628,7 @@ onClickOutside(draggableRef, (e) => {
     ) ||
     (activeField &&
       (e.target as HTMLElement)?.closest(
-        '.nc-form-left-drawer, .nc-dropdown-form-add-column, .nc-dropdown-form-edit-column, .nc-dropdown-form-column-operations, .ant-select-dropdown, .ant-dropdown',
+        '.nc-form-right-panel, .nc-dropdown-form-add-column, .nc-dropdown-form-edit-column, .nc-dropdown-form-column-operations, .ant-select-dropdown, .ant-dropdown, .ant-modal-wrap',
       ))
   ) {
     return
@@ -1221,7 +1233,7 @@ useEventListener(
           </div>
           <!-- Right Panel-->
           <div
-            class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200"
+            class="h-full flex-1 max-w-[384px] nc-form-right-panel border-l border-gray-200"
             :class="{
               'overflow-y-auto nc-form-scrollbar': activeField,
             }"
@@ -1240,7 +1252,13 @@ useEventListener(
                   :column="activeColumn"
                   :form-column="activeField"
                   :is-required="isRequired(activeField, activeField.required)"
+                  :on-delete="
+                    () => {
+                      submitEditOrAddOrDeleteColumnCallback('delete')
+                    }
+                  "
                   @edit="showEditColumnDropdown = true"
+                  @hide-field="showOrHideColumn(activeField, false, false)"
                 />
                 <a-dropdown
                   v-model:visible="showEditColumnDropdown"
@@ -1253,7 +1271,7 @@ useEventListener(
                     <SmartsheetColumnEditOrAddProvider
                       v-if="showEditColumnDropdown"
                       :column="activeColumn"
-                      @submit="submitEditOrAddCallback('edit')"
+                      @submit="submitEditOrAddOrDeleteColumnCallback('edit')"
                       @cancel="showEditColumnDropdown = false"
                       @click.stop
                       @keydown.stop
@@ -1426,7 +1444,7 @@ useEventListener(
                       <template #overlay>
                         <SmartsheetColumnEditOrAddProvider
                           v-if="showAddColumnDropdown"
-                          @submit="submitEditOrAddCallback('add')"
+                          @submit="submitEditOrAddOrDeleteColumnCallback('add')"
                           @cancel="showAddColumnDropdown = false"
                           @click.stop
                           @keydown.stop
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index 2bc1553038ad..7eaf5e2ab245 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -19,9 +19,15 @@ import {
   toRefs,
 } from '#imports'
 
-const props = defineProps<{ column: ColumnType; formColumn: Record<string, any>; isRequired?: boolean; isOpen: boolean }>()
+const props = defineProps<{
+  column: ColumnType
+  formColumn: Record<string, any>
+  isRequired?: boolean
+  isOpen: boolean
+  onDelete: () => void
+}>()
 
-const emit = defineEmits(['edit', 'showOrHideColumn', 'update:isOpen'])
+const emit = defineEmits(['edit', 'hideField', 'update:isOpen'])
 
 const { column, isRequired } = toRefs(props)
 
@@ -149,9 +155,9 @@ const openDuplicateDlg = async () => {
 
 // hide the field in view
 const hideField = async () => {
-  if (isRequired) return
+  if (isRequired.value) return
   isOpen.value = false
-  emit('showOrHideColumn')
+  emit('hideField')
 }
 
 const handleDelete = () => {
@@ -206,42 +212,48 @@ const isDuplicateAllowed = computed(() => {
     <template #overlay>
       <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
         <NcMenuItem @click="onEditPress">
-          <div class="nc-column-edit nc-header-menu-item">
-            <component :is="iconMap.ncEdit" class="text-gray-700" />
+          <div class="nc-column-edit nc-form-header-menu-item">
+            <component :is="iconMap.ncEdit" />
             <!-- Edit -->
             {{ $t('general.edit') }}
           </div>
         </NcMenuItem>
 
         <NcMenuItem v-if="false" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">
-          <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
-            <component :is="iconMap.duplicate" class="text-gray-700" />
+          <div class="nc-column-duplicate nc-form-header-menu-item">
+            <component :is="iconMap.duplicate" />
             <!-- Duplicate -->
             {{ t('general.duplicate') }}
           </div>
         </NcMenuItem>
 
         <NcMenuItem :disabled="isRequired" @click="hideField">
-          <div v-e="['a:field:hide']" class="nc-column-insert-before nc-header-menu-item">
-            <component :is="iconMap.eye" class="text-gray-700 !w-3.75 !h-3.75" />
+          <div class="nc-column-insert-before nc-form-header-menu-item">
+            <component :is="iconMap.eye" class="!w-3.75 !h-3.75" />
             <!-- Hide Field -->
             {{ $t('general.hideField') }}
           </div>
         </NcMenuItem>
 
-        <a-divider v-if="!column?.pv" class="!my-0" />
+        <template v-if="!column?.pv">
+          <a-divider class="!my-0" />
 
-        <NcMenuItem v-if="!column?.pv" :disabled="!isDeleteAllowed" class="!hover:bg-red-50" @click="handleDelete">
-          <div class="nc-column-delete nc-header-menu-item text-red-600">
-            <component :is="iconMap.delete" />
-            <!-- Delete -->
-            {{ $t('general.delete') }}
-          </div>
-        </NcMenuItem>
+          <NcMenuItem :disabled="!isDeleteAllowed" class="!hover:bg-red-50" @click="handleDelete">
+            <div class="nc-column-delete nc-form-header-menu-item text-red-600">
+              <component :is="iconMap.delete" />
+              <!-- Delete -->
+              {{ $t('general.delete') }}
+            </div>
+          </NcMenuItem>
+        </template>
       </NcMenu>
     </template>
   </a-dropdown>
-  <SmartsheetHeaderDeleteColumnModal v-model:visible="showDeleteColumnModal" class="nc-form-column-delete-dropdown" />
+  <SmartsheetHeaderDeleteColumnModal
+    v-model:visible="showDeleteColumnModal"
+    class="nc-form-column-delete-dropdown"
+    :on-delete-column="onDelete"
+  />
   <DlgColumnDuplicate
     v-if="column"
     ref="duplicateDialogRef"
@@ -252,17 +264,7 @@ const isDuplicateAllowed = computed(() => {
 </template>
 
 <style scoped>
-.nc-header-menu-item {
-  @apply text-dropdown flex items-center gap-2;
-}
-
-.nc-column-options {
-  .nc-icons {
-    @apply !w-5 !h-5;
-  }
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !hover:text-black text-gray-700;
+.nc-form-header-menu-item {
+  @apply flex items-center gap-2;
 }
 </style>

From e323d09ca2d1b38f6669f033d7d11513bf11e41e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:49 +0000
Subject: [PATCH 11/36] fix(nc-gui): move all form field settings radio btns to
 the right side

---
 .../nc-gui/components/smartsheet/Form.vue     | 127 +++++++++---------
 .../components/smartsheet/form/FieldMenu.vue  |   2 +
 2 files changed, 68 insertions(+), 61 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index ddd2466c84bc..eb3bbc7c490f 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1333,57 +1333,74 @@ useEventListener(
               <!-- Field Settings -->
               <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
                 <div class="text-base font-bold">Field Settings</div>
-                <div class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white flex items-center gap-3">
-                  <a-switch
-                    v-model:checked="activeField.required"
-                    v-e="['a:form-view:field:mark-required']"
-                    size="small"
-                    @change="updateColMeta(activeField)"
-                  />
-                  <span
-                    class="nc-form-input-required text-gray-800 font-medium"
-                    data-testid="nc-form-input-required"
-                    @click.stop="
-                      () => {
-                        activeField.required = !activeField.required
-                        updateColMeta(activeField)
-                      }
-                    "
-                  >
-                    {{ $t('general.required') }}
-                  </span>
-                </div>
-                <!-- Layout  -->
-                <div v-if="isSelectTypeCol(activeField.uidt)">
-                  <div>Layout</div>
-
-                  <a-radio-group
-                    :value="!!activeField.meta.isList"
-                    class="nc-form-field-layout !mt-2"
-                    @update:value="
-                      (value) => {
-                        activeField.meta.isList = value
-                        updateColMeta(activeField)
-                      }
-                    "
-                  >
-                    <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
-                    <a-radio :value="true">{{ $t('general.list') }}</a-radio>
-                  </a-radio-group>
-                </div>
-                <!-- Todo: Show on conditions,... -->
-                <!-- eslint-disable vue/no-constant-condition -->
-                <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
-                  <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
-                  <div>
-                    <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
-                    <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
+                <div class="flex flex-col gap-6">
+                  <div class="flex items-center justify-between gap-3">
+                    <div
+                      class="nc-form-input-required text-gray-800 font-medium"
+                      data-testid="nc-form-input-required"
+                      @click.stop="
+                        () => {
+                          activeField.required = !activeField.required
+                          updateColMeta(activeField)
+                        }
+                      "
+                    >
+                      {{ $t('general.required') }}
+                    </div>
+
+                    <a-switch
+                      v-model:checked="activeField.required"
+                      v-e="['a:form-view:field:mark-required']"
+                      size="small"
+                      @change="updateColMeta(activeField)"
+                    />
+                  </div>
+
+                  <!-- Layout  -->
+                  <div v-if="isSelectTypeCol(activeField.uidt)">
+                    <div class="text-gray-800 font-medium">Layout</div>
+
+                    <a-radio-group
+                      :value="!!activeField.meta.isList"
+                      class="nc-form-field-layout !mt-2 max-w-[calc(100%_-_40px)]"
+                      @update:value="
+                        (value) => {
+                          activeField.meta.isList = value
+                          updateColMeta(activeField)
+                        }
+                      "
+                    >
+                      <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                      <a-radio :value="true">{{ $t('general.list') }}</a-radio>
+                    </a-radio-group>
+                  </div>
+
+                  <!-- Todo: Show on conditions,... -->
+                  <!-- eslint-disable vue/no-constant-condition -->
+                  <div v-if="false" class="flex items-start justify-between gap-3">
+                    <div>
+                      <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                      <div class="text-gray-500 mt-2">{{ $t('labels.showFieldOnConditionsMet') }}</div>
+                    </div>
+                    <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
                   </div>
-                </div>
 
-                <!-- Limit options -->
-                <div v-if="isSelectTypeCol(activeField.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
-                  <div class="flex items-center gap-3">
+                  <!-- Limit options -->
+                  <div v-if="isSelectTypeCol(activeField.uidt)" class="flex items-start justify-between gap-3">
+                    <div class="flex items-center gap-3">
+                      <div class="flex-1">
+                        <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                        <div class="text-gray-500 mt-2">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                        <div v-if="activeField.meta.isLimitOption" class="mt-3">
+                          <LazySmartsheetFormLimitOptions
+                            v-model:model-value="activeField.meta.limitOptions"
+                            :column="activeField"
+                            :is-required="isRequired(activeField, activeField.required)"
+                            @update:model-value="updateColMeta(activeField)"
+                          ></LazySmartsheetFormLimitOptions>
+                        </div>
+                      </div>
+                    </div>
                     <a-switch
                       v-model:checked="activeField.meta.isLimitOption"
                       v-e="['a:form-view:field:limit-options']"
@@ -1391,18 +1408,6 @@ useEventListener(
                       class="nc-form-switch-focus"
                       @change="updateColMeta(activeField)"
                     />
-                    <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
-                  </div>
-                  <div class="pl-10 mt-2 flex-1">
-                    <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                    <div v-if="activeField.meta.isLimitOption" class="mt-5">
-                      <LazySmartsheetFormLimitOptions
-                        v-model:model-value="activeField.meta.limitOptions"
-                        :column="activeField"
-                        :is-required="isRequired(activeField, activeField.required)"
-                        @update:model-value="updateColMeta(activeField)"
-                      ></LazySmartsheetFormLimitOptions>
-                    </div>
                   </div>
                 </div>
               </div>
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index 7eaf5e2ab245..671bd1a75929 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -219,6 +219,8 @@ const isDuplicateAllowed = computed(() => {
           </div>
         </NcMenuItem>
 
+        <!-- Todo: Duplicate column with form column settings -->
+        <!-- eslint-disable vue/no-constant-condition -->
         <NcMenuItem v-if="false" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">
           <div class="nc-column-duplicate nc-form-header-menu-item">
             <component :is="iconMap.duplicate" />

From 7e8fdd4be1f75640929794efdd770584a9bdca25 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:49 +0000
Subject: [PATCH 12/36] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/Form.vue           | 4 ++--
 packages/nc-gui/components/smartsheet/form/FieldMenu.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index eb3bbc7c490f..f9cdfb8151a4 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -7,6 +7,7 @@ import type { FormItemProps } from 'ant-design-vue'
 
 import {
   type AttachmentResType,
+  type ColumnType,
   ProjectRoles,
   RelationTypes,
   UITypes,
@@ -15,7 +16,6 @@ import {
   isLinksOrLTAR,
   isSelectTypeCol,
   isVirtualCol,
-  type ColumnType,
 } from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
@@ -1231,7 +1231,7 @@ useEventListener(
               </a-card>
             </div>
           </div>
-          <!-- Right Panel-->
+          <!-- Right Panel -->
           <div
             class="h-full flex-1 max-w-[384px] nc-form-right-panel border-l border-gray-200"
             :class="{
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index 671bd1a75929..60ca0102b0fc 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -12,11 +12,11 @@ import {
   iconMap,
   inject,
   message,
+  toRefs,
   useI18n,
   useMetas,
   useNuxtApp,
   useSmartsheetStoreOrThrow,
-  toRefs,
 } from '#imports'
 
 const props = defineProps<{

From 744025ba9c99a051e735c78ccc6050bcc174bfae Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:50 +0000
Subject: [PATCH 13/36] chore(nc-gui): lint errors

---
 packages/nc-gui/components/smartsheet/Form.vue           | 3 +--
 packages/nc-gui/components/smartsheet/form/FieldMenu.vue | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index f9cdfb8151a4..6e99628c9298 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -304,7 +304,6 @@ function onMoveCallback(event: any) {
 async function onMove(event: any, isVisibleFormFields = false) {
   if (isLocked.value || !isEditable) return
 
-  const { oldIndex } = event.moved
   let { newIndex, element } = event.moved
 
   const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === element.fk_column_id)
@@ -468,7 +467,7 @@ function onEmailChange() {
   updateView()
 }
 
-async function submitEditOrAddOrDeleteColumnCallback(type: 'add' | 'edit' | 'delete', oldColumn?: ColumnType) {
+async function submitEditOrAddOrDeleteColumnCallback(type: 'add' | 'edit' | 'delete') {
   if (type === 'add') {
     showAddColumnDropdown.value = false
   } else if (type === 'edit') {
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index 60ca0102b0fc..7037daea378e 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -45,7 +45,7 @@ const isLocked = inject(IsLockedInj)
 
 provide(ColumnInj, column)
 
-const { $api, $e } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const { t } = useI18n()
 

From 826f309d223d5c6d378ddb2a46df3dc4d715dcda Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:50 +0000
Subject: [PATCH 14/36] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/Form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 6e99628c9298..61f0a3571771 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -191,7 +191,7 @@ const { open, onChange: onChangeFile } = useFileDialog({
 
 const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).sort((a, b) => a.order - b.order))
 
-const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value.logo_url)))
+const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value?.logo_url)))
 
 const activeField = computed(() => visibleColumns.value.find((c) => c.id === activeRow.value) || null)
 

From 19b1b816c1be4eca6de37d44157524a23d62f1ec Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:50 +0000
Subject: [PATCH 15/36] fix(nc-gui): update 'change icon color' text case

---
 packages/nc-gui/lang/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index bf29da34c1af..8db60c4731de 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -972,7 +972,7 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "changeIconColour": "Change Icon Colour",
+    "changeIconColour": "Change icon colour",
     "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },

From 06491cf521f2383788be4dec87080eae08b4dd9d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:50 +0000
Subject: [PATCH 16/36] fix(nc-gui): small changes

---
 .../dlg/share-and-collaborate/SharePage.vue   |  8 +-
 .../components/general/ShareProject.vue       |  2 +-
 .../nc-gui/components/smartsheet/Form.vue     | 86 ++++++++-----------
 .../components/smartsheet/form/FieldMenu.vue  | 12 ++-
 .../smartsheet/form/LimitOptions.vue          |  4 +-
 packages/nc-gui/lang/en.json                  |  3 +-
 .../playwright/pages/Dashboard/Form/index.ts  |  2 +-
 7 files changed, 52 insertions(+), 65 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index fafadd37baf0..a375b4dadb30 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -370,9 +370,9 @@ watchEffect(() => {})
                 <div>
                   {{ $t('activity.surveyMode') }}
                 </div>
-                <NcTooltip>
+                <NcTooltip class="flex items-center">
                   <template #title> {{ $t('tooltip.surveyFormInfo') }}</template>
-                  <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+                  <GeneralIcon icon="info" class="flex-none text-gray-600 cursor-pointer"></GeneralIcon>
                 </NcTooltip>
               </div>
               <a-switch
@@ -405,13 +405,13 @@ watchEffect(() => {})
                 {{ $t('activity.preFilledFields.title') }}
               </div>
 
-              <NcTooltip>
+              <NcTooltip class="flex items-center">
                 <template #title>
                   <div class="text-center">
                     {{ $t('tooltip.preFillFormInfo') }}
                   </div>
                 </template>
-                <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+                <GeneralIcon icon="info" class="flex-none text-gray-600 cursor-pointer"></GeneralIcon>
               </NcTooltip>
             </div>
             <a-switch
diff --git a/packages/nc-gui/components/general/ShareProject.vue b/packages/nc-gui/components/general/ShareProject.vue
index 17c75aa0572f..f3d729e64f7a 100644
--- a/packages/nc-gui/components/general/ShareProject.vue
+++ b/packages/nc-gui/components/general/ShareProject.vue
@@ -47,7 +47,7 @@ const copySharedBase = async () => {
 <template>
   <div
     v-if="!isSharedBase && isUIAllowed('baseShare') && visibility !== 'hidden' && (activeTable || base)"
-    class="flex flex-col justify-center h-full"
+    class="nc-share-base-button flex flex-col justify-center h-full"
     data-testid="share-base-button"
     :data-sharetype="visibility"
   >
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 61f0a3571771..6e4fd61ececb 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -593,7 +593,7 @@ const validateFormURL = async (_rule, value) => {
 }
 
 const formElementValidationRules = (element) => {
-  const rules: FormItemProps['rules'][] = [
+  const rules: FormItemProps['rules'] = [
     {
       required: isRequired(element, element.required),
       message: t('msg.error.fieldRequired', { value: 'This field' }),
@@ -620,15 +620,18 @@ const formElementValidationRules = (element) => {
   return rules
 }
 
+const updateSelectFieldLayout = (value: boolean) => {
+  if (!activeField.value) return
+
+  activeField.value.meta.isList = value
+  updateColMeta(activeField.value)
+}
+
 onClickOutside(draggableRef, (e) => {
   if (
     (e.target as HTMLElement)?.closest(
-      '.nc-dropdown-single-select-cell, .nc-dropdown-multi-select-cell, .nc-dropdown-user-select-cell, .nc-form-rich-text-field',
-    ) ||
-    (activeField &&
-      (e.target as HTMLElement)?.closest(
-        '.nc-form-right-panel, .nc-dropdown-form-add-column, .nc-dropdown-form-edit-column, .nc-dropdown-form-column-operations, .ant-select-dropdown, .ant-dropdown, .ant-modal-wrap',
-      ))
+      '.nc-form-right-panel, [class*="dropdown"], .nc-form-rich-text-field, .ant-modal, .ant-modal-wrap, .nc-share-base-button',
+    )
   ) {
     return
   }
@@ -1237,9 +1240,9 @@ useEventListener(
               'overflow-y-auto nc-form-scrollbar': activeField,
             }"
           >
-            <!-- Form Field Settings -->
+            <!-- Form Field settings -->
             <div v-if="activeField && activeColumn">
-              <!-- header -->
+              <!-- Field header -->
               <div class="px-3 py-2 flex items-center border-b border-gray-200 font-medium">
                 <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
                   {{ $t('objects.viewType.form') }}
@@ -1279,9 +1282,9 @@ useEventListener(
                 </a-dropdown>
               </div>
 
-              <!-- Form text -->
+              <!-- Field text -->
               <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
-                <div class="text-base font-bold">Form Text</div>
+                <div class="text-base font-bold">{{ $t('objects.viewType.form') }} {{ $t('general.text') }}</div>
 
                 <a-textarea
                   ref="focusLabel"
@@ -1304,57 +1307,41 @@ useEventListener(
                   data-testid="nc-form-input-help-text"
                   @update:value="updateColMeta(activeField)"
                 />
-
-                <div v-if="columnSupportsScanning(activeField.uidt)" class="!my-0 nc-form-input-enable-scanner-form-item">
-                  <div class="flex space-x-4 items-center">
-                    <a-switch
-                      v-model:checked="activeField.enable_scanner"
-                      v-e="['a:form-view:field:mark-enable-scanner']"
-                      size="small"
-                      @change="updateColMeta(activeField)"
-                    />
-                    <span
-                      class="text-gray-500 nc-form-input-enable-scanner"
-                      data-testid="nc-form-input-enable-scanner"
-                      @click="
-                        () => {
-                          activeField.general.enable_scanner = !activeField.general.enable_scanner
-                          updateColMeta(activeField)
-                        }
-                      "
-                    >
-                      {{ $t('general.enableScanner') }}
-                    </span>
-                  </div>
-                </div>
               </div>
 
               <!-- Field Settings -->
               <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
-                <div class="text-base font-bold">Field Settings</div>
+                <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('activity.settings') }}</div>
                 <div class="flex flex-col gap-6">
                   <div class="flex items-center justify-between gap-3">
-                    <div
-                      class="nc-form-input-required text-gray-800 font-medium"
-                      data-testid="nc-form-input-required"
-                      @click.stop="
-                        () => {
-                          activeField.required = !activeField.required
-                          updateColMeta(activeField)
-                        }
-                      "
-                    >
-                      {{ $t('general.required') }}
+                    <div class="nc-form-input-required text-gray-800 font-medium">
+                      {{ $t('general.required') }} {{ $t('objects.field') }}
                     </div>
 
                     <a-switch
                       v-model:checked="activeField.required"
                       v-e="['a:form-view:field:mark-required']"
                       size="small"
+                      data-testid="nc-form-input-required"
                       @change="updateColMeta(activeField)"
                     />
                   </div>
 
+                  <div v-if="columnSupportsScanning(activeField.uidt)" class="!my-0 nc-form-input-enable-scanner-form-item">
+                    <div class="flex items-center justify-between gap-3">
+                      <div class="nc-form-input-enable-scanner text-gray-800 font-medium">
+                        {{ $t('general.enableScanner') }}
+                      </div>
+                      <a-switch
+                        v-model:checked="activeField.enable_scanner"
+                        v-e="['a:form-view:field:mark-enable-scanner']"
+                        data-testid="nc-form-input-enable-scanner"
+                        size="small"
+                        @change="updateColMeta(activeField)"
+                      />
+                    </div>
+                  </div>
+
                   <!-- Layout  -->
                   <div v-if="isSelectTypeCol(activeField.uidt)">
                     <div class="text-gray-800 font-medium">Layout</div>
@@ -1362,12 +1349,7 @@ useEventListener(
                     <a-radio-group
                       :value="!!activeField.meta.isList"
                       class="nc-form-field-layout !mt-2 max-w-[calc(100%_-_40px)]"
-                      @update:value="
-                        (value) => {
-                          activeField.meta.isList = value
-                          updateColMeta(activeField)
-                        }
-                      "
+                      @update:value="updateSelectFieldLayout"
                     >
                       <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
                       <a-radio :value="true">{{ $t('general.list') }}</a-radio>
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index 7037daea378e..090acd8772ff 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -195,19 +195,23 @@ const isDuplicateAllowed = computed(() => {
         <SmartsheetHeaderCellIcon v-else :column-meta="column" />
       </div>
 
-      <NcTooltip show-on-truncate-only>
+      <NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
         <template #title>
           <div class="text-center">
             {{ column.title }}
           </div>
         </template>
 
-        <div class="text-sm !leading-5 font-semibold select-none" data-testid="nc-form-input-label">
+        <span class="select-none" data-testid="nc-form-input-label">
           {{ column.title }}
-        </div>
+        </span>
       </NcTooltip>
 
-      <component :is="iconMap.chevronDown" class="w-4 h-4" :style="{ transform: isOpen ? 'rotate(180deg)' : undefined }" />
+      <component
+        :is="iconMap.chevronDown"
+        class="flex-none w-4 h-4"
+        :style="{ transform: isOpen ? 'rotate(180deg)' : undefined }"
+      />
     </div>
     <template #overlay>
       <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index 4f4e92df6ae0..4a7787fe9861 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -172,7 +172,7 @@ const showOrHideAll = (showAll: boolean) => {
           :disabled="isRequired || vModel.filter((o) => !o.show).length === vModel.length"
           @click="showOrHideAll(false)"
         >
-          Hide all
+          {{ $t('general.hideAll') }}
         </NcButton>
       </NcTooltip>
 
@@ -184,7 +184,7 @@ const showOrHideAll = (showAll: boolean) => {
           :disabled="vModel.filter((o) => o.show).length === vModel.length"
           @click="showOrHideAll(true)"
         >
-          Show all
+          {{ $t('general.showAll') }}
         </NcButton>
       </div>
     </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 8db60c4731de..0271f7abcde9 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -198,7 +198,8 @@
     "logo": "Logo",
     "dropdown": "Dropdown",
     "list": "List",
-    "apply": "Apply"
+    "apply": "Apply",
+    "text": "Text"
   },
   "objects": {
     "day": "Day",
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index cefa14284fc7..b2eeea39e836 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -60,7 +60,7 @@ export class FormPage extends BasePage {
   }
 
   getFormFieldsRequired() {
-    return this.get().locator('[data-testid="nc-form-input-required"] + button');
+    return this.get().locator('[data-testid="nc-form-input-required"]');
   }
 
   getFormFieldsInputLabel() {

From 1e917f6e292c0c3ed4107b5e284805eb858e59c2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:51 +0000
Subject: [PATCH 17/36] fix(nc-gui): form builder side panel field div key
 issue

---
 packages/nc-gui/components/smartsheet/Form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 6e4fd61ececb..b08ddd1c6fd5 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1241,7 +1241,7 @@ useEventListener(
             }"
           >
             <!-- Form Field settings -->
-            <div v-if="activeField && activeColumn">
+            <div v-if="activeField && activeColumn" :key="activeField?.id">
               <!-- Field header -->
               <div class="px-3 py-2 flex items-center border-b border-gray-200 font-medium">
                 <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">

From 56fbebb02d9c4031852f9454464035afcc00a74a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:51 +0000
Subject: [PATCH 18/36] fix(nc-gui): form view outsideclick fild toggle issue

---
 .../nc-gui/components/smartsheet/Form.vue     | 138 +++++++++++-------
 .../components/smartsheet/form/FieldMenu.vue  |  48 ++----
 2 files changed, 97 insertions(+), 89 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b08ddd1c6fd5..d8f926aabf10 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -627,18 +627,6 @@ const updateSelectFieldLayout = (value: boolean) => {
   updateColMeta(activeField.value)
 }
 
-onClickOutside(draggableRef, (e) => {
-  if (
-    (e.target as HTMLElement)?.closest(
-      '.nc-form-right-panel, [class*="dropdown"], .nc-form-rich-text-field, .ant-modal, .ant-modal-wrap, .nc-share-base-button',
-    )
-  ) {
-    return
-  }
-
-  activeRow.value = ''
-})
-
 onMounted(async () => {
   if (imageCropperData.value.src) {
     URL.revokeObjectURL(imageCropperData.value.imageConfig.src)
@@ -700,10 +688,9 @@ watch(activeField, (newValue) => {
         field?.scrollIntoView({ behavior: 'smooth', block: 'center' })
       }, 50)
     }
-  } else {
-    showColumnMenuDropdown.value = false
-    showEditColumnDropdown.value = false
   }
+  showColumnMenuDropdown.value = false
+  showEditColumnDropdown.value = false
 })
 
 watch([focusLabel, activeRow], () => {
@@ -735,6 +722,24 @@ useEventListener(
   },
   true,
 )
+
+useEventListener(
+  document,
+  'mousedown',
+  (e: MouseEvent) => {
+    if (
+      (draggableRef.value?.targetDomElement && draggableRef.value?.targetDomElement.contains(e.target)) ||
+      (e.target as HTMLElement)?.closest(
+        '.nc-form-right-panel, [class*="dropdown"], .nc-form-rich-text-field, .ant-modal, .ant-modal-wrap, .nc-share-base-button',
+      )
+    ) {
+      return
+    }
+
+    activeRow.value = ''
+  },
+  true,
+)
 </script>
 
 <template>
@@ -1243,43 +1248,74 @@ useEventListener(
             <!-- Form Field settings -->
             <div v-if="activeField && activeColumn" :key="activeField?.id">
               <!-- Field header -->
-              <div class="px-3 py-2 flex items-center border-b border-gray-200 font-medium">
-                <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
-                  {{ $t('objects.viewType.form') }}
-                </div>
-                <div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
-
-                <SmartsheetFormFieldMenu
-                  v-model:is-open="showColumnMenuDropdown"
-                  :column="activeColumn"
-                  :form-column="activeField"
-                  :is-required="isRequired(activeField, activeField.required)"
-                  :on-delete="
-                    () => {
-                      submitEditOrAddOrDeleteColumnCallback('delete')
-                    }
-                  "
-                  @edit="showEditColumnDropdown = true"
-                  @hide-field="showOrHideColumn(activeField, false, false)"
-                />
-                <a-dropdown
-                  v-model:visible="showEditColumnDropdown"
-                  :trigger="['click']"
-                  overlay-class-name="nc-dropdown-form-edit-column"
-                  :disabled="!isUIAllowed('fieldEdit')"
-                >
-                  <div />
-                  <template #overlay>
-                    <SmartsheetColumnEditOrAddProvider
-                      v-if="showEditColumnDropdown"
-                      :column="activeColumn"
-                      @submit="submitEditOrAddOrDeleteColumnCallback('edit')"
-                      @cancel="showEditColumnDropdown = false"
-                      @click.stop
-                      @keydown.stop
+              <div class="px-3 pt-4 pb-2 flex items-center justify-between border-b border-gray-200 font-medium">
+                <div class="flex items-center">
+                  <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
+                    {{ $t('objects.viewType.form') }}
+                  </div>
+                  <div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
+
+                  <div class="flex items-center pr-1 py-1.5 text-gray-800">
+                    <SmartsheetHeaderVirtualCellIcon
+                      v-if="isVirtualCol(activeField)"
+                      :column-meta="activeField"
+                      class="flex-none"
                     />
-                  </template>
-                </a-dropdown>
+                    <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="flex-none" />
+
+                    <NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
+                      <template #title>
+                        <div class="text-center">
+                          {{ activeField.title }}
+                        </div>
+                      </template>
+
+                      <span data-testid="nc-form-input-label">
+                        {{ activeField.title }}
+                      </span>
+                    </NcTooltip>
+                  </div>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <a-dropdown
+                    v-model:visible="showEditColumnDropdown"
+                    :trigger="['click']"
+                    overlay-class-name="nc-dropdown-form-edit-column"
+                    :disabled="!isUIAllowed('fieldEdit')"
+                  >
+                    <NcButton
+                      type="secondary"
+                      size="small"
+                      class="nc-form-add-field"
+                      data-testid="nc-form-add-field"
+                      @click.stop="showEditColumnDropdown = true"
+                    >
+                      Edit Field
+                    </NcButton>
+                    <template #overlay>
+                      <SmartsheetColumnEditOrAddProvider
+                        v-if="showEditColumnDropdown"
+                        :column="activeColumn"
+                        @submit="submitEditOrAddOrDeleteColumnCallback('edit')"
+                        @cancel="showEditColumnDropdown = false"
+                        @click.stop
+                        @keydown.stop
+                      />
+                    </template>
+                  </a-dropdown>
+                  <SmartsheetFormFieldMenu
+                    v-model:is-open="showColumnMenuDropdown"
+                    :column="activeColumn"
+                    :form-column="activeField"
+                    :is-required="isRequired(activeField, activeField.required)"
+                    :on-delete="
+                      () => {
+                        submitEditOrAddOrDeleteColumnCallback('delete')
+                      }
+                    "
+                    @hide-field="showOrHideColumn(activeField, false, false)"
+                  />
+                </div>
               </div>
 
               <!-- Field text -->
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index 090acd8772ff..f14d215b4a9e 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -27,7 +27,7 @@ const props = defineProps<{
   onDelete: () => void
 }>()
 
-const emit = defineEmits(['edit', 'hideField', 'update:isOpen'])
+const emit = defineEmits(['hideField', 'update:isOpen', 'delete'])
 
 const { column, isRequired } = toRefs(props)
 
@@ -167,11 +167,6 @@ const handleDelete = () => {
   showDeleteColumnModal.value = true
 }
 
-const onEditPress = () => {
-  isOpen.value = false
-  emit('edit')
-}
-
 const isDeleteAllowed = computed(() => {
   return column?.value && !column.value.system
 })
@@ -189,40 +184,17 @@ const isDuplicateAllowed = computed(() => {
     overlay-class-name="nc-dropdown-form-column-operations !border-1 rounded-lg !shadow-xl"
     @click.stop="isOpen = !isOpen"
   >
-    <div class="flex items-center space-x-1 pr-1 py-1.5 hover:bg-gray-50 rounded-lg cursor-pointer text-gray-800">
-      <div class="flex items-center">
-        <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" :column-meta="column" />
-        <SmartsheetHeaderCellIcon v-else :column-meta="column" />
-      </div>
-
-      <NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
-        <template #title>
-          <div class="text-center">
-            {{ column.title }}
-          </div>
-        </template>
-
-        <span class="select-none" data-testid="nc-form-input-label">
-          {{ column.title }}
-        </span>
-      </NcTooltip>
-
-      <component
-        :is="iconMap.chevronDown"
-        class="flex-none w-4 h-4"
-        :style="{ transform: isOpen ? 'rotate(180deg)' : undefined }"
-      />
-    </div>
+    <NcButton
+      type="secondary"
+      size="small"
+      class="nc-form-add-field"
+      data-testid="nc-form-add-field"
+      @click.stop="showAddColumnDropdown = true"
+    >
+      <component :is="iconMap.threeDotVertical" class="flex-none w-4 h-4" />
+    </NcButton>
     <template #overlay>
       <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
-        <NcMenuItem @click="onEditPress">
-          <div class="nc-column-edit nc-form-header-menu-item">
-            <component :is="iconMap.ncEdit" />
-            <!-- Edit -->
-            {{ $t('general.edit') }}
-          </div>
-        </NcMenuItem>
-
         <!-- Todo: Duplicate column with form column settings -->
         <!-- eslint-disable vue/no-constant-condition -->
         <NcMenuItem v-if="false" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">

From 32bdd970a2f0b9716a679e9d1ae3fabfbeca066c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:51 +0000
Subject: [PATCH 19/36] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/Form.vue           | 5 ++---
 packages/nc-gui/components/smartsheet/form/FieldMenu.vue | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index d8f926aabf10..cc3cfe019d6e 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -31,7 +31,6 @@ import {
   inject,
   isEeUI,
   message,
-  onClickOutside,
   parseProp,
   provide,
   ref,
@@ -1320,7 +1319,7 @@ useEventListener(
 
               <!-- Field text -->
               <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
-                <div class="text-base font-bold">{{ $t('objects.viewType.form') }} {{ $t('general.text') }}</div>
+                <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('general.text') }}</div>
 
                 <a-textarea
                   ref="focusLabel"
@@ -1351,7 +1350,7 @@ useEventListener(
                 <div class="flex flex-col gap-6">
                   <div class="flex items-center justify-between gap-3">
                     <div class="nc-form-input-required text-gray-800 font-medium">
-                      {{ $t('general.required') }} {{ $t('objects.field') }}
+                      {{ $t('general.required') }} {{ $t('objects.field').toLowerCase() }}
                     </div>
 
                     <a-switch
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
index f14d215b4a9e..cad663897f95 100644
--- a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import { computed } from 'vue'
 import {
   ActiveViewInj,

From 8ac74b66889b633f07f2650bdb90c96de53e7bd1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:51 +0000
Subject: [PATCH 20/36] fix(nc-gui): hide select dropdown in value is selected
 and show if value is not selected

---
 packages/nc-gui/components/cell/MultiSelect.vue  | 5 +++++
 packages/nc-gui/components/cell/SingleSelect.vue | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 5b91e4dadb2f..abbff90b1083 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -28,6 +28,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  IsSurveyFormInj,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -64,6 +65,8 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -386,6 +389,8 @@ const onFocus = () => {
     isFocusing.value = false
   }, 250)
 
+  if (isSurveyForm.value && vModel.value?.length) return
+
   isOpen.value = true
 }
 </script>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 703d02c01617..a3e1da3f044f 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -24,6 +24,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  IsSurveyFormInj,
 } from '#imports'
 
 interface Props {
@@ -62,6 +63,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -312,6 +315,8 @@ const onFocus = () => {
     isFocusing.value = false
   }, 250)
 
+  if (isSurveyForm.value && vModel.value) return
+
   isOpen.value = true
 }
 </script>

From fe4eda10b5e989bb53e05bdd9628b0e9cf230900 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:51 +0000
Subject: [PATCH 21/36] fix(nc-gui): suggested review changes

---
 .../nc-gui/components/smartsheet/Form.vue     | 95 ++++++++++---------
 1 file changed, 49 insertions(+), 46 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index cc3cfe019d6e..d813ac0c60d0 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -127,12 +127,11 @@ const draggableRef = ref()
 
 const systemFieldsIds = ref<Record<string, any>[]>([])
 
-const showColumnMenuDropdown = ref(false)
-
-const showEditColumnDropdown = ref(false)
-
-const showAddColumnDropdown = ref(false)
-
+const dropdownStates = ref({
+  showColumnMenu: false,
+  showEditColumn: false,
+  showAddColumn: false,
+})
 const drag = ref(false)
 
 const emailMe = ref(false)
@@ -466,23 +465,35 @@ function onEmailChange() {
   updateView()
 }
 
-async function submitEditOrAddOrDeleteColumnCallback(type: 'add' | 'edit' | 'delete') {
-  if (type === 'add') {
-    showAddColumnDropdown.value = false
-  } else if (type === 'edit') {
-    showEditColumnDropdown.value = false
+function resetFormFieldState() {
+  if (!activeField.value) return
+
+  // Reset the formstate if column type is changed or if column is deleted
+  delete formState.value[activeField.value.title]
+  if (isVirtualCol(activeField.value)) {
+    delete state.value[activeField.value.title]
   }
+}
 
-  if (activeField.value && (type === 'delete' || activeField.value.uidt !== activeColumn.value?.uidt)) {
-    // Reset the formstate if column type is changed or if column is deleted
-    delete formState.value[activeField.value.title]
-    if (isVirtualCol(activeField.value)) {
-      delete state.value[activeField.value.title]
-    }
+async function addColumnCallback() {
+  dropdownStates.value.showAddColumn = false
+
+  reloadEventHook.trigger()
+}
+
+async function editColumnCallback() {
+  dropdownStates.value.showEditColumn = false
+
+  if (activeField.value && activeField.value.uidt !== activeColumn.value?.uidt) {
+    resetFormFieldState()
   }
 
-  await loadFormView()
-  setFormData()
+  reloadEventHook.trigger()
+}
+
+async function deleteColumnCallback() {
+  resetFormFieldState()
+  reloadEventHook.trigger()
 }
 
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
@@ -688,8 +699,12 @@ watch(activeField, (newValue) => {
       }, 50)
     }
   }
-  showColumnMenuDropdown.value = false
-  showEditColumnDropdown.value = false
+
+  dropdownStates.value = {
+    ...dropdownStates.value,
+    showColumnMenu: false,
+    showEditColumn: false,
+  }
 })
 
 watch([focusLabel, activeRow], () => {
@@ -1277,39 +1292,33 @@ useEventListener(
                 </div>
                 <div class="flex items-center space-x-2">
                   <a-dropdown
-                    v-model:visible="showEditColumnDropdown"
+                    v-model:visible="dropdownStates.showEditColumn"
                     :trigger="['click']"
                     overlay-class-name="nc-dropdown-form-edit-column"
                     :disabled="!isUIAllowed('fieldEdit')"
                   >
-                    <NcButton
-                      type="secondary"
-                      size="small"
-                      class="nc-form-add-field"
-                      data-testid="nc-form-add-field"
-                      @click.stop="showEditColumnDropdown = true"
-                    >
-                      Edit Field
+                    <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
+                      {{ $t('general.edit') }} {{ $t('objects.field') }}
                     </NcButton>
                     <template #overlay>
                       <SmartsheetColumnEditOrAddProvider
-                        v-if="showEditColumnDropdown"
+                        v-if="dropdownStates.showEditColumn"
                         :column="activeColumn"
-                        @submit="submitEditOrAddOrDeleteColumnCallback('edit')"
-                        @cancel="showEditColumnDropdown = false"
+                        @submit="editColumnCallback"
+                        @cancel="dropdownStates.showEditColumn = false"
                         @click.stop
                         @keydown.stop
                       />
                     </template>
                   </a-dropdown>
                   <SmartsheetFormFieldMenu
-                    v-model:is-open="showColumnMenuDropdown"
+                    v-model:is-open="dropdownStates.showColumnMenu"
                     :column="activeColumn"
                     :form-column="activeField"
                     :is-required="isRequired(activeField, activeField.required)"
                     :on-delete="
                       () => {
-                        submitEditOrAddOrDeleteColumnCallback('delete')
+                        deleteColumnCallback()
                       }
                     "
                     @hide-field="showOrHideColumn(activeField, false, false)"
@@ -1445,17 +1454,11 @@ useEventListener(
 
                     <a-dropdown
                       v-if="isUIAllowed('fieldAdd')"
-                      v-model:visible="showAddColumnDropdown"
+                      v-model:visible="dropdownStates.showAddColumn"
                       :trigger="['click']"
                       overlay-class-name="nc-dropdown-form-add-column"
                     >
-                      <NcButton
-                        type="secondary"
-                        size="small"
-                        class="nc-form-add-field"
-                        data-testid="nc-form-add-field"
-                        @click.stop="showAddColumnDropdown = true"
-                      >
+                      <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
                         <div class="flex gap-2 items-center">
                           <component :is="iconMap.plus" class="w-4 h-4" />
                           <span> {{ $t('activity.addFieldFromFormView') }} </span>
@@ -1464,9 +1467,9 @@ useEventListener(
 
                       <template #overlay>
                         <SmartsheetColumnEditOrAddProvider
-                          v-if="showAddColumnDropdown"
-                          @submit="submitEditOrAddOrDeleteColumnCallback('add')"
-                          @cancel="showAddColumnDropdown = false"
+                          v-if="dropdownStates.showAddColumn"
+                          @submit="addColumnCallback"
+                          @cancel="dropdownStates.showAddColumn = false"
                           @click.stop
                           @keydown.stop
                         />

From eb1042ca5261a42cb43dff14d0e920f5bfa8b8f2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:51 +0000
Subject: [PATCH 22/36] fix(nc-gui): make form field rich text options sticky
 at bottom

---
 packages/nc-gui/components/cell/RichText.vue  |  58 +++-
 .../cell/RichText/SelectedBubbleMenu.vue      | 309 +++++++++++-------
 .../nc-gui/components/smartsheet/Form.vue     |  31 +-
 packages/nc-gui/lib/enums.ts                  |  17 +
 4 files changed, 260 insertions(+), 155 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index c7030871c3ac..1c19e105f691 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -9,22 +9,30 @@ import Underline from '@tiptap/extension-underline'
 import Placeholder from '@tiptap/extension-placeholder'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj } from '#imports'
-
-const props = defineProps<{
-  value?: string | null
-  readOnly?: boolean
-  syncValueChange?: boolean
-  showMenu?: boolean
-  fullMode?: boolean
-  isFormField?: boolean
-  autofocus?: boolean
-  placeholder?: string
-  renderAsText?: boolean
-}>()
+import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj, RichTextBubbleMenuOptions } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    value?: string | null
+    readOnly?: boolean
+    syncValueChange?: boolean
+    showMenu?: boolean
+    fullMode?: boolean
+    isFormField?: boolean
+    autofocus?: boolean
+    placeholder?: string
+    renderAsText?: boolean
+    hiddenBubbleMenuOptions?: RichTextBubbleMenuOptions[]
+  }>(),
+  {
+    hiddenBubbleMenuOptions: () => [],
+  },
+)
 
 const emits = defineEmits(['update:value'])
 
+const { hiddenBubbleMenuOptions } = toRefs(props)
+
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const rowHeight = inject(RowHeightInj, ref(1 as const))
@@ -208,7 +216,11 @@ useEventListener(
   editorDom,
   'focusout',
   (e: FocusEvent) => {
-    if (!(e?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')) {
+    if (
+      ((e?.target as HTMLElement)?.classList?.contains('tiptap') &&
+        (e?.relatedTarget as HTMLElement)?.classList?.contains('tiptap')) ||
+      !(e?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')
+    ) {
       isFocused.value = false
     }
   },
@@ -223,7 +235,7 @@ useEventListener(
       'flex flex-col flex-grow nc-rich-text-full': fullMode,
       'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
       'readonly': readOnly,
-      'nc-form-rich-text-field !p-0': isFormField,
+      'nc-form-rich-text-field !p-0 relative': isFormField,
       'nc-rich-text-grid': isGrid,
     }"
     :tabindex="readOnlyCell || isFormField ? -1 : 0"
@@ -257,15 +269,20 @@ useEventListener(
             !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
         }"
       />
-      <div v-if="isFormField && !readOnly">
+      <div v-if="isFormField && !readOnly" class="nc-form-field-bubble-menu-wrapper overflow-hidden">
         <div
-          class="overflow-hidden"
           :class="isFocused ? 'max-h-[50px]' : 'max-h-0'"
           :style="{
             transition: 'max-height 0.2s ease-in-out',
           }"
         >
-          <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode is-form-field />
+          <CellRichTextSelectedBubbleMenu
+            v-if="editor"
+            :editor="editor"
+            embed-mode
+            is-form-field
+            :hidden-options="hiddenBubbleMenuOptions"
+          />
         </div>
       </div>
     </template>
@@ -462,4 +479,9 @@ useEventListener(
     height: fit-content;
   }
 }
+.nc-form-field-bubble-menu-wrapper {
+  @apply absolute -bottom-9 left-1/2 z-50 rounded-lg;
+  transform: translateX(-50%);
+  box-shadow: 0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.1);
+}
 </style>
diff --git a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
index ed5048d9fdb8..a9cef7b49f9d 100644
--- a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
+++ b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
@@ -10,16 +10,22 @@ import MsFormatH3 from '~icons/material-symbols/format-h3'
 import TablerBlockQuote from '~icons/tabler/blockquote'
 import MsCode from '~icons/material-symbols/code'
 import MsFormatQuote from '~icons/material-symbols/format-quote'
+import { RichTextBubbleMenuOptions } from '#imports'
 
 interface Props {
   editor: Editor
   embedMode?: boolean
   isFormField?: boolean
+  hiddenOptions?: RichTextBubbleMenuOptions[]
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  embedMode: false,
+  isFormField: false,
+  hiddenOptions: () => [],
+})
 
-const { editor, embedMode } = toRefs(props)
+const { editor, embedMode, isFormField, hiddenOptions } = toRefs(props)
 
 const cmdOrCtrlKey = computed(() => {
   return isMac() ? '⌘' : 'CTRL'
@@ -33,6 +39,10 @@ const altKey = computed(() => {
   return isMac() ? '⌥' : 'Alt'
 })
 
+const tooltipPlacement = computed(() => {
+  if (isFormField.value) return 'bottom'
+})
+
 const onToggleLink = () => {
   const activeNode = editor.value?.state?.selection?.$from?.nodeBefore || editor.value?.state?.selection?.$from?.nodeAfter
 
@@ -74,19 +84,39 @@ const onToggleLink = () => {
     }, 100)
   }
 }
+
+const isOptionVisible = (option: RichTextBubbleMenuOptions) => {
+  if (isFormField.value) return !hiddenOptions.value.includes(option)
+
+  return true
+}
+
+const showDivider = (options: RichTextBubbleMenuOptions[]) => {
+  return isFormField.value
+    ? [
+        RichTextBubbleMenuOptions.blockQuote,
+        RichTextBubbleMenuOptions.bulletList,
+        RichTextBubbleMenuOptions.numberedList,
+        RichTextBubbleMenuOptions.taskList,
+      ].some((o) => !hiddenOptions.value.includes(o))
+    : true
+}
 </script>
 
 <template>
   <div
-    class="bubble-menu flex-row gap-x-1 py-1 rounded-lg"
-    :class="{
-      'inline-flex !bg-transparent': isFormField,
-      'flex bg-gray-100 px-1': !isFormField,
-      'embed-mode': embedMode,
-      'full-mode': !embedMode,
-    }"
+    class="bubble-menu flex-row gap-x-1 rounded-lg"
+    :class="[
+      isFormField ? 'py-0' : 'py-1',
+      {
+        'nc-form-field-bubble-menu inline-flex': isFormField,
+        'flex bg-gray-100 px-1': !isFormField,
+        'embed-mode': embedMode,
+        'full-mode': !embedMode,
+      },
+    ]"
   >
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -107,7 +137,7 @@ const onToggleLink = () => {
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -127,7 +157,7 @@ const onToggleLink = () => {
         <MdiFormatItalic />
       </NcButton>
     </NcTooltip>
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -148,7 +178,7 @@ const onToggleLink = () => {
         <MdiFormatUnderline />
       </NcButton>
     </NcTooltip>
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -168,143 +198,160 @@ const onToggleLink = () => {
         <MdiFormatStrikeThrough />
       </NcButton>
     </NcTooltip>
-    <template v-if="!isFormField">
-      <NcTooltip v-if="embedMode">
-        <template #title> {{ $t('general.code') }}</template>
-        <NcButton
-          size="small"
-          type="text"
-          :class="{ 'is-active': editor.isActive('codeBlock') }"
-          @click="editor!.chain().focus().toggleCodeBlock().run()"
-        >
-          <MsCode />
-        </NcButton>
-      </NcTooltip>
-      <NcTooltip v-else :disabled="editor.isActive('codeBlock')">
-        <template #title> {{ $t('general.quote') }}</template>
-        <NcButton
-          size="small"
-          type="text"
-          :class="{ 'is-active': editor.isActive('code') }"
-          :disabled="editor.isActive('codeBlock')"
-          @click="editor!.chain().focus().toggleCode().run()"
-        >
-          <MsFormatQuote />
-        </NcButton>
-      </NcTooltip>
-      <div class="divider"></div>
-
-      <template v-if="embedMode">
-        <NcTooltip>
-          <template #title>
-            <div class="flex flex-col items-center">
-              <div>
-                {{ $t('labels.heading1') }}
-              </div>
-              <div>{{ cmdOrCtrlKey }} {{ altKey }} 1</div>
-            </div>
-          </template>
-          <NcButton
-            size="small"
-            type="text"
-            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-            @click="editor!.chain().focus().toggleHeading({ level: 1 }).run()"
-          >
-            <MsFormatH1 />
-          </NcButton>
-        </NcTooltip>
-        <NcTooltip>
-          <template #title>
-            <div class="flex flex-col items-center">
-              <div>
-                {{ $t('labels.heading2') }}
-              </div>
-              <div>{{ cmdOrCtrlKey }} {{ altKey }} 2</div>
-            </div>
-          </template>
-          <NcButton
-            size="small"
-            type="text"
-            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-            @click="editor!.chain().focus().toggleHeading({ level: 2 }).run()"
-          >
-            <MsFormatH2 />
-          </NcButton>
-        </NcTooltip>
-        <NcTooltip>
-          <template #title>
-            <div class="flex flex-col items-center">
-              <div>
-                {{ $t('labels.heading3') }}
-              </div>
-              <div>{{ cmdOrCtrlKey }} {{ altKey }} 3</div>
-            </div>
-          </template>
-          <NcButton
-            size="small"
-            type="text"
-            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-            @click="editor!.chain().focus().toggleHeading({ level: 3 }).run()"
-          >
-            <MsFormatH3 />
-          </NcButton>
-        </NcTooltip>
-
-        <div class="divider"></div>
-      </template>
 
-      <NcTooltip v-if="embedMode">
-        <template #title> {{ $t('labels.blockQuote') }}</template>
-        <NcButton
-          size="small"
-          type="text"
-          :class="{ 'is-active': editor.isActive('blockquote') }"
-          @click="editor!.chain().focus().toggleBlockquote().run()"
-        >
-          <TablerBlockQuote class="-mt-0.25" />
-        </NcButton>
-      </NcTooltip>
+    <NcTooltip :placement="tooltipPlacement" v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.code)">
+      <template #title> {{ $t('general.code') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('codeBlock') }"
+        @click="editor!.chain().focus().toggleCodeBlock().run()"
+      >
+        <MsCode />
+      </NcButton>
+    </NcTooltip>
+    <NcTooltip
+      v-if="isFormField ? isOptionVisible(RichTextBubbleMenuOptions.quote) : !embedMode"
+      :placement="tooltipPlacement"
+      :disabled="editor.isActive('codeBlock')"
+    >
+      <template #title> {{ $t('general.quote') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('code') }"
+        :disabled="editor.isActive('codeBlock')"
+        @click="editor!.chain().focus().toggleCode().run()"
+      >
+        <MsFormatQuote />
+      </NcButton>
+    </NcTooltip>
+    <div class="divider"></div>
 
+    <template v-if="embedMode && !isFormField">
       <NcTooltip>
-        <template #title> {{ $t('labels.bulletList') }}</template>
+        <template #title>
+          <div class="flex flex-col items-center">
+            <div>
+              {{ $t('labels.heading1') }}
+            </div>
+            <div>{{ cmdOrCtrlKey }} {{ altKey }} 1</div>
+          </div>
+        </template>
         <NcButton
           size="small"
           type="text"
-          :class="{ 'is-active': editor.isActive('bulletList') }"
-          @click="editor!.chain().focus().toggleBulletList().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+          @click="editor!.chain().focus().toggleHeading({ level: 1 }).run()"
         >
-          <MdiFormatBulletList />
+          <MsFormatH1 />
         </NcButton>
       </NcTooltip>
-
       <NcTooltip>
-        <template #title> {{ $t('labels.numberedList') }}</template>
+        <template #title>
+          <div class="flex flex-col items-center">
+            <div>
+              {{ $t('labels.heading2') }}
+            </div>
+            <div>{{ cmdOrCtrlKey }} {{ altKey }} 2</div>
+          </div>
+        </template>
         <NcButton
           size="small"
           type="text"
-          :class="{ 'is-active': editor.isActive('orderedList') }"
-          @click="editor!.chain().focus().toggleOrderedList().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+          @click="editor!.chain().focus().toggleHeading({ level: 2 }).run()"
         >
-          <MdiFormatListNumber />
+          <MsFormatH2 />
         </NcButton>
       </NcTooltip>
-
       <NcTooltip>
-        <template #title> {{ $t('labels.taskList') }}</template>
+        <template #title>
+          <div class="flex flex-col items-center">
+            <div>
+              {{ $t('labels.heading3') }}
+            </div>
+            <div>{{ cmdOrCtrlKey }} {{ altKey }} 3</div>
+          </div>
+        </template>
         <NcButton
           size="small"
           type="text"
-          :class="{ 'is-active': editor.isActive('taskList') }"
-          @click="editor!.chain().focus().toggleTaskList().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+          @click="editor!.chain().focus().toggleHeading({ level: 3 }).run()"
         >
-          <MdiFormatListCheckbox />
+          <MsFormatH3 />
         </NcButton>
       </NcTooltip>
 
       <div class="divider"></div>
     </template>
 
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.blockQuote)">
+      <template #title> {{ $t('labels.blockQuote') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('blockquote') }"
+        @click="editor!.chain().focus().toggleBlockquote().run()"
+      >
+        <TablerBlockQuote class="-mt-0.25" />
+      </NcButton>
+    </NcTooltip>
+
+    <NcTooltip :placement="tooltipPlacement" v-if="isOptionVisible(RichTextBubbleMenuOptions.bulletList)">
+      <template #title> {{ $t('labels.bulletList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+        @click="editor!.chain().focus().toggleBulletList().run()"
+      >
+        <MdiFormatBulletList />
+      </NcButton>
+    </NcTooltip>
+
+    <NcTooltip :placement="tooltipPlacement" v-if="isOptionVisible(RichTextBubbleMenuOptions.numberedList)">
+      <template #title> {{ $t('labels.numberedList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+        @click="editor!.chain().focus().toggleOrderedList().run()"
+      >
+        <MdiFormatListNumber />
+      </NcButton>
+    </NcTooltip>
+
+    <NcTooltip :placement="tooltipPlacement" v-if="isOptionVisible(RichTextBubbleMenuOptions.taskList)">
+      <template #title> {{ $t('labels.taskList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('taskList') }"
+        @click="editor!.chain().focus().toggleTaskList().run()"
+      >
+        <MdiFormatListCheckbox />
+      </NcButton>
+    </NcTooltip>
+
+    <div
+      v-if="
+        showDivider([
+          RichTextBubbleMenuOptions.blockQuote,
+          RichTextBubbleMenuOptions.bulletList,
+          RichTextBubbleMenuOptions.numberedList,
+          RichTextBubbleMenuOptions.taskList,
+        ])
+      "
+      class="divider"
+    ></div>
+
+    <NcTooltip
+      v-if="isOptionVisible(RichTextBubbleMenuOptions.link)"
+      :placement="tooltipPlacement"
+      :disabled="editor.isActive('codeBlock')"
+    >
       <template #title> {{ $t('general.link') }}</template>
       <NcButton
         size="small"
@@ -349,14 +396,14 @@ const onToggleLink = () => {
   box-shadow: 0px 0px 1.2rem 0 rgb(230, 230, 230) !important;
 }
 
-.bubble-menu.embed-mode {
+.bubble-menu.embed-mode:not(.nc-form-field-bubble-menu) {
   @apply border-transparent !shadow-none;
 }
 .bubble-menu.form-field-mode {
   @apply bg-transparent px-0;
 }
 
-.embed-mode.bubble-menu {
+.embed-mode.bubble-menu:not(.nc-form-field-bubble-menu) {
   @apply !py-0 !my-0 !border-0;
 
   .divider {
@@ -373,12 +420,20 @@ const onToggleLink = () => {
   @apply bg-white;
   border-width: 1px;
 
+  &.nc-form-field-bubble-menu {
+    .divider {
+      @apply border-r-1 border-gray-200 my-0;
+    }
+  }
+
   .nc-button.is-active {
     @apply !hover:outline-gray-200 bg-gray-100 text-brand-500;
     outline: 1px;
   }
-  .divider {
-    @apply border-r-1 border-gray-200 !h-6 !mx-0.5 my-1;
+  &:not(.nc-form-field-bubble-menu) {
+    .divider {
+      @apply border-r-1 border-gray-200 !h-6 !mx-0.5 my-1;
+    }
   }
   .ant-select-selector {
     @apply !rounded-md;
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index d813ac0c60d0..24af6cfdacbd 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -44,6 +44,7 @@ import {
   useViewColumnsOrThrow,
   useViewData,
   useViewsStore,
+  RichTextBubbleMenuOptions,
 } from '#imports'
 import type { ImageCropperConfig } from '~/lib'
 
@@ -66,6 +67,14 @@ const hiddenColTypes = [
   UITypes.LastModifiedBy,
 ]
 
+const hiddenBubbleMenuOptions = [
+  RichTextBubbleMenuOptions.code,
+  RichTextBubbleMenuOptions.blockQuote,
+  RichTextBubbleMenuOptions.bulletList,
+  RichTextBubbleMenuOptions.numberedList,
+  RichTextBubbleMenuOptions.taskList,
+]
+
 const enum NcForm {
   heading = 'nc-form-heading',
   subheading = 'nc-form-sub-heading',
@@ -791,7 +800,7 @@ useEventListener(
                 </h1>
 
                 <div v-if="formViewData.subheading?.trim()">
-                  <LazyCellRichText
+                  <CellRichText
                     :value="formViewData.subheading"
                     class="font-medium text-base text-gray-500 !h-auto mb-4 -ml-1"
                     is-form-field
@@ -805,7 +814,7 @@ useEventListener(
                 <div class="w-full">
                   <a-alert class="nc-form-success-msg !my-4 !py-4 text-left !rounded-lg" type="success" outlined>
                     <template #message>
-                      <LazyCellRichText
+                      <CellRichText
                         v-if="formViewData?.success_msg?.trim()"
                         :value="formViewData?.success_msg"
                         class="!h-auto -ml-1"
@@ -1055,7 +1064,7 @@ useEventListener(
                       class="border-transparent px-4 lg:px-6"
                       :class="[
                         {
-                          'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                          'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
                         },
                         {
                           'mb-4 py-0 lg:py-0': !isEditable,
@@ -1072,7 +1081,7 @@ useEventListener(
                       ]"
                       @click.stop="onFormItemClick({ id: NcForm.subheading })"
                     >
-                      <LazyCellRichText
+                      <CellRichText
                         v-if="isEditable && !isLocked"
                         v-model:value="formViewData.subheading"
                         :placeholder="$t('msg.info.formDesc')"
@@ -1083,7 +1092,7 @@ useEventListener(
                         :data-title="NcForm.subheading"
                         @update:value="updateView"
                       />
-                      <LazyCellRichText
+                      <CellRichText
                         v-else-if="formViewData.subheading"
                         :value="formViewData.subheading"
                         class="font-medium text-base !text-gray-500 -ml-1"
@@ -1155,7 +1164,7 @@ useEventListener(
                           >
                         </div>
 
-                        <LazyCellRichText
+                        <CellRichText
                           v-if="element.description"
                           :value="element.description"
                           is-form-field
@@ -1343,11 +1352,12 @@ useEventListener(
                   @change="updateColMeta(activeField)"
                 />
 
-                <LazyCellRichText
+                <CellRichText
                   v-model:value="activeField.description"
                   :placeholder="$t('msg.info.formHelpText')"
                   class="form-meta-input nc-form-input-help-text"
                   is-form-field
+                  :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
                   data-testid="nc-form-input-help-text"
                   @update:value="updateColMeta(activeField)"
                 />
@@ -1693,14 +1703,15 @@ useEventListener(
                         {{ $t('msg.info.formDisplayMessage') }}
                       </div>
                       <a-form-item class="!my-0">
-                        <LazyCellRichText
+                        <CellRichText
                           v-if="!isLocked && isEditable"
                           v-model:value="formViewData.success_msg"
                           class="nc-form-after-submit-msg"
-                          :is-form-field="true"
+                          is-form-field
+                          :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
                           data-testid="nc-form-after-submit-msg"
                           @update:value="updateView" />
-                        <LazyCellRichText
+                        <CellRichText
                           v-else
                           :value="formViewData.success_msg"
                           class="nc-form-after-submit-msg"
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index f386e6a9dfee..3fbd9746e3a1 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -142,3 +142,20 @@ export enum PreFilledMode {
   Hidden = 'hidden',
   Locked = 'locked',
 }
+
+export enum RichTextBubbleMenuOptions {
+  bold = 'bold',
+  italic = 'italic',
+  underline = 'underline',
+  strike = 'strike',
+  code = 'code',
+  quote = 'quote',
+  heading1 = 'heading1',
+  heading2 = 'heading2',
+  heading3 = 'heading3',
+  blockQuote = 'blockQuote',
+  bulletList = 'bulletList',
+  numberedList = 'numberedList',
+  taskList = 'taskList',
+  link = 'link',
+}

From 4a81046a51f4e2dcfb809d6c85b27b3edb6769a7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:52 +0000
Subject: [PATCH 23/36] chore(nc-gui): lint

---
 .../nc-gui/components/cell/MultiSelect.vue    |  2 +-
 packages/nc-gui/components/cell/RichText.vue  |  3 ++-
 .../cell/RichText/SelectedBubbleMenu.vue      | 19 ++++++-------------
 .../nc-gui/components/cell/SingleSelect.vue   |  2 +-
 .../nc-gui/components/smartsheet/Form.vue     |  2 +-
 5 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index abbff90b1083..10913279e941 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -10,6 +10,7 @@ import {
   EditColumnInj,
   EditModeInj,
   IsKanbanInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   RowHeightInj,
   computed,
@@ -28,7 +29,6 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
-  IsSurveyFormInj,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 1c19e105f691..8e2cd65c92dd 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -9,7 +9,8 @@ import Underline from '@tiptap/extension-underline'
 import Placeholder from '@tiptap/extension-placeholder'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj, RichTextBubbleMenuOptions } from '#imports'
+import type { RichTextBubbleMenuOptions } from '#imports'
+import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj } from '#imports'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
index a9cef7b49f9d..0f5e471a66d6 100644
--- a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
+++ b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
@@ -92,14 +92,7 @@ const isOptionVisible = (option: RichTextBubbleMenuOptions) => {
 }
 
 const showDivider = (options: RichTextBubbleMenuOptions[]) => {
-  return isFormField.value
-    ? [
-        RichTextBubbleMenuOptions.blockQuote,
-        RichTextBubbleMenuOptions.bulletList,
-        RichTextBubbleMenuOptions.numberedList,
-        RichTextBubbleMenuOptions.taskList,
-      ].some((o) => !hiddenOptions.value.includes(o))
-    : true
+  return isFormField.value ? options.some((o) => !hiddenOptions.value.includes(o)) : true
 }
 </script>
 
@@ -199,7 +192,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip :placement="tooltipPlacement" v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.code)">
+    <NcTooltip v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.code)" :placement="tooltipPlacement">
       <template #title> {{ $t('general.code') }}</template>
       <NcButton
         size="small"
@@ -287,7 +280,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <div class="divider"></div>
     </template>
 
-    <NcTooltip :placement="tooltipPlacement" v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.blockQuote)">
+    <NcTooltip v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.blockQuote)" :placement="tooltipPlacement">
       <template #title> {{ $t('labels.blockQuote') }}</template>
       <NcButton
         size="small"
@@ -299,7 +292,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip :placement="tooltipPlacement" v-if="isOptionVisible(RichTextBubbleMenuOptions.bulletList)">
+    <NcTooltip v-if="isOptionVisible(RichTextBubbleMenuOptions.bulletList)" :placement="tooltipPlacement">
       <template #title> {{ $t('labels.bulletList') }}</template>
       <NcButton
         size="small"
@@ -311,7 +304,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip :placement="tooltipPlacement" v-if="isOptionVisible(RichTextBubbleMenuOptions.numberedList)">
+    <NcTooltip v-if="isOptionVisible(RichTextBubbleMenuOptions.numberedList)" :placement="tooltipPlacement">
       <template #title> {{ $t('labels.numberedList') }}</template>
       <NcButton
         size="small"
@@ -323,7 +316,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip :placement="tooltipPlacement" v-if="isOptionVisible(RichTextBubbleMenuOptions.taskList)">
+    <NcTooltip v-if="isOptionVisible(RichTextBubbleMenuOptions.taskList)" :placement="tooltipPlacement">
       <template #title> {{ $t('labels.taskList') }}</template>
       <NcButton
         size="small"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index a3e1da3f044f..4423cc047959 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -11,6 +11,7 @@ import {
   EditModeInj,
   IsFormInj,
   IsKanbanInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   enumColor,
@@ -24,7 +25,6 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
-  IsSurveyFormInj,
 } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 24af6cfdacbd..615a13b16531 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -24,6 +24,7 @@ import {
   IsGalleryInj,
   MetaInj,
   ReloadViewDataHookInj,
+  RichTextBubbleMenuOptions,
   computed,
   createEventHook,
   extractSdkResponseErrorMsg,
@@ -44,7 +45,6 @@ import {
   useViewColumnsOrThrow,
   useViewData,
   useViewsStore,
-  RichTextBubbleMenuOptions,
 } from '#imports'
 import type { ImageCropperConfig } from '~/lib'
 

From cfa1d67f3379f771b98b90f5981e855e188fac57 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:52 +0000
Subject: [PATCH 24/36] fix(nc-gui): small changes

---
 packages/nc-gui/components/smartsheet/Form.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 615a13b16531..58e6fa15b0ff 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1263,7 +1263,7 @@ useEventListener(
           </div>
           <!-- Right Panel -->
           <div
-            class="h-full flex-1 max-w-[384px] nc-form-right-panel border-l border-gray-200"
+            class="nc-form-right-panel h-full flex-1 max-w-[384px] border-l border-gray-200"
             :class="{
               'overflow-y-auto nc-form-scrollbar': activeField,
             }"
@@ -1946,6 +1946,13 @@ useEventListener(
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
   }
 }
+.nc-form-right-panel {
+  :deep(.nc-form-rich-text-field) {
+    .nc-text-area-rich-link-option-input {
+      @apply !w-250px;
+    }
+  }
+}
 </style>
 
 <style lang="scss">

From 6a441604db87f070e4710dd697d4265ab1b4dafb Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:52 +0000
Subject: [PATCH 25/36] fix(nc-gui): lazy import richtext component

---
 packages/nc-gui/components/smartsheet/Form.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 58e6fa15b0ff..ab329c29d2d7 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -800,7 +800,7 @@ useEventListener(
                 </h1>
 
                 <div v-if="formViewData.subheading?.trim()">
-                  <CellRichText
+                  <LazyCellRichText
                     :value="formViewData.subheading"
                     class="font-medium text-base text-gray-500 !h-auto mb-4 -ml-1"
                     is-form-field
@@ -814,7 +814,7 @@ useEventListener(
                 <div class="w-full">
                   <a-alert class="nc-form-success-msg !my-4 !py-4 text-left !rounded-lg" type="success" outlined>
                     <template #message>
-                      <CellRichText
+                      <LazyCellRichText
                         v-if="formViewData?.success_msg?.trim()"
                         :value="formViewData?.success_msg"
                         class="!h-auto -ml-1"
@@ -1081,7 +1081,7 @@ useEventListener(
                       ]"
                       @click.stop="onFormItemClick({ id: NcForm.subheading })"
                     >
-                      <CellRichText
+                      <LazyCellRichText
                         v-if="isEditable && !isLocked"
                         v-model:value="formViewData.subheading"
                         :placeholder="$t('msg.info.formDesc')"
@@ -1092,7 +1092,7 @@ useEventListener(
                         :data-title="NcForm.subheading"
                         @update:value="updateView"
                       />
-                      <CellRichText
+                      <LazyCellRichText
                         v-else-if="formViewData.subheading"
                         :value="formViewData.subheading"
                         class="font-medium text-base !text-gray-500 -ml-1"
@@ -1118,6 +1118,7 @@ useEventListener(
                   >
                     <template #item="{ element }">
                       <div
+                        :key="element.id"
                         class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
                         :class="[
                           `nc-form-drag-${element.title.replaceAll(' ', '')}`,
@@ -1164,7 +1165,7 @@ useEventListener(
                           >
                         </div>
 
-                        <CellRichText
+                        <LazyCellRichText
                           v-if="element.description"
                           :value="element.description"
                           is-form-field
@@ -1352,7 +1353,7 @@ useEventListener(
                   @change="updateColMeta(activeField)"
                 />
 
-                <CellRichText
+                <LazyCellRichText
                   v-model:value="activeField.description"
                   :placeholder="$t('msg.info.formHelpText')"
                   class="form-meta-input nc-form-input-help-text"
@@ -1703,7 +1704,7 @@ useEventListener(
                         {{ $t('msg.info.formDisplayMessage') }}
                       </div>
                       <a-form-item class="!my-0">
-                        <CellRichText
+                        <LazyCellRichText
                           v-if="!isLocked && isEditable"
                           v-model:value="formViewData.success_msg"
                           class="nc-form-after-submit-msg"
@@ -1711,7 +1712,7 @@ useEventListener(
                           :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
                           data-testid="nc-form-after-submit-msg"
                           @update:value="updateView" />
-                        <CellRichText
+                        <LazyCellRichText
                           v-else
                           :value="formViewData.success_msg"
                           class="nc-form-after-submit-msg"

From c9a7dc66fb534987655ae94069b9dea49383c4b1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:52 +0000
Subject: [PATCH 26/36] fix(nc-gui): set the max height for form rich text
 fields

---
 packages/nc-gui/components/cell/RichText.vue  |  2 +-
 .../nc-gui/components/smartsheet/Form.vue     | 57 ++++++++++---------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 8e2cd65c92dd..d6a160679d5b 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -264,7 +264,7 @@ useEventListener(
         class="flex flex-col nc-textarea-rich-editor w-full"
         :class="{
           'mt-2.5 flex-grow': fullMode,
-          'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
+          'scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent': !fullMode || (!fullMode && isExpandedFormOpen),
           'flex-grow': isExpandedFormOpen,
           [`!overflow-hidden children:line-clamp-${rowHeight}`]:
             !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index ab329c29d2d7..cdb2d77736e4 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -444,7 +444,7 @@ function setFormData() {
   localColumns.value = col
     .filter((f) => !hiddenColTypes.includes(f.uidt) && !systemFieldsIds.value.includes(f.fk_column_id))
     .sort((a, b) => a.order - b.order)
-    .map((c) => ({ ...c, required: !!c.required }))
+    .map((c) => ({ ...c, label: c.label || c.title, required: !!c.required }))
 }
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
@@ -1346,7 +1346,7 @@ useEventListener(
                   :rows="1"
                   auto-size
                   hide-details
-                  class="form-meta-input nc-form-input-label"
+                  class="form-meta-input nc-form-input-label !max-h-7.5rem nc-form-scrollbar"
                   data-testid="nc-form-input-label"
                   :placeholder="$t('msg.info.formInput')"
                   @keydown.enter.prevent
@@ -1698,31 +1698,6 @@ useEventListener(
                       {{ $t('msg.info.postFormSubmissionSettings') }}
                     </div>
 
-                    <!-- Show this message -->
-                    <div>
-                      <div class="text-gray-800 mb-2">
-                        {{ $t('msg.info.formDisplayMessage') }}
-                      </div>
-                      <a-form-item class="!my-0">
-                        <LazyCellRichText
-                          v-if="!isLocked && isEditable"
-                          v-model:value="formViewData.success_msg"
-                          class="nc-form-after-submit-msg"
-                          is-form-field
-                          :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
-                          data-testid="nc-form-after-submit-msg"
-                          @update:value="updateView" />
-                        <LazyCellRichText
-                          v-else
-                          :value="formViewData.success_msg"
-                          class="nc-form-after-submit-msg"
-                          is-form-field
-                          read-only
-                          data-testid="nc-form-after-submit-msg"
-                      /></a-form-item>
-                    </div>
-
-                    <!-- Other options -->
                     <div class="flex flex-col gap-3">
                       <div class="flex items-center">
                         <!-- Show "Submit Another Form" button -->
@@ -1771,6 +1746,30 @@ useEventListener(
                         </span>
                       </div>
                     </div>
+
+                    <!-- Show this message -->
+                    <div class="pb-10">
+                      <div class="text-gray-800 mb-2">
+                        {{ $t('msg.info.formDisplayMessage') }}
+                      </div>
+                      <a-form-item class="!my-0">
+                        <LazyCellRichText
+                          v-if="!isLocked && isEditable"
+                          v-model:value="formViewData.success_msg"
+                          class="nc-form-after-submit-msg"
+                          is-form-field
+                          :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
+                          data-testid="nc-form-after-submit-msg"
+                          @update:value="updateView" />
+                        <LazyCellRichText
+                          v-else
+                          :value="formViewData.success_msg"
+                          class="nc-form-after-submit-msg"
+                          is-form-field
+                          read-only
+                          data-testid="nc-form-after-submit-msg"
+                      /></a-form-item>
+                    </div>
                   </div>
                 </Pane>
               </Splitpanes>
@@ -1967,6 +1966,9 @@ useEventListener(
   }
   &.nc-form-input-help-text .nc-textarea-rich-editor {
     @apply pt-1 text-gray-700;
+    .ProseMirror {
+      max-height: 7.5rem !important;
+    }
   }
 }
 .nc-form-after-submit-msg {
@@ -1974,6 +1976,7 @@ useEventListener(
     @apply pl-1 pr-2 pt-2 pb-1 !rounded-lg !text-sm border-1 border-gray-200 focus-within:border-brand-500;
     .ProseMirror {
       min-height: 5rem;
+      max-height: 7.5rem !important;
     }
   }
 }

From ff3d8c744d159bce88f0de7513b52ce4b57ddcf9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:52 +0000
Subject: [PATCH 27/36] fix(nc-gui): move form settings switch inputs to the
 right side

---
 .../nc-gui/components/smartsheet/Form.vue     | 140 +++++++++---------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index cdb2d77736e4..ea771c386604 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1616,41 +1616,45 @@ useEventListener(
                     <!-- Appearance Settings -->
                     <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
 
-                    <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
-                      <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
-                      <div class="flex justify-start">
-                        <LazyGeneralColorPicker
-                          :model-value="(formViewData.meta as Record<string,any>).background_color"
-                          :colors="[
-                            '#FFFFFF',
-                            '#FFDBD9',
-                            '#FEE6D6',
-                            '#FFF0D1',
-                            '#D4F7E0',
-                            '#D7F2FF',
-                            '#FED8F4',
-                            '#E5D4F5',
-                            '#FFCFE6',
-                          ]"
-                          color-box-border
-                          is-new-design
-                          class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
-                          @input="handleChangeBackground"
-                        />
+                    <div class="flex flex-col space-y-3">
+                      <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
+                        <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
+                        <div class="flex justify-start">
+                          <LazyGeneralColorPicker
+                            :model-value="(formViewData.meta as Record<string,any>).background_color"
+                            :colors="[
+                              '#FFFFFF',
+                              '#FFDBD9',
+                              '#FEE6D6',
+                              '#FFF0D1',
+                              '#D4F7E0',
+                              '#D7F2FF',
+                              '#FED8F4',
+                              '#E5D4F5',
+                              '#FFCFE6',
+                            ]"
+                            color-box-border
+                            is-new-design
+                            class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
+                            @input="handleChangeBackground"
+                          />
+                        </div>
                       </div>
-                    </div>
 
-                    <div class="flex items-center">
-                      <!-- Hide NocoDB Branding -->
-                      <a-switch
-                        v-if="isEeUI"
-                        v-e="[`a:form-view:hide-branding`]"
-                        :checked="parseProp(formViewData.meta)?.hide_branding"
-                        size="small"
-                        class="nc-form-hide-branding"
-                        data-testid="nc-form-hide-branding"
-                        :disabled="isLocked || !isEditable"
-                        @change="
+                      <div class="flex items-center justify-between gap-3">
+                        <!-- Hide NocoDB Branding -->
+
+                        <span>{{ $t('labels.hideNocodbBranding') }}</span>
+
+                        <a-switch
+                          v-if="isEeUI"
+                          v-e="[`a:form-view:hide-branding`]"
+                          :checked="parseProp(formViewData.meta)?.hide_branding"
+                          size="small"
+                          class="nc-form-hide-branding"
+                          data-testid="nc-form-hide-branding"
+                          :disabled="isLocked || !isEditable"
+                          @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1658,27 +1662,28 @@ useEventListener(
                         updateView()
                       }
                     "
-                      />
-                      <NcTooltip v-else placement="top">
-                        <template #title>
-                          <div class="text-center">
-                            {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                          </div>
-                        </template>
-                        <a-switch :checked="false" size="small" :disabled="true" />
-                      </NcTooltip>
-                      <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
-                    </div>
-                    <div class="flex items-center">
-                      <!-- Hide Banner -->
-                      <a-switch
-                        v-e="[`a:form-view:hide-banner`]"
-                        :checked="parseProp(formViewData.meta)?.hide_banner"
-                        size="small"
-                        class="nc-form-hide-banner"
-                        data-testid="nc-form-hide-banner"
-                        :disabled="isLocked || !isEditable"
-                        @change="
+                        />
+
+                        <NcTooltip v-else placement="top">
+                          <template #title>
+                            <div class="text-center">
+                              {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                            </div>
+                          </template>
+                          <a-switch :checked="false" size="small" :disabled="true" />
+                        </NcTooltip>
+                      </div>
+                      <div class="flex items-center justify-between gap-3">
+                        <!-- Hide Banner -->
+                        <span>{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
+                        <a-switch
+                          v-e="[`a:form-view:hide-banner`]"
+                          :checked="parseProp(formViewData.meta)?.hide_banner"
+                          size="small"
+                          class="nc-form-hide-banner"
+                          data-testid="nc-form-hide-banner"
+                          :disabled="isLocked || !isEditable"
+                          @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1686,9 +1691,8 @@ useEventListener(
                         updateView()
                       }
                     "
-                      />
-
-                      <span class="ml-4">{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
+                        />
+                      </div>
                     </div>
                   </div>
 
@@ -1699,8 +1703,9 @@ useEventListener(
                     </div>
 
                     <div class="flex flex-col gap-3">
-                      <div class="flex items-center">
+                      <div class="flex items-center justify-between gap-3">
                         <!-- Show "Submit Another Form" button -->
+                        <span>{{ $t('msg.info.submitAnotherForm') }}</span>
                         <a-switch
                           v-model:checked="formViewData.submit_another_form"
                           v-e="[`a:form-view:submit-another-form`]"
@@ -1710,11 +1715,11 @@ useEventListener(
                           :disabled="isLocked || !isEditable"
                           @change="updateView"
                         />
-                        <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
                       </div>
 
-                      <div class="flex items-center">
+                      <div class="flex items-center justify-between gap-3">
                         <!-- Show a blank form after 5 seconds -->
+                        <span>{{ $t('msg.info.showBlankForm') }}</span>
                         <a-switch
                           v-model:checked="formViewData.show_blank_form"
                           v-e="[`a:form-view:show-blank-form`]"
@@ -1724,11 +1729,14 @@ useEventListener(
                           :disabled="isLocked || !isEditable"
                           @change="updateView"
                         />
-
-                        <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
                       </div>
 
-                      <div class="flex items-center">
+                      <div class="flex items-center justify-between gap-3">
+                        <!-- Email me at <email> -->
+                        <span>
+                          {{ $t('msg.info.emailForm') }}
+                          <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                        </span>
                         <a-switch
                           v-model:checked="emailMe"
                           v-e="[`a:form-view:email-me`]"
@@ -1738,12 +1746,6 @@ useEventListener(
                           :disabled="isLocked || !isEditable"
                           @change="onEmailChange"
                         />
-
-                        <!-- Email me at <email> -->
-                        <span class="ml-4">
-                          {{ $t('msg.info.emailForm') }}
-                          <span class="text-bold text-gray-600">{{ user?.email }}</span>
-                        </span>
                       </div>
                     </div>
 

From c4effa82bfd659a550af26e0c24b40fee85b1a7d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:52 +0000
Subject: [PATCH 28/36] fix(nc-gui): move form select type field layout option
 to appearance settings section

---
 .../nc-gui/components/smartsheet/Form.vue     | 38 ++++++++++++-------
 packages/nc-gui/lang/en.json                  |  3 +-
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index ea771c386604..6d9d21cb74e8 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1397,20 +1397,6 @@ useEventListener(
                     </div>
                   </div>
 
-                  <!-- Layout  -->
-                  <div v-if="isSelectTypeCol(activeField.uidt)">
-                    <div class="text-gray-800 font-medium">Layout</div>
-
-                    <a-radio-group
-                      :value="!!activeField.meta.isList"
-                      class="nc-form-field-layout !mt-2 max-w-[calc(100%_-_40px)]"
-                      @update:value="updateSelectFieldLayout"
-                    >
-                      <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
-                      <a-radio :value="true">{{ $t('general.list') }}</a-radio>
-                    </a-radio-group>
-                  </div>
-
                   <!-- Todo: Show on conditions,... -->
                   <!-- eslint-disable vue/no-constant-condition -->
                   <div v-if="false" class="flex items-start justify-between gap-3">
@@ -1447,6 +1433,30 @@ useEventListener(
                   </div>
                 </div>
               </div>
+
+              <!-- Field Appearance Settings -->
+
+              <div
+                v-if="isSelectTypeCol(activeField.uidt)"
+                class="nc-form-field-appearance-settings p-4 flex flex-col gap-4 border-b border-gray-200"
+              >
+                <div class="text-base font-bold">{{ $t('general.appearance') }}</div>
+                <div class="flex flex-col gap-6">
+                  <!-- Select type field Options Layout  -->
+                  <div>
+                    <div class="text-gray-800 font-medium">Options layout</div>
+
+                    <a-radio-group
+                      :value="!!activeField.meta.isList"
+                      class="nc-form-field-layout !mt-3 max-w-[calc(100%_-_40px)]"
+                      @update:value="updateSelectFieldLayout"
+                    >
+                      <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                      <a-radio :value="true">{{ $t('general.list') }}</a-radio>
+                    </a-radio-group>
+                  </div>
+                </div>
+              </div>
             </div>
 
             <!-- Form Settings -->
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 0271f7abcde9..6c583e1feecb 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -199,7 +199,8 @@
     "dropdown": "Dropdown",
     "list": "List",
     "apply": "Apply",
-    "text": "Text"
+    "text": "Text",
+    "appearance": "Appearance"
   },
   "objects": {
     "day": "Day",

From d59aa9ef343ac40c26028853798c505172db8512 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 29/36] fix(nc-gui): select form active field text on focus

---
 packages/nc-gui/components/smartsheet/Form.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 6d9d21cb74e8..eeb3ec03ca02 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -639,6 +639,10 @@ const formElementValidationRules = (element) => {
   return rules
 }
 
+const onFocusActiveFieldLabel = (e: FocusEvent) => {
+  ;(e.target as HTMLTextAreaElement).select()
+}
+
 const updateSelectFieldLayout = (value: boolean) => {
   if (!activeField.value) return
 
@@ -716,9 +720,11 @@ watch(activeField, (newValue) => {
   }
 })
 
-watch([focusLabel, activeRow], () => {
-  if (activeRow && focusLabel.value) {
-    focusLabel.value?.focus()
+watch([focusLabel, activeField], () => {
+  if (activeField && focusLabel.value) {
+    nextTick(() => {
+      focusLabel.value?.focus()
+    })
   }
 })
 
@@ -1349,6 +1355,7 @@ useEventListener(
                   class="form-meta-input nc-form-input-label !max-h-7.5rem nc-form-scrollbar"
                   data-testid="nc-form-input-label"
                   :placeholder="$t('msg.info.formInput')"
+                  @focus="onFocusActiveFieldLabel"
                   @keydown.enter.prevent
                   @change="updateColMeta(activeField)"
                 />
@@ -1499,7 +1506,9 @@ useEventListener(
                   </div>
                   <div>
                     <a-input
+                      key="nc-form-field-search-input"
                       v-model:value="searchQuery"
+                      autocomplete="off"
                       class="!h-9 !px-3 !py-1 !rounded-lg"
                       :placeholder="`${$t('placeholder.searchFields')}...`"
                       name="nc-form-field-search-input"

From ed62709c59813de7b34bb9e2a4be2f67810632e6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 30/36] fix(nc-gui): form rich text element menu option
 tabindex issue

---
 .../cell/RichText/SelectedBubbleMenu.vue      | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
index 0f5e471a66d6..19389c90b545 100644
--- a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
+++ b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
@@ -43,6 +43,10 @@ const tooltipPlacement = computed(() => {
   if (isFormField.value) return 'bottom'
 })
 
+const tabIndex = computed(() => {
+  return isFormField.value ? -1 : 0
+})
+
 const onToggleLink = () => {
   const activeNode = editor.value?.state?.selection?.$from?.nodeBefore || editor.value?.state?.selection?.$from?.nodeAfter
 
@@ -123,7 +127,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
         type="text"
         :class="{ 'is-active': editor.isActive('bold') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleBold().run()"
       >
         <MdiFormatBold />
@@ -144,7 +148,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
         type="text"
         :disabled="editor.isActive('codeBlock')"
         :class="{ 'is-active': editor.isActive('italic') }"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click=";(editor!.chain().focus() as any).toggleItalic().run()"
       >
         <MdiFormatItalic />
@@ -165,7 +169,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
         type="text"
         :class="{ 'is-active': editor.isActive('underline') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleUnderline().run()"
       >
         <MdiFormatUnderline />
@@ -185,7 +189,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
         type="text"
         :class="{ 'is-active': editor.isActive('strike') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleStrike().run()"
       >
         <MdiFormatStrikeThrough />
@@ -197,6 +201,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <NcButton
         size="small"
         type="text"
+        :tabindex="tabIndex"
         :class="{ 'is-active': editor.isActive('codeBlock') }"
         @click="editor!.chain().focus().toggleCodeBlock().run()"
       >
@@ -212,6 +217,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <NcButton
         size="small"
         type="text"
+        :tabindex="tabIndex"
         :class="{ 'is-active': editor.isActive('code') }"
         :disabled="editor.isActive('codeBlock')"
         @click="editor!.chain().focus().toggleCode().run()"
@@ -285,6 +291,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <NcButton
         size="small"
         type="text"
+        :tabindex="tabIndex"
         :class="{ 'is-active': editor.isActive('blockquote') }"
         @click="editor!.chain().focus().toggleBlockquote().run()"
       >
@@ -297,6 +304,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <NcButton
         size="small"
         type="text"
+        :tabindex="tabIndex"
         :class="{ 'is-active': editor.isActive('bulletList') }"
         @click="editor!.chain().focus().toggleBulletList().run()"
       >
@@ -309,6 +317,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <NcButton
         size="small"
         type="text"
+        :tabindex="tabIndex"
         :class="{ 'is-active': editor.isActive('orderedList') }"
         @click="editor!.chain().focus().toggleOrderedList().run()"
       >
@@ -321,6 +330,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
       <NcButton
         size="small"
         type="text"
+        :tabindex="tabIndex"
         :class="{ 'is-active': editor.isActive('taskList') }"
         @click="editor!.chain().focus().toggleTaskList().run()"
       >
@@ -351,7 +361,7 @@ const showDivider = (options: RichTextBubbleMenuOptions[]) => {
         type="text"
         :class="{ 'is-active': editor.isActive('link') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="onToggleLink"
       >
         <GeneralIcon v-if="isFormField" icon="link2"></GeneralIcon>

From 0ded77bc15be9cd519a2b8cd74cfafeae73f6104 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 31/36] fix(nc-gui): form search field input autofill issue

---
 packages/nc-gui/components/smartsheet/Form.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index eeb3ec03ca02..18ffae9902e6 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -80,7 +80,7 @@ const enum NcForm {
   subheading = 'nc-form-sub-heading',
 }
 
-const { isMobileMode, user } = useGlobal()
+const { user } = useGlobal()
 
 const { $api, $e } = useNuxtApp()
 
@@ -92,6 +92,8 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 const formRef = ref()
 
+const formFieldSearchInput = ref()
+
 const formState = ref<Record<string, any>>({})
 
 const secondsRemain = ref(0)
@@ -1507,7 +1509,8 @@ useEventListener(
                   <div>
                     <a-input
                       key="nc-form-field-search-input"
-                      v-model:value="searchQuery"
+                      ref="formFieldSearchInput"
+                      :value="searchQuery"
                       autocomplete="off"
                       class="!h-9 !px-3 !py-1 !rounded-lg"
                       :placeholder="`${$t('placeholder.searchFields')}...`"

From 2943e6d7a4a0d09bc233f2e455b9b7e1af3fe2b6 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 32/36] fix(nc-gui): update position of rich text menu option
 of form description

---
 packages/nc-gui/components/smartsheet/Form.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 18ffae9902e6..c70254a39015 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -92,8 +92,6 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 const formRef = ref()
 
-const formFieldSearchInput = ref()
-
 const formState = ref<Record<string, any>>({})
 
 const secondsRemain = ref(0)
@@ -1093,7 +1091,7 @@ useEventListener(
                         v-if="isEditable && !isLocked"
                         v-model:value="formViewData.subheading"
                         :placeholder="$t('msg.info.formDesc')"
-                        class="nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
+                        class="nc-form-description nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
                         is-form-field
                         :autofocus="activeRow === NcForm.subheading"
                         :data-testid="NcForm.subheading"
@@ -1509,8 +1507,8 @@ useEventListener(
                   <div>
                     <a-input
                       key="nc-form-field-search-input"
-                      ref="formFieldSearchInput"
-                      :value="searchQuery"
+                      v-model:value="searchQuery"
+                      type="text"
                       autocomplete="off"
                       class="!h-9 !px-3 !py-1 !rounded-lg"
                       :placeholder="`${$t('placeholder.searchFields')}...`"
@@ -2004,4 +2002,9 @@ useEventListener(
     }
   }
 }
+.nc-form-description {
+  .nc-form-field-bubble-menu-wrapper {
+    @apply -bottom-12;
+  }
+}
 </style>

From 0cf8c2632605926f4a46669f0881797acfee28b4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 33/36] feat(nc-gui): adjustable form view sidebar width

---
 .../nc-gui/components/smartsheet/Form.vue     | 1678 +++++++++--------
 .../components/smartsheet/form/Layout.vue     |   96 +
 packages/nc-gui/store/sidebar.ts              |   13 +
 3 files changed, 956 insertions(+), 831 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/form/Layout.vue

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index c70254a39015..3e28dd911b23 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -873,56 +873,61 @@ useEventListener(
           </div>
         </div>
         <template v-else-if="formViewData">
-          <div
-            class="flex-1 h-full overflow-auto nc-form-scrollbar p-6"
-            :style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
-          >
-            <div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
-              <GeneralImageCropper
-                v-if="isEditable"
-                v-model:show-cropper="showCropper"
-                :image-config="imageCropperData.imageConfig"
-                :cropper-config="imageCropperData.cropperConfig"
-                :upload-config="imageCropperData.uploadConfig"
-                @submit="handleOnUploadImage"
-              ></GeneralImageCropper>
-              <!-- cover image -->
-              <div v-if="!parseProp(formViewData?.meta).hide_banner" class="group relative max-w-[max(33%,688px)] mx-auto">
-                <GeneralFormBanner :key="formViewData.banner_image_url?.path" :banner-image-url="formViewData.banner_image_url" />
-                <div class="absolute bottom-0 right-0 hidden group-hover:block">
-                  <div class="flex items-center space-x-1 m-2">
-                    <NcTooltip :disabled="isEeUI">
-                      <template #title>
-                        <div class="text-center">
-                          {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                        </div>
-                      </template>
+          <SmartsheetFormLayout>
+            <template #preview>
+              <div
+                class="w-full h-full overflow-auto nc-form-scrollbar p-6"
+                :style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
+              >
+                <div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
+                  <GeneralImageCropper
+                    v-if="isEditable"
+                    v-model:show-cropper="showCropper"
+                    :image-config="imageCropperData.imageConfig"
+                    :cropper-config="imageCropperData.cropperConfig"
+                    :upload-config="imageCropperData.uploadConfig"
+                    @submit="handleOnUploadImage"
+                  ></GeneralImageCropper>
+                  <!-- cover image -->
+                  <div v-if="!parseProp(formViewData?.meta).hide_banner" class="group relative max-w-[max(33%,688px)] mx-auto">
+                    <GeneralFormBanner
+                      :key="formViewData.banner_image_url?.path"
+                      :banner-image-url="formViewData.banner_image_url"
+                    />
+                    <div class="absolute bottom-0 right-0 hidden group-hover:block">
+                      <div class="flex items-center space-x-1 m-2">
+                        <NcTooltip :disabled="isEeUI">
+                          <template #title>
+                            <div class="text-center">
+                              {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                            </div>
+                          </template>
 
-                      <NcButton
-                        type="secondary"
-                        size="small"
-                        class="nc-form-upload-banner-btn"
-                        data-testid="nc-form-upload-banner-btn"
-                        :disabled="!isEeUI"
-                        @click="openUploadImage(true)"
-                      >
-                        <div class="flex gap-2 items-center">
-                          <component :is="iconMap.upload" class="w-4 h-4" />
-                          <span>
-                            {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
-                            {{ $t('general.banner') }}
-                          </span>
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
-                    <NcTooltip v-if="isEeUI && formViewData.banner_image_url">
-                      <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
-                      <NcButton
-                        type="secondary"
-                        size="small"
-                        class="nc-form-delete-banner-btn"
-                        data-testid="nc-form-delete-banner-btn"
-                        @click="
+                          <NcButton
+                            type="secondary"
+                            size="small"
+                            class="nc-form-upload-banner-btn"
+                            data-testid="nc-form-upload-banner-btn"
+                            :disabled="!isEeUI"
+                            @click="openUploadImage(true)"
+                          >
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.upload" class="w-4 h-4" />
+                              <span>
+                                {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
+                                {{ $t('general.banner') }}
+                              </span>
+                            </div>
+                          </NcButton>
+                        </NcTooltip>
+                        <NcTooltip v-if="isEeUI && formViewData.banner_image_url">
+                          <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
+                          <NcButton
+                            type="secondary"
+                            size="small"
+                            class="nc-form-delete-banner-btn"
+                            data-testid="nc-form-delete-banner-btn"
+                            @click="
                               () => {
                                 if (isEditable) {
                                   formViewData!.banner_image_url = null
@@ -930,75 +935,75 @@ useEventListener(
                                 }
                               }
                             "
-                      >
-                        <div class="flex gap-2 items-center">
-                          <component :is="iconMap.delete" class="w-4 h-4" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
+                          >
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.delete" class="w-4 h-4" />
+                            </div>
+                          </NcButton>
+                        </NcTooltip>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-              <a-card
-                class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
-                :body-style="{
-                  margin: '0 auto',
-                  padding: '0px !important',
-                }"
-              >
-                <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-                  <!-- form header -->
-                  <div class="flex flex-col px-4 lg:px-6">
-                    <!-- Form logo  -->
-                    <div class="mb-4">
-                      <div
-                        class="nc-form-logo-wrapper mx-6 group relative inline-block h-56px overflow-hidden flex items-center"
-                        :class="
-                          formViewData.logo_url
-                            ? 'max-w-189px hover:(w-full bg-gray-100 rounded-xl) '
-                            : 'bg-gray-100 max-w-147px rounded-xl'
-                        "
-                        style="transition: all 0.3s ease-in"
-                      >
-                        <LazyCellAttachmentImage
-                          v-if="formViewData.logo_url"
-                          :key="formViewData.logo_url?.path"
-                          :srcs="getFormLogoSrc"
-                          class="flex-none nc-form-logo !object-contain object-left max-h-full max-w-full !m-0"
-                        />
-                        <div
-                          class="items-center space-x-1 flex-nowrap m-3"
-                          :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
-                        >
-                          <NcTooltip :disabled="isEeUI">
-                            <template #title>
-                              <div class="text-center">
-                                {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                              </div>
-                            </template>
-                            <NcButton
-                              v-if="isEditable"
-                              type="secondary"
-                              size="small"
-                              class="nc-form-upload-logo-btn"
-                              data-testid="nc-form-upload-log-btn"
-                              :disabled="!isEeUI"
-                              @click="openUploadImage(false)"
+                  <a-card
+                    class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
+                    :body-style="{
+                      margin: '0 auto',
+                      padding: '0px !important',
+                    }"
+                  >
+                    <a-form ref="formRef" :model="formState" class="nc-form" no-style>
+                      <!-- form header -->
+                      <div class="flex flex-col px-4 lg:px-6">
+                        <!-- Form logo  -->
+                        <div class="mb-4">
+                          <div
+                            class="nc-form-logo-wrapper mx-6 group relative inline-block h-56px overflow-hidden flex items-center"
+                            :class="
+                              formViewData.logo_url
+                                ? 'max-w-189px hover:(w-full bg-gray-100 rounded-xl) '
+                                : 'bg-gray-100 max-w-147px rounded-xl'
+                            "
+                            style="transition: all 0.3s ease-in"
+                          >
+                            <LazyCellAttachmentImage
+                              v-if="formViewData.logo_url"
+                              :key="formViewData.logo_url?.path"
+                              :srcs="getFormLogoSrc"
+                              class="flex-none nc-form-logo !object-contain object-left max-h-full max-w-full !m-0"
+                            />
+                            <div
+                              class="items-center space-x-1 flex-nowrap m-3"
+                              :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
                             >
-                              <div class="flex gap-2 items-center">
-                                <component :is="iconMap.upload" class="w-4 h-4" />
-                                <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
-                              </div>
-                            </NcButton>
-                          </NcTooltip>
-                          <NcTooltip v-if="isEeUI && formViewData.logo_url">
-                            <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
-                            <NcButton
-                              type="secondary"
-                              size="small"
-                              class="nc-form-delete-logo-btn"
-                              data-testid="nc-form-delete-logo-btn"
-                              @click="
+                              <NcTooltip :disabled="isEeUI">
+                                <template #title>
+                                  <div class="text-center">
+                                    {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                                  </div>
+                                </template>
+                                <NcButton
+                                  v-if="isEditable"
+                                  type="secondary"
+                                  size="small"
+                                  class="nc-form-upload-logo-btn"
+                                  data-testid="nc-form-upload-log-btn"
+                                  :disabled="!isEeUI"
+                                  @click="openUploadImage(false)"
+                                >
+                                  <div class="flex gap-2 items-center">
+                                    <component :is="iconMap.upload" class="w-4 h-4" />
+                                    <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
+                                  </div>
+                                </NcButton>
+                              </NcTooltip>
+                              <NcTooltip v-if="isEeUI && formViewData.logo_url">
+                                <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
+                                <NcButton
+                                  type="secondary"
+                                  size="small"
+                                  class="nc-form-delete-logo-btn"
+                                  data-testid="nc-form-delete-logo-btn"
+                                  @click="
                               () => {
                                 if (isEditable) {
                                   formViewData!.logo_url = null
@@ -1006,675 +1011,684 @@ useEventListener(
                                 }
                               }
                             "
-                            >
-                              <div class="flex gap-2 items-center">
-                                <component :is="iconMap.delete" class="w-4 h-4" />
-                              </div>
-                            </NcButton>
-                          </NcTooltip>
+                                >
+                                  <div class="flex gap-2 items-center">
+                                    <component :is="iconMap.delete" class="w-4 h-4" />
+                                  </div>
+                                </NcButton>
+                              </NcTooltip>
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
 
-                    <!-- form title -->
-                    <div
-                      class="border-transparent px-4 lg:px-6"
-                      :class="[
-                        {
-                          'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
-                        },
-                        {
-                          'mb-4 py-0 lg:py-0': !isEditable,
-                        },
-                        {
-                          'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
-                        },
-                        {
-                          'bg-gray-50': activeRow === NcForm.heading && isEditable,
-                        },
-                        {
-                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                        },
-                      ]"
-                      @click.stop="onFormItemClick({ id: NcForm.heading })"
-                    >
-                      <a-form-item v-if="isEditable" class="!my-0">
-                        <a-textarea
-                          v-model:value="formViewData.heading"
-                          class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
-                          :style="{
-                            'borderRightWidth': '0px !important',
-                            'height': '70px',
-                            'max-height': '250px',
-                            'resize': 'vertical',
-                          }"
-                          auto-size
-                          size="large"
-                          hide-details
-                          :disabled="isLocked"
-                          placeholder="Form Title"
-                          :bordered="false"
-                          :data-testid="NcForm.heading"
-                          :data-title="NcForm.heading"
-                          @update:value="updateView"
-                        />
-                      </a-form-item>
+                        <!-- form title -->
+                        <div
+                          class="border-transparent px-4 lg:px-6"
+                          :class="[
+                            {
+                              'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                            },
+                            {
+                              'mb-4 py-0 lg:py-0': !isEditable,
+                            },
+                            {
+                              'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
+                            },
+                            {
+                              'bg-gray-50': activeRow === NcForm.heading && isEditable,
+                            },
+                            {
+                              '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                            },
+                          ]"
+                          @click.stop="onFormItemClick({ id: NcForm.heading })"
+                        >
+                          <a-form-item v-if="isEditable" class="!my-0">
+                            <a-textarea
+                              v-model:value="formViewData.heading"
+                              class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
+                              :style="{
+                                'borderRightWidth': '0px !important',
+                                'height': '70px',
+                                'max-height': '250px',
+                                'resize': 'vertical',
+                              }"
+                              auto-size
+                              size="large"
+                              hide-details
+                              :disabled="isLocked"
+                              placeholder="Form Title"
+                              :bordered="false"
+                              :data-testid="NcForm.heading"
+                              :data-title="NcForm.heading"
+                              @update:value="updateView"
+                            />
+                          </a-form-item>
 
-                      <div v-else class="font-bold text-2xl text-gray-900">
-                        {{ formViewData.heading }}
-                      </div>
-                    </div>
+                          <div v-else class="font-bold text-2xl text-gray-900">
+                            {{ formViewData.heading }}
+                          </div>
+                        </div>
 
-                    <!-- form description  -->
-                    <div
-                      class="border-transparent px-4 lg:px-6"
-                      :class="[
-                        {
-                          'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
-                        },
-                        {
-                          'mb-4 py-0 lg:py-0': !isEditable,
-                        },
-                        {
-                          'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
-                        },
-                        {
-                          'bg-gray-50': activeRow === NcForm.subheading && isEditable,
-                        },
-                        {
-                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                        },
-                      ]"
-                      @click.stop="onFormItemClick({ id: NcForm.subheading })"
-                    >
-                      <LazyCellRichText
-                        v-if="isEditable && !isLocked"
-                        v-model:value="formViewData.subheading"
-                        :placeholder="$t('msg.info.formDesc')"
-                        class="nc-form-description nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
-                        is-form-field
-                        :autofocus="activeRow === NcForm.subheading"
-                        :data-testid="NcForm.subheading"
-                        :data-title="NcForm.subheading"
-                        @update:value="updateView"
-                      />
-                      <LazyCellRichText
-                        v-else-if="formViewData.subheading"
-                        :value="formViewData.subheading"
-                        class="font-medium text-base !text-gray-500 -ml-1"
-                        is-form-field
-                        read-only
-                        sync-value-change
-                      />
-                    </div>
-                  </div>
+                        <!-- form description  -->
+                        <div
+                          class="border-transparent px-4 lg:px-6"
+                          :class="[
+                            {
+                              'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                            },
+                            {
+                              'mb-4 py-0 lg:py-0': !isEditable,
+                            },
+                            {
+                              'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
+                            },
+                            {
+                              'bg-gray-50': activeRow === NcForm.subheading && isEditable,
+                            },
+                            {
+                              '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                            },
+                          ]"
+                          @click.stop="onFormItemClick({ id: NcForm.subheading })"
+                        >
+                          <LazyCellRichText
+                            v-if="isEditable && !isLocked"
+                            v-model:value="formViewData.subheading"
+                            :placeholder="$t('msg.info.formDesc')"
+                            class="nc-form-description nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
+                            is-form-field
+                            :autofocus="activeRow === NcForm.subheading"
+                            :data-testid="NcForm.subheading"
+                            :data-title="NcForm.subheading"
+                            @update:value="updateView"
+                          />
+                          <LazyCellRichText
+                            v-else-if="formViewData.subheading"
+                            :value="formViewData.subheading"
+                            class="font-medium text-base !text-gray-500 -ml-1"
+                            is-form-field
+                            read-only
+                            sync-value-change
+                          />
+                        </div>
+                      </div>
 
-                  <Draggable
-                    ref="draggableRef"
-                    :model-value="visibleColumns"
-                    item-key="fk_column_id"
-                    draggable=".item"
-                    handle=".nc-form-field-drag-handler"
-                    group="form-inputs"
-                    ghost-class="nc-form-field-ghost"
-                    class="h-full px-4 lg:px-6"
-                    :move="onMoveCallback"
-                    :disabled="isLocked || !isEditable"
-                    @change="onMove($event, true)"
-                  >
-                    <template #item="{ element }">
-                      <div
-                        :key="element.id"
-                        class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
-                        :class="[
-                          `nc-form-drag-${element.title.replaceAll(' ', '')}`,
-                          {
-                            'rounded-2xl border-2 my-1': isEditable,
-                          },
-                          {
-                            'border-transparent my-0': !isEditable,
-                          },
-                          {
-                            'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) cursor-pointer':
-                              activeRow !== element.id && isEditable,
-                          },
-
-                          {
-                            'border-brand-500': activeRow === element.id,
-                          },
-                          {
-                            '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                          },
-                        ]"
-                        :data-title="element.title"
-                        data-testid="nc-form-fields"
-                        @click.stop="onFormItemClick(element)"
+                      <Draggable
+                        ref="draggableRef"
+                        :model-value="visibleColumns"
+                        item-key="fk_column_id"
+                        draggable=".item"
+                        handle=".nc-form-field-drag-handler"
+                        group="form-inputs"
+                        ghost-class="nc-form-field-ghost"
+                        class="h-full px-4 lg:px-6"
+                        :move="onMoveCallback"
+                        :disabled="isLocked || !isEditable"
+                        @change="onMove($event, true)"
                       >
-                        <div v-if="activeRow === element.id" class="absolute -left-3 top-6">
-                          <NcButton
-                            type="primary"
-                            size="small"
-                            class="nc-form-field-drag-handler !cursor-move !p-1 !min-w-6 !h-auto !rounded"
-                          >
-                            <component
-                              :is="iconMap.drag"
-                              class="nc-form-field-drag-handler flex-none !h-4 !w-4 text-white font-bold"
-                            />
-                          </NcButton>
-                        </div>
-                        <div class="text-sm font-semibold text-gray-800">
-                          <span data-testid="nc-form-input-label">
-                            {{ element.label || element.title }}
-                          </span>
-                          <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                            >&nbsp;*</span
+                        <template #item="{ element }">
+                          <div
+                            :key="element.id"
+                            class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
+                            :class="[
+                              `nc-form-drag-${element.title.replaceAll(' ', '')}`,
+                              {
+                                'rounded-2xl border-2 my-1': isEditable,
+                              },
+                              {
+                                'border-transparent my-0': !isEditable,
+                              },
+                              {
+                                'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) cursor-pointer':
+                                  activeRow !== element.id && isEditable,
+                              },
+
+                              {
+                                'border-brand-500': activeRow === element.id,
+                              },
+                              {
+                                '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                              },
+                            ]"
+                            :data-title="element.title"
+                            data-testid="nc-form-fields"
+                            @click.stop="onFormItemClick(element)"
                           >
-                        </div>
+                            <div v-if="activeRow === element.id" class="absolute -left-3 top-6">
+                              <NcButton
+                                type="primary"
+                                size="small"
+                                class="nc-form-field-drag-handler !cursor-move !p-1 !min-w-6 !h-auto !rounded"
+                              >
+                                <component
+                                  :is="iconMap.drag"
+                                  class="nc-form-field-drag-handler flex-none !h-4 !w-4 text-white font-bold"
+                                />
+                              </NcButton>
+                            </div>
+                            <div class="text-sm font-semibold text-gray-800">
+                              <span data-testid="nc-form-input-label">
+                                {{ element.label || element.title }}
+                              </span>
+                              <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
+                                >&nbsp;*</span
+                              >
+                            </div>
 
-                        <LazyCellRichText
-                          v-if="element.description"
-                          :value="element.description"
-                          is-form-field
-                          read-only
-                          sync-value-change
-                          class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
-                          data-testid="nc-form-help-text"
-                          @update:value="updateColMeta(element)"
-                        />
+                            <LazyCellRichText
+                              v-if="element.description"
+                              :value="element.description"
+                              is-form-field
+                              read-only
+                              sync-value-change
+                              class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
+                              data-testid="nc-form-help-text"
+                              @update:value="updateColMeta(element)"
+                            />
 
-                        <!-- Field Body  -->
+                            <!-- Field Body  -->
+
+                            <div class="nc-form-field-body">
+                              <div class="mt-2">
+                                <a-form-item
+                                  :name="element.title"
+                                  class="!my-0 nc-input-required-error nc-form-input-item"
+                                  :rules="formElementValidationRules(element)"
+                                >
+                                  <LazySmartsheetDivDataCell class="relative" @click.stop>
+                                    <LazySmartsheetVirtualCell
+                                      v-if="isVirtualCol(element)"
+                                      v-model="formState[element.title]"
+                                      :row="row"
+                                      class="nc-input"
+                                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                      :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                      :column="element"
+                                    />
+                                    <LazySmartsheetCell
+                                      v-else
+                                      v-model="formState[element.title]"
+                                      class="nc-input truncate"
+                                      :class="[
+                                        `nc-form-input-${element.title.replaceAll(' ', '')}`,
+                                        { 'layout-list': element.meta.isList },
+                                      ]"
+                                      :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                      :column="element"
+                                      :edit-enabled="true"
+                                    />
+                                  </LazySmartsheetDivDataCell>
+                                </a-form-item>
+                              </div>
+                            </div>
+                          </div>
+                        </template>
 
-                        <div class="nc-form-field-body">
-                          <div class="mt-2">
-                            <a-form-item
-                              :name="element.title"
-                              class="!my-0 nc-input-required-error nc-form-input-item"
-                              :rules="formElementValidationRules(element)"
-                            >
-                              <LazySmartsheetDivDataCell class="relative" @click.stop>
-                                <LazySmartsheetVirtualCell
-                                  v-if="isVirtualCol(element)"
-                                  v-model="formState[element.title]"
-                                  :row="row"
-                                  class="nc-input"
-                                  :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                  :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                  :column="element"
-                                />
-                                <LazySmartsheetCell
-                                  v-else
-                                  v-model="formState[element.title]"
-                                  class="nc-input truncate"
-                                  :class="[
-                                    `nc-form-input-${element.title.replaceAll(' ', '')}`,
-                                    { 'layout-list': element.meta.isList },
-                                  ]"
-                                  :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                  :column="element"
-                                  :edit-enabled="true"
-                                />
-                              </LazySmartsheetDivDataCell>
-                            </a-form-item>
+                        <template #footer>
+                          <div
+                            v-if="!visibleColumns.length && isEditable"
+                            class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                          >
+                            {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
                           </div>
-                        </div>
-                      </div>
-                    </template>
+                        </template>
+                      </Draggable>
 
-                    <template #footer>
-                      <div
-                        v-if="!visibleColumns.length && isEditable"
-                        class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
-                      >
-                        {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
+                      <div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
+                        <NcButton
+                          type="secondary"
+                          size="small"
+                          :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                          class="nc-form-clear nc-form-focus-element"
+                          data-testid="nc-form-clear"
+                          data-title="nc-form-clear"
+                          @click="clearForm"
+                        >
+                          {{ $t('activity.clearForm') }}
+                        </NcButton>
+
+                        <NcButton
+                          html-type="submit"
+                          type="primary"
+                          size="small"
+                          :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                          class="nc-form-submit nc-form-focus-element"
+                          data-testid="nc-form-submit"
+                          data-title="nc-form-submit"
+                          @click="submitForm"
+                        >
+                          {{ $t('general.submit') }}
+                        </NcButton>
                       </div>
-                    </template>
-                  </Draggable>
-
-                  <div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
-                    <NcButton
-                      type="secondary"
-                      size="small"
-                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                      class="nc-form-clear nc-form-focus-element"
-                      data-testid="nc-form-clear"
-                      data-title="nc-form-clear"
-                      @click="clearForm"
-                    >
-                      {{ $t('activity.clearForm') }}
-                    </NcButton>
-
-                    <NcButton
-                      html-type="submit"
-                      type="primary"
-                      size="small"
-                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                      class="nc-form-submit nc-form-focus-element"
-                      data-testid="nc-form-submit"
-                      data-title="nc-form-submit"
-                      @click="submitForm"
-                    >
-                      {{ $t('general.submit') }}
-                    </NcButton>
-                  </div>
-                </a-form>
+                    </a-form>
 
-                <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
-                  <a-divider v-if="!isLocked" class="!my-8" />
-                  <!-- Nocodb Branding  -->
-                  <div class="inline-block">
-                    <GeneralFormBranding />
-                  </div>
+                    <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
+                      <a-divider v-if="!isLocked" class="!my-8" />
+                      <!-- Nocodb Branding  -->
+                      <div class="inline-block">
+                        <GeneralFormBranding />
+                      </div>
+                    </div>
+                  </a-card>
                 </div>
-              </a-card>
-            </div>
-          </div>
-          <!-- Right Panel -->
-          <div
-            class="nc-form-right-panel h-full flex-1 max-w-[384px] border-l border-gray-200"
-            :class="{
-              'overflow-y-auto nc-form-scrollbar': activeField,
-            }"
-          >
-            <!-- Form Field settings -->
-            <div v-if="activeField && activeColumn" :key="activeField?.id">
-              <!-- Field header -->
-              <div class="px-3 pt-4 pb-2 flex items-center justify-between border-b border-gray-200 font-medium">
-                <div class="flex items-center">
-                  <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
-                    {{ $t('objects.viewType.form') }}
-                  </div>
-                  <div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
+              </div>
+            </template>
+            <template #sidebar>
+              <!-- Right Panel -->
+              <div
+                class="nc-form-right-panel h-full flex-grow max-w-full"
+                :class="{
+                  'overflow-y-auto nc-form-scrollbar': activeField,
+                }"
+              >
+                <!-- Form Field settings -->
+                <div v-if="activeField && activeColumn" :key="activeField?.id">
+                  <!-- Field header -->
+                  <div class="px-3 pt-4 pb-2 flex items-center justify-between border-b border-gray-200 font-medium">
+                    <div class="flex items-center">
+                      <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
+                        {{ $t('objects.viewType.form') }}
+                      </div>
+                      <div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
 
-                  <div class="flex items-center pr-1 py-1.5 text-gray-800">
-                    <SmartsheetHeaderVirtualCellIcon
-                      v-if="isVirtualCol(activeField)"
-                      :column-meta="activeField"
-                      class="flex-none"
-                    />
-                    <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="flex-none" />
+                      <div class="flex items-center pr-1 py-1.5 text-gray-800">
+                        <SmartsheetHeaderVirtualCellIcon
+                          v-if="isVirtualCol(activeField)"
+                          :column-meta="activeField"
+                          class="flex-none"
+                        />
+                        <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="flex-none" />
 
-                    <NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
-                      <template #title>
-                        <div class="text-center">
-                          {{ activeField.title }}
-                        </div>
-                      </template>
+                        <NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
+                          <template #title>
+                            <div class="text-center">
+                              {{ activeField.title }}
+                            </div>
+                          </template>
 
-                      <span data-testid="nc-form-input-label">
-                        {{ activeField.title }}
-                      </span>
-                    </NcTooltip>
-                  </div>
-                </div>
-                <div class="flex items-center space-x-2">
-                  <a-dropdown
-                    v-model:visible="dropdownStates.showEditColumn"
-                    :trigger="['click']"
-                    overlay-class-name="nc-dropdown-form-edit-column"
-                    :disabled="!isUIAllowed('fieldEdit')"
-                  >
-                    <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
-                      {{ $t('general.edit') }} {{ $t('objects.field') }}
-                    </NcButton>
-                    <template #overlay>
-                      <SmartsheetColumnEditOrAddProvider
-                        v-if="dropdownStates.showEditColumn"
+                          <span data-testid="nc-form-input-label">
+                            {{ activeField.title }}
+                          </span>
+                        </NcTooltip>
+                      </div>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                      <a-dropdown
+                        v-model:visible="dropdownStates.showEditColumn"
+                        :trigger="['click']"
+                        overlay-class-name="nc-dropdown-form-edit-column"
+                        :disabled="!isUIAllowed('fieldEdit')"
+                      >
+                        <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
+                          {{ $t('general.edit') }} {{ $t('objects.field') }}
+                        </NcButton>
+                        <template #overlay>
+                          <SmartsheetColumnEditOrAddProvider
+                            v-if="dropdownStates.showEditColumn"
+                            :column="activeColumn"
+                            @submit="editColumnCallback"
+                            @cancel="dropdownStates.showEditColumn = false"
+                            @click.stop
+                            @keydown.stop
+                          />
+                        </template>
+                      </a-dropdown>
+                      <SmartsheetFormFieldMenu
+                        v-model:is-open="dropdownStates.showColumnMenu"
                         :column="activeColumn"
-                        @submit="editColumnCallback"
-                        @cancel="dropdownStates.showEditColumn = false"
-                        @click.stop
-                        @keydown.stop
+                        :form-column="activeField"
+                        :is-required="isRequired(activeField, activeField.required)"
+                        :on-delete="
+                          () => {
+                            deleteColumnCallback()
+                          }
+                        "
+                        @hide-field="showOrHideColumn(activeField, false, false)"
                       />
-                    </template>
-                  </a-dropdown>
-                  <SmartsheetFormFieldMenu
-                    v-model:is-open="dropdownStates.showColumnMenu"
-                    :column="activeColumn"
-                    :form-column="activeField"
-                    :is-required="isRequired(activeField, activeField.required)"
-                    :on-delete="
-                      () => {
-                        deleteColumnCallback()
-                      }
-                    "
-                    @hide-field="showOrHideColumn(activeField, false, false)"
-                  />
-                </div>
-              </div>
-
-              <!-- Field text -->
-              <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
-                <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('general.text') }}</div>
-
-                <a-textarea
-                  ref="focusLabel"
-                  v-model:value="activeField.label"
-                  :rows="1"
-                  auto-size
-                  hide-details
-                  class="form-meta-input nc-form-input-label !max-h-7.5rem nc-form-scrollbar"
-                  data-testid="nc-form-input-label"
-                  :placeholder="$t('msg.info.formInput')"
-                  @focus="onFocusActiveFieldLabel"
-                  @keydown.enter.prevent
-                  @change="updateColMeta(activeField)"
-                />
-
-                <LazyCellRichText
-                  v-model:value="activeField.description"
-                  :placeholder="$t('msg.info.formHelpText')"
-                  class="form-meta-input nc-form-input-help-text"
-                  is-form-field
-                  :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
-                  data-testid="nc-form-input-help-text"
-                  @update:value="updateColMeta(activeField)"
-                />
-              </div>
-
-              <!-- Field Settings -->
-              <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
-                <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('activity.settings') }}</div>
-                <div class="flex flex-col gap-6">
-                  <div class="flex items-center justify-between gap-3">
-                    <div class="nc-form-input-required text-gray-800 font-medium">
-                      {{ $t('general.required') }} {{ $t('objects.field').toLowerCase() }}
                     </div>
+                  </div>
 
-                    <a-switch
-                      v-model:checked="activeField.required"
-                      v-e="['a:form-view:field:mark-required']"
-                      size="small"
-                      data-testid="nc-form-input-required"
+                  <!-- Field text -->
+                  <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
+                    <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('general.text') }}</div>
+
+                    <a-textarea
+                      ref="focusLabel"
+                      v-model:value="activeField.label"
+                      :rows="1"
+                      auto-size
+                      hide-details
+                      class="form-meta-input nc-form-input-label !max-h-7.5rem nc-form-scrollbar"
+                      data-testid="nc-form-input-label"
+                      :placeholder="$t('msg.info.formInput')"
+                      @focus="onFocusActiveFieldLabel"
+                      @keydown.enter.prevent
                       @change="updateColMeta(activeField)"
                     />
+
+                    <LazyCellRichText
+                      v-model:value="activeField.description"
+                      :placeholder="$t('msg.info.formHelpText')"
+                      class="form-meta-input nc-form-input-help-text"
+                      is-form-field
+                      :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
+                      data-testid="nc-form-input-help-text"
+                      @update:value="updateColMeta(activeField)"
+                    />
                   </div>
 
-                  <div v-if="columnSupportsScanning(activeField.uidt)" class="!my-0 nc-form-input-enable-scanner-form-item">
-                    <div class="flex items-center justify-between gap-3">
-                      <div class="nc-form-input-enable-scanner text-gray-800 font-medium">
-                        {{ $t('general.enableScanner') }}
+                  <!-- Field Settings -->
+                  <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
+                    <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('activity.settings') }}</div>
+                    <div class="flex flex-col gap-6">
+                      <div class="flex items-center justify-between gap-3">
+                        <div class="nc-form-input-required text-gray-800 font-medium">
+                          {{ $t('general.required') }} {{ $t('objects.field').toLowerCase() }}
+                        </div>
+
+                        <a-switch
+                          v-model:checked="activeField.required"
+                          v-e="['a:form-view:field:mark-required']"
+                          size="small"
+                          data-testid="nc-form-input-required"
+                          @change="updateColMeta(activeField)"
+                        />
                       </div>
-                      <a-switch
-                        v-model:checked="activeField.enable_scanner"
-                        v-e="['a:form-view:field:mark-enable-scanner']"
-                        data-testid="nc-form-input-enable-scanner"
-                        size="small"
-                        @change="updateColMeta(activeField)"
-                      />
-                    </div>
-                  </div>
 
-                  <!-- Todo: Show on conditions,... -->
-                  <!-- eslint-disable vue/no-constant-condition -->
-                  <div v-if="false" class="flex items-start justify-between gap-3">
-                    <div>
-                      <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
-                      <div class="text-gray-500 mt-2">{{ $t('labels.showFieldOnConditionsMet') }}</div>
-                    </div>
-                    <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
-                  </div>
+                      <div v-if="columnSupportsScanning(activeField.uidt)" class="!my-0 nc-form-input-enable-scanner-form-item">
+                        <div class="flex items-center justify-between gap-3">
+                          <div class="nc-form-input-enable-scanner text-gray-800 font-medium">
+                            {{ $t('general.enableScanner') }}
+                          </div>
+                          <a-switch
+                            v-model:checked="activeField.enable_scanner"
+                            v-e="['a:form-view:field:mark-enable-scanner']"
+                            data-testid="nc-form-input-enable-scanner"
+                            size="small"
+                            @change="updateColMeta(activeField)"
+                          />
+                        </div>
+                      </div>
 
-                  <!-- Limit options -->
-                  <div v-if="isSelectTypeCol(activeField.uidt)" class="flex items-start justify-between gap-3">
-                    <div class="flex items-center gap-3">
-                      <div class="flex-1">
-                        <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
-                        <div class="text-gray-500 mt-2">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                        <div v-if="activeField.meta.isLimitOption" class="mt-3">
-                          <LazySmartsheetFormLimitOptions
-                            v-model:model-value="activeField.meta.limitOptions"
-                            :column="activeField"
-                            :is-required="isRequired(activeField, activeField.required)"
-                            @update:model-value="updateColMeta(activeField)"
-                          ></LazySmartsheetFormLimitOptions>
+                      <!-- Todo: Show on conditions,... -->
+                      <!-- eslint-disable vue/no-constant-condition -->
+                      <div v-if="false" class="flex items-start justify-between gap-3">
+                        <div>
+                          <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                          <div class="text-gray-500 mt-2">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                         </div>
+                        <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
+                      </div>
+
+                      <!-- Limit options -->
+                      <div v-if="isSelectTypeCol(activeField.uidt)" class="flex items-start justify-between gap-3">
+                        <div class="flex items-center gap-3">
+                          <div class="flex-1">
+                            <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                            <div class="text-gray-500 mt-2">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                            <div v-if="activeField.meta.isLimitOption" class="mt-3">
+                              <LazySmartsheetFormLimitOptions
+                                v-model:model-value="activeField.meta.limitOptions"
+                                :column="activeField"
+                                :is-required="isRequired(activeField, activeField.required)"
+                                @update:model-value="updateColMeta(activeField)"
+                              ></LazySmartsheetFormLimitOptions>
+                            </div>
+                          </div>
+                        </div>
+                        <a-switch
+                          v-model:checked="activeField.meta.isLimitOption"
+                          v-e="['a:form-view:field:limit-options']"
+                          size="small"
+                          class="nc-form-switch-focus"
+                          @change="updateColMeta(activeField)"
+                        />
                       </div>
                     </div>
-                    <a-switch
-                      v-model:checked="activeField.meta.isLimitOption"
-                      v-e="['a:form-view:field:limit-options']"
-                      size="small"
-                      class="nc-form-switch-focus"
-                      @change="updateColMeta(activeField)"
-                    />
                   </div>
-                </div>
-              </div>
 
-              <!-- Field Appearance Settings -->
+                  <!-- Field Appearance Settings -->
 
-              <div
-                v-if="isSelectTypeCol(activeField.uidt)"
-                class="nc-form-field-appearance-settings p-4 flex flex-col gap-4 border-b border-gray-200"
-              >
-                <div class="text-base font-bold">{{ $t('general.appearance') }}</div>
-                <div class="flex flex-col gap-6">
-                  <!-- Select type field Options Layout  -->
-                  <div>
-                    <div class="text-gray-800 font-medium">Options layout</div>
-
-                    <a-radio-group
-                      :value="!!activeField.meta.isList"
-                      class="nc-form-field-layout !mt-3 max-w-[calc(100%_-_40px)]"
-                      @update:value="updateSelectFieldLayout"
-                    >
-                      <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
-                      <a-radio :value="true">{{ $t('general.list') }}</a-radio>
-                    </a-radio-group>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Form Settings -->
-            <template v-else>
-              <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
-                <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
-                  <div class="flex flex-wrap justify-between items-center gap-2">
-                    <div class="flex gap-3">
-                      <div class="text-base font-bold text-gray-900">
-                        {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
+                  <div
+                    v-if="isSelectTypeCol(activeField.uidt)"
+                    class="nc-form-field-appearance-settings p-4 flex flex-col gap-4 border-b border-gray-200"
+                  >
+                    <div class="text-base font-bold">{{ $t('general.appearance') }}</div>
+                    <div class="flex flex-col gap-6">
+                      <!-- Select type field Options Layout  -->
+                      <div>
+                        <div class="text-gray-800 font-medium">Options layout</div>
+
+                        <a-radio-group
+                          :value="!!activeField.meta.isList"
+                          class="nc-form-field-layout !mt-3 max-w-[calc(100%_-_40px)]"
+                          @update:value="updateSelectFieldLayout"
+                        >
+                          <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                          <a-radio :value="true">{{ $t('general.list') }}</a-radio>
+                        </a-radio-group>
                       </div>
-                      <NcBadge color="border-gray-200">
-                        {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
-                      </NcBadge>
                     </div>
+                  </div>
+                </div>
 
-                    <a-dropdown
-                      v-if="isUIAllowed('fieldAdd')"
-                      v-model:visible="dropdownStates.showAddColumn"
-                      :trigger="['click']"
-                      overlay-class-name="nc-dropdown-form-add-column"
-                    >
-                      <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
-                        <div class="flex gap-2 items-center">
-                          <component :is="iconMap.plus" class="w-4 h-4" />
-                          <span> {{ $t('activity.addFieldFromFormView') }} </span>
+                <!-- Form Settings -->
+                <template v-else>
+                  <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
+                    <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
+                      <div class="flex flex-wrap justify-between items-center gap-2">
+                        <div class="flex gap-3">
+                          <div class="text-base font-bold text-gray-900">
+                            {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
+                          </div>
+                          <NcBadge color="border-gray-200">
+                            {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
+                          </NcBadge>
                         </div>
-                      </NcButton>
 
-                      <template #overlay>
-                        <SmartsheetColumnEditOrAddProvider
-                          v-if="dropdownStates.showAddColumn"
-                          @submit="addColumnCallback"
-                          @cancel="dropdownStates.showAddColumn = false"
-                          @click.stop
-                          @keydown.stop
-                        />
-                      </template>
-                    </a-dropdown>
-                  </div>
-                  <div>
-                    <a-input
-                      key="nc-form-field-search-input"
-                      v-model:value="searchQuery"
-                      type="text"
-                      autocomplete="off"
-                      class="!h-9 !px-3 !py-1 !rounded-lg"
-                      :placeholder="`${$t('placeholder.searchFields')}...`"
-                      name="nc-form-field-search-input"
-                      data-testid="nc-form-field-search-input"
-                    >
-                      <template #prefix>
-                        <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
-                      </template>
-                      <template #suffix>
-                        <GeneralIcon
-                          v-if="searchQuery.length > 0"
-                          icon="close"
-                          class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
-                          data-testid="nc-form-field-clear-search"
-                          @click="searchQuery = ''"
-                        />
-                      </template>
-                    </a-input>
-                  </div>
-                  <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
-                    <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
-                      {{ $t('title.noFieldsFound') }}
-                    </div>
-                    <template v-if="localColumns.length">
-                      <div
-                        key="nc-form-show-all-fields"
-                        class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
-                        data-testid="nc-form-show-all-fields"
-                        @click.stop
-                      >
-                        <div class="w-4 h-4 flex-none mx-2"></div>
-                        <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
-                          <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
-                          <div class="flex items-center px-2">
-                            <a-switch
-                              :checked="visibleColumns.length === localColumns.length"
-                              size="small"
-                              class="nc-switch"
-                              @change="handleAddOrRemoveAllColumns"
+                        <a-dropdown
+                          v-if="isUIAllowed('fieldAdd')"
+                          v-model:visible="dropdownStates.showAddColumn"
+                          :trigger="['click']"
+                          overlay-class-name="nc-dropdown-form-add-column"
+                        >
+                          <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.plus" class="w-4 h-4" />
+                              <span> {{ $t('activity.addFieldFromFormView') }} </span>
+                            </div>
+                          </NcButton>
+
+                          <template #overlay>
+                            <SmartsheetColumnEditOrAddProvider
+                              v-if="dropdownStates.showAddColumn"
+                              @submit="addColumnCallback"
+                              @cancel="dropdownStates.showAddColumn = false"
+                              @click.stop
+                              @keydown.stop
                             />
-                          </div>
-                        </div>
+                          </template>
+                        </a-dropdown>
                       </div>
-                      <Draggable
-                        :list="localColumns"
-                        item-key="id"
-                        ghost-class="nc-form-field-ghost"
-                        :style="{ height: 'calc(100% - 64px)' }"
-                        :disabled="isLocked || !isEditable"
-                        @change="onMove($event)"
-                        @start="drag = true"
-                        @end="drag = false"
-                      >
-                        <template #item="{ element: field }">
+
+                      <form autocomplete="off">
+                        <a-input
+                          key="nc-form-field-search-input"
+                          v-model:value="searchQuery"
+                          type="text"
+                          autocomplete="off"
+                          class="!h-9 !px-3 !py-1 !rounded-lg"
+                          :placeholder="`${$t('placeholder.searchFields')}...`"
+                          name="nc-form-field-search-input"
+                          data-testid="nc-form-field-search-input"
+                        >
+                          <template #prefix>
+                            <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
+                          </template>
+                          <template #suffix>
+                            <GeneralIcon
+                              v-if="searchQuery.length > 0"
+                              icon="close"
+                              class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
+                              data-testid="nc-form-field-clear-search"
+                              @click="searchQuery = ''"
+                            />
+                          </template>
+                        </a-input>
+                      </form>
+
+                      <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
+                        <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
+                          {{ $t('title.noFieldsFound') }}
+                        </div>
+                        <template v-if="localColumns.length">
                           <div
-                            v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
-                            :key="field.id"
-                            class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
-                            :class="[
-                              `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
-                              `${activeRow === field.id ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
-                            ]"
-                            :data-testid="`nc-form-field-item-${field.title}`"
+                            key="nc-form-show-all-fields"
+                            class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
+                            data-testid="nc-form-show-all-fields"
+                            @click.stop
                           >
-                            <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
-                            <div
-                              class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
-                              @click="showOrHideColumn(field, !field.show, true)"
-                            >
-                              <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
-                              <SmartsheetHeaderCellIcon v-else :column-meta="field" />
-                              <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
-                                <div class="w-full flex items-center">
-                                  <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
-                                    <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
-                                      <template #title>
-                                        <div class="text-center">
-                                          {{ field.title }}
-                                        </div>
-                                      </template>
-                                      <span data-testid="nc-field-title"> {{ field.title }} </span>
-                                    </NcTooltip>
-                                  </div>
-                                  <div v-if="field.label?.trim()" class="truncate inline-flex text-xs font-normal text-gray-700">
-                                    <span>&nbsp;(</span>
-                                    <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
-                                      <template #title>
-                                        <div class="text-center">
-                                          {{ field.label }}
-                                        </div>
-                                      </template>
-                                      <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
-                                    </NcTooltip>
-                                    <span>)</span>
+                            <div class="w-4 h-4 flex-none mx-2"></div>
+                            <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
+                              <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
+                              <div class="flex items-center px-2">
+                                <a-switch
+                                  :checked="visibleColumns.length === localColumns.length"
+                                  size="small"
+                                  class="nc-switch"
+                                  @change="handleAddOrRemoveAllColumns"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                          <Draggable
+                            :list="localColumns"
+                            item-key="id"
+                            ghost-class="nc-form-field-ghost"
+                            :style="{ height: 'calc(100% - 64px)' }"
+                            :disabled="isLocked || !isEditable"
+                            @change="onMove($event)"
+                            @start="drag = true"
+                            @end="drag = false"
+                          >
+                            <template #item="{ element: field }">
+                              <div
+                                v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
+                                :key="field.id"
+                                class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
+                                :class="[
+                                  `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
+                                  `${activeRow === field.id ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
+                                ]"
+                                :data-testid="`nc-form-field-item-${field.title}`"
+                              >
+                                <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                                <div
+                                  class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
+                                  @click="showOrHideColumn(field, !field.show, true)"
+                                >
+                                  <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                                  <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+                                  <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
+                                    <div class="w-full flex items-center">
+                                      <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
+                                        <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
+                                          <template #title>
+                                            <div class="text-center">
+                                              {{ field.title }}
+                                            </div>
+                                          </template>
+                                          <span data-testid="nc-field-title"> {{ field.title }} </span>
+                                        </NcTooltip>
+                                      </div>
+                                      <div
+                                        v-if="field.label?.trim()"
+                                        class="truncate inline-flex text-xs font-normal text-gray-700"
+                                      >
+                                        <span>&nbsp;(</span>
+                                        <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
+                                          <template #title>
+                                            <div class="text-center">
+                                              {{ field.label }}
+                                            </div>
+                                          </template>
+                                          <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
+                                        </NcTooltip>
+                                        <span>)</span>
+                                      </div>
+                                      <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
+                                        >&nbsp;*</span
+                                      >
+                                    </div>
                                   </div>
-                                  <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
-                                    >&nbsp;*</span
-                                  >
+                                  <a-switch
+                                    :checked="!!field.show"
+                                    :disabled="field.required || isLocked || !isEditable"
+                                    class="nc-switch"
+                                    size="small"
+                                  />
                                 </div>
                               </div>
-                              <a-switch
-                                :checked="!!field.show"
-                                :disabled="field.required || isLocked || !isEditable"
-                                class="nc-switch"
-                                size="small"
+                            </template>
+                            <template
+                              v-if="
+                                !localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length
+                              "
+                              #footer
+                            >
+                              <div class="px-0.5 py-2 text-gray-500 text-center">
+                                {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
+                              </div>
+                            </template>
+                          </Draggable>
+                        </template>
+                      </div>
+                    </Pane>
+                    <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
+                      <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
+                        <!-- Appearance Settings -->
+                        <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
+
+                        <div class="flex flex-col space-y-3">
+                          <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
+                            <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
+                            <div class="flex justify-start">
+                              <LazyGeneralColorPicker
+                                :model-value="(formViewData.meta as Record<string,any>).background_color"
+                                :colors="[
+                                  '#FFFFFF',
+                                  '#FFDBD9',
+                                  '#FEE6D6',
+                                  '#FFF0D1',
+                                  '#D4F7E0',
+                                  '#D7F2FF',
+                                  '#FED8F4',
+                                  '#E5D4F5',
+                                  '#FFCFE6',
+                                ]"
+                                color-box-border
+                                is-new-design
+                                class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
+                                @input="handleChangeBackground"
                               />
                             </div>
                           </div>
-                        </template>
-                        <template
-                          v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
-                          #footer
-                        >
-                          <div class="px-0.5 py-2 text-gray-500 text-center">
-                            {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
-                          </div>
-                        </template>
-                      </Draggable>
-                    </template>
-                  </div>
-                </Pane>
-                <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
-                  <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
-                    <!-- Appearance Settings -->
-                    <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
-
-                    <div class="flex flex-col space-y-3">
-                      <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
-                        <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
-                        <div class="flex justify-start">
-                          <LazyGeneralColorPicker
-                            :model-value="(formViewData.meta as Record<string,any>).background_color"
-                            :colors="[
-                              '#FFFFFF',
-                              '#FFDBD9',
-                              '#FEE6D6',
-                              '#FFF0D1',
-                              '#D4F7E0',
-                              '#D7F2FF',
-                              '#FED8F4',
-                              '#E5D4F5',
-                              '#FFCFE6',
-                            ]"
-                            color-box-border
-                            is-new-design
-                            class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
-                            @input="handleChangeBackground"
-                          />
-                        </div>
-                      </div>
 
-                      <div class="flex items-center justify-between gap-3">
-                        <!-- Hide NocoDB Branding -->
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Hide NocoDB Branding -->
 
-                        <span>{{ $t('labels.hideNocodbBranding') }}</span>
+                            <span>{{ $t('labels.hideNocodbBranding') }}</span>
 
-                        <a-switch
-                          v-if="isEeUI"
-                          v-e="[`a:form-view:hide-branding`]"
-                          :checked="parseProp(formViewData.meta)?.hide_branding"
-                          size="small"
-                          class="nc-form-hide-branding"
-                          data-testid="nc-form-hide-branding"
-                          :disabled="isLocked || !isEditable"
-                          @change="
+                            <a-switch
+                              v-if="isEeUI"
+                              v-e="[`a:form-view:hide-branding`]"
+                              :checked="parseProp(formViewData.meta)?.hide_branding"
+                              size="small"
+                              class="nc-form-hide-branding"
+                              data-testid="nc-form-hide-branding"
+                              :disabled="isLocked || !isEditable"
+                              @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1682,28 +1696,28 @@ useEventListener(
                         updateView()
                       }
                     "
-                        />
+                            />
 
-                        <NcTooltip v-else placement="top">
-                          <template #title>
-                            <div class="text-center">
-                              {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                            </div>
-                          </template>
-                          <a-switch :checked="false" size="small" :disabled="true" />
-                        </NcTooltip>
-                      </div>
-                      <div class="flex items-center justify-between gap-3">
-                        <!-- Hide Banner -->
-                        <span>{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
-                        <a-switch
-                          v-e="[`a:form-view:hide-banner`]"
-                          :checked="parseProp(formViewData.meta)?.hide_banner"
-                          size="small"
-                          class="nc-form-hide-banner"
-                          data-testid="nc-form-hide-banner"
-                          :disabled="isLocked || !isEditable"
-                          @change="
+                            <NcTooltip v-else placement="top">
+                              <template #title>
+                                <div class="text-center">
+                                  {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                                </div>
+                              </template>
+                              <a-switch :checked="false" size="small" :disabled="true" />
+                            </NcTooltip>
+                          </div>
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Hide Banner -->
+                            <span>{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
+                            <a-switch
+                              v-e="[`a:form-view:hide-banner`]"
+                              :checked="parseProp(formViewData.meta)?.hide_banner"
+                              size="small"
+                              class="nc-form-hide-banner"
+                              data-testid="nc-form-hide-banner"
+                              :disabled="isLocked || !isEditable"
+                              @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1711,92 +1725,94 @@ useEventListener(
                         updateView()
                       }
                     "
-                        />
+                            />
+                          </div>
+                        </div>
                       </div>
-                    </div>
-                  </div>
 
-                  <div class="p-4 flex flex-col space-y-4">
-                    <!-- Post Form Submission Settings -->
-                    <div class="text-base font-bold text-gray-900">
-                      {{ $t('msg.info.postFormSubmissionSettings') }}
-                    </div>
+                      <div class="p-4 flex flex-col space-y-4">
+                        <!-- Post Form Submission Settings -->
+                        <div class="text-base font-bold text-gray-900">
+                          {{ $t('msg.info.postFormSubmissionSettings') }}
+                        </div>
 
-                    <div class="flex flex-col gap-3">
-                      <div class="flex items-center justify-between gap-3">
-                        <!-- Show "Submit Another Form" button -->
-                        <span>{{ $t('msg.info.submitAnotherForm') }}</span>
-                        <a-switch
-                          v-model:checked="formViewData.submit_another_form"
-                          v-e="[`a:form-view:submit-another-form`]"
-                          size="small"
-                          class="nc-form-checkbox-submit-another-form"
-                          data-testid="nc-form-checkbox-submit-another-form"
-                          :disabled="isLocked || !isEditable"
-                          @change="updateView"
-                        />
-                      </div>
+                        <div class="flex flex-col gap-3">
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Show "Submit Another Form" button -->
+                            <span>{{ $t('msg.info.submitAnotherForm') }}</span>
+                            <a-switch
+                              v-model:checked="formViewData.submit_another_form"
+                              v-e="[`a:form-view:submit-another-form`]"
+                              size="small"
+                              class="nc-form-checkbox-submit-another-form"
+                              data-testid="nc-form-checkbox-submit-another-form"
+                              :disabled="isLocked || !isEditable"
+                              @change="updateView"
+                            />
+                          </div>
 
-                      <div class="flex items-center justify-between gap-3">
-                        <!-- Show a blank form after 5 seconds -->
-                        <span>{{ $t('msg.info.showBlankForm') }}</span>
-                        <a-switch
-                          v-model:checked="formViewData.show_blank_form"
-                          v-e="[`a:form-view:show-blank-form`]"
-                          size="small"
-                          class="nc-form-checkbox-show-blank-form"
-                          data-testid="nc-form-checkbox-show-blank-form"
-                          :disabled="isLocked || !isEditable"
-                          @change="updateView"
-                        />
-                      </div>
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Show a blank form after 5 seconds -->
+                            <span>{{ $t('msg.info.showBlankForm') }}</span>
+                            <a-switch
+                              v-model:checked="formViewData.show_blank_form"
+                              v-e="[`a:form-view:show-blank-form`]"
+                              size="small"
+                              class="nc-form-checkbox-show-blank-form"
+                              data-testid="nc-form-checkbox-show-blank-form"
+                              :disabled="isLocked || !isEditable"
+                              @change="updateView"
+                            />
+                          </div>
 
-                      <div class="flex items-center justify-between gap-3">
-                        <!-- Email me at <email> -->
-                        <span>
-                          {{ $t('msg.info.emailForm') }}
-                          <span class="text-bold text-gray-600">{{ user?.email }}</span>
-                        </span>
-                        <a-switch
-                          v-model:checked="emailMe"
-                          v-e="[`a:form-view:email-me`]"
-                          size="small"
-                          class="nc-form-checkbox-send-email"
-                          data-testid="nc-form-checkbox-send-email"
-                          :disabled="isLocked || !isEditable"
-                          @change="onEmailChange"
-                        />
-                      </div>
-                    </div>
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Email me at <email> -->
+                            <span>
+                              {{ $t('msg.info.emailForm') }}
+                              <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                            </span>
+                            <a-switch
+                              v-model:checked="emailMe"
+                              v-e="[`a:form-view:email-me`]"
+                              size="small"
+                              class="nc-form-checkbox-send-email"
+                              data-testid="nc-form-checkbox-send-email"
+                              :disabled="isLocked || !isEditable"
+                              @change="onEmailChange"
+                            />
+                          </div>
+                        </div>
 
-                    <!-- Show this message -->
-                    <div class="pb-10">
-                      <div class="text-gray-800 mb-2">
-                        {{ $t('msg.info.formDisplayMessage') }}
+                        <!-- Show this message -->
+                        <div class="pb-10">
+                          <div class="text-gray-800 mb-2">
+                            {{ $t('msg.info.formDisplayMessage') }}
+                          </div>
+                          <a-form-item class="!my-0">
+                            <LazyCellRichText
+                              v-if="!isLocked && isEditable"
+                              v-model:value="formViewData.success_msg"
+                              class="nc-form-after-submit-msg"
+                              is-form-field
+                              :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
+                              data-testid="nc-form-after-submit-msg"
+                              @update:value="updateView" />
+                            <LazyCellRichText
+                              v-else
+                              :value="formViewData.success_msg"
+                              class="nc-form-after-submit-msg"
+                              is-form-field
+                              read-only
+                              data-testid="nc-form-after-submit-msg"
+                          /></a-form-item>
+                        </div>
                       </div>
-                      <a-form-item class="!my-0">
-                        <LazyCellRichText
-                          v-if="!isLocked && isEditable"
-                          v-model:value="formViewData.success_msg"
-                          class="nc-form-after-submit-msg"
-                          is-form-field
-                          :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
-                          data-testid="nc-form-after-submit-msg"
-                          @update:value="updateView" />
-                        <LazyCellRichText
-                          v-else
-                          :value="formViewData.success_msg"
-                          class="nc-form-after-submit-msg"
-                          is-form-field
-                          read-only
-                          data-testid="nc-form-after-submit-msg"
-                      /></a-form-item>
-                    </div>
-                  </div>
-                </Pane>
-              </Splitpanes>
+                    </Pane>
+                  </Splitpanes>
+                </template>
+              </div>
             </template>
-          </div>
+          </SmartsheetFormLayout>
         </template>
       </div>
     </template>
diff --git a/packages/nc-gui/components/smartsheet/form/Layout.vue b/packages/nc-gui/components/smartsheet/form/Layout.vue
new file mode 100644
index 000000000000..f8a40bc0e2cb
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/form/Layout.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { Pane, Splitpanes } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+
+const { leftSidebarWidth, windowSize, formRightSidebarState, formRightSidebarWidthPercent } = storeToRefs(useSidebarStore())
+
+const formPreviewSize = computed(() => 100 - formRightSidebarWidthPercent.value)
+
+function onResize(widthPercent: any) {
+  const sidebarWidth = (widthPercent * (windowSize.value - leftSidebarWidth.value)) / 100
+
+  if (sidebarWidth > formRightSidebarState.value.maxWidth) {
+    formRightSidebarState.value.width = formRightSidebarState.value.maxWidth
+  } else if (sidebarWidth < formRightSidebarState.value.minWidth) {
+    formRightSidebarState.value.width = formRightSidebarState.value.minWidth
+  } else {
+    formRightSidebarState.value.width = sidebarWidth
+  }
+
+  return
+}
+
+const normalizeSidebardWidth = computed(() => {
+  if (formRightSidebarState.value.width > formRightSidebarState.value.maxWidth) {
+    return formRightSidebarState.value.maxWidth
+  } else if (formRightSidebarState.value.width < formRightSidebarState.value.minWidth) {
+    return formRightSidebarState.value.minWidth
+  } else {
+    return formRightSidebarState.value.width
+  }
+})
+</script>
+
+<template>
+  <Splitpanes
+    class="nc-form-right-sidebar-content-resizable-wrapper w-full h-full"
+    @resize="(event: any) => onResize(event[1].size)"
+  >
+    <Pane :size="formPreviewSize" class="flex-1 h-full">
+      <slot name="preview" />
+    </Pane>
+    <Pane
+      min-size="15%"
+      class="nc-sidebar-splitpane relative"
+      :size="formRightSidebarWidthPercent"
+      :style="{
+        minWidth: `${formRightSidebarState.minWidth}px !important`,
+        maxWidth: `${normalizeSidebardWidth}px !important`,
+      }"
+    >
+      <slot name="sidebar" />
+    </Pane>
+  </Splitpanes>
+</template>
+
+<style lang="scss">
+/** Split pane CSS */
+
+.nc-form-right-sidebar-content-resizable-wrapper > {
+  .splitpanes__splitter {
+    @apply !w-0 relative overflow-visible;
+  }
+  .splitpanes__splitter:before {
+    @apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40;
+    content: '';
+  }
+
+  .splitpanes__splitter:hover:before {
+    @apply bg-scrollbar;
+    width: 3px !important;
+    left: 0px;
+  }
+
+  .splitpanes--dragging .splitpanes__splitter:before {
+    @apply bg-scrollbar;
+    width: 3px !important;
+    left: 0px;
+  }
+
+  .splitpanes--dragging .splitpanes__splitter {
+    @apply w-1 mr-0;
+  }
+}
+
+.splitpanes__pane {
+  transition: width 0.15s ease-in-out !important;
+}
+
+.splitpanes--dragging {
+  cursor: col-resize;
+
+  > .splitpanes__pane {
+    transition: none !important;
+  }
+}
+</style>
diff --git a/packages/nc-gui/store/sidebar.ts b/packages/nc-gui/store/sidebar.ts
index 7f0e5ee2bd2d..2c6abd0f9a01 100644
--- a/packages/nc-gui/store/sidebar.ts
+++ b/packages/nc-gui/store/sidebar.ts
@@ -52,6 +52,16 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
 
   const nonHiddenLeftSidebarWidth = computed(() => (width.value * nonHiddenMobileSidebarSize.value) / 100)
 
+  const formRightSidebarState = ref({
+    minWidth: 384,
+    maxWidth: 600,
+    width: 384,
+  })
+
+  const formRightSidebarWidthPercent = computed(() => {
+    return (formRightSidebarState.value.width / (width.value - leftSidebarWidth.value)) * 100
+  })
+
   return {
     isLeftSidebarOpen,
     isRightSidebarOpen,
@@ -61,6 +71,9 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
     leftSidebarWidth,
     mobileNormalizedSidebarSize,
     nonHiddenLeftSidebarWidth,
+    windowSize: width,
+    formRightSidebarState,
+    formRightSidebarWidthPercent,
   }
 })
 

From 7e3b01cb5277f3746e7dc538eb59e2c7c20dd39f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 34/36] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/form/Layout.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/form/Layout.vue b/packages/nc-gui/components/smartsheet/form/Layout.vue
index f8a40bc0e2cb..1d79a71363a1 100644
--- a/packages/nc-gui/components/smartsheet/form/Layout.vue
+++ b/packages/nc-gui/components/smartsheet/form/Layout.vue
@@ -16,8 +16,6 @@ function onResize(widthPercent: any) {
   } else {
     formRightSidebarState.value.width = sidebarWidth
   }
-
-  return
 }
 
 const normalizeSidebardWidth = computed(() => {

From e639cfe31240edfa53b75008d221956f02b2306e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:53 +0000
Subject: [PATCH 35/36] fix(nc-gui): typo mistake

---
 packages/nc-gui/components/cell/RichText.vue          | 3 +--
 packages/nc-gui/components/smartsheet/form/Layout.vue | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index d6a160679d5b..cf559df541c6 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -218,8 +218,7 @@ useEventListener(
   'focusout',
   (e: FocusEvent) => {
     if (
-      ((e?.target as HTMLElement)?.classList?.contains('tiptap') &&
-        (e?.relatedTarget as HTMLElement)?.classList?.contains('tiptap')) ||
+      (e?.relatedTarget as HTMLElement)?.classList?.contains('tiptap') ||
       !(e?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')
     ) {
       isFocused.value = false
diff --git a/packages/nc-gui/components/smartsheet/form/Layout.vue b/packages/nc-gui/components/smartsheet/form/Layout.vue
index 1d79a71363a1..4f521543b907 100644
--- a/packages/nc-gui/components/smartsheet/form/Layout.vue
+++ b/packages/nc-gui/components/smartsheet/form/Layout.vue
@@ -18,7 +18,7 @@ function onResize(widthPercent: any) {
   }
 }
 
-const normalizeSidebardWidth = computed(() => {
+const normalizeSidebarWidth = computed(() => {
   if (formRightSidebarState.value.width > formRightSidebarState.value.maxWidth) {
     return formRightSidebarState.value.maxWidth
   } else if (formRightSidebarState.value.width < formRightSidebarState.value.minWidth) {
@@ -43,7 +43,7 @@ const normalizeSidebardWidth = computed(() => {
       :size="formRightSidebarWidthPercent"
       :style="{
         minWidth: `${formRightSidebarState.minWidth}px !important`,
-        maxWidth: `${normalizeSidebardWidth}px !important`,
+        maxWidth: `${normalizeSidebarWidth}px !important`,
       }"
     >
       <slot name="sidebar" />

From f297f7013f4da24448fd7d7d222d5ebcaf8cad8f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 08:17:54 +0000
Subject: [PATCH 36/36] fix(nc-gui): PR review changes

---
 packages/nc-gui/components/cell/RichText.vue    |  6 ++----
 .../cell/RichText/SelectedBubbleMenu.vue        | 17 +++++++----------
 .../smartsheet/header/DeleteColumnModal.vue     |  4 +---
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index cf559df541c6..4bc2c87660ad 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -217,10 +217,8 @@ useEventListener(
   editorDom,
   'focusout',
   (e: FocusEvent) => {
-    if (
-      (e?.relatedTarget as HTMLElement)?.classList?.contains('tiptap') ||
-      !(e?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')
-    ) {
+    const targetEl = e?.relatedTarget as HTMLElement
+    if (targetEl?.classList?.contains('tiptap') || !targetEl?.closest('.bubble-menu, .nc-textarea-rich-editor')) {
       isFocused.value = false
     }
   },
diff --git a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
index 19389c90b545..7d48b3b47227 100644
--- a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
+++ b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
@@ -96,22 +96,19 @@ const isOptionVisible = (option: RichTextBubbleMenuOptions) => {
 }
 
 const showDivider = (options: RichTextBubbleMenuOptions[]) => {
-  return isFormField.value ? options.some((o) => !hiddenOptions.value.includes(o)) : true
+  return !isFormField.value || options.some((o) => !hiddenOptions.value.includes(o))
 }
 </script>
 
 <template>
   <div
     class="bubble-menu flex-row gap-x-1 rounded-lg"
-    :class="[
-      isFormField ? 'py-0' : 'py-1',
-      {
-        'nc-form-field-bubble-menu inline-flex': isFormField,
-        'flex bg-gray-100 px-1': !isFormField,
-        'embed-mode': embedMode,
-        'full-mode': !embedMode,
-      },
-    ]"
+    :class="{
+      'nc-form-field-bubble-menu inline-flex py-0': isFormField,
+      'flex bg-gray-100 px-1 py-1': !isFormField,
+      'embed-mode': embedMode,
+      'full-mode': !embedMode,
+    }"
   >
     <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
diff --git a/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue b/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
index 23a72ba876e8..4cfcd7517f8b 100644
--- a/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
+++ b/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
@@ -48,9 +48,7 @@ const onDelete = async () => {
     $e('a:column:delete')
     visible.value = false
 
-    if (typeof props.onDeleteColumn === 'function') {
-      props.onDeleteColumn()
-    }
+    props.onDeleteColumn?.()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {