feat: update create resource button to create any resource type

This commit makes the following changes:
- The create resource button in the bottom right corner gives options to create any resource
- In the edit pages, the cancel button goes back to the previous page you were on

cookiecutter-templates/cookiecutter-dioptra-deployment/{{cookiecutter.__project_slug}}/config/nginx/http_restapi.conf

@@ -11,7 +11,6 @@ server {
 
     location / {
         root /frontend;
-        try_files $uri $uri/ /index.html;
     }
 
     location /api/ {

src/frontend/src/App.vue

@@ -15,6 +15,7 @@
         :style="{ 'margin-top': isMobile ? '10px' : '25px', height: '100' }"
       >
         <router-view />
+        <CreateButton v-if="addCreateButton" />
       </div>
     </q-page-container>
 
@@ -31,6 +32,7 @@
   import AccessibilityTest from '@/components/AccessibilityTest.vue'
   import { useQuasar } from 'quasar'
   import { computed, provide, watch } from 'vue'
+  import CreateButton from './components/CreateButton.vue'
   import { useLoginStore } from '@/stores/LoginStore'
   import SnapshotList from './components/SnapshotList.vue'
 
@@ -64,4 +66,24 @@
     }
   })
 
+  const includeCreateButton = [
+    'home',
+    'experiments',
+    'experimentJobs',
+    'entrypoints',
+    'plugins',
+    'pluginFiles',
+    'queues',
+    'jobs',
+    'pluginParams',
+    'tags',
+    'models',
+    'artifacts'
+  ]
+
+  const addCreateButton = computed(() => {
+    return typeof route.name === 'string' && includeCreateButton.includes(route.name)
+  })
+
+
 </script>

src/frontend/src/components/CreateButton.vue

@@ -0,0 +1,102 @@
+<template>
+  <q-btn 
+    class="fixedButton"
+    round
+    color="primary"
+    icon="add"
+    size="lg"
+  >
+    <span class="sr-only">Create new resource</span>
+    <q-tooltip>
+      Create new resource
+    </q-tooltip>
+    <q-menu anchor="top middle" self="bottom middle">
+      <q-list separator>
+        <q-item
+          v-for="resource in resources"
+          clickable 
+          :active="false"
+          @click="handleClick(resource)"
+        >
+          <q-item-section class="text-capitalize">
+            Create {{ resource.name }}
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script setup>
+import { useLoginStore } from '@/stores/LoginStore.ts'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const store = useLoginStore()
+
+const defaultResources = [
+    {
+      name: 'experiment',
+      url: '/experiments/new'
+    },
+    {
+      name: 'entrypoint',
+      url: '/entrypoints/new'
+    },
+    {
+      name: 'plugin',
+      url: '/plugins',
+      popup: true
+    },
+    {
+      name: 'queue',
+      url: '/queues',
+      popup: true
+    },
+    {
+      name: 'job',
+      url: '/jobs/new'
+    },
+    {
+      name: 'plugin param',
+      url: '/pluginParams',
+      popup: true
+    },
+    {
+      name: 'tag',
+      url: '/tags',
+      popup: true
+    },
+    {
+      name: 'model',
+      url: '/models',
+      popup: true
+    },
+  ]
+
+const resources = computed(() => {
+  if(route.name === 'pluginFiles') {
+    const modifiedResources = [...defaultResources]
+    modifiedResources.splice(3, 0, {
+      name: 'plugin file',
+      url: `/plugins/${route.params.id}/files/new`,
+    })
+    return modifiedResources
+  }
+  return defaultResources
+})
+
+function handleClick(resource) {
+  if(resource.url) {
+    router.push(resource.url).then(() => {
+      if(resource.popup) {
+        store.triggerPopup = true
+      }
+    })
+  }
+}
+
+</script>

src/frontend/src/router/index.ts

