[Remove Vuetify from Studio] replace textbox in Channels > New collection

* refactor: removed vuetify from collection input and validation

* test(channelSetModal): updated failing workflows

* fix(ChannelSetModal): removed error snackbar

Author: AadarshM07

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue

@@ -38,17 +38,17 @@
               lg10
               xl8
             >
-              <VForm ref="channelsetform">
-                <VTextField
+              <form>
+                <KTextbox
                   v-model="name"
-                  :rules="nameRules"
                   :label="$tr('titleLabel')"
                   maxlength="200"
-                  counter
-                  box
+                  :invalid="errors.name"
+                  :invalidText="$tr('titleRequiredText')"
+                  showInvalidText
                   data-test="input-name"
                 />
-              </VForm>
+              </form>
 
               <div v-if="channelSet.secret_token">
                 <p>{{ $tr('tokenPrompt') }}</p>
@@ -202,12 +202,19 @@
   import ChannelItem from './ChannelItem';
   import ChannelSelectionList from './ChannelSelectionList';
   import { ChannelListTypes, ErrorTypes } from 'shared/constants';
-  import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
+  import { generateFormMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
   import FullscreenModal from 'shared/views/FullscreenModal';
   import Tabs from 'shared/views/Tabs';
   import LoadingText from 'shared/views/LoadingText';
 
+  const formMixin = generateFormMixin({
+    name: {
+      required: true,
+      validator: v => v && v.trim().length > 0,
+    },
+  });
+
   export default {
     name: 'ChannelSetModal',
     components: {
@@ -218,7 +225,7 @@
       Tabs,
       LoadingText,
     },
-    mixins: [constantsTranslationMixin, routerMixin],
+    mixins: [formMixin, constantsTranslationMixin, routerMixin],
     props: {
       channelSetId: {
         type: String,
@@ -242,9 +249,6 @@
       isNew() {
         return this.$route.path === '/collections/new';
       },
-      nameRules() {
-        return [name => (name && name.trim().length ? true : this.$tr('titleRequiredText'))];
-      },
       name: {
         get() {
           return Object.prototype.hasOwnProperty.call(this.diffTracker, 'name')
@@ -371,44 +375,48 @@
         this.saving = true;
         this.showUnsavedDialog = false;
 
-        if (this.$refs.channelsetform.validate()) {
-          let promise;
+        const formData = this.clean();
+        if (!this.validate(formData)) {
+          this.saving = false;
+          return;
+        }
 
-          if (this.isNew) {
-            const channelSetData = { ...this.diffTracker };
-            promise = this.commitChannelSet(channelSetData)
-              .then(newCollection => {
-                if (!newCollection || !newCollection.id) {
-                  this.saving = false;
-                  return;
-                }
+        let promise;
 
-                const newCollectionId = newCollection.id;
+        if (this.isNew) {
+          const channelSetData = { ...this.diffTracker, ...formData };
+          promise = this.commitChannelSet(channelSetData)
+            .then(newCollection => {
+              if (!newCollection || !newCollection.id) {
+                this.saving = false;
+                return;
+              }
 
-                this.$router.replace({
-                  name: 'CHANNEL_SET_DETAILS',
-                  params: { channelSetId: newCollectionId },
-                });
+              const newCollectionId = newCollection.id;
 
-                return newCollection;
-              })
-              .catch(() => {
-                this.saving = false;
+              this.$router.replace({
+                name: 'CHANNEL_SET_DETAILS',
+                params: { channelSetId: newCollectionId },
               });
-          } else {
-            promise = this.saveChannels().then(() => {
-              return this.updateChannelSet({ id: this.channelSetId, ...this.diffTracker });
-            });
-          }
 
-          promise
-            .then(() => {
-              this.close();
+              return newCollection;
             })
-            .finally(() => {
+            .catch(() => {
               this.saving = false;
             });
+        } else {
+          promise = this.saveChannels().then(() => {
+            return this.updateChannelSet({ id: this.channelSetId, ...this.diffTracker });
+          });
         }
+
+        promise
+          .then(() => {
+            this.close();
+          })
+          .finally(() => {
+            this.saving = false;
+          });
       },
 
       cancelChanges() {

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js

@@ -219,7 +219,7 @@ describe('ChannelSetModal', () => {
       it('should prompt user if there are unsaved changes', async () => {
         expect(getUnsavedDialog(wrapper).exists()).toBeFalsy();
 
-        await getCollectionNameInput(wrapper).setValue('My collection');
+        await wrapper.setData({ name: 'My collection' });
         await getCloseButton(wrapper).trigger('click');
 
         expect(getUnsavedDialog(wrapper).exists()).toBeTruthy();
@@ -228,23 +228,23 @@ describe('ChannelSetModal', () => {
 
     describe('clicking save button', () => {
       it("shouldn't update a channel set when a collection name is missing", async () => {
-        await getCollectionNameInput(wrapper).setValue('');
+        await wrapper.setData({ name: '' });
         await getSaveButton(wrapper).trigger('click');
         await flushPromises();
 
         expect(updateChannelSet).not.toHaveBeenCalled();
       });
 
       it("shouldn't update a channel set when a collection name is made of empty characters", async () => {
-        await getCollectionNameInput(wrapper).setValue(' ');
+        await wrapper.setData({ name: ' ' });
         await getSaveButton(wrapper).trigger('click');
         await flushPromises();
 
         expect(updateChannelSet).not.toHaveBeenCalled();
       });
 
       it('should update a channel set when a collection name is valid', async () => {
-        await getCollectionNameInput(wrapper).setValue('My collection');
+        await wrapper.setData({ name: 'My collection' });
         await getSaveButton(wrapper).trigger('click');
         await flushPromises();