From d6b4a3d5abb897371e6376e9e3eb2f8231880a6e Mon Sep 17 00:00:00 2001
From: Sanjiban Sengupta <sanjiban.sg@gmail.com>
Date: Thu, 20 Jul 2023 03:38:33 +0530
Subject: [PATCH] feat: show both level and desc, with levels from external
 json file

---
 client/package-lock.json                      |  12 +-
 .../assets/js/validation-override-levels.json | 250 ++++++++++++++++++
 client/src/components/ValidationLevel.vue     | 109 +++++---
 3 files changed, 331 insertions(+), 40 deletions(-)
 create mode 100644 client/src/assets/js/validation-override-levels.json

diff --git a/client/package-lock.json b/client/package-lock.json
index 0714adbe..f0861d99 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -7024,9 +7024,9 @@
       }
     },
     "node_modules/vue-multiselect": {
-      "version": "3.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.1.tgz",
-      "integrity": "sha512-V+jpydtjyHcQ+yjHsEWEBrDAopOx/pufNkSAXNVDAGQ+ESDEJ7wYejNd9H1RiCnFOYK4yf1XSGqE+Mp3HJXmdg==",
+      "version": "3.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.2.tgz",
+      "integrity": "sha512-TFVHtI/KdWoD3Opzbkso8OIqkZlZEqFF7f2jlYx1ttgC4Jv/48IGlU5zn6cBR4p2bFDFGCHF5SkLCaadLhnBPQ==",
       "engines": {
         "node": ">= 4.0.0",
         "npm": ">= 3.0.0"
@@ -12456,9 +12456,9 @@
       }
     },
     "vue-multiselect": {
-      "version": "3.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.1.tgz",
-      "integrity": "sha512-V+jpydtjyHcQ+yjHsEWEBrDAopOx/pufNkSAXNVDAGQ+ESDEJ7wYejNd9H1RiCnFOYK4yf1XSGqE+Mp3HJXmdg=="
+      "version": "3.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.2.tgz",
+      "integrity": "sha512-TFVHtI/KdWoD3Opzbkso8OIqkZlZEqFF7f2jlYx1ttgC4Jv/48IGlU5zn6cBR4p2bFDFGCHF5SkLCaadLhnBPQ=="
     },
     "vue-router": {
       "version": "4.1.6",
diff --git a/client/src/assets/js/validation-override-levels.json b/client/src/assets/js/validation-override-levels.json
new file mode 100644
index 00000000..b05719ec
--- /dev/null
+++ b/client/src/assets/js/validation-override-levels.json
@@ -0,0 +1,250 @@
+[
+    {
+      "level": 1,
+      "desc": "not yet implemented"
+    },
+    {
+      "level": 2,
+      "desc": "illegal value"
+    },
+    {
+      "level": 4,
+      "desc": "illegal URI"
+    },
+    {
+      "level": 5,
+      "desc": "illegal glob"
+    },
+    {
+      "level": 6,
+      "desc": "deprecation"
+    },
+    {
+      "level": 7,
+      "desc": "versioning"
+    },
+    {
+      "level": 999,
+      "desc": "experimental"
+    },
+    {
+      "level": 1000,
+      "desc": "protobuf-related diagnostic"
+    },
+    {
+      "level": 1001,
+      "desc": "protobuf parsing failed"
+    },
+    {
+      "level": 1002,
+      "desc": "missing required protobuf field"
+    },
+    {
+      "level": 1004,
+      "desc": "encountered a protobuf 'any'"
+    },
+    {
+      "level": 1006,
+      "desc": "missing protobuf 'any' declaration"
+    },
+    {
+      "level": 2000,
+      "desc": "YAML-related diagnostic"
+    },
+    {
+      "level": 2001,
+      "desc": "did not attempt to resolve YAML"
+    },
+    {
+      "level": 2002,
+      "desc": "failed to resolve YAML"
+    },
+    {
+      "level": 2003,
+      "desc": "failed to parse YAML"
+    },
+    {
+      "level": 2004,
+      "desc": "YAML does not conform to schema"
+    },
+    {
+      "level": 2005,
+      "desc": "missing required YAML key"
+    },
+    {
+      "level": 2007,
+      "desc": "missing required YAML array element"
+    },
+    {
+      "level": 2008,
+      "desc": "invalid YAML value type"
+    },
+    {
+      "level": 2009,
+      "desc": "cyclic dependency"
+    },
+    {
+      "level": 3000,
+      "desc": "link resolution diagnostic"
+    },
+    {
+      "level": 3001,
+      "desc": "failed to resolve anchor"
+    },
+    {
+      "level": 3005,
+      "desc": "use of anchor zero"
+    },
+    {
+      "level": 3006,
+      "desc": "failed to resolve type variation name & class pair"
+    },
+    {
+      "level": 3007,
+      "desc": "unresolved name lookup"
+    },
+    {
+      "level": 3008,
+      "desc": "ambiguous name lookup"
+    },
+    {
+      "level": 3009,
+      "desc": "duplicate definition"
+    },
+    {
+      "level": 3010,
+      "desc": "invalid compound vs. simple function name usage"
+    },
+    {
+      "level": 4000,
+      "desc": "type-related diagnostics"
+    },
+    {
+      "level": 4001,
+      "desc": "unknown type"
+    },
+    {
+      "level": 4002,
+      "desc": "mismatched type parameters"
+    },
+    {
+      "level": 4003,
+      "desc": "mismatched field name associations"
+    },
+    {
+      "level": 4004,
+      "desc": "invalid swizzle operation"
+    },
+    {
+      "level": 4005,
+      "desc": "mismatched types"
+    },
+    {
+      "level": 4006,
+      "desc": "struct type is required"
+    },
+    {
+      "level": 4007,
+      "desc": "mismatched type variation"
+    },
+    {
+      "level": 4008,
+      "desc": "mismatched nullability"
+    },
+    {
+      "level": 4009,
+      "desc": "invalid type pattern or derivation expression"
+    },
+    {
+      "level": 4010,
+      "desc": "type pattern or derivation expression failed to match or evaluate"
+    },
+    {
+      "level": 4011,
+      "desc": "parse error in type pattern or derivation expression"
+    },
+    {
+      "level": 4012,
+      "desc": "name resolution error in type pattern or derivation expression"
+    },
+    {
+      "level": 4013,
+      "desc": "invalid field name"
+    },
+    {
+      "level": 4014,
+      "desc": "unsupported type pattern or derivation construct"
+    },
+    {
+      "level": 5000,
+      "desc": "relation-related diagnostics"
+    },
+    {
+      "level": 5001,
+      "desc": "missing root relation"
+    },
+    {
+      "level": 5002,
+      "desc": "missing relation"
+    },
+    {
+      "level": 5003,
+      "desc": "invalid relation"
+    },
+    {
+      "level": 6000,
+      "desc": "expression-related diagnostics"
+    },
+    {
+      "level": 6001,
+      "desc": "field reference into non-existent stream"
+    },
+    {
+      "level": 6002,
+      "desc": "illegal literal value"
+    },
+    {
+      "level": 6003,
+      "desc": "function definition unavailable"
+    },
+    {
+      "level": 6004,
+      "desc": "illegal subquery"
+    },
+    {
+      "level": 7000,
+      "desc": "diagnostics for pointing out parts of the plan that can be removed without changing its semantics"
+    },
+    {
+      "level": 7001,
+      "desc": "redundant protobuf 'any' declaration"
+    },
+    {
+      "level": 7002,
+      "desc": "redundant extension URI definition"
+    },
+    {
+      "level": 7003,
+      "desc": "redundant function declaration"
+    },
+    {
+      "level": 7004,
+      "desc": "redundant type declaration"
+    },
+    {
+      "level": 7005,
+      "desc": "redundant type variation declaration"
+    },
+    {
+      "level": 7006,
+      "desc": "redundant list slice"
+    },
+    {
+      "level": 7007,
+      "desc": "redundant field"
+    },
+    {
+      "level": 7008,
+      "desc": "redundant enum variant"
+    }
+  ]
diff --git a/client/src/components/ValidationLevel.vue b/client/src/components/ValidationLevel.vue
index 464163b2..78d4520f 100644
--- a/client/src/components/ValidationLevel.vue
+++ b/client/src/components/ValidationLevel.vue
@@ -1,19 +1,78 @@
 <template>
   <div id="override_level">
-    <Multiselect
-      v-model="value"
+    <multiselect
+      v-model="selected"
       placeholder="Add a validation override level"
-      label="code"
-      track-by="code"
-      :options="options"
+      label="level"
+      track-by="level"
+      :options="filterOptions"
       :multiple="true"
       :taggable="true"
-      :option-height="50"
-      @tag="addLevel"
-    ></Multiselect>
+      :searchable="true"
+      @search-change="handleSearchChange"
+    >
+      <template #option="{ option }">
+        <div v-if="filterOptions.length > 0">
+          <span class="option__small"
+            >{{ option.level }} - {{ option.desc }}</span
+          >
+        </div>
+        <div class="option__unavailable" v-else>
+          <span>Level</span><br />
+          <span>not supported</span>
+        </div>
+      </template>
+    </multiselect>
   </div>
 </template>
 
+<script>
+import Multiselect from "vue-multiselect";
+import validationOverrideLevels from "../assets/js/validation-override-levels.json";
+
+export default {
+  name: "ValidationLevel",
+  components: {
+    Multiselect,
+  },
+  data() {
+    return {
+      selected: [],
+      options: [],
+      searchLevel: "",
+    };
+  },
+  computed: {
+    filterOptions() {
+      if (!this.searchLevel) {
+        return this.options;
+      }
+      const searchLevelLower = this.searchLevel.toLowerCase();
+      return this.options.filter(
+        (option) =>
+          option.level.toString().startsWith(searchLevelLower) ||
+          option.desc.toLowerCase().includes(searchLevelLower)
+      );
+    },
+    showNoOptions() {
+      return this.searchLevel !== "" && this.filterOptions.length === 0;
+    },
+  },
+  mounted() {
+    this.options = validationOverrideLevels;
+    this.selected.push(this.options.find((option) => option.level === 1002));
+  },
+  methods: {
+    handleSearchChange(searchLevel) {
+      this.searchLevel = searchLevel;
+    },
+    getValidationOverrideLevel() {
+      return this.selected.map((item) => item.level);
+    },
+  },
+};
+</script>
+
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
 <style>
@@ -39,30 +98,12 @@
   padding-top: 0%;
   z-index: 1;
 }
+.multiselect__content-wrapper {
+  width: unset !important;
+  min-width: 100% !important;
+  max-height: 200px !important;
+}
+.option__unavailable {
+  line-height: 1.4;
+}
 </style>
-
-<script>
-import Multiselect from "vue-multiselect";
-
-export default {
-  name: "ValidationLevel",
-  components: {
-    Multiselect,
-  },
-  data: function () {
-    return {
-      value: [{ code: 1002 }],
-      options: [{ code: 1002 }, { code: 2001 }, { code: 1 }],
-    };
-  },
-  methods: {
-    addLevel(level) {
-      this.options.push({ code: parseInt(level) });
-      this.value.push({ code: parseInt(level) });
-    },
-    getValidationOverrideLevel() {
-      return this.value.map((item) => item.code);
-    },
-  },
-};
-</script>