GH-1306: Upgrade Jena UI to Vue3

apache · Nov 1, 2022 · eb7c320 · eb7c320
1 parent 698260d
commit eb7c320
Show file tree

Hide file tree

Showing 37 changed files with 1,244 additions and 1,072 deletions.
diff --git a/jena-fuseki2/jena-fuseki-ui/.eslintrc.js b/jena-fuseki2/jena-fuseki-ui/.eslintrc.js
@@ -21,17 +21,22 @@ module.exports = {
     node: true
   },
   extends: [
-    'plugin:vue/essential',
-    '@vue/standard'
+    'plugin:vue/vue3-recommended'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/custom-event-name-casing': 'off',
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
+    'vue/no-reserved-component-names': 'off',
+    'vue/order-in-components': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/attributes-order': 'off',
+    'vue/html-self-closing': 'off'
   },
   overrides: [
     {

diff --git a/jena-fuseki2/jena-fuseki-ui/.gitignore b/jena-fuseki2/jena-fuseki-ui/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /node
 /coverage
+.nyc_output/**
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/

diff --git a/jena-fuseki2/jena-fuseki-ui/package.json b/jena-fuseki2/jena-fuseki-ui/package.json
@@ -7,66 +7,68 @@
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "serve:fuseki": "nodemon src/services/mock/json-server.js src/services/mock/db.json",
-    "serve:offline": "concurrently --names 'SERVER,CLIENT' --prefix-colors 'yellow,blue' --success \"first\" --kill-others 'yarn run serve:fuseki' 'yarn run serve'",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "bash -c 'concurrently --names \"SERVER,TESTS\" --prefix-colors \"yellow,blue\" --success \"first\" --kill-others \"yarn run serve:fuseki\" \"vue-cli-service test:e2e ${0}\"'",
-    "coverage:unit": "nyc vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
     "coverage:e2e": "bash -c 'concurrently --names \"SERVER,TESTS\" --prefix-colors \"yellow,blue\" --success \"first\" --kill-others \"yarn run serve:fuseki\" \"nyc vue-cli-service test:e2e ${0}\"'",
-    "lint": "vue-cli-service lint"
+    "coverage:unit": "nyc vue-cli-service test:unit",
+    "serve:fuseki": "nodemon src/services/mock/json-server.js src/services/mock/db.json",
+    "serve:offline": "concurrently --names 'SERVER,CLIENT' --prefix-colors 'yellow,blue' --success \"first\" --kill-others 'yarn run serve:fuseki' 'yarn run serve'"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^2.0.6",
-    "@popperjs/core": "^2.11.5",
-    "@triply/yasqe": "^4.2.23",
-    "@triply/yasr": "^4.2.23",
-    "axios": "^0.26.1",
-    "bootstrap": "^5.2.0-beta1",
-    "core-js": "^3.21.1",
-    "follow-redirects": "^1.14.9",
-    "nanoid": "^3.3.1",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.3",
-    "vue-upload-component": "^2.8.22"
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
+    "@popperjs/core": "^2.11.6",
+    "@triply/yasqe": "^4.2.27",
+    "@triply/yasr": "^4.2.27",
+    "@vue/compat": "^3.2.39",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.2.1",
+    "core-js": "^3.25.2",
+    "follow-redirects": "^1.15.2",
+    "mitt": "^3.0.0",
+    "nanoid": "^4.0.0",
+    "vue": "^3.2.39",
+    "vue-router": "^4.1.5",
+    "vue-upload-component": "^3.1.2"
   },
   "devDependencies": {
-    "@babel/register": "^7.17.0",
-    "@cypress/code-coverage": "^3.9.12",
-    "@cypress/vue": "^4.0.0",
-    "@cypress/webpack-preprocessor": "^5.11.0",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/register": "^7.18.9",
+    "@cypress/code-coverage": "^3.10.0",
+    "@cypress/vue": "^4.2.0",
+    "@cypress/webpack-preprocessor": "^5.12.2",
     "@istanbuljs/nyc-config-babel": "^3.0.0",
-    "@vue/cli-plugin-babel": "^5.0.1",
-    "@vue/cli-plugin-e2e-cypress": "^5.0.5",
-    "@vue/cli-plugin-eslint": "^5.0.1",
-    "@vue/cli-plugin-unit-mocha": "~5.0.1",
-    "@vue/cli-service": "^5.0.1",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "@vue/test-utils": "^1.3.0",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-e2e-cypress": "^5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-unit-mocha": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.2.39",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^2.0.2",
     "babel-plugin-istanbul": "^6.1.1",
     "chai": "^4.3.6",
-    "concurrently": "^7.0.0",
-    "cypress": "^10.3.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-import": "^2.25.4",
+    "concurrently": "^7.4.0",
+    "cypress": "^10.8.0",
+    "eslint": "^8.23.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^8.4.0",
-    "express": "^4.17.2",
+    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^9.5.1",
+    "express": "^4.18.1",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "istanbul-lib-coverage": "^3.0.0",
+    "istanbul-lib-coverage": "^3.2.0",
     "json-server": "^0.17.0",
-    "nodemon": "^2.0.19",
+    "nodemon": "^2.0.20",
     "nyc": "^15.1.0",
-    "sass": "^1.53.0",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.54.9",
+    "sass-loader": "^13.0.2",
     "sinon": "^14.0.0",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.73.0"
+    "webpack": "^5.74.0"
   },
   "overrides": {
     "terser": "^5.14.2"

diff --git a/jena-fuseki2/jena-fuseki-ui/src/App.vue b/jena-fuseki2/jena-fuseki-ui/src/App.vue
@@ -21,7 +21,7 @@
       <div class="row">
         <Menu />
       </div>
-      <router-view/>
+      <router-view />
     </div>
     <Toast />
   </div>

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/Menu.vue b/jena-fuseki2/jena-fuseki-ui/src/components/Menu.vue
@@ -19,7 +19,7 @@
   <nav class="navbar navbar-expand-md bg-light">
     <div class="container-fluid mx-2 mx-md-0">
       <router-link to="/" class="navbar-brand">
-        <img alt="Apache Jena logo" width="52px" src="../assets/logo.svg"> Apache Jena Fuseki
+        <img alt="Apache Jena logo" src="../assets/logo.svg" style="width: 52px;"> Apache Jena Fuseki
       </router-link>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/ServerStatus.vue b/jena-fuseki2/jena-fuseki-ui/src/components/ServerStatus.vue
@@ -68,7 +68,7 @@ export default {
     }, 5000)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     clearInterval(this.interval)
     this.interval = null
   }

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/Toast.vue b/jena-fuseki2/jena-fuseki-ui/src/components/Toast.vue
@@ -89,7 +89,7 @@ export default {
   },
 
   created () {
-    BUS.$on('toast', this.handleMessageEvent)
+    BUS.on('toast', this.handleMessageEvent)
   },
 
   methods: {

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/dataset/JenaTable.vue b/jena-fuseki2/jena-fuseki-ui/src/components/dataset/JenaTable.vue
@@ -91,9 +91,8 @@
         role="row"
         class="jena-table-cell"
       >
-        <template v-for="(field, fieldIndex) of fields">
+        <template v-for="(field, fieldIndex) of fields" :key="`jena-table-tbody-row-${rowIndex}-field-${fieldIndex}`">
           <td
-            :key="`jena-table-tbody-row-${rowIndex}-field-${fieldIndex}`"
             :aria-colindex="fieldIndex + 1"
             role="cell"
           >
@@ -110,7 +109,7 @@
     <tfoot role="rowgroup">
       <slot
         name="custom-foot"
-        :fields="this.fields"
+        :fields="fields"
       ></slot>
     </tfoot>
   </table>
@@ -143,10 +142,13 @@ export default {
       type: Number,
       default: -1
     },
-    filter: String,
+    filter: {
+      type: String,
+      default: null
+    },
     busy: {
       type: Boolean,
-      default: false
+      default: null
     },
     emptyText: {
       type: String,
@@ -177,7 +179,7 @@ export default {
       // Sorting terms.
       const sortBy = this.sortBy
       // Apply the filter - if any - and sort the list.
-      const filtered = this.items
+      const filtered = [...this.items]
         .filter(row => {
           if (!this.filter) {
             return true

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/dataset/JenaTableTh.vue b/jena-fuseki2/jena-fuseki-ui/src/components/dataset/JenaTableTh.vue
@@ -67,6 +67,10 @@ export default {
     }
   },
 
+  emits: [
+    'toggle-sort-status'
+  ],
+
   methods: {
     toggleSortStatus () {
       if (this.sortable === true) {

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/dataset/Menu.vue b/jena-fuseki2/jena-fuseki-ui/src/components/dataset/Menu.vue
@@ -18,25 +18,25 @@
 <template>
   <ul class="nav nav-tabs card-header-tabs">
     <li class="nav-item">
-      <router-link :to="`/dataset/${this.datasetName}/query`" class="nav-link" exact-active-class="active">
+      <router-link :to="`/dataset/${datasetName}/query`" class="nav-link" exact-active-class="active">
         <FontAwesomeIcon icon="question-circle" />
         <span class="ms-1">query</span>
       </router-link>
     </li>
     <li class="nav-item">
-      <router-link :to="`/dataset/${this.datasetName}/upload`" class="nav-link" exact-active-class="active">
+      <router-link :to="`/dataset/${datasetName}/upload`" class="nav-link" exact-active-class="active">
         <FontAwesomeIcon icon="upload" />
         <span class="ms-1">add data</span>
       </router-link>
     </li>
     <li class="nav-item">
-      <router-link :to="`/dataset/${this.datasetName}/edit`" class="nav-link" exact-active-class="active">
+      <router-link :to="`/dataset/${datasetName}/edit`" class="nav-link" exact-active-class="active">
         <FontAwesomeIcon icon="edit" />
         <span class="ms-1">edit</span>
       </router-link>
     </li>
     <li class="nav-item">
-      <router-link :to="`/dataset/${this.datasetName}/info`" class="nav-link" exact-active-class="active">
+      <router-link :to="`/dataset/${datasetName}/info`" class="nav-link" exact-active-class="active">
         <FontAwesomeIcon icon="tachometer-alt" />
         <span class="ms-1">info</span>
       </router-link>

diff --git a/jena-fuseki2/jena-fuseki-ui/src/components/dataset/Pagination.vue b/jena-fuseki2/jena-fuseki-ui/src/components/dataset/Pagination.vue
@@ -22,7 +22,8 @@
         role="menubar"
         aria-disabled="false"
         aria-label="Pagination"
-        class="pagination mb-2 mx-0 justify-content-center">
+        class="pagination mb-2 mx-0 justify-content-center"
+      >
         <!-- pages backward controls -->
         <li
           :aria-hidden="getBackLinkAriaDisabled()"
@@ -37,7 +38,9 @@
             role="menuitem"
             tabindex="-1"
             aria-label="Go to first page"
-            >«</button>
+          >
+            «
+          </button>
         </li>
         <li
           :aria-hidden="getBackLinkAriaDisabled()"
@@ -51,14 +54,17 @@
             type="button"
             aria-label="Go to previous page"
             role="menuitem"
-          >‹</button>
+          >
+            ‹
+          </button>
         </li>
         <!-- pages -->
         <li
           v-for="page in numberOfPages"
           :key="page"
           role="presentation"
-          class="page-item">
+          class="page-item"
+        >
           <span
             :aria-label="`Go to page ${ page }`"
             :class="getPageLinkClass(page)"
@@ -84,7 +90,9 @@
             type="button"
             role="menuitem"
             aria-label="Go to last page"
-          >›</button>
+          >
+            ›
+          </button>
         </li>
         <li
           :aria-hidden="getNextLinkAriaDisabled()"
@@ -98,7 +106,9 @@
             type="button"
             role="menuitem"
             aria-label="Go to next page"
-          >»</button>
+          >
+            »
+          </button>
         </li>
       </ul>
     </div>
@@ -134,6 +144,10 @@ export default {
     }
   },
 
+  emits: [
+    'input'
+  ],
+
   methods: {
     goToPage (page) {
       this.$emit('input', page)