From 2a7065377aaac1c7c5df2975f23bd77a729a0569 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 14:59:56 -0700
Subject: [PATCH 01/12] If user initals are missing, don't show undefined

---
 src/components/LoginMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LoginMenu.vue b/src/components/LoginMenu.vue
index 391f17d7..c221b2bc 100644
--- a/src/components/LoginMenu.vue
+++ b/src/components/LoginMenu.vue
@@ -80,7 +80,7 @@ export default {
       const userInfo = this.userInfo as unknown as UserSpec | null;
 
       if (userInfo !== null) {
-        return `${userInfo.first_name[0]}${userInfo.last_name[0]}`;
+        return `${userInfo.first_name[0] || ''}${userInfo.last_name[0] || ''}`;
       }
       return '';
     },

From 463f5864b76f2702a376e1b73788559a8a2343ac Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 15:59:32 -0700
Subject: [PATCH 02/12] Sort all networks, workspaces, and tables

---
 src/store/index.ts            | 15 +++++++++++----
 src/views/NetworkDetail.vue   |  2 ++
 src/views/TableDetail.vue     |  8 ++------
 src/views/WorkspaceDetail.vue |  9 +--------
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 1eb954fe..86584f9f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -37,23 +37,30 @@ const {
     currentWorkspacePermission: null,
   } as State,
   getters: {
+    tables(state: State, getters): string[] {
+      if (state.currentWorkspace !== null && state.currentWorkspace.nodeTables && state.currentWorkspace.edgeTables) {
+        return getters.nodeTables.concat(getters.edgeTables).sort();
+      }
+      return [];
+    },
+
     nodeTables(state: State): string[] {
       if (state.currentWorkspace !== null && state.currentWorkspace.nodeTables) {
-        return state.currentWorkspace.nodeTables;
+        return state.currentWorkspace.nodeTables.sort();
       }
       return [];
     },
 
     edgeTables(state: State): string[] {
       if (state.currentWorkspace !== null && state.currentWorkspace.edgeTables) {
-        return state.currentWorkspace.edgeTables;
+        return state.currentWorkspace.edgeTables.sort();
       }
       return [];
     },
 
     networks(state: State) {
       if (state.currentWorkspace !== null && state.currentWorkspace.networks) {
-        return state.currentWorkspace.networks;
+        return state.currentWorkspace.networks.sort();
       }
       return [];
     },
@@ -75,7 +82,7 @@ const {
   },
   mutations: {
     setWorkspaces(state, workspaces: string[]) {
-      state.workspaces = workspaces;
+      state.workspaces = workspaces.sort();
     },
 
     setCurrentWorkspace(state, workspace: WorkspaceState) {
diff --git a/src/views/NetworkDetail.vue b/src/views/NetworkDetail.vue
index 21f18210..5ae9250c 100644
--- a/src/views/NetworkDetail.vue
+++ b/src/views/NetworkDetail.vue
@@ -441,6 +441,8 @@ export default Vue.extend({
         }
       });
       this.edgeTypes = edges.results.length > 0 ? [tableName(edges.results[0])] : [];
+      this.nodeTypes = this.nodeTypes.sort();
+      this.edgeTypes = this.edgeTypes.sort();
 
       // eslint-disable-next-line no-underscore-dangle
       this.nodes = nodes.results.map((node) => node._id);
diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 9001d486..5ba9f1a6 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -128,6 +128,7 @@ import Vue, { PropType } from 'vue';
 
 import api from '@/api';
 import { KeyValue, TableRow } from '@/types';
+import store from '@/store';
 
 interface DataPagination {
   page: number;
@@ -155,7 +156,6 @@ export default Vue.extend({
     return {
       rowKeys: [] as KeyValue[][],
       headers: [] as Array<keyof TableRow>,
-      tables: [] as string[],
       editing: false,
       tableSize: 1,
       pagination: {} as DataPagination,
@@ -163,6 +163,7 @@ export default Vue.extend({
     };
   },
   computed: {
+    tables: () => store.getters.tables,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     dataTableHeaders(this: any) {
       const {
@@ -271,11 +272,6 @@ export default Vue.extend({
       this.rowKeys = rowKeys;
       this.headers = headers;
 
-      // Roni to convert these lines to computed function
-      this.tables = (await api.tables(this.workspace, {
-        type: 'all',
-      })).results.map((table) => table.name);
-
       this.loading = false;
     },
   },
diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index fe47dafd..167dec11 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -201,6 +201,7 @@ export default Vue.extend({
   computed: {
     nodeTables: () => store.getters.nodeTables,
     edgeTables: () => store.getters.edgeTables,
+    tables: () => store.getters.tables,
     networks: () => store.getters.networks,
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -213,14 +214,6 @@ export default Vue.extend({
 
       return errors.filter((res): res is string => typeof res === 'string');
     },
-    tables(): string[] {
-      const {
-        nodeTables,
-        edgeTables,
-      } = this;
-
-      return nodeTables.concat(edgeTables);
-    },
   },
 
   watch: {

From 453967c926b42473ccf3b1c96d8cd86f3b806037 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 16:19:07 -0700
Subject: [PATCH 03/12] Give tableDetail the info it needs, show skeletons only
 first load

---
 src/views/TableDetail.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 5ba9f1a6..b8f534c4 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -18,7 +18,7 @@
 
           <v-divider />
 
-          <div v-if="loading">
+          <div v-if="loadingTables">
             <v-skeleton-loader type="list-item" />
             <v-skeleton-loader type="list-item" />
             <v-skeleton-loader type="list-item" />
@@ -160,6 +160,7 @@ export default Vue.extend({
       tableSize: 1,
       pagination: {} as DataPagination,
       loading: true,
+      loadingTables: true,
     };
   },
   computed: {
@@ -218,12 +219,21 @@ export default Vue.extend({
       this.update();
     },
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    tables(this: any) {
+      this.loadingTables = false;
+    },
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     pagination(this: any) {
       this.update();
     },
   },
 
+  created() {
+    store.dispatch.fetchWorkspace(this.workspace);
+  },
+
   methods: {
     rowClassName(index: number): 'even-row' | 'odd-row' {
       return index % 2 === 0 ? 'even-row' : 'odd-row';

From 4d3c07d314c6462cbe9b10b4cf9bdb4efa34f44d Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 16:34:43 -0700
Subject: [PATCH 04/12] Migrate the more_vert menus to use a consistent
 component

---
 src/components/WorkspaceOptionMenu.vue | 61 ++++++++++++++++++++++++++
 src/views/NetworkDetail.vue            | 10 +++--
 src/views/NodeDetail.vue               | 10 +++--
 src/views/TableDetail.vue              | 10 +++--
 src/views/WorkspaceDetail.vue          | 39 ++--------------
 5 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 src/components/WorkspaceOptionMenu.vue

diff --git a/src/components/WorkspaceOptionMenu.vue b/src/components/WorkspaceOptionMenu.vue
new file mode 100644
index 00000000..2780bc84
--- /dev/null
+++ b/src/components/WorkspaceOptionMenu.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-menu
+    v-model="actionsMenu"
+    max-width="275"
+    offset-y
+    origin="center center"
+    transition="scale-transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        icon
+        v-on="on"
+      >
+        <v-icon>more_vert</v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-list
+        dense
+        width="224"
+      >
+        <!-- Each listing here should contain a v-list-item -->
+        <PermissionsDialog :workspace="workspace" />
+        <v-list-item :to="{ name: 'aqlWizard' }">
+          <v-list-item-icon class="mr-3">
+            <v-icon>search</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            AQL Wizard
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from '@vue/composition-api';
+import PermissionsDialog from '@/components/PermissionsDialog.vue';
+
+export default defineComponent({
+  components: {
+    PermissionsDialog,
+  },
+
+  props: {
+    workspace: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+
+  setup() {
+    const actionsMenu = ref(false);
+
+    return {
+      actionsMenu,
+    };
+  },
+});
+</script>
diff --git a/src/views/NetworkDetail.vue b/src/views/NetworkDetail.vue
index 5ae9250c..74e89efe 100644
--- a/src/views/NetworkDetail.vue
+++ b/src/views/NetworkDetail.vue
@@ -40,9 +40,7 @@
 
       <v-spacer />
 
-      <v-btn icon>
-        <v-icon>more_vert</v-icon>
-      </v-btn>
+      <workspace-option-menu :workspace="workspace" />
     </v-app-bar>
     <v-main class="fill-height">
       <v-container
@@ -327,12 +325,18 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import { EdgesSpec, TableRow } from 'multinet';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 import api from '@/api';
 import { App } from '@/types';
 
 export default Vue.extend({
   name: 'NetworkDetail',
+
+  components: {
+    WorkspaceOptionMenu,
+  },
+
   props: {
     workspace: {
       type: String as PropType<string>,
diff --git a/src/views/NodeDetail.vue b/src/views/NodeDetail.vue
index 2bb38144..4e0316e2 100644
--- a/src/views/NodeDetail.vue
+++ b/src/views/NodeDetail.vue
@@ -52,9 +52,7 @@
 
         <v-spacer />
 
-        <v-btn icon>
-          <v-icon>more_vert</v-icon>
-        </v-btn>
+        <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
 
       <v-container
@@ -262,6 +260,7 @@ import { EdgesSpec } from 'multinet';
 
 import api from '@/api';
 import { KeyValue } from '@/types';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 interface EdgeRecord {
   id: string;
@@ -278,6 +277,11 @@ type EdgeType = 'incoming' | 'outgoing';
 
 export default Vue.extend({
   name: 'NodeDetail',
+
+  components: {
+    WorkspaceOptionMenu,
+  },
+
   props: {
     workspace: {
       type: String as PropType<string>,
diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index b8f534c4..eb9ff94d 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -81,9 +81,7 @@
 
         <v-spacer />
 
-        <v-btn icon>
-          <v-icon>more_vert</v-icon>
-        </v-btn>
+        <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
       <div class="wrapper">
         <v-data-table
@@ -129,6 +127,7 @@ import Vue, { PropType } from 'vue';
 import api from '@/api';
 import { KeyValue, TableRow } from '@/types';
 import store from '@/store';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 interface DataPagination {
   page: number;
@@ -141,6 +140,11 @@ interface DataPagination {
 
 export default Vue.extend({
   name: 'TableDetail',
+
+  components: {
+    WorkspaceOptionMenu,
+  },
+
   props: {
     workspace: {
       type: String as PropType<string>,
diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 167dec11..3e2926b6 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -80,39 +80,7 @@
         />
         <v-spacer />
 
-        <v-menu
-          v-model="actionsMenu"
-          max-width="275"
-          offset-y
-          origin="center center"
-          transition="scale-transition"
-        >
-          <template v-slot:activator="{ on }">
-            <v-btn
-              icon
-              v-on="on"
-            >
-              <v-icon>more_vert</v-icon>
-            </v-btn>
-          </template>
-          <v-card>
-            <v-list
-              dense
-              width="224"
-            >
-              <!-- Each listing here should contain a v-list-item -->
-              <PermissionsDialog :workspace="workspace" />
-              <v-list-item :to="{ name: 'aqlWizard' }">
-                <v-list-item-icon class="mr-3">
-                  <v-icon>search</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  AQL Wizard
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </v-card>
-        </v-menu>
+        <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
 
       <v-layout
@@ -166,8 +134,8 @@ import Vue, { PropType } from 'vue';
 import api from '@/api';
 import TablePanel from '@/components/TablePanel.vue';
 import NetworkPanel from '@/components/NetworkPanel.vue';
-import PermissionsDialog from '@/components/PermissionsDialog.vue';
 import store from '@/store';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 const surroundingWhitespace = /^\s+|\s+$/;
 const workspaceNameRules: Array<(x: string) => string|boolean> = [
@@ -180,7 +148,7 @@ export default Vue.extend({
   components: {
     TablePanel,
     NetworkPanel,
-    PermissionsDialog,
+    WorkspaceOptionMenu,
   },
   props: {
     workspace: {
@@ -194,7 +162,6 @@ export default Vue.extend({
       editing: false,
       requestError: null as string | null,
       loading: false,
-      actionsMenu: false,
     };
   },
 

From e0e17f60da7852698dd7e21e1e02216adba5582f Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 17:10:02 -0700
Subject: [PATCH 05/12] Clear the delete dialog each time it closes

---
 src/components/DeleteNetworkDialog.vue   | 8 ++++++++
 src/components/DeleteTableDialog.vue     | 9 +++++++--
 src/components/DeleteWorkspaceDialog.vue | 8 ++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/DeleteNetworkDialog.vue b/src/components/DeleteNetworkDialog.vue
index 8f07e715..47e41949 100644
--- a/src/components/DeleteNetworkDialog.vue
+++ b/src/components/DeleteNetworkDialog.vue
@@ -117,6 +117,7 @@ export default Vue.extend({
   watch: {
     dialog() {
       if (this.dialog) {
+        this.clear();
         this.confirmationPhrase = randomPhrase();
       } else {
         this.$emit('closed');
@@ -133,6 +134,13 @@ export default Vue.extend({
 
       await Promise.all(selection.map((network) => api.deleteNetwork(workspace, network)));
       this.dialog = false;
+
+      this.clear();
+    },
+
+    clear() {
+      this.confirmationPhrase = '';
+      this.confirmation = '';
     },
   },
 });
diff --git a/src/components/DeleteTableDialog.vue b/src/components/DeleteTableDialog.vue
index d7831b7c..e681e179 100644
--- a/src/components/DeleteTableDialog.vue
+++ b/src/components/DeleteTableDialog.vue
@@ -165,6 +165,7 @@ export default Vue.extend({
         if (using.length > 0) {
           this.using = using;
         } else {
+          this.clear();
           this.confirmationPhrase = randomPhrase();
         }
       } else {
@@ -181,10 +182,14 @@ export default Vue.extend({
       } = this;
 
       await Promise.all(selection.map((table) => api.deleteTable(workspace, table)));
-
       this.dialog = false;
+
+      this.clear();
+    },
+
+    clear() {
+      this.confirmationPhrase = '';
       this.confirmation = '';
-      this.confirmationPhrase = randomPhrase();
     },
 
     async findDependentNetworks() {
diff --git a/src/components/DeleteWorkspaceDialog.vue b/src/components/DeleteWorkspaceDialog.vue
index 27849c4a..0b70e477 100644
--- a/src/components/DeleteWorkspaceDialog.vue
+++ b/src/components/DeleteWorkspaceDialog.vue
@@ -123,6 +123,7 @@ export default Vue.extend({
   watch: {
     dialog() {
       if (this.dialog) {
+        this.clear();
         this.confirmationPhrase = randomPhrase();
       } else {
         this.$emit('closed');
@@ -138,11 +139,18 @@ export default Vue.extend({
 
       await Promise.all(selection.map((ws) => api.deleteWorkspace(ws)));
 
+      this.clear();
+
       store.dispatch.fetchWorkspaces();
       this.$emit('deleted');
 
       this.dialog = false;
     },
+
+    clear() {
+      this.confirmationPhrase = '';
+      this.confirmation = '';
+    },
   },
 });
 </script>

From 9785d05090167d6a8e137be3b5b5a8f1e099e608 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 17:53:37 -0700
Subject: [PATCH 06/12] Add loading to network create dialog, and clear on
 success

---
 src/components/NetworkCreateForm.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/NetworkCreateForm.vue b/src/components/NetworkCreateForm.vue
index a5f0a179..0c6baa27 100644
--- a/src/components/NetworkCreateForm.vue
+++ b/src/components/NetworkCreateForm.vue
@@ -32,7 +32,9 @@
       <v-spacer />
       <v-btn
         depressed
-        :disabled="networkCreateDisabled"
+        color="primary"
+        :disabled="networkCreateDisabled || loading"
+        :loading="loading"
         @click="createNetwork"
       >
         create network
@@ -64,6 +66,7 @@ export default Vue.extend({
       networkCreationErrors: [] as string[],
       networkEdgeTable: null as string | null,
       newNetwork: '',
+      loading: false,
     };
   },
   computed: {
@@ -80,16 +83,24 @@ export default Vue.extend({
       }
 
       try {
+        this.loading = true;
         await api.createNetwork(workspace, newNetwork, {
           edgeTable: this.networkEdgeTable,
         });
         this.networkCreationErrors = [];
+        this.clear();
         this.$emit('success');
       } catch (error) {
         const message = `Network "${this.newNetwork}" already exists.`;
         this.networkCreationErrors = [message];
       }
     },
+
+    clear() {
+      this.networkEdgeTable = null;
+      this.newNetwork = '';
+      this.loading = false;
+    },
   },
 });
 </script>

From fdcf721624a4e9d9c32f3a6adef823699f03a198 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 17:56:08 -0700
Subject: [PATCH 07/12] Use v-model and accept for better table upload handling

---
 src/components/TableDialog.vue | 47 ++++++++++------------------------
 src/utils/files.ts             | 13 +---------
 2 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 4fb17b85..a9072deb 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -45,7 +45,7 @@
                 <v-layout wrap>
                   <v-flex>
                     <v-file-input
-                      :error-messages="fileUploadError"
+                      v-model="selectedFile"
                       label="Upload File"
                       prepend-inner-icon="attach_file"
                       prepend-icon=""
@@ -53,7 +53,8 @@
                       clearable
                       dense
                       outlined
-                      @change="handleFileInput"
+                      show-size
+                      accept=".csv"
                     />
                   </v-flex>
                 </v-layout>
@@ -175,24 +176,16 @@
 
 <script lang="ts">
 import {
-  defineComponent, ref, Ref, computed,
+  defineComponent, ref, Ref, computed, watch,
 } from '@vue/composition-api';
 
 import api from '@/api';
-import { TableFileType, CSVColumnType } from '@/types';
-import { validFileType, fileName as getFileName, analyzeCSV } from '@/utils/files';
+import { CSVColumnType } from '@/types';
+import { analyzeCSV } from '@/utils/files';
 import store from '@/store';
 
 const defaultKeyField = '_key';
 const multinetTypes: readonly CSVColumnType[] = ['label', 'boolean', 'category', 'number', 'date'];
-const fileTypes: readonly TableFileType[] = [
-  {
-    extension: ['csv'],
-    queryCall: 'csv',
-    hint: 'Comma Separated Value file',
-    displayName: 'CSV',
-  },
-];
 
 export default defineComponent({
   name: 'TableDialog',
@@ -234,32 +227,22 @@ export default defineComponent({
     // File selection
     const selectedFile = ref<File | null>(null);
     const fileName = ref<string | null>(null);
-    const fileUploadError = ref<string | null>(null);
-    async function handleFileInput(file: File | undefined) {
-      if (file === undefined) {
-        fileUploadError.value = null;
-        selectedFile.value = null;
+    watch(selectedFile, async (newFile) => {
+      if (newFile === null) {
+        fileName.value = null;
         columnType.value = {};
 
         return;
       }
+      fileName.value = newFile.name.replace('.csv', '');
 
-      selectedFile.value = file;
-
-      if (!validFileType(file, fileTypes)) {
-        fileUploadError.value = 'Invalid file type';
-      } else {
-        fileName.value = fileName.value || getFileName(file);
-        fileUploadError.value = null;
-      }
-
-      const analysis = await analyzeCSV(file);
+      const analysis = await analyzeCSV(newFile);
       columnType.value = Array.from(analysis.typeRecs.keys()).reduce(
         (acc, key) => ({ ...acc, [key]: analysis.typeRecs.get(key) }), {},
       );
 
       sampleRows.value = [...analysis.sampleRows];
-    }
+    });
 
     // Upload options
     const overwrite = ref(false);
@@ -280,7 +263,6 @@ export default defineComponent({
 
       selectedFile.value = null;
       fileName.value = null;
-      fileUploadError.value = null;
 
       overwrite.value = false;
       restoreKeyField();
@@ -292,7 +274,7 @@ export default defineComponent({
     // Table creation state
     const tableDialog = ref(false);
     const tableCreationError = ref<string | null>(null);
-    const createDisabled = computed(() => !selectedFile.value || !fileName.value || fileUploadError.value);
+    const createDisabled = computed(() => selectedFile.value === null || !fileName.value);
     async function createTable() {
       if (selectedFile.value === null || fileName.value === null) {
         return;
@@ -330,14 +312,13 @@ export default defineComponent({
       sampleRows,
       columnType,
       multinetTypes,
+      selectedFile,
       fileName,
-      fileUploadError,
       tableDialog,
       tableCreationError,
       uploading,
       uploadProgress,
       createDisabled,
-      handleFileInput,
       createTable,
       restoreKeyField,
       keyField,
diff --git a/src/utils/files.ts b/src/utils/files.ts
index 8dd56609..d097dcf0 100644
--- a/src/utils/files.ts
+++ b/src/utils/files.ts
@@ -1,15 +1,6 @@
 import Papa, { ParseResult } from 'papaparse';
 import dayjs from 'dayjs';
-import { validUploadType } from 'multinet';
-import { FileType, CSVColumnType } from '@/types';
-
-const fileExtension = (file: File) => file.name.split('.').slice(-1)[0];
-const fileName = (file: File) => file.name.split('.')[0];
-
-function validFileType(file: File, allowedTypes: readonly FileType[]) {
-  const extension = fileExtension(file);
-  return allowedTypes.some((type) => type.extension.includes(extension) && validUploadType(type.queryCall));
-}
+import { CSVColumnType } from '@/types';
 
 function isBoolean(strings: Set<string>) {
   // This function tests whether both elements of an array belong to the string
@@ -150,7 +141,5 @@ async function analyzeCSV(file: File): Promise<CSVAnalysis> {
 }
 
 export {
-  fileName,
-  validFileType,
   analyzeCSV,
 };

From 59c6472ad382aa5a0b9bf53e8b472df825cabad7 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 17:57:18 -0700
Subject: [PATCH 08/12] Disable "create table" once upload has been submitted

---
 src/components/TableDialog.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index a9072deb..1241e784 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -163,6 +163,8 @@
             <v-btn
               color="primary"
               depressed
+              :loading="loading"
+              :disabled="loading"
               @click="createTable"
             >
               Create Table
@@ -275,6 +277,7 @@ export default defineComponent({
     const tableDialog = ref(false);
     const tableCreationError = ref<string | null>(null);
     const createDisabled = computed(() => selectedFile.value === null || !fileName.value);
+    const loading = ref(false);
     async function createTable() {
       if (selectedFile.value === null || fileName.value === null) {
         return;
@@ -284,6 +287,7 @@ export default defineComponent({
       uploading.value = true;
 
       try {
+        loading.value = true;
         await api.uploadTable(workspace, fileName.value, {
           data: selectedFile.value,
           edgeTable: edgeTable.value,
@@ -292,6 +296,7 @@ export default defineComponent({
 
         tableCreationError.value = null;
         tableDialog.value = false;
+        loading.value = false;
 
         emit('success');
         resetAllFields();
@@ -319,6 +324,7 @@ export default defineComponent({
       uploading,
       uploadProgress,
       createDisabled,
+      loading,
       createTable,
       restoreKeyField,
       keyField,

From 900991ef9eb3e76bbbdfab4402903397bcf5a51c Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 18:16:37 -0700
Subject: [PATCH 09/12] Display a useful message when table upload fails

---
 src/components/TableDialog.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 1241e784..ba4af52f 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -32,8 +32,10 @@
         <v-stepper-step
           :complete="step > 2"
           step="2"
+          :rules="[() => tableCreationError === null]"
         >
           Set Column Types
+          <small>{{ tableCreationError }}</small>
         </v-stepper-step>
       </v-stepper-header>
 
@@ -62,7 +64,6 @@
                   <v-flex>
                     <v-text-field
                       v-model="fileName"
-                      :error-messages="tableCreationError"
                       label="Table Name"
                       outlined
                       dense
@@ -226,10 +227,14 @@ export default defineComponent({
     // Type recommendation
     const columnType: Ref<{[key: string]: CSVColumnType}> = ref({});
 
+    const tableCreationError = ref<string | null>(null);
+
     // File selection
     const selectedFile = ref<File | null>(null);
     const fileName = ref<string | null>(null);
     watch(selectedFile, async (newFile) => {
+      tableCreationError.value = null;
+
       if (newFile === null) {
         fileName.value = null;
         columnType.value = {};
@@ -275,7 +280,6 @@ export default defineComponent({
 
     // Table creation state
     const tableDialog = ref(false);
-    const tableCreationError = ref<string | null>(null);
     const createDisabled = computed(() => selectedFile.value === null || !fileName.value);
     const loading = ref(false);
     async function createTable() {
@@ -301,7 +305,7 @@ export default defineComponent({
         emit('success');
         resetAllFields();
       } catch (err) {
-        tableCreationError.value = err.statusText;
+        tableCreationError.value = `${Object.values(err.response.data).flat()[0]}`;
       } finally {
         uploading.value = false;
         uploadProgress.value = null;

From 3519592c2bedaa1aa50378dc9b00ad94b5d29ba8 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 16 Nov 2021 18:21:54 -0700
Subject: [PATCH 10/12] Make the error more descriptive when renaming workspace
 fails

---
 src/views/WorkspaceDetail.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 3e2926b6..62783ea3 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -228,7 +228,8 @@ export default Vue.extend({
           if (err.response.status === 409) {
             this.requestError = 'A workspace by that name already exists';
           } else {
-            this.requestError = err.response.statusText;
+            console.log(err.response);
+            this.requestError = `${Object.values(err.response.data).flat()[0]}`;
           }
         }
       }

From 8d6886087715fa49b640a1370b5dbcd235a9ed78 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Wed, 17 Nov 2021 10:11:23 -0700
Subject: [PATCH 11/12] Remove a console.log

---
 src/views/WorkspaceDetail.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 62783ea3..bc9355db 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -228,7 +228,6 @@ export default Vue.extend({
           if (err.response.status === 409) {
             this.requestError = 'A workspace by that name already exists';
           } else {
-            console.log(err.response);
             this.requestError = `${Object.values(err.response.data).flat()[0]}`;
           }
         }

From e3a1b89db0a80fed5d7193d18962e3469bf9292e Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Wed, 17 Nov 2021 10:25:35 -0700
Subject: [PATCH 12/12] Only clear deletion dialog when the dialog opens and
 message is reset

---
 src/components/DeleteNetworkDialog.vue   | 2 --
 src/components/DeleteTableDialog.vue     | 2 --
 src/components/DeleteWorkspaceDialog.vue | 2 --
 3 files changed, 6 deletions(-)

diff --git a/src/components/DeleteNetworkDialog.vue b/src/components/DeleteNetworkDialog.vue
index 47e41949..9704f174 100644
--- a/src/components/DeleteNetworkDialog.vue
+++ b/src/components/DeleteNetworkDialog.vue
@@ -134,8 +134,6 @@ export default Vue.extend({
 
       await Promise.all(selection.map((network) => api.deleteNetwork(workspace, network)));
       this.dialog = false;
-
-      this.clear();
     },
 
     clear() {
diff --git a/src/components/DeleteTableDialog.vue b/src/components/DeleteTableDialog.vue
index e681e179..cdc27412 100644
--- a/src/components/DeleteTableDialog.vue
+++ b/src/components/DeleteTableDialog.vue
@@ -183,8 +183,6 @@ export default Vue.extend({
 
       await Promise.all(selection.map((table) => api.deleteTable(workspace, table)));
       this.dialog = false;
-
-      this.clear();
     },
 
     clear() {
diff --git a/src/components/DeleteWorkspaceDialog.vue b/src/components/DeleteWorkspaceDialog.vue
index 0b70e477..9742cfaf 100644
--- a/src/components/DeleteWorkspaceDialog.vue
+++ b/src/components/DeleteWorkspaceDialog.vue
@@ -139,8 +139,6 @@ export default Vue.extend({
 
       await Promise.all(selection.map((ws) => api.deleteWorkspace(ws)));
 
-      this.clear();
-
       store.dispatch.fetchWorkspaces();
       this.$emit('deleted');