feat: enhance MongoDB document handling with improved normalization, mutation payload building, and UI updates

Author: JulianFun123

packages/backend/src/datasources/mongodb/index.ts

@@ -7,7 +7,7 @@ export const mongodbDataSourceModule = {
     type: 'mongodb',
     kind: 'resource',
     label: 'MongoDB',
-    icon: 'database',
+    icon: 'brand-mongodb',
     capabilities: {
       sqlQuery: false,
       tableBrowser: false,

packages/backend/src/datasources/postgres/index.ts

@@ -25,7 +25,7 @@ export const postgresDataSourceModule = {
     type: 'postgres',
     kind: 'sql',
     label: 'Postgres',
-    icon: 'brand-postgresql',
+    icon: 'database',
     capabilities: {
       sqlQuery: true,
       tableBrowser: true,

packages/frontend/src/assets/base.css

@@ -111,7 +111,13 @@
 .sidenav-elements{
   background-color: var(--app-bg);
 }
-.electron-mac .app-bg-no-mac,
+.electron-mac .app-bg-no-mac {
+  background-color: transparent;
+}
+
 .electron-mac .sidenav-elements {
+  background-color: #FFFFFF88;
+}
+.dark.electron-mac .sidenav-elements {
   background-color: transparent;
 }

packages/frontend/src/components/common/DataExportButton.vue

@@ -3,13 +3,23 @@ import { computed } from 'vue'
 import SplitButton from 'primevue/splitbutton'
 import { triggerDataExport, type DataExportFormat } from '@/services/data-export'
 
-const props = defineProps<{
-  fileBaseName: string
-  columns: string[]
-  rows: Record<string, unknown>[]
-  tableName?: string
-  disabled?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    fileBaseName: string
+    columns: string[]
+    rows: Record<string, unknown>[]
+    tableName?: string
+    disabled?: boolean
+    smaller?: boolean
+    severity?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger'
+    label?: string
+  }>(),
+  {
+    label: 'Export',
+    severity: 'secondary',
+    smaller: true,
+  },
+)
 
 const exportFormats = [
   { label: 'CSV', format: 'csv' },
@@ -44,11 +54,25 @@ function exportAs(format: DataExportFormat) {
 
 <template>
   <SplitButton
-    label="Export"
+    :label="props.label"
     icon="ti ti-download"
     size="small"
-    severity="secondary"
+    :severity="props.severity"
     outlined
+    :pt="
+      props.smaller
+        ? {
+            pcButton: {
+              root: 'pl-2 pr-3 py-1 text-sm',
+            },
+            pcDropdown: {
+              root: 'p-0',
+              dropdownicon: 'size-1',
+              menubuttonicon: 'size-1',
+            },
+          }
+        : {}
+    "
     :disabled="!canExport"
     :model="exportItems"
     @click="exportAs('csv')"

packages/frontend/src/components/datasources/mongodb/MongoDbDocumentViewer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useTemplateRef, watch } from 'vue'
+import { computed } from 'vue'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import JsonEditor from '@/components/editors/JsonEditor.vue'
@@ -13,41 +13,27 @@ const props = withDefaults(
     mode: 'new' | 'selected'
     selectedLabel?: string | null
     canWrite?: boolean
-    canSave?: boolean
     canDelete?: boolean
     loading?: boolean
+    errorMessage?: string | null
   }>(),
   {
     selectedLabel: null,
     canWrite: false,
-    canSave: false,
     canDelete: false,
     loading: false,
+    errorMessage: null,
   },
 )
 
 const emit = defineEmits<{
-  save: []
   reset: []
-  createNew: []
   deleteDocument: []
 }>()
 
 const headerLabel = computed(() =>
   props.mode === 'new' ? 'New document' : props.selectedLabel || 'Selected document',
 )
-
-const jsonEditor = useTemplateRef<InstanceType<typeof JsonEditor>>('jsonEditor')
-
-watch(
-  () => props.mode,
-  () => {
-    requestAnimationFrame(() => {
-      jsonEditor.value?.focusEditor()
-    })
-  },
-  { immediate: true },
-)
 </script>
 
 <template>
@@ -59,14 +45,6 @@ watch(
       </div>
 
       <div class="flex items-center gap-1">
-        <Button
-          icon="ti ti-plus"
-          label="New"
-          text
-          severity="secondary"
-          size="small"
-          @click="emit('createNew')"
-        />
         <Button
           icon="ti ti-restore"
           label="Reset"
@@ -85,31 +63,23 @@ watch(
           :disabled="!canWrite || !canDelete || loading"
           @click="emit('deleteDocument')"
         />
-        <Button
-          icon="ti ti-device-floppy"
-          label="Save"
-          size="small"
-          :disabled="!canWrite || !canSave || loading"
-          :loading="loading"
-          @click="emit('save')"
-        />
       </div>
     </div>
 
     <div class="min-h-0 flex-1 overflow-hidden">
       <Message v-if="!canWrite" severity="warn" class="m-3 mb-0">
         This account can browse MongoDB documents but cannot create, edit or delete them.
       </Message>
+      <Message v-else-if="errorMessage" severity="error" class="m-3 mb-0">
+        {{ errorMessage }}
+      </Message>
 
       <JsonEditor
-        ref="jsonEditor"
         v-model="documentJson"
         class="h-full"
         height="100%"
         min-height="100%"
-        :autofocus="true"
         placeholder="{\n}"
-        @submit="emit('save')"
       />
     </div>
   </div>

packages/frontend/src/components/datasources/mongodb/MongoDbResultsTable.vue

@@ -3,7 +3,11 @@ import { ref, useTemplateRef, watch } from 'vue'
 import Message from 'primevue/message'
 import LogoLoadingSpinner from '@/components/LogoLoadingSpinner.vue'
 import ExtendedDataTable from '@/components/table/ExtendedDataTable.vue'
-import { buildMongoDbResultTable } from '@/datasources/mongodb/browser'
+import {
+  buildMongoDbResultTable,
+  buildMongoDocumentFromRow,
+  createMongoDraftRow,
+} from '@/datasources/mongodb/browser'
 import type { MongoDbQueryResult } from '@/types/datasources'
 import type { SQLTableColumn, SQLTableRowDraft } from '@/types/sql'
 
@@ -55,6 +59,41 @@ watch(
 )
 
 defineExpose({
+  addRow: () => {
+    const row = createMongoDraftRow(columns.value)
+    rows.value.push(row)
+    const nextIndex = rows.value.length - 1
+    focusedRowIndex.value = nextIndex
+    requestAnimationFrame(() => {
+      extendedDataTable.value?.focusRow?.(nextIndex)
+    })
+    return nextIndex
+  },
+  duplicateSelectedRows: () => {
+    const selectedRows =
+      (extendedDataTable.value?.getSelectedRowIndexes?.() ?? [])
+        .map((index: number) => rows.value[index])
+        .filter((row: SQLTableRowDraft | undefined): row is SQLTableRowDraft => !!row && row.state !== 'deleted')
+
+    if (!selectedRows.length) {
+      return null
+    }
+
+    const duplicates = selectedRows.map((row: SQLTableRowDraft) => {
+      const document = buildMongoDocumentFromRow(row, columns.value) ?? {}
+      delete document._id
+      return createMongoDraftRow(columns.value, document)
+    })
+
+    rows.value.push(...duplicates)
+    const nextIndex = rows.value.length - duplicates.length
+    focusedRowIndex.value = nextIndex
+    requestAnimationFrame(() => {
+      extendedDataTable.value?.focusRow?.(nextIndex)
+    })
+    return nextIndex
+  },
+  deleteSelectedRows: () => extendedDataTable.value?.deleteSelectedRows?.(),
   getSelectedRows: () => {
     const indexes = extendedDataTable.value?.getSelectedRowIndexes?.() ?? []
     return indexes
@@ -84,7 +123,7 @@ defineExpose({
       v-model:columns="columns"
       v-model:rows="rows"
       v-model:focused-row-index="focusedRowIndex"
-      :can-edit="false"
+      :can-edit="true"
       class="h-full"
     />
 

packages/frontend/src/components/sidebar/CreateDataSourceDialog.vue

@@ -37,7 +37,9 @@ const type = ref<DataSourceType>('mysql')
 const config = ref<Record<string, unknown>>({})
 const redactedSecretFields = ref<string[]>([])
 const definitions = computed(() => listRegisteredDataSourceDefinitions(workspaceStore.serverInfo))
-const availableTypes = computed<DataSourceType[]>(() => definitions.value.map((definition) => definition.type))
+const availableTypes = computed<DataSourceType[]>(() =>
+  definitions.value.map((definition) => definition.type),
+)
 const isEditing = computed(() => Boolean(props.source))
 const typeOptions = computed(() =>
   definitions.value.map((definition) => ({
@@ -49,19 +51,20 @@ const currentDefinition = computed<RegisteredDataSourceDefinition | null>(
   () => definitions.value.find((definition) => definition.type === type.value) ?? null,
 )
 const currentFormComponent = computed(() => currentDefinition.value?.formComponent ?? null)
-const currentFormProps = computed(() =>
-  currentDefinition.value?.getFormProps?.({
-    definition: currentDefinition.value,
-    redactedSecretFields: redactedSecretFields.value,
-    source: props.source,
-  }) ?? {},
+const currentFormProps = computed(
+  () =>
+    currentDefinition.value?.getFormProps?.({
+      definition: currentDefinition.value,
+      redactedSecretFields: redactedSecretFields.value,
+      source: props.source,
+    }) ?? {},
 )
 
 watch(
   () => visible.value,
   (nextVisible) => {
     if (!nextVisible) return
-    const initialType = props.source?.type ?? (availableTypes.value[0] ?? 'mysql')
+    const initialType = props.source?.type ?? availableTypes.value[0] ?? 'mysql'
     const state = createDataSourceFormState(initialType, props.source)
     name.value = state.name
     type.value = state.type
@@ -106,7 +109,12 @@ const canSubmit = computed(() =>
 </script>
 
 <template>
-  <Dialog v-model:visible="visible" modal :header="isEditing ? 'Edit Datasource' : 'Add Datasource'" :style="{ width: '36rem' }">
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="isEditing ? 'Edit Datasource' : 'Add Datasource'"
+    :style="{ width: '36rem' }"
+  >
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <label class="text-sm opacity-70">Datasource name</label>
@@ -115,7 +123,27 @@ const canSubmit = computed(() =>
 
       <div class="flex flex-col gap-2">
         <label class="text-sm opacity-70">Type</label>
-        <Select size="small" v-model="type" :options="typeOptions" option-label="label" option-value="value" fluid />
+        <Select
+          size="small"
+          v-model="type"
+          :options="typeOptions"
+          option-label="label"
+          option-value="value"
+          fluid
+        >
+          <template #value>
+            <span class="flex gap-2 items-center">
+              <i :class="`ti ti-${definitions.find((s) => s.type === type)?.icon}`" />
+              <span>{{ definitions.find((s) => s.type === type)?.label || '-' }}</span>
+            </span>
+          </template>
+          <template #option="props">
+            <span class="flex gap-2 items-center text-sm">
+              <i :class="`ti ti-${definitions.find((s) => s.type === props.option.value)?.icon}`" />
+              <span>{{ props.option.label }}</span>
+            </span>
+          </template>
+        </Select>
       </div>
 
       <Component
@@ -125,12 +153,16 @@ const canSubmit = computed(() =>
         v-bind="currentFormProps"
       />
 
-      <div v-if="currentDefinition" class="rounded-xl border app-border px-3 py-2 text-xs opacity-65">
+      <div
+        v-if="currentDefinition"
+        class="rounded-xl border app-border px-3 py-2 text-xs opacity-65"
+      >
         {{ currentDefinition.capabilities.sqlQuery ? 'SQL datasource' : 'Resource datasource' }}
       </div>
 
       <div class="flex justify-end">
-        <Button size="small"
+        <Button
+          size="small"
           :label="isEditing ? 'Save datasource' : 'Create datasource'"
           :icon="isEditing ? 'ti ti-device-floppy' : 'ti ti-database-plus'"
           :disabled="!canSubmit"

packages/frontend/src/components/sidebar/SidebarResourceSource.vue

@@ -44,6 +44,7 @@ const sourceDefinition = computed(() =>
 )
 const sourceIcon = computed(() => sourceDefinition.value.icon)
 const defaultBrowserPath = computed(() => {
+  console.log(sourceDefinition.value)
   if (props.source.type === 'mongodb') {
     const database = props.source.config?.database
     return typeof database === 'string' && database.trim()