Deleting a column on google spreadsheet messes with the data

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -12,6 +12,7 @@
     OptionSelectDnD,
     Layout,
     AbsTooltip,
+    ProgressCircle,
   } from "@budibase/bbui"
   import { SWITCHABLE_TYPES, ValidColumnNameRegex } from "@budibase/shared-core"
   import { createEventDispatcher, getContext, onMount } from "svelte"
@@ -245,11 +246,11 @@
   }
 
   async function saveColumn() {
-    savingColumn = true
     if (errors?.length) {
       return
     }
 
+    savingColumn = true
     let saveColumn = cloneDeep(editableColumn)
 
     delete saveColumn.fieldId
@@ -289,6 +290,8 @@
       }
     } catch (err) {
       notifications.error(`Error saving column: ${err.message}`)
+    } finally {
+      savingColumn = false
     }
   }
 
@@ -739,7 +742,20 @@
     <Button quiet warning text on:click={confirmDelete}>Delete</Button>
   {/if}
   <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
-  <Button disabled={invalid} newStyles cta on:click={saveColumn}>Save</Button>
+  <Button
+    disabled={invalid || savingColumn}
+    newStyles
+    cta
+    on:click={saveColumn}
+  >
+    {#if savingColumn}
+      <div class="save-loading">
+        <ProgressCircle overBackground={true} size="S" />
+      </div>
+    {:else}
+      Save
+    {/if}
+  </Button>
 </div>
 <Modal bind:this={jsonSchemaModal}>
   <JSONSchemaModal
@@ -804,4 +820,9 @@
     cursor: pointer;
     color: var(--spectrum-global-color-gray-900);
   }
+
+  .save-loading {
+    display: flex;
+    justify-content: center;
+  }
 </style>

packages/server/src/integrations/googlesheets.ts

@@ -371,9 +371,11 @@ class GoogleSheetsIntegration implements DatasourcePlus {
   }
 
   buildRowObject(headers: string[], values: string[], rowNumber: number) {
-    const rowObject: { rowNumber: number; [key: string]: any } = { rowNumber }
+    const rowObject: { rowNumber: number } & Row = {
+      rowNumber,
+      _id: rowNumber.toString(),
+    }
     for (let i = 0; i < headers.length; i++) {
-      rowObject._id = rowNumber
       rowObject[headers[i]] = values[i]
     }
     return rowObject
@@ -430,14 +432,6 @@ class GoogleSheetsIntegration implements DatasourcePlus {
         }
       }
 
-      // clear out deleted columns
-      for (let key of sheet.headerValues) {
-        if (!Object.keys(table.schema).includes(key)) {
-          const idx = updatedHeaderValues.indexOf(key)
-          updatedHeaderValues.splice(idx, 1)
-        }
-      }
-
       try {
         await sheet.setHeaderRow(updatedHeaderValues)
       } catch (err) {
@@ -458,7 +452,7 @@ class GoogleSheetsIntegration implements DatasourcePlus {
     }
   }
 
-  async create(query: { sheet: string; row: any }) {
+  async create(query: { sheet: string; row: Row }) {
     try {
       await this.connect()
       const sheet = this.client.sheetsByTitle[query.sheet]
@@ -474,7 +468,7 @@ class GoogleSheetsIntegration implements DatasourcePlus {
     }
   }
 
-  async createBulk(query: { sheet: string; rows: any[] }) {
+  async createBulk(query: { sheet: string; rows: Row[] }) {
     try {
       await this.connect()
       const sheet = this.client.sheetsByTitle[query.sheet]

packages/server/src/integrations/tests/googlesheets.spec.ts

@@ -129,10 +129,11 @@ describe("Google Sheets Integration", () => {
       })
       expect(sheet.loadHeaderRow).toHaveBeenCalledTimes(1)
       expect(sheet.setHeaderRow).toHaveBeenCalledTimes(1)
-      expect(sheet.setHeaderRow).toHaveBeenCalledWith(["name"])
-
-      // No undefined are sent
-      expect((sheet.setHeaderRow as any).mock.calls[0][0]).toHaveLength(1)
+      expect(sheet.setHeaderRow).toHaveBeenCalledWith([
+        "name",
+        "description",
+        "location",
+      ])
     })
   })