Merge pull request #755 from wmde/replace-wikit-dialog

Replace wikit dialog with codex dialog

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

@@ -19,11 +19,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",
@@ -49,25 +49,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.0.36",
         "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

@@ -8,24 +8,24 @@
                     id="faq-button"
                     variant="quiet"
                     type="progressive"
-                    @click.native="$refs.faq.show()"
+                    @click.native="faqDialog = true"
                 >
                     <template #prefix>
                         <icon type="info-outlined" size="medium" color="inherit"/>
                     </template>
                     {{ $i18n('faq-button') }}
                 </wikit-button>
             </header>
-
-            <wikit-dialog id="faq-dialog"
-                :title="$i18n('faq-dialog-title')"
-                ref="faq"
-                :actions="[{
-                    label: $i18n('confirm-dialog-button'),
-                    namespace: 'faq-confirm'
-                }]"
-                @action="(_, dialog) => dialog.hide()"
-                dismiss-button
+            <cdx-dialog id="faq-dialog"
+                        v-model:open="faqDialog"
+                        :title="$i18n('faq-dialog-title')"
+                        :primary-action="{
+                            label: $i18n('confirm-dialog-button'),
+                            namespace: 'faq-confirm',
+                            actionType: 'progressive'
+                        }"
+                        @primary="() => faqDialog = false"
+                        close-button-label="X"
             >
                 <section>
                     <h3 class="h5">{{ $i18n('faq-dialog-question-finding-mismatches' )}}</h3>
@@ -54,7 +54,7 @@
                         'https://www.wikidata.org/wiki/Wikidata_talk:Mismatch_Finder'
                     ]"></p>
                 </section>
-            </wikit-dialog>
+            </cdx-dialog>
             <p id="about-description" >
                 {{ $i18n('about-mismatch-finder-description') }}
             </p>
@@ -112,11 +112,11 @@
     import { useStore } from '../store';
     import {
         Button as WikitButton,
-        Dialog as WikitDialog,
         Icon,
         Message,
         TextArea
     } from '@wmde/wikit-vue-components';
+    import { CdxDialog } from "@wikimedia/codex";
     import { defineComponent } from 'vue';
 
     interface HomeState {
@@ -126,7 +126,8 @@
         validationError: null|{
             type: string,
             message: string
-        }
+        },
+      faqDialog: boolean
     }
 
     interface ErrorMessages {
@@ -141,12 +142,12 @@
 
     export default defineComponent({
         components: {
-            InertiaHead,
-            Icon,
-            Message,
-            TextArea,
-            WikitButton,
-            WikitDialog
+          CdxDialog,
+          InertiaHead,
+          Icon,
+          Message,
+          TextArea,
+          WikitButton
         },
         methods: {
             splitInput: function(): Array<string> {
@@ -222,7 +223,8 @@
                 form: {
                     itemsInput: store.lastSearchedIds
                 },
-                validationError: null
+                validationError: null,
+                faqDialog: false
             }
         }
     });