Workspace Fork

package.json

@@ -29,10 +29,10 @@
     "direct-vuex": "^0.10.4",
     "eslint-import-resolver-alias": "^1.1.2",
     "lodash": "^4.17.21",
-    "multinet": "0.23.1",
+    "multinet": "0.24.0",
     "multinet-components": "^0.0.4",
     "papaparse": "^5.3.0",
-    "unplugin-vue-components": "^0.23.0",
+    "unplugin-vue-components": "^28.5.0",
     "vite": "^4.1.5",
     "vue": "^2.7.0",
     "vue-gtag": "^1.2.1",

src/components/WorkspaceOptionMenu.vue

@@ -21,6 +21,17 @@
       >
         <!-- Each listing here should contain a v-list-item -->
         <PermissionsDialog :workspace="workspace" />
+
+        <!-- Add fork button -->
+        <v-list-item @click="forkWorkspace(workspace)">
+          <v-list-item-icon class="mr-3">
+            <v-icon>mdi-source-branch</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            Fork Workspace
+          </v-list-item-content>
+        </v-list-item>
+
         <v-list-item :to="{ name: 'aqlWizard' }">
           <v-list-item-icon class="mr-3">
             <v-icon>mdi-magnify</v-icon>
@@ -37,7 +48,11 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router/composables';
+import type { Workspace } from 'multinet';
 import PermissionsDialog from '@/components/PermissionsDialog.vue';
+import api from '@/api';
+import store from '@/store';
 
 export default defineComponent({
   components: {
@@ -51,11 +66,35 @@ export default defineComponent({
     },
   },
 
-  setup() {
+  emits: ['loading'],
+
+  setup(_, { emit }) {
     const actionsMenu = ref(false);
+    const router = useRouter();
+
+    // Fork the workspace, navigate to the new workspace, and refresh the workspace list
+    // Emits loading event to parent component listener
+    const forkWorkspace = async (workspace: string) => {
+      try {
+        emit('loading', true);
+        const newWorkspace: Workspace = await api.forkWorkspace(workspace);
+        emit('loading', false);
+
+        // Close the actions menu
+        actionsMenu.value = false;
+
+        // Navigate to the new workspace and refresh the workspace list
+        router.push(`/workspaces/${newWorkspace.name}`);
+        store.dispatch.fetchWorkspaces();
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error forking workspace:', error);
+      }
+    };
 
     return {
       actionsMenu,
+      forkWorkspace,
     };
   },
 });

src/views/WorkspaceDetail.vue

@@ -73,15 +73,15 @@
           </v-toolbar-title>
         </v-hover>
         <v-progress-linear
-          v-if="loading"
+          v-if="loading || childLoading"
           indeterminate
           absolute
           bottom
         />
         <v-spacer />
 
         <create-modify-dialog :workspace="workspace" @success="startChecking" />
-        <workspace-option-menu :workspace="workspace" />
+        <workspace-option-menu :workspace="workspace" @loading="handleLoading" />
       </v-app-bar>
 
       <!-- Display upload status -->
@@ -147,7 +147,7 @@
         </v-row>
       </v-alert>
 
-      <session-panel :apps="apps" :workspace="workspace" :loading="loading" />
+      <session-panel :apps="apps" :workspace="workspace" :loading="loading || childLoading" />
 
       <v-row class="ma-0">
         <v-col
@@ -162,7 +162,7 @@
             <network-panel
               :workspace="workspace"
               :items="networks"
-              :loading="loading"
+              :loading="loading || childLoading"
               :apps="apps"
             />
           </v-card>
@@ -180,7 +180,7 @@
             <table-panel
               :workspace="workspace"
               :items="tables"
-              :loading="loading"
+              :loading="loading || childLoading"
               :apps="apps"
             />
           </v-card>
@@ -195,14 +195,14 @@ import {
   ref, computed, watch,
 } from 'vue';
 
+import { useRouter } from 'vue-router/composables';
 import api from '@/api';
 import TablePanel from '@/components/TablePanel.vue';
 import NetworkPanel from '@/components/NetworkPanel.vue';
 import SessionPanel from '@/components/SessionPanel.vue';
 import store from '@/store';
 import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 import type { App } from '@/types';
-import { useRouter } from 'vue-router/composables';
 
 const surroundingWhitespace = /^\s+|\s+$/;
 const workspaceNameRules: Array<(x: string) => string|boolean> = [
@@ -221,6 +221,7 @@ const localWorkspace = ref<string | null>(null);
 const editing = ref(false);
 const requestError = ref<string | null>(null);
 const loading = ref(false);
+const childLoading = ref(false);
 const tables = computed(() => store.getters.tables);
 const networks = computed(() => store.getters.networks);
 const uploads = computed(() => store.state.uploads.filter(
@@ -282,6 +283,11 @@ async function update(this: any) {
   loading.value = false;
 }
 
+// handle the loading state from child emits function
+function handleLoading(newLoading: boolean) {
+  childLoading.value = newLoading;
+}
+
 watch(() => props.workspace, () => update());
 watch(localWorkspace, () => { requestError.value = null; });