From 9eb617f6f9e54862b2a8865474d83dc67d69c2a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Akg=C3=BCn?= <hasanakg@outlook.com>
Date: Wed, 22 Nov 2023 05:30:12 -0800
Subject: [PATCH] Migrate to codex checkbox (#770)

Bug: T347200
---
 resources/js/Pages/Results.vue      | 23 ++++++++++++++---------
 tests/Browser/Pages/ResultsPage.php |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
index 688acbc5..9bd47f68 100644
--- a/resources/js/Pages/Results.vue
+++ b/resources/js/Pages/Results.vue
@@ -123,10 +123,11 @@
                 <li>{{ $i18n('confirmation-dialog-message-tip-2') }}</li>
                 <li>{{ $i18n('confirmation-dialog-message-tip-3') }}</li>
             </ul>
-            <checkbox class="disable-confirmation"
-                :label="$i18n('confirmation-dialog-option-label')"
-                :checked.sync="disableConfirmation"
-            />
+            <cdx-checkbox class="disable-confirmation"
+                v-model="disableConfirmation"
+            >
+              {{ $i18n('confirmation-dialog-option-label') }}
+            </cdx-checkbox>
         </cdx-dialog>
     </div>
 </template>
@@ -136,11 +137,9 @@
     import { useStore } from '../store';
     import isEmpty from 'lodash/isEmpty';
     import { Head as InertiaHead } from '@inertiajs/inertia-vue3';
-    import {
-        Link as WikitLink,
-        Checkbox } from '@wmde/wikit-vue-components';
+    import { Link as WikitLink } from '@wmde/wikit-vue-components';
 
-    import { CdxButton, CdxIcon, CdxDialog, CdxMessage } from "@wikimedia/codex";
+    import { CdxButton, CdxIcon, CdxDialog, CdxMessage, CdxCheckbox } from "@wikimedia/codex";
     import { cdxIconInfo, cdxIconArrowPrevious } from '@wikimedia/codex-icons';
 
     import LoadingOverlay from '../Components/LoadingOverlay.vue';
@@ -150,6 +149,12 @@
     import { defineComponent } from 'vue';
     import axios from 'axios';
 
+    // Run it with compat mode
+    // https://v3-migration.vuejs.org/breaking-changes/v-model.html
+    CdxCheckbox.compatConfig = {
+      ...CdxCheckbox.compatConfig,
+      COMPONENT_V_MODEL: false,
+    };
     interface MismatchDecision {
         id: number,
         item_id: string,
@@ -191,7 +196,7 @@
             LoadingOverlay,
             MismatchesTable,
             WikitLink,
-            Checkbox,
+            CdxCheckbox,
             CdxDialog,
             CdxButton,
             CdxIcon,
diff --git a/tests/Browser/Pages/ResultsPage.php b/tests/Browser/Pages/ResultsPage.php
index 8b6c7d3d..6568db2e 100644
--- a/tests/Browser/Pages/ResultsPage.php
+++ b/tests/Browser/Pages/ResultsPage.php
@@ -50,7 +50,7 @@ public function elements()
             '@confirmation-dialog' => '#results-confirmation-dialog',
             '@disable-confirmation' => '.disable-confirmation',
             '@error-section' => '#error-section',
-            '@disable-confirmation-label' => '.disable-confirmation>.wikit-checkbox__label'
+            '@disable-confirmation-label' => '.disable-confirmation>.cdx-checkbox__label'
         ];
     }