wmde · hasanakg · Nov 10, 2023 · Nov 3, 2023 · Nov 3, 2023 · Nov 3, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,6 +12,15 @@ module.exports = {
 	rules: {
 		'max-len': [ 'error', 120 ],
 		'no-multiple-empty-lines' : ['error', { 'max': 1 }],
-		'vue/multi-word-component-names' : [ 'off' ]
-		},	
+		'vue/multi-word-component-names' : [ 'off' ],
+		// Migration changes
+		'vue/no-deprecated-v-bind-sync': 'off',
+		'vue/no-deprecated-slot-attribute': 'off',
+		'vue/require-explicit-emits': 'off',
+		'vue/no-deprecated-v-on-native-modifier': 'off',
+		'vue/no-deprecated-slot-scope-attribute': 'off',
+		'vue/no-v-for-template-key-on-child': 'off',
+		'vue/no-deprecated-destroyed-lifecycle': 'off',
+		'vue/no-v-model-argument': 'off'
+		},
 };
diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,4 @@
+const path = require("path");
 module.exports = {
     // Where are your vue tests located?
     "roots": [
@@ -9,7 +10,7 @@ module.exports = {
     // js: transform js files with babel, we can now use import statements in tests
     // ts: transform ts files with babel, to import ts files into js specs
     "transform": {
-        ".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue2-jest",
+        ".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue3-jest",
         "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
         "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest"
     },
@@ -21,6 +22,29 @@ module.exports = {
     // "import Counter from '@/Counter.vue'"
     // (no need for a full path)
     "moduleNameMapper": {
-        "^@/(.*)$": "<rootDir>/resources/js/$1"
+        "^vue$": "@vue/compat",
+        '^@vue/composition-api$': '@vue/compat',
+        '^@wmde/wikit-vue-components$':
+            '@wmde/wikit-vue-components/dist/wikit-vue-components-vue3compat.common.js',
+        '^wikit-dist(.*)$': "<rootDir>/node_modules/@wmde/wikit-vue-components/dist$1",
+        "^@/(.*)$": "<rootDir>/resources/js/$1",
     },
+    // For Vue migration build
+    // Further info: https://test-utils.vuejs.org/migration/#-vue-vue3-jest-jest-28
+    "testEnvironmentOptions": {
+        "customExportConditions": ["node", "node-addons"],
+    },
+    // For Vue migration build
+    // Add compat config to test as well
+    "globals": {
+        "vue-jest": {
+            "compilerOptions": {
+                compatConfig: {
+                    MODE: 3,
+                    COMPILER_V_ON_NATIVE: true,
+                    COMPILER_V_BIND_SYNC: true
+                }
+            }
+        }
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,13 +15,16 @@
         "production": "mix --production"
     },
     "devDependencies": {
+        "@pinia/testing": "^0.1.3",
         "@types/jest": "^29.5.5",
         "@types/lodash": "^4.14.199",
         "@typescript-eslint/eslint-plugin": "^6.7.5",
         "@typescript-eslint/parser": "^6.7.5",
+        "@vue/compiler-sfc": "^3.3.8",
         "@vue/eslint-config-typescript": "^12.0.0",
-        "@vue/test-utils": "^1.3.6",
-        "@vue/vue2-jest": "^29.2.6",
+        "@vue/test-utils": "^2.0.0",
+        "@vue/vue3-jest": "^29.2.4",
+        "@vue/runtime-dom": "^3.3.8",
         "@wikimedia/codex": "^0.20.0",
         "@wikimedia/codex-design-tokens": "^0.20.0",
         "@wikimedia/codex-icons": "^0.20.0",
@@ -42,25 +45,19 @@
         "ts-jest": "^29.1.0",
         "ts-loader": "^9.5.0",
         "typescript": "^5.2.2",
-        "vue-loader": "^15.10.2",
-        "vue-template-compiler": "^2.6.14"
+        "vue-loader": "^16.0.0"
     },
     "dependencies": {
         "@inertiajs/inertia": "^0.11.0",
-        "@inertiajs/inertia-vue": "^0.8.0",
-        "@vue/composition-api": "^1.7.2",
+        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@vue/compat": "^3.3.8",
         "@wmde/wikit-tokens": "^2.1.0-alpha.15",
         "@wmde/wikit-vue-components": "^2.1.0-alpha.16",
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
+        "pinia": "^2.1.7",
         "ress": "^5.0.2",
-        "vue": "^2.6.14",
-        "vue-banana-i18n": "1.5.0",
-        "vuex": "^3.6.2"
-    },
-    "overrides": {
-        "@wikimedia/codex": {
-            "vue": "^2.6.14"
-        }
+        "vue": "^3.3.8",
+        "vue-banana-i18n": "2.3.0"
     }
 }
diff --git a/public/i18n/en.json b/public/i18n/en.json
@@ -47,7 +47,7 @@
     "review-status-none": "None of the above",
     "result-form-submit": "Save reviews",
     "changes-submitted-message": "Review successfully saved for:",
-    "log-in-message": "Please <a href=\"$1\">log in</a> to make any changes.",
+    "log-in-message": "Please [$1 log in] to make any changes.",
     "results-page-description": "You can fix them! The table below presents you with links to the statements on Wikidata and to the entries on the external source. You can compare the values and manually fix the mismatches by editing Wikidata or the external source. After investigating and fixing the mismatches, you can indicate their status using the options from the drop-down. This tool will not automatically make these edits for you upon submission.",
     "results-page-title": "What should I do with the mismatches?",
     "results-instructions-button": "Instructions",
@@ -80,17 +80,17 @@
     "faq-dialog-question-relevance": "How up-to-date are the mismatches?",
     "faq-dialog-answer-relevance": "It depends! Inspecting external databases, catalogs and websites takes a lot of time and resources. The checks are performed periodically in batches. We try hard to remove outdated mismatches, but you might still find some.",
     "faq-dialog-question-contributing": "How can I contribute new mismatches?",
-    "faq-dialog-answer-contributing": "If you've compared Wikidata's data against an external source and have found mismatches, you can open a task in <a href=\"$1\">Phabricator</a> to request an upload of your mismatches.",
+    "faq-dialog-answer-contributing": "If you've compared Wikidata's data against an external source and have found mismatches, you can open a task in [$1 Phabricator] to request an upload of your mismatches.",
     "faq-dialog-question-more-info": "Where can I find more information?",
-    "faq-dialog-answer-more-info": "This tool’s documentation and the source code are available on <a href=\"$1\">GitHub</a>. You can read more about the Mismatch Finder on <a href=\"$2\">Wikidata</a> or you can <a href=\"$3\">give us feedback</a>.",
+    "faq-dialog-answer-more-info": "This tool’s documentation and the source code are available on [$1 GitHub]. You can read more about the Mismatch Finder on [$2 Wikidata] or you can [$3 give us feedback].",
     "wikidata-tool-footer-about-tool": "About the $1",
-    "wikidata-tool-footer-license": "Licensed under <a href=\"$1\">$2</a>",
+    "wikidata-tool-footer-license": "Licensed under [$1 $2]",
     "wikidata-tool-footer-source": "Get source code",
     "wikidata-tool-footer-issues": "Report an issue",
     "wikidata-tool-footer-about-us": "About us",
     "wikidata-tool-footer-privacy": "Privacy policy",
     "wikidata-tool-footer-wmde": "Wikimedia Deutschland",
-    "wikidata-tool-footer-team": "Made with ♥ by the <a href=\"$1\">Wikidata Team</a>",
+    "wikidata-tool-footer-team": "Made with ♥ by the [$1 Wikidata Team]",
     "mismatch-finder-license": "BSD 3-Clause License",
     "mismatch-finder-footer-more-tools": "More data quality tools",
     "tool-query-builder": "Query Builder",

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/noscript.css": "/css/noscript.css",
     "/css/app.css": "/css/app.css",
+    "/css/noscript.css": "/css/noscript.css",
     "/images/clear.svg": "/images/clear.svg",
     "/images/close.svg": "/images/close.svg",
     "/images/download-stats.svg": "/images/download-stats.svg",

diff --git a/resources/js/Components/AuthWidget.vue b/resources/js/Components/AuthWidget.vue
@@ -10,11 +10,12 @@
 
 <script lang="ts">
 
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import User from '../types/User';
 import { Link as WikitLink } from '@wmde/wikit-vue-components';
 
-export default Vue.extend({
+export default defineComponent({
     props: {
         user: Object as PropType<User>
     },

diff --git a/resources/js/Components/LanguageSelector.vue b/resources/js/Components/LanguageSelector.vue
@@ -35,11 +35,11 @@
 import LanguageSelectorInput from '../Components/LanguageSelectorInput.vue';
 import LanguageSelectorOptionsMenu from '../Components/LanguageSelectorOptionsMenu.vue';
 import Language from '../types/Language';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import languagedata from '@wikimedia/language-data';
 import closeUrl from '../../img/close.svg';
 
-export default Vue.extend( {
+export default defineComponent( {
 	name: 'LanguageSelector',
 	components: {
 		LanguageSelectorInput,

diff --git a/resources/js/Components/LanguageSelectorInput.vue b/resources/js/Components/LanguageSelectorInput.vue
@@ -29,11 +29,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import searchUrl from '../../img/search.svg';
 import clearUrl from '../../img/clear.svg';
 
-export default Vue.extend( {
+export default defineComponent( {
 	name: 'LanguageSelectorInput',
 	props: {
 		value: {

diff --git a/resources/js/Components/LanguageSelectorOptionsMenu.vue b/resources/js/Components/LanguageSelectorOptionsMenu.vue
@@ -35,9 +35,10 @@
 
 <script lang="ts">
 import Language from '../types/Language';
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend( {
+export default defineComponent( {
 	name: 'LanguageSelectorOptionsMenu',
 	props: {
 		languages: {

diff --git a/resources/js/Components/LoadingOverlay.vue b/resources/js/Components/LoadingOverlay.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
     name: 'LoadingOverlay',
     props: {
         delay: {

diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
@@ -46,14 +46,14 @@
             </span>
         </td>
         <td :data-header="$i18n('column-review-status')">
-            <dropdown
-                :menuItems="Object.values(statusOptions)"
+            <cdx-select
+                :menu-items="Object.values(statusOptions)"
                 :disabled="disabled"
-                v-model="decision"
-                @input="$bubble('decision', {
+                v-model:selected="reviewStatus"
+                @update:selected="$bubble('decision', {
                     id: mismatch.id,
                     item_id: mismatch.item_id,
-                    review_status: $event.value
+                    review_status: $event
                 })"
             />
         </td>
@@ -79,15 +79,16 @@
                   </wikit-button>
                 </div>
             </div>
-            <wikit-dialog class="full-description-dialog"
+            <cdx-dialog class="full-description-dialog"
               :title="$i18n('column-upload-info')"
-              ref="fullDescriptionDialog"
-              :actions="[{
+              :open="fullDescriptionDialog"
+              :primary-action="{
                   label: $i18n('confirm-dialog-button'),
-                  namespace: 'next-steps-confirm'
-              }]"
-              @action="(_, dialog) => dialog.hide()"
-              dismiss-button
+                  namespace: 'next-steps-confirm',
+                  actionType: 'progressive'
+              }"
+              @primary="() => fullDescriptionDialog = false"
+              close-button-label="X"
             >
             <wikit-link class="uploader"
                     :href="`https://www.wikidata.org/wiki/User:${mismatch.import_meta.user.username}`"
@@ -99,21 +100,21 @@
             <div class="description">
               {{this.mismatch.import_meta.description}}
             </div>
-          </wikit-dialog>
+          </cdx-dialog>
         </td>
     </tr>
 </template>
 
 <script lang="ts">
 import { formatISO } from 'date-fns';
 
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import {
     Button as WikitButton,
-    Dialog as WikitDialog,
-    Dropdown,
     Link as WikitLink
 } from '@wmde/wikit-vue-components';
+import { CdxDialog, CdxSelect } from "@wikimedia/codex";
 import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
 
 import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
@@ -131,14 +132,16 @@ type ReviewOptionMap = {
 interface MismatchRowState {
   statusOptions: ReviewOptionMap;
   decision: ReviewMenuItem;
+  reviewStatus: string;
+  fullDescriptionDialog: boolean;
 }
 
-export default Vue.extend({
+export default defineComponent({
     components: {
     WikitButton,
     WikitLink,
-    WikitDialog,
-    Dropdown,
+    CdxDialog,
+    CdxSelect
     },
     props: {
         mismatch: Object as PropType<LabelledMismatch>,
@@ -182,14 +185,14 @@ export default Vue.extend({
     return {
       statusOptions,
       decision: statusOptions[this.mismatch.review_status],
+      reviewStatus: String(this.mismatch.review_status),
+      fullDescriptionDialog: false
     };
   },
   methods: {
     showDialog(e: Event) {
       e.preventDefault();
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
-      const descriptionDialog = this.$refs.fullDescriptionDialog! as any;
-      descriptionDialog.show();
+      this.fullDescriptionDialog = true;
     }
   }
 });

diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
@@ -23,14 +23,15 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import { Table as WikitTable } from '@wmde/wikit-vue-components';
 
 import MismatchRow from './MismatchRow.vue';
 
 import { LabelledMismatch } from '../types/Mismatch';
 
-export default Vue.extend({
+export default defineComponent({
     components: {
         MismatchRow,
         WikitTable,

diff --git a/resources/js/Components/WikidataToolFooter.vue b/resources/js/Components/WikidataToolFooter.vue
@@ -31,7 +31,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import { Link as WikitLink } from '@wmde/wikit-vue-components';
 
 interface FooterLabels {
@@ -45,7 +46,7 @@ interface FooterUrls {
     issues: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
     name: 'WikidataToolFooter',
     components: {
         WikitLink,

diff --git a/resources/js/Pages/Error.vue b/resources/js/Pages/Error.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     title: String,
     description: String