Merge branch 'feature/update-vue' into update-tests

Author: itamargiv

.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'
+		},
 };

package-lock.json

@@ -20,11 +20,11 @@
         "@types/lodash": "^4.14.199",
         "@typescript-eslint/eslint-plugin": "^6.7.5",
         "@typescript-eslint/parser": "^6.7.5",
-        "@vue/compiler-sfc": "3.2.0",
+        "@vue/compiler-sfc": "^3.3.8",
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.0.0",
         "@vue/vue3-jest": "^29.2.4",
-        "@vue/runtime-dom": "3.2.0",
+        "@vue/runtime-dom": "^3.3.8",
         "@wikimedia/codex": "^0.20.0",
         "@wikimedia/codex-design-tokens": "^0.20.0",
         "@wikimedia/codex-icons": "^0.20.0",
@@ -50,25 +50,14 @@
     "dependencies": {
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
-        "@vue/compat": "3.2.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": "3.2.0",
+        "vue": "^3.3.8",
         "vue-banana-i18n": "2.3.0"
-    },
-    "overrides": {
-        "pinia": {
-            "vue": "3.2.0"
-        },
-        "@wikimedia/codex": {
-            "vue": "3.2.0"
-        },
-        "vue-banana-i18n": {
-            "banana-i18n": "2.2.0"
-        }
     }
 }

package.json

@@ -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,7 +100,7 @@
             <div class="description">
               {{this.mismatch.import_meta.description}}
             </div>
-          </wikit-dialog>
+          </cdx-dialog>
         </td>
     </tr>
 </template>
@@ -111,10 +112,9 @@ 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";
@@ -132,14 +132,16 @@ type ReviewOptionMap = {
 interface MismatchRowState {
   statusOptions: ReviewOptionMap;
   decision: ReviewMenuItem;
+  reviewStatus: string;
+  fullDescriptionDialog: boolean;
 }
 
 export default defineComponent({
     components: {
     WikitButton,
     WikitLink,
-    WikitDialog,
-    Dropdown,
+    CdxDialog,
+    CdxSelect
     },
     props: {
         mismatch: Object as PropType<LabelledMismatch>,
@@ -183,14 +185,14 @@ export default defineComponent({
     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;
     }
   }
 });

resources/js/Components/MismatchRow.vue

@@ -1,5 +1,53 @@
 <template>
-  <div>
-
+  <div lang="en">
+    <inertia-head title="Mismatch Finder - Component Playground" />
+    <h2>Mismatch Finder - Playground!</h2>
+    <p>Feel free to throw any component you want to try, in here</p>
   </div>
 </template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import { Head as InertiaHead } from '@inertiajs/inertia-vue3'
+
+    export default defineComponent({
+        components: { InertiaHead },
+        props: {
+            user: Object,
+        },
+        methods: {
+            console() {
+                console.log('testing wikit component');
+            },
+            printVal(v: string) {
+                console.log(v);
+            }
+        },
+        data(){
+            return {
+                controlled: true,
+                standalone: false
+            }
+        }
+    });
+</script>
+
+<style lang="scss">
+    button.wikit {
+        margin-bottom: 1rem;
+    }
+
+    .fancy-dialog {
+        h2 {
+            margin-bottom: 0.5em;
+        }
+
+        p {
+            margin-bottom: 1.25em;
+        }
+
+        .wikit-Dialog__close {
+            margin-bottom: 0;
+        }
+    }
+</style>

resources/js/Pages/Playground.vue

@@ -29,7 +29,8 @@
                 v-model:open="instructionsDialog"
                 :primary-action="{
                     label: $i18n('confirm-dialog-button'),
-                    namespace: 'instructions-confirm'
+                    namespace: 'instructions-confirm',
+                    actionType: 'progressive'
                 }"
                 @primary="() => instructionsDialog = false"
                 close-button-label="X"
@@ -108,16 +109,17 @@
                 </form>
             </section>
         </section>
-        <wikit-dialog class="confirmation-dialog"
+        <cdx-dialog class="confirmation-dialog"
             :title="$i18n('confirmation-dialog-title')"
-            ref="confirmation"
-            :actions="[{
+            v-model:open="confirmationDialog"
+            :primary-action="{
                 label: $i18n('confirmation-dialog-button'),
-                namespace: 'next-steps-confirm'
-            }]"
-            @action="_handleConfirmation"
-            @dismissed="disableConfirmation = false"
-            dismiss-button
+                namespace: 'next-steps-confirm',
+                actionType: 'progressive'
+
+            }"
+            @primary="_handleConfirmation"
+            close-button-label="X"
         >
             <p>{{ $i18n('confirmation-dialog-message-intro') }}</p>
             <ul>
