Migrate to codex checkbox (#770)

hasanakg · web-flow · commit 9eb617f6f9e5 · 2023-11-22T14:30:12.000+01:00
Bug: T347200
diff --git 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
@@ -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'
         ];
     }
 

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ public function elements()`
`50`	`50`	`'@confirmation-dialog' => '#results-confirmation-dialog',`
`51`	`51`	`'@disable-confirmation' => '.disable-confirmation',`
`52`	`52`	`'@error-section' => '#error-section',`
`53`		`- '@disable-confirmation-label' => '.disable-confirmation>.wikit-checkbox__label'`
	`53`	`+ '@disable-confirmation-label' => '.disable-confirmation>.cdx-checkbox__label'`
`54`	`54`	`];`
`55`	`55`	`}`
`56`	`56`