Replace submit button (#861)

* replace form submit button to csghub-button * update new evaluation submit button * fix dataset create bug * update new dataset test
OpenCSGs · Dec 18, 2024 · 35555bb · 35555bb
1 parent f7e91d7
commit 35555bb
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 67 deletions.
diff --git a/frontend/setupTests.js b/frontend/setupTests.js
@@ -1,5 +1,12 @@
 import { config } from '@vue/test-utils';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import CsgButton from './src/components/shared/CsgButton.vue';
+import SvgIcon from './src/components/shared/SvgIcon.vue';
 
 config.global.plugins = [ElementPlus];
+
+config.global.components = {
+  CsgButton,
+  SvgIcon
+};
diff --git a/frontend/src/components/__tests__/datasets/NewDataset.spec.js b/frontend/src/components/__tests__/datasets/NewDataset.spec.js
@@ -12,16 +12,14 @@ vi.mock('../../../stores/UserStore', () => ({
 }));
 
 // Mock useFetchApi
-const mockPost = vi.fn().mockResolvedValue({
-                   json: async () => ({
-                     data: { value: { data: { path: 'testuser/testdataset' } } },
-                     error: { value: null }
-                   })
-                 });
-
 vi.mock('../../../packs/useFetchApi', () => ({
   default: () => ({
-    post: () => mockPost(),
+    post: () => ({
+      json: () => Promise.resolve({
+        data: { value: { data: { path: 'testuser/testdataset' } } },
+        error: { value: null }
+      })
+    })
   })
 }));
 
@@ -70,28 +68,25 @@ describe("NewDataset", () => {
   });
 
   describe("form validation", () => {
+    const validateForm = () => {
+      return new Promise(resolve => {
+        wrapper.vm.$refs.dataFormRef.validate(valid => resolve(valid))
+      })
+    }
     it("validates required fields", async() => {
-      await wrapper.find('button').trigger('click');
-
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const formErrors = wrapper.findAll('.el-form-item__error');
-      expect(formErrors.length).toBeGreaterThan(0);
+      expect(await validateForm()).toBe(false)
     })
 
     it("accepts invalid dataset name", async () => {
       wrapper.vm.dataForm.name = '**__invalid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(true);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(false)
     });
 
     it("accepts valid dataset name", async () => {
       wrapper.vm.dataForm.name = 'valid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(false);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(true)
     });
   })
 

diff --git a/frontend/src/components/application_spaces/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -318,13 +318,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
-              class="btn btn-primary btn-md"
               @click="handleSubmit"
-            >
-              {{ t('application_spaces.new.create') }}
-            </button>
+              class="btn btn-primary btn-md"
+              :name="t('application_spaces.new.create')"
+            />
           </el-form-item>
         </div>
       </el-form>

diff --git a/frontend/src/components/codes/NewCode.vue b/frontend/src/components/codes/NewCode.vue
@@ -139,13 +139,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
+              :name="t('codes.newCode.createCode')"
               @click="handleSubmit"
-            >
-              {{ t('codes.newCode.createCode') }}
-            </button>
+            />
           </el-form-item>
         </div>
       </el-form>

diff --git a/frontend/src/components/collections/NewCollection.vue b/frontend/src/components/collections/NewCollection.vue
@@ -128,12 +128,11 @@
       </el-form>
       <div class="flex justify-end w-full">
         <el-form-item>
-          <button
-            class="bg-brand-600 w-[118px] h-9 rounded-lg text-white flex items-center justify-center border disabled:text-gray-400 disabled:bg-gray-100 disabled:border-gray-200"
+          <CsgButton
+            class="btn btn-primary btn-md"
+            :name="$t('collections.newCollection.createCollection')"
             @click="createCollection"
-          >
-            {{ $t('collections.newCollection.createCollection') }}
-          </button>
+          />
         </el-form-item>
       </div>
     </div>

diff --git a/frontend/src/components/datasets/NewDataset.vue b/frontend/src/components/datasets/NewDataset.vue
@@ -145,13 +145,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit"
-            >
-              {{ t('datasets.newDataset.createDataset') }}
-            </button>
+              :name="t('datasets.newDataset.createDataset')"
+              @click="createDataset"
+            />
           </el-form-item>
         </div>
       </el-form>
@@ -296,8 +295,7 @@
       body: JSON.stringify(params)
     }
     const newEndpoint = '/datasets'
-    const postres = await useFetchApi(newEndpoint, options).post()
-    const { data, error } = await postres.json()
+    const { data, error } = await useFetchApi(newEndpoint, options).post().json()
 
     if (data.value) {
       ElMessage.success(t('datasets.newDataset.createSuccess'))

diff --git a/frontend/src/components/endpoints/NewEndpoint.vue b/frontend/src/components/endpoints/NewEndpoint.vue
@@ -182,12 +182,12 @@
 
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit">
-              {{ t('endpoints.new.createEndpoint') }}
-            </button>
+              :name="t('endpoints.new.createEndpoint')"
+              @click="handleSubmit"
+            />
           </el-form-item>
         </div>
       </el-form>

diff --git a/frontend/src/components/evaluations/NewEvaluation.vue b/frontend/src/components/evaluations/NewEvaluation.vue
@@ -220,13 +220,12 @@
             {{ t('all.cancel') }}
           </a>
           <el-form-item>
-            <button
-              :disabled="submitLoading"
+            <CsgButton
               class="btn btn-primary rounded-md text-sm font-medium flex items-center justify-center px-[14px] h-[42px]"
+              :disabled="submitLoading"
+              :name="t('evaluation.new.createEvaluation')"
               @click="handleSubmit"
-            >
-              {{ t('evaluation.new.createEvaluation') }}
-            </button>
+            />
           </el-form-item>
         </div>
       </el-form>

diff --git a/frontend/src/components/finetune/NewFinetune.vue b/frontend/src/components/finetune/NewFinetune.vue
@@ -143,12 +143,12 @@
 
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit">
-              {{ t('finetune.new.createFinetune') }}
-            </button>
+              :name="t('finetune.new.createFinetune')"
+              @click="handleSubmit"
+            />
           </el-form-item>
         </div>
       </el-form>

diff --git a/frontend/src/components/models/NewModel.vue b/frontend/src/components/models/NewModel.vue
@@ -143,13 +143,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit"
-            >
-              {{ t('models.newModel.createModel') }}
-            </button>
+              :name="t('models.newModel.createModel')"
+              @click="createModel"
+            />
           </el-form-item>
         </div>
       </el-form>

diff --git a/frontend/src/components/organizations/NewOrganization.vue b/frontend/src/components/organizations/NewOrganization.vue
@@ -87,14 +87,12 @@
       </el-form-item>
 
       <el-form-item>
-        <button
-          class="btn btn-primary btn-md"
-          style="width: 100%;"
+        <CsgButton
+          class="btn btn-primary btn-md w-full"
           @click="handleSubmit"
-          :disabled="submitting"
-        >
-          {{ $t('organization.newOrganization.createOrg') }}
-        </button>
+          :loading="submitting"
+          :name="$t('organization.newOrganization.createOrg')"
+        />
       </el-form-item>
     </el-form>
   </div>