Address various papercuts in the UI/UX

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');
@@ -134,6 +135,11 @@ export default Vue.extend({
       await Promise.all(selection.map((network) => api.deleteNetwork(workspace, network)));
       this.dialog = false;
     },
+
+    clear() {
+      this.confirmationPhrase = '';
+      this.confirmation = '';
+    },
   },
 });
 </script>

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,12 @@ export default Vue.extend({
       } = this;
 
       await Promise.all(selection.map((table) => api.deleteTable(workspace, table)));
-
       this.dialog = false;
+    },
+
+    clear() {
+      this.confirmationPhrase = '';
       this.confirmation = '';
-      this.confirmationPhrase = randomPhrase();
     },
 
     async findDependentNetworks() {

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');
@@ -143,6 +144,11 @@ export default Vue.extend({
 
       this.dialog = false;
     },
+
+    clear() {
+      this.confirmationPhrase = '';
+      this.confirmation = '';
+    },
   },
 });
 </script>

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 '';
     },

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>

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>
 
@@ -45,23 +47,23 @@
                 <v-layout wrap>
                   <v-flex>
                     <v-file-input
-                      :error-messages="fileUploadError"
+                      v-model="selectedFile"
                       label="Upload File"
                       prepend-inner-icon="attach_file"
                       prepend-icon=""
                       single-line
                       clearable
                       dense
                       outlined
-                      @change="handleFileInput"
+                      show-size
+                      accept=".csv"
                     />
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex>
                     <v-text-field
                       v-model="fileName"
-                      :error-messages="tableCreationError"
                       label="Table Name"
                       outlined
                       dense
@@ -162,6 +164,8 @@
             <v-btn
               color="primary"
               depressed
+              :loading="loading"
+              :disabled="loading"
               @click="createTable"
             >
               Create Table
@@ -175,24 +179,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',
@@ -231,35 +227,29 @@ 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);
-    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) => {
+      tableCreationError.value = null;
+
+      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 +270,6 @@ export default defineComponent({
 
       selectedFile.value = null;
       fileName.value = null;
-      fileUploadError.value = null;
 
       overwrite.value = false;
       restoreKeyField();
@@ -291,8 +280,8 @@ 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);
+    const loading = ref(false);
     async function createTable() {
       if (selectedFile.value === null || fileName.value === null) {
         return;
@@ -302,6 +291,7 @@ export default defineComponent({
       uploading.value = true;
 
       try {
+        loading.value = true;
         await api.uploadTable(workspace, fileName.value, {
           data: selectedFile.value,
           edgeTable: edgeTable.value,
@@ -310,11 +300,12 @@ export default defineComponent({
 
         tableCreationError.value = null;
         tableDialog.value = false;
+        loading.value = false;
 
         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;
@@ -330,14 +321,14 @@ export default defineComponent({
       sampleRows,
       columnType,
       multinetTypes,
+      selectedFile,
       fileName,
-      fileUploadError,
       tableDialog,
       tableCreationError,
       uploading,
       uploadProgress,
       createDisabled,
-      handleFileInput,
+      loading,
       createTable,
       restoreKeyField,
       keyField,

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>

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) {