GH-2370: Improve validation of dataset graph names

Author: kinow

jena-fuseki2/jena-fuseki-ui/src/views/dataset/Upload.vue

@@ -60,7 +60,7 @@
                         placeholder="Leave blank for default graph"
                       />
                       <div class="invalid-feedback">
-                        Invalid graph name. Please remove any spaces.
+                        Invalid graph name. Please remove any spaces and encoded values.
                       </div>
                     </div>
                   </div>
@@ -122,22 +122,20 @@
                   <div class="pt-2 pb-2">
                     <div class="progress" style="height: 1.5rem;">
                       <div
-                        :style="`width: ${uploadSucceededPercentage}%`"
-                        :aria-valuenow="uploadSucceededPercentage"
-                        :title="`${uploadSucceededCount}/${uploadCount}`"
                         class="progress-bar"
                         role="progressbar"
+                        :style="`width: ${uploadSucceededPercentage}%`"
+                        :aria-valuenow="uploadSucceededPercentage"
                         aria-valuemin="0"
                         aria-valuemax="100"
                       >
                         {{ uploadSucceededCount }}/{{ uploadCount }}
                       </div>
                       <div
-                        :style="`width: ${uploadFailedPercentage}%`"
-                        :aria-valuenow="uploadFailedPercentage"
-                        :title="`${uploadFailedCount}/${uploadCount}`"
                         class="progress-bar bg-danger"
                         role="progressbar"
+                        :style="`width: ${uploadFailedPercentage}%`"
+                        :aria-valuenow="uploadFailedPercentage"
                         aria-valuemin="0"
                         aria-valuemax="100"
                       >
@@ -327,7 +325,8 @@ export default {
       }
       const params = (this.datasetGraphName && this.datasetGraphName !== '') ? `?graph=${this.datasetGraphName}` : ''
       const dataEndpoint = this.services['gsp-rw']['srv.endpoints'].find(endpoint => endpoint !== '') || ''
-      return this.$fusekiService.getFusekiUrl(`/${this.datasetName}/${dataEndpoint}${params}`)
+      const fusekiUrl = this.$fusekiService.getFusekiUrl(`/${this.datasetName}/${dataEndpoint}${params}`)
+      return fusekiUrl
     },
     uploadCount () {
       if (!this.upload || !this.upload.files) {
@@ -418,15 +417,33 @@ export default {
       return this.validateGraphName() && this.validateFiles()
     },
     validateGraphName () {
-      // No spaces allowed in graph names.
-      const pattern = /^[^\s]+$/
       const graphName = this.$refs['dataset-graph-name'].value
-      if (graphName === '' || pattern.test(graphName)) {
+      // An empty graph name is OK.
+      if (graphName === '') {
         this.graphNameClasses = ['form-control is-valid']
         return true
       }
-      this.graphNameClasses = ['form-control is-invalid']
-      return false
+      // No spaces allowed in graph names.
+      const pattern = /^\S+$/
+      if (!pattern.test(graphName)) {
+        this.graphNameClasses = ['form-control is-invalid']
+        return false
+      }
+      // Only valid URIs allowed.
+      try {
+        new URL(graphName)
+      } catch {
+        this.graphNameClasses = ['form-control is-invalid']
+        return false
+      }
+      // Encoded components are not allowed.
+      if (decodeURI(graphName) !== decodeURIComponent(graphName)) {
+        this.graphNameClasses = ['form-control is-invalid']
+        return false
+      }
+      // If it reached this part, then it's a valid graph name.
+      this.graphNameClasses = ['form-control is-valid']
+      return true
     },
     validateFiles () {
       if (this.upload.files !== null && this.upload.files.length > 0) {