@@ -129,7 +131,7 @@
                 :label="$i18n('confirmation-dialog-option-label')"
                 :checked.sync="disableConfirmation"
             />
-        </wikit-dialog>
+        </cdx-dialog>
     </div>
 </template>
 
@@ -142,7 +144,6 @@
         Link as WikitLink,
         Button as WikitButton,
         Checkbox,
-        Dialog as WikitDialog,
         Icon,
         Message } from '@wmde/wikit-vue-components';
 
@@ -186,7 +187,8 @@
         pageDirection: string,
         requestError: boolean,
         lastSubmitted: string,
-        instructionsDialog: boolean
+        instructionsDialog: boolean,
+        confirmationDialog: boolean
     }
 
     export default defineComponent({
@@ -197,7 +199,6 @@
             MismatchesTable,
             WikitLink,
             WikitButton,
-            WikitDialog,
             Checkbox,
             Message,
             CdxDialog
@@ -259,7 +260,8 @@
                 pageDirection: 'ltr',
                 requestError: false,
                 lastSubmitted: '',
-                instructionsDialog: false
+                instructionsDialog: false,
+                confirmationDialog: false
             }
         },
         methods: {
@@ -308,7 +310,6 @@
                 // Defaulting to any, as the alternative presents us with
                 // convoluted and unnecessary syntax.
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const confirmationDialog = this.$refs.confirmation as any;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const overlay = this.$refs.overlay as any;
 
@@ -324,7 +325,7 @@
                     this.showSubmitConfirmation(item);
 
                     if(!this.disableConfirmation){
-                        confirmationDialog.show();
+                      this.confirmationDialog = true;
                     }
                 } catch(e) {
                     this.requestError = true;
@@ -358,7 +359,7 @@
             // understand component instances and complains about usage of the
             // hide method otherwise.
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            _handleConfirmation(_ : string, dialog: any){
+            _handleConfirmation(){
                 const { disableConfirmation, user } = this;
 
                 // Do nothing if there is no user
@@ -371,7 +372,7 @@
                     window.localStorage.setItem(`mismatch-finder_user-settings_${user.id}`, storageData);
                 }
 
-                dialog.hide();
+              this.confirmationDialog = false;
             }
         }
     });

resources/js/Pages/Results.vue

@@ -2,23 +2,18 @@ import './bootstrap';
 import {createApp, h} from 'vue';
 import {createPinia} from 'pinia';
 import {createInertiaApp} from '@inertiajs/inertia-vue3';
-import i18nMessages, { I18nMessages } from './lib/i18n';
+import getI18nMessages, { I18nMessages } from './lib/i18n';
 import {createI18n} from 'vue-banana-i18n'
 import bubble from './lib/bubble';
 import Error from './Pages/Error.vue';
 import Layout from './Pages/Layout.vue';
 
-// Retrieve i18n messages and setup the Vue instance to handle them.
-async function setupI18n(locale: string): Promise<I18nMessages>{
-    return await i18nMessages(locale);
-}
-
 // Only bootstrap inertia if setup is successful. Display generic error
 // component otherwise
 (async () => {
     try {
         const locale = document.documentElement.lang;
-        const i18nMessages = await setupI18n(locale);
+        const i18nMessages = await getI18nMessages(locale);
         const pinia = createPinia();
         const i18nPlugin = createI18n({
             locale: locale,