@@ -6,43 +6,51 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      component: HomeView
+      component: HomeView,
+      name: 'home'
     },
     {
       path: '/entrypoints',
-      component: () => import('../views/EntryPointsView.vue')
+      component: () => import('../views/EntryPointsView.vue'),
+      name: 'entrypoints'
     },
     {
       path: '/entrypoints/:id',
-      component: () => import('../views/CreateEntryPoint.vue')
+      component: () => import('../views/CreateEntryPoint.vue'),
     },
     {
       path: '/plugins',
-      component: () => import('../views/PluginsView.vue')
+      component: () => import('../views/PluginsView.vue'),
+      name: 'plugins'
     },
     {
       path: '/plugins/:id/files',
-      component: () => import('../views/PluginFiles.vue')
+      component: () => import('../views/PluginFiles.vue'),
+      name: 'pluginFiles'
     },
     {
       path: '/plugins/:id/files/:fileId',
       component: () => import('../views/CreatePluginFile.vue')
     },
     {
       path: '/queues',
-      component: () => import('../views/QueuesView.vue')
+      component: () => import('../views/QueuesView.vue'),
+      name: 'queues'
     },
     {
       path: '/experiments',
-      component: () => import('../views/ExperimentsView.vue')
+      component: () => import('../views/ExperimentsView.vue'),
+      name: 'experiments'
     },
     {
       path: '/jobs',
-      component: () => import('../views/AllJobsView.vue')
+      component: () => import('../views/AllJobsView.vue'),
+      name: 'jobs'
     },
     {
       path: '/experiments/:id/jobs',
-      component: () => import('../views/JobsView.vue')
+      component: () => import('../views/JobsView.vue'),
+      name: 'experimentJobs'
     },
     {
       path: '/experiments/:id/jobs/:jobId',
@@ -67,19 +75,23 @@ const router = createRouter({
     },
     {
       path: '/tags',
-      component: () => import('../views/TagsView.vue')
+      component: () => import('../views/TagsView.vue'),
+      name: 'tags'
     },
     {
       path: '/pluginParams',
-      component: () => import('../views/PluginParamsView.vue')
+      component: () => import('../views/PluginParamsView.vue'),
+      name: 'pluginParams'
     },
     {
       path: '/models',
-      component: () => import('../views/ModelsView.vue')
+      component: () => import('../views/ModelsView.vue'),
+      name: 'models'
     },
     {
       path: '/artifacts',
-      component: () => import('../views/ArtifactsView.vue')
+      component: () => import('../views/ArtifactsView.vue'),
+      name: 'artifacts'
     },
     {
       path: '/login',

src/frontend/src/stores/LoginStore.ts

@@ -43,6 +43,8 @@ export const useLoginStore = defineStore('login', () => {
     jobs: {},
     files: {},
   })
+
+  const triggerPopup = ref(false)
 
   const showRightDrawer = ref(false)
   const selectedSnapshot = ref()
@@ -52,5 +54,5 @@ export const useLoginStore = defineStore('login', () => {
   // function()'s are actions
 
 
-  return { loggedInUser, loggedInGroup, groups, users, savedForms, showRightDrawer, selectedSnapshot };
+  return { loggedInUser, loggedInGroup, groups, users, savedForms, showRightDrawer, selectedSnapshot, triggerPopup };
 })

src/frontend/src/views/ArtifactsView.vue

@@ -26,19 +26,7 @@
       /> -->
     </template>
   </TableComponent>
-  <!-- <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-    @click="showAddEditDialog = true"
-  >
-    <span class="sr-only">Register a new Artifact</span>
-    <q-tooltip>
-      Register a new Artifact
-    </q-tooltip>
-  </q-btn> -->
+
   <ArtifactsDialog 
     v-model="showAddEditDialog"
     @addArtifact="addArtifact"

src/frontend/src/views/CreateEntryPoint.vue

@@ -240,11 +240,10 @@
 
   <div class="float-right q-mb-lg">
     <q-btn  
-      to="/entrypoints"
       color="negative" 
       label="Cancel"
       class="q-mr-lg"
-      @click="confirmLeave = true"
+      @click="confirmLeave = true; router.back()"
     />
     <q-btn  
       @click="submit()" 

src/frontend/src/views/CreateExperiment.vue

@@ -120,11 +120,10 @@
 
   <div :class="`float-right`">
       <q-btn  
-        to="/experiments"
         color="negative" 
         label="Cancel"
         class="q-mr-lg"
-        @click="confirmLeave = true"
+        @click="confirmLeave = true; router.back()"
       />
       <q-btn  
         @click="submit()" 

src/frontend/src/views/CreateJob.vue

@@ -195,11 +195,10 @@
 
   <div :class="`float-right q-mb-lg`">
       <q-btn  
-        :to="expJobOrAllJobs === 'allJobs' ? `/jobs` : `/experiments/${route.params.id}/jobs`"
         color="negative" 
         label="Cancel"
         class="q-mr-lg"
-        @click="confirmLeave = true"
+        @click="confirmLeave = true; router.back()"
       />
       <q-btn  
         @click="submit()" 

src/frontend/src/views/CreatePluginFile.vue

@@ -305,11 +305,10 @@
 
   <div :class="`${isMobile ? '' : ''} float-right q-mb-lg`">
     <q-btn  
-      :to="`/plugins/${route.params.id}/files`"
       color="negative" 
       label="Cancel"
       class="q-mr-lg"
-      @click="confirmLeave = true"
+      @click="confirmLeave = true; router.back()"
     />
     <q-btn  
       @click="submit()" 

src/frontend/src/views/EntryPointsView.vue

@@ -65,20 +65,6 @@
     </template>
   </TableComponent>
 
-  <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-    to="/entrypoints/new"
-  >
-    <span class="sr-only">Register new Entrypoint</span>
-    <q-tooltip>
-      Register new Entrypoint
-    </q-tooltip>
-  </q-btn>
-
   <InfoPopupDialog
     v-model="showTaskGraphDialog"
   >

src/frontend/src/views/ExperimentsView.vue

@@ -32,30 +32,6 @@
     </template>
   </TableComponent>
 
-  <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-  >
-    <span class="sr-only">Create a new Experiment</span>
-    <q-tooltip>
-      Create a new Experiment
-    </q-tooltip>
-    <q-menu anchor="top middle" self="bottom middle">
-      <q-list >
-        <q-item clickable to="/experiments/new">
-          <q-item-section>Create Experiment</q-item-section>
-        </q-item>
-        <q-separator />
-        <q-item clickable to="/entrypoints/new">
-          <q-item-section>Create Entry Point</q-item-section>
-        </q-item>
-      </q-list>
-    </q-menu>
-  </q-btn>
-
   <DeleteDialog 
     v-model="showDeleteDialog"
     @submit="deleteExperiment"