Replace Wikit Textarea with Codex Textarea component

public/i18n/en.json

@@ -11,6 +11,7 @@
     "about-mismatch-finder-description": "The Mismatch Finder shows you data in Wikidata that differs from the data in another database, catalog or website (for example, someone's date of birth in Wikidata doesn't match the corresponding entry in the German National Library's catalog). Mismatches like this need fixing, and the Mismatch Finder helps you to do just that.",
     "find-more": "Find out more",
     "item-form-title": "Which Items should be checked?",
+    "item-form-progress-bar-aria-label": "Progress Bar indicating loading state when submittion Check Items",
     "item-form-id-input-label": "Please add one Item identifier per line",
     "item-form-id-input-placeholder": "For example:\nQ80378\nQ33602\nQ1459\nQ4524",
     "item-form-submit": "Check Items",

public/i18n/qqq.json

@@ -9,6 +9,7 @@
 	"about-mismatch-finder-description": "A short text to describe the Mismatch Finder tool",
 	"find-more": "A call to action for more information",
 	"item-form-title": "The title of the form that filters Mismatches by Item id",
+	"item-form-progress-bar-aria-label": "The aria label for screen reader for the Progress Bar indicating loading state when submittion Check Items",
 	"item-form-id-input-label": "The label for the Item id input",
 	"item-form-id-input-placeholder": "The placeholder for the Item id input",
 	"item-form-submit": "The call to action on the Item id form's submit button",

resources/js/Pages/Home.vue

@@ -78,14 +78,21 @@
                 </cdx-button>
             </div>
             <form id="items-form" @submit.prevent="send">
-                <text-area
-                    :label="$i18n('item-form-id-input-label')"
-                    :placeholder="$i18n('item-form-id-input-placeholder')"
-                    :rows="8"
-                    :loading="loading"
-                    :error="validationError"
-                    v-model="form.itemsInput"
-                />
+                <cdx-field 
+                    :status="validationError ? validationError.type : 'default'" 
+                    :messages="validationError ? validationError.message : null"
+                >
+                    <div class="progress-bar-wrapper">
+                        <cdx-progress-bar v-if="loading" :aria-label="$i18n('item-form-progress-bar-aria-label')" />
+                    </div>
+                    <cdx-text-area
+                        :label="$i18n('item-form-id-input-label')"
+                        :placeholder="$i18n('item-form-id-input-placeholder')"
+                        :rows="8"
+                        :status="validationError ? validationError.type : 'default'"
+                        v-model="textareaInputValue"
+                    />
+                </cdx-field>
                 <div class="form-buttons">
                     <cdx-button
                         class="submit-ids"
@@ -106,18 +113,14 @@
     import { Head as InertiaHead } from '@inertiajs/inertia-vue3';
     import { mapState } from 'pinia';
     import { useStore } from '../store';
-    import { TextArea } from '@wmde/wikit-vue-components';
-    import { CdxDialog, CdxButton, CdxIcon, CdxMessage } from "@wikimedia/codex";
+    import { CdxDialog, CdxButton, CdxIcon, CdxMessage, CdxTextArea, CdxField, CdxProgressBar } from "@wikimedia/codex";
     import { cdxIconDie, cdxIconInfo } from '@wikimedia/codex-icons';
-    import { defineComponent } from 'vue';
+    import { defineComponent, ref } from 'vue';
 
     interface HomeState {
-        form: {
-            itemsInput: string
-        },
         validationError: null|{
             type: string,
-            message: string
+            message: object
         },
       faqDialog: boolean
     }
@@ -132,24 +135,37 @@
 
     export const MAX_NUM_IDS = 600;
 
+    // Run it with compat mode
+    // https://v3-migration.vuejs.org/breaking-changes/v-model.html
+     CdxTextArea.compatConfig = {
+        ...CdxTextArea.compatConfig,
+        COMPONENT_V_MODEL: false,
+    };
+
     export default defineComponent({
         components: {
           CdxDialog,
           CdxButton,
+          CdxField,
           CdxIcon,
           CdxMessage,
-          InertiaHead,
-          TextArea,
+          CdxProgressBar,
+          CdxTextArea,
+          InertiaHead
         },
         setup() {
+            const store = useStore();
+            const textareaInputValue = ref(store.lastSearchedIds);
+
             return {
                 cdxIconDie,
-                cdxIconInfo
+                cdxIconInfo,
+                textareaInputValue
             };
         },
         methods: {
             splitInput: function(): Array<string> {
-                return this.form.itemsInput.split( '\n' );
+                return this.textareaInputValue.split( '\n' );
             },
             sanitizeArray: function(): Array<string> {
                 // this filter function removes all falsy values
@@ -162,20 +178,22 @@
             validate(): void {
                 this.validationError = null;
 
+                const typeError = 'error';
+
                 const rules = [{
                     check: (ids: Array<string>) => ids.length < 1,
-                    type: 'warning',
-                    message: this.$i18n('item-form-error-message-empty')
+                    type: typeError,
+                    message: { [typeError]: this.$i18n('item-form-error-message-empty') }
                 },
                 {
                     check: (ids: Array<string>) => ids.length > MAX_NUM_IDS,
                     type: 'error',
-                    message: this.$i18n('item-form-error-message-max', MAX_NUM_IDS)
+                    message: { [typeError]: this.$i18n('item-form-error-message-max', MAX_NUM_IDS) }
                 },
                 {
                     check: (ids: Array<string>) => !ids.every(value => /^[Qq]\d+$/.test( value.trim() )),
                     type: 'error',
-                    message: this.$i18n('item-form-error-message-invalid')
+                    message: { [typeError]: this.$i18n('item-form-error-message-invalid') }
                 }];
 
                 const sanitized = this.sanitizeArray();
@@ -194,7 +212,7 @@
                     return;
                 }
                 const store = useStore();
-                store.saveSearchedIds( this.form.itemsInput );
+                store.saveSearchedIds( this.textareaInputValue );
                 this.$inertia.get( '/results', { ids: this.serializeInput() } );
             },
             showRandom(): void {
@@ -216,11 +234,7 @@
             ...mapState(useStore, ['loading']),
         },
         data(): HomeState {
-            const store = useStore();
             return {
-                form: {
-                    itemsInput: store.lastSearchedIds
-                },
                 validationError: null,
                 faqDialog: false
             }
@@ -272,5 +286,21 @@
     .form-buttons {
         text-align: end;
     }
+
+    .cdx-field__control {
+        position: relative;
+        width: 100%;
+
+        .progress-bar-wrapper {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+
+            .cdx-progress-bar {
+                width: 50%;
+                margin: auto;
+            }
+        }
+    }
 }
 </style>

tests/Browser/ItemsFormTest.php

@@ -41,15 +41,15 @@ public function test_can_submit_list_of_item_ids()
         });
     }
 
-    public function test_empty_item_list_yields_warning()
+    public function test_empty_item_list_yields_error()
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new HomePage)
                     ->press('.submit-ids')
                     ->assertSee('Please provide the Item identifiers that should be checked.');
 
             $this->assertStringContainsString(
-                '--warning',
+                '--error',
                 $browser->attribute('@items-input-validation-message', 'class')
             );
         });

tests/Browser/Pages/HomePage.php

@@ -41,7 +41,7 @@ public function elements()
         return [
             '@form' => '#items-form',
             '@items-input' => '@form textarea',
-            '@items-input-validation-message' => '@form .wikit-TextArea .wikit-ValidationMessage'
+            '@items-input-validation-message' => '@form .cdx-field__validation-message .cdx-message'
         ];
     }
 }

tests/Vue/Pages/Home.spec.js

@@ -23,14 +23,13 @@ describe('Home.vue', () => {
         const wrapper = mount(Home, {
             global: {
                 mocks,
-                plugins: [createTestingPinia()],
-            },
-            data() {
-                return {
-                    form: {
-                        itemsInput
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
                     }
-                }
+                })],
             }
         });
 
@@ -54,7 +53,7 @@ describe('Home.vue', () => {
             }
         });
 
-        expect( wrapper.vm.form.itemsInput ).toEqual(itemsInput);
+        expect( wrapper.vm.textareaInputValue).toEqual(itemsInput);
     });
 
     it('shows dialog after clicking the more info button', async () => {
@@ -95,8 +94,8 @@ describe('Home.vue', () => {
         wrapper.vm.validate();
 
         expect(wrapper.vm.validationError).toStrictEqual({
-            type: 'warning',
-            message: 'item-form-error-message-empty'}
+            type: 'error',
+            message: { error: 'item-form-error-message-empty' }}
         );
     });
 
@@ -106,21 +105,20 @@ describe('Home.vue', () => {
         const wrapper = mount(Home, {
             global: {
                 mocks,
-                plugins: [createTestingPinia()],
-            },
-            data() {
-                return {
-                    form: {
-                        itemsInput
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
                     }
-                }
+                })],
             }
         });
 
         wrapper.vm.validate();
         expect(wrapper.vm.validationError).toStrictEqual({
             type: 'error',
-            message: 'item-form-error-message-max'}
+            message: { error: 'item-form-error-message-max'}}
         );
     });
 
@@ -130,21 +128,20 @@ describe('Home.vue', () => {
         const wrapper = mount(Home, {
             global: {
                 mocks,
-                plugins: [createTestingPinia()],
-            },
-            data() {
-                return {
-                    form: {
-                        itemsInput
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
                     }
-                }
+                })],
             }
         });
 
         wrapper.vm.validate();
         expect(wrapper.vm.validationError).toStrictEqual({
             type: 'error',
-            message: 'item-form-error-message-invalid'}
+            message: { error: 'item-form-error-message-invalid' } }
         );
     });