AIRAVATA 3699 - migration build @vue/compat

django_airavata/apps/admin/package.json

@@ -14,16 +14,18 @@
     "lint:visualstudio": "vue-cli-service lint --format visualstudio ./static/django_airavata_admin/src/"
   },
   "dependencies": {
+    "@vue/compat": "^3.2.0",
     "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.21.2",
+    "bootstrap-vue": "^2.23.1",
     "browserslist": "^4.16.7",
     "core-js": "^3.8.3",
     "django-airavata-api": "link:../api",
     "django-airavata-common-ui": "link:../../static/common/",
     "luxon": "^1.16.0",
+    "mitt": "^3.0.1",
     "moment": "^2.22.2",
     "terser": "^4.1.2",
-    "vue": "^2.5.22",
+    "vue": "^3.2.0",
     "vue-datetime": "^1.0.0-beta.10",
     "vue-flatpickr-component": "^8.1.2",
     "vue-resource": "^1.3.4",
@@ -42,6 +44,7 @@
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-unit-jest": "~5.0.0",
     "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4.0",
     "@vue/component-compiler-utils": "^2.3.0",
     "@vue/test-utils": "^1.1.3",
     "@vue/vue2-jest": "^27.0.0-alpha.2",
@@ -52,8 +55,7 @@
     "jest": "^27.0.5",
     "prettier": "^2.1.2",
     "vue-loader": "^15.5.1",
-    "vue-template-compiler": "^2.5.22",
-    "webpack": "^4.28.4",
+    "webpack": "^5",
     "webpack-bundle-tracker": "^0.4.2",
     "webpack-dev-middleware": "^3.5.0"
   },
@@ -63,7 +65,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
     "rules": {},

django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/ComputeResourcesModal.vue

@@ -9,7 +9,7 @@
       v-model="selectedComputeResource"
       :options="computeResourceOptions"
     >
-      <template slot="first">
+      <template v-slot:first>
         <option :value="null">Please select compute resource</option>
       </template>
     </b-form-select>

django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/group_resource_preferences/BatchQueueResourcePolicy.vue

@@ -92,7 +92,7 @@ export default {
     },
   },
   created() {
-    this.$on("input", this.validate);
+    this.emitter.on("input", this.validate);
     this.validate();
   },
   data: function () {

django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/group_resource_preferences/ComputePreference.vue

@@ -53,8 +53,7 @@
                 "
               >
                 <template
-                  slot="null-option-label"
-                  slot-scope="nullOptionLabelScope"
+                  v-slot:null-option-label="nullOptionLabelScope"
                 >
                   <span v-if="nullOptionLabelScope.defaultCredentialSummary">
                     Use the default SSH credential for
@@ -147,14 +146,14 @@
       </div>
     </div>
     <div class="fixed-footer">
-      <b-button 
-      variant="primary" 
-      @click="save" 
+      <b-button
+      variant="primary"
+      @click="save"
       :disabled="!valid || !userHasWriteAccess"
         >Save</b-button
       >
-      <delete-button 
-      class="ml-2" 
+      <delete-button
+      class="ml-2"
       :disabled="!userHasWriteAccess"
       @delete="remove">
         Are you sure you want to remove the preferences for compute resource
@@ -243,8 +242,8 @@ export default {
     if (!this.id){
       this.userHasWriteAccess=true;
     }
-    this.$on("input", this.validate);
-    
+    this.emitter.on("input", this.validate);
+
   },
   data: function () {
     return {

django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/group_resource_preferences/ComputeResourceReservationEditor.vue

@@ -113,7 +113,7 @@ export default {
     };
   },
   created() {
-    this.$on("input", this.valuesChanged);
+    this.emitter.on("input", this.valuesChanged);
   },
   computed: {
     startTimeAsString() {

django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/group_resource_preferences/ComputeResourceReservationList.vue

@@ -6,7 +6,7 @@
     new-item-button-text="New Reservation"
     :newButtonDisabled="readonly"
   >
-    <template slot="additional-buttons">
+    <template v-slot:additional-buttons>
       <delete-button
         class="mr-2"
         @delete="deleteAllExpiredReservations"
@@ -16,7 +16,7 @@
         Are you sure you want to delete all expired reservations?
       </delete-button>
     </template>
-    <template slot="new-item-editor">
+    <template v-slot:new-item-editor>
       <b-card v-if="showNewItemEditor" title="New Reservation">
         <compute-resource-reservation-editor
           v-model="newReservation"
@@ -46,20 +46,20 @@
         </div>
       </b-card>
     </template>
-    <template slot="item-list" slot-scope="slotProps">
+    <template v-slot:item-list="slotProps">
       <b-table hover :fields="fields" :items="slotProps.items">
-        <template slot="cell(reservationName)" slot-scope="data">
+        <template v-slot:cell(reservationName)="data">
           {{ data.value }}
           <b-badge v-if="data.item.isExpired">Expired</b-badge>
           <b-badge v-if="data.item.isActive" variant="success">Active</b-badge>
           <b-badge v-if="data.item.isUpcoming" variant="info">Upcoming</b-badge>
         </template>
-        <template slot="cell(queueNames)" slot-scope="data">
+        <template v-slot:cell(queueNames)="data">
           <ul v-for="queueName in data.item.queueNames" :key="queueName">
             <li>{{ queueName }}</li>
           </ul>
         </template>
-        <template slot="cell(action)" slot-scope="data">
+        <template v-slot:cell(action)="data">
           <b-link
             v-if="!readonly"
             class="action-link"
@@ -79,7 +79,7 @@
             >?
           </delete-link>
         </template>
-        <template slot="row-details" slot-scope="row">
+        <template v-slot:row-details="row">
           <b-card>
             <compute-resource-reservation-editor
               :value="row.item"

django_airavata/apps/admin/static/django_airavata_admin/src/components/admin/group_resource_preferences/GroupComputeResourcePreference.vue

@@ -46,28 +46,28 @@
       new-item-button-text="New Compute Preference"
       @add-new-item="createComputePreference"
     >
-      <template slot="item-list" slot-scope="slotProps">
+      <template v-slot:item-list="slotProps">
         <b-table
           hover
           :fields="computePreferencesFields"
           :items="slotProps.items"
           sort-by="computeResourceId"
         >
-          <template slot="cell(computeResourceId)" slot-scope="row">
+          <template v-slot:cell(computeResourceId)="row">
             <compute-resource-name
               :compute-resource-id="row.item.computeResourceId"
             />
           </template>
-          <template slot="cell(policy)" slot-scope="row">
+          <template v-slot:cell(policy)="row">
             <compute-resource-policy-summary
               :compute-resource-id="row.item.computeResourceId"
               :group-resource-profile="data"
             />
           </template>
-          <template slot="cell(reservations)" slot-scope="row">
+          <template v-slot:cell(reservations)="row">
             <compute-resource-reservations-summary :reservations="row.value" />
           </template>
-          <template slot="cell(action)" slot-scope="row">
+          <template v-slot:cell(action)="row">
             <router-link
               class="action-link"
               v-if="userHasWriteAccess"

django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue

@@ -93,7 +93,7 @@
             @change="defaultQueueChanged"
             :disabled="readonly"
           >
-            <template slot="first">
+            <template v-slot:first>
               <option :value="null">Select a Default Queue</option>
             </template>
           </b-form-select>
@@ -174,12 +174,12 @@ export default {
     };
   },
   mounted() {
-    this.$on("input", () => {
+    this.emitter.on("input", () => {
       this.dirty = true;
     });
   },
-  destroyed() {
-    this.$off("input");
+  unmounted() {
+    this.emitter.off("input");
   },
   computed: {
     name() {

django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue

@@ -7,15 +7,15 @@
       new-item-button-text="New Deployment"
       :new-button-disabled="readonly"
     >
-      <template slot="item-list" slot-scope="slotProps">
+      <template v-slot:item-list="slotProps">
         <b-table
           striped
           hover
           :fields="fields"
           :items="slotProps.items"
           sort-by="computeHostId"
         >
-          <template slot="cell(action)" slot-scope="data">
+          <template v-slot:cell(action)="data">
             <router-link
               class="action-link"
               v-if="!data.item.userHasWriteAccess"

django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInputFieldEditor.vue

@@ -1,20 +1,22 @@
 <template>
   <b-card>
-    <div class="d-flex align-items-center" slot="header">
-      <div v-if="!readonly" class="drag-handle mr-1 text-muted">
-        <i class="fa fa-grip-vertical"></i>
-        <span class="sr-only">Drag handle for reordering</span>
+    <template v-slot:header>
+      <div class="d-flex align-items-center">
+        <div v-if="!readonly" class="drag-handle mr-1 text-muted">
+          <i class="fa fa-grip-vertical"></i>
+          <span class="sr-only">Drag handle for reordering</span>
+        </div>
+        <div class="mr-auto">Input Field: {{ data.name }}</div>
+        <b-link
+          v-if="!readonly"
+          class="text-secondary"
+          @click="deleteApplicationInput"
+        >
+          <i class="fa fa-trash"></i>
+          <span class="sr-only">Delete</span>
+        </b-link>
       </div>
-      <div class="mr-auto">Input Field: {{ data.name }}</div>
-      <b-link
-        v-if="!readonly"
-        class="text-secondary"
-        @click="deleteApplicationInput"
-      >
-        <i class="fa fa-trash"></i>
-        <span class="sr-only">Delete</span>
-      </b-link>
-    </div>
+    </template>
     <b-collapse :id="id + '-collapse'" :visible="!collapse">
       <b-form-group label="Name" :label-for="id + '-name'">
         <b-form-input

django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue

@@ -32,10 +32,10 @@
             :disabled="readonly"
           >
           </b-form-radio-group>
-          <div slot="description">
+          <template v-slot:description>
             Show a queue selector along with queue related settings (nodes,
             cores, walltime limit).
-          </div>
+          </template>
         </b-form-group>
         <b-form-group
           label="Queue Settings Calculator"
@@ -46,7 +46,7 @@
             :options="queueSettingsCalculatorOptions"
             :disabled="queueSettingsCalculatorOptions.length === 0"
           >
-            <template slot="first">
+            <template v-slot:first>
               <option :value="null">
                 If applicable, select a queue settings calculator
               </option>

django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationOutputFieldEditor.vue

@@ -1,16 +1,18 @@
 <template>
   <b-card>
-    <div class="d-flex align-items-center" slot="header">
-      <div class="mr-auto">Output Field: {{ data.name }}</div>
-      <b-link
-        v-if="!readonly"
-        class="text-secondary"
-        @click="deleteApplicationOutput"
-      >
-        <i class="fa fa-trash"></i>
-        <span class="sr-only">Delete</span>
-      </b-link>
-    </div>
+    <template v-slot:header>
+      <div class="d-flex align-items-center" >
+        <div class="mr-auto">Output Field: {{ data.name }}</div>
+        <b-link
+          v-if="!readonly"
+          class="text-secondary"
+          @click="deleteApplicationOutput"
+        >
+          <i class="fa fa-trash"></i>
+          <span class="sr-only">Delete</span>
+        </b-link>
+      </div>
+    </template>
     <b-form-group label="Name" :label-for="id + '-name'">
       <b-form-input
         :id="id + '-name'"

django_airavata/apps/admin/static/django_airavata_admin/src/components/credentials/SSHCredentialSelector.vue

@@ -6,9 +6,9 @@
         :options="credentialStoreTokenOptions"
         :disabled="readonly"
       >
-        <option
+        <template v-slot:first>
+          <option
           v-if="nullOption"
-          slot="first"
           :value="null"
           :disabled="nullOptionDisabled"
         >
@@ -24,6 +24,7 @@
             <span v-else> Unset the default SSH credential </span>
           </slot>
         </option>
+        </template>
       </b-form-select>
       <b-input-group-append>
         <clipboard-copy-button variant="secondary" :text="copySSHPublicKeyText">

django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue

@@ -7,7 +7,7 @@
     new-item-button-text="New Application"
     :new-button-disabled="!isGatewayAdmin"
   >
-    <template slot="item-list" slot-scope="slotProps">
+    <template v-slot:item-list="slotProps">
       <div class="row">
         <application-card
           v-for="item in slotProps.items"

django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ComputeResourcePreferenceDashboard.vue

@@ -5,12 +5,12 @@
     title="Group Resource Profiles"
     new-item-button-text="New Group Resource Profile"
   >
-    <template slot="item-list" slot-scope="slotProps">
+    <template v-slot:item-list="slotProps">
       <b-table striped hover :fields="fields" :items="slotProps.items">
-        <template slot="cell(updatedTime)" slot-scope="data">
+        <template v-slot:cell(updatedTime)="data">
           <human-date :date="data.value" />
         </template>
-        <template slot="cell(action)" slot-scope="data">
+        <template v-slot:cell(action)="data">
           <router-link
             class="action-link"
             v-if="data.item.userHasWriteAccess"