feat: add showNull to global state to control indicator

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -10,6 +10,8 @@ const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue', 'save'])
 
+const { showNull } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
@@ -81,7 +83,7 @@ onMounted(() => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
   <span v-else-if="vModel">{{ currency }}</span>
 

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

@@ -22,6 +22,8 @@ const { modelValue, isPk } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { showNull } = useGlobal()
+
 const columnMeta = inject(ColumnInj, null)!
 
 const readOnly = inject(ReadonlyInj, ref(false))
@@ -71,7 +73,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
+const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -169,7 +171,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     v-model:value="localState"
     :bordered="false"
     class="!w-full !px-0 !border-none"
-    :class="{ 'nc-null': modelValue === null }"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"

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

@@ -25,6 +25,8 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
+const { showNull } = useGlobal()
+
 const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
@@ -79,7 +81,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
+const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -174,7 +176,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :show-time="true"
     :bordered="false"
     class="!w-full !px-0 !border-none"
-    :class="{ 'nc-null': modelValue === null }"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :format="dateTimeFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"

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

@@ -14,6 +14,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj)
 
 const _vModel = useVModel(props, 'modelValue', emits)
@@ -49,7 +51,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 

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

@@ -19,6 +19,8 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { showNull } = useGlobal()
+
 const column = inject(ColumnInj)
 
 const editEnabled = inject(EditModeInj)
@@ -93,7 +95,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       @mousedown.stop
     />
 
-    <span v-else-if="localState === null" class="nc-null">NULL</span>
+    <span v-else-if="modelValue === null && showNull" class="nc-null">NULL</span>
 
     <span v-else> {{ localState }}</span>
 

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

@@ -14,6 +14,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
@@ -39,7 +41,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}

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

@@ -14,6 +14,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj)
 
 const _vModel = useVModel(props, 'modelValue', emits)
@@ -49,7 +51,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 

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

@@ -14,6 +14,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj)
 
 const _vModel = useVModel(props, 'modelValue', emits)
@@ -53,7 +55,7 @@ function onKeyDown(evt: KeyboardEvent) {
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 

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

@@ -25,6 +25,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
@@ -154,7 +156,7 @@ useSelectedCellKeyupListener(active, (e) => {
       </span>
     </div>
 
-    <span v-else-if="vModel === null" class="nc-null">NULL</span>
+    <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
     <span v-else>{{ vModel }}</span>
   </component>

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

@@ -10,6 +10,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj)
 
 const _vModel = useVModel(props, 'modelValue', emits)
@@ -47,6 +49,6 @@ const focus: VNodeRef = (el) => {
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
   <span v-else>{{ vModel }}</span>
 </template>

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

@@ -10,6 +10,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
+const { showNull } = useGlobal()
+
 const editEnabled = inject(EditModeInj)
 
 const readonly = inject(ReadonlyInj, ref(false))
@@ -38,7 +40,7 @@ const focus: VNodeRef = (el) => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
   <LazyCellClampedText v-else :value="vModel" :lines="1" />
 </template>

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

@@ -11,6 +11,8 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
+const { showNull } = useGlobal()
+
 const view = inject(ActiveViewInj, ref())
 
 const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
@@ -55,7 +57,7 @@ const rowHeight = computed(() => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
   <LazyCellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
 

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

@@ -13,6 +13,8 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
+const { showNull } = useGlobal()
+
 const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
@@ -72,7 +74,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null ? 'NULL' : isTimeInvalid ? 'Invalid time' : ''))
+const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isTimeInvalid ? 'Invalid time' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -99,7 +101,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     use12-hours
     format="HH:mm"
     class="!w-full !px-0 !border-none"
-    :class="{ 'nc-null': modelValue === null }"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"

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

@@ -24,6 +24,8 @@ const emit = defineEmits(['update:modelValue'])
 
 const { t } = useI18n()
 
+const { showNull } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
@@ -88,7 +90,7 @@ watch(
       @mousedown.stop
     />
 
-    <span v-else-if="vModel === null" class="nc-null">NULL</span>
+    <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"

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

@@ -11,6 +11,8 @@ const { modelValue, isPk = false } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { showNull } = useGlobal()
+
 const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
@@ -58,7 +60,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null ? 'NULL' : isYearInvalid ? 'Invalid year' : ''))
+const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isYearInvalid ? 'Invalid year' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -82,7 +84,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     picker="year"
     :bordered="false"
     class="!w-full !px-0 !border-none"
-    :class="{ 'nc-null': modelValue === null }"
+    :class="{ 'nc-null': modelValue === null && showNull }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"

packages/nc-gui/components/dashboard/settings/Misc.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGlobal, useProject, watch } from '#imports'
 
-const { includeM2M } = useGlobal()
+const { includeM2M, showNull } = useGlobal()
 const { loadTables } = useProject()
 
 watch(includeM2M, async () => await loadTables())
@@ -16,6 +16,10 @@ watch(includeM2M, async () => await loadTables())
           {{ $t('msg.info.showM2mTables') }}
         </a-checkbox>
       </div>
+      <div class="flex flex-row items-center w-full mb-4 gap-2">
+        <!--        Show NULL -->
+        <a-checkbox v-model:checked="showNull" v-e="['c:themes:show-null']" class="nc-settings-meta-misc">Show NULL</a-checkbox>
+      </div>
     </div>
   </div>
 </template>

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -109,9 +109,9 @@ const tabsInfo: TabGroup = {
       $e('c:settings:audit')
     },
   },
-  projectSettings: {
-    // Project Settings
-    title: 'Project Settings',
+  misc: {
+    // Misc
+    title: 'Misc',
     icon: FolderCog,
     subTabs: {
       misc: {

packages/nc-gui/composables/useGlobal/state.ts

@@ -62,6 +62,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     filterAutoSave: true,
     previewAs: null,
     includeM2M: false,
+    showNull: false,
     currentVersion: null,
     latestRelease: null,
     hiddenRelease: null,

packages/nc-gui/composables/useGlobal/types.ts

@@ -28,6 +28,7 @@ export interface StoredState {
   filterAutoSave: boolean
   previewAs: ProjectRole | null
   includeM2M: boolean
+  showNull: boolean
   currentVersion: string | null
   latestRelease: string | null
   hiddenRelease: string | null

tests/playwright/pages/Dashboard/Settings/index.ts

@@ -9,7 +9,7 @@ export enum SettingTab {
   TeamAuth = 'teamAndAuth',
   DataSources = 'dataSources',
   Audit = 'audit',
-  ProjectSettings = 'projectSettings',
+  Misc = 'misc',
 }
 
 export enum SettingsSubTab {