feat(FR-636): fix create test code

Author: agatha197

e2e/test-util.ts

@@ -127,36 +127,31 @@ export async function createVFolderAndVerify(
   folderName: string,
   usageMode: 'general' | 'model' = 'general',
   type: 'user' | 'project' = 'user',
-  permission: 'rw' | 'ro' | 'wd' = 'rw',
+  permission: 'rw' | 'ro' = 'rw',
 ) {
-  const permissionMap = {
-    rw: 'Read & Write',
-    ro: 'Read only',
-    wd: 'Delete',
-  };
   await navigateTo(page, 'data');
 
-  await page.getByRole('button', { name: 'plus Add' }).click();
+  await page.getByRole('button', { name: 'Create Folder' }).nth(1).click();
   await page.getByRole('textbox', { name: 'Folder name' }).fill(folderName);
+
   // select parsed parameters in create modal form
-  await page.getByRole('radio', { name: usageMode }).click();
-  await page.getByRole('radio', { name: type }).click();
-  await page.getByRole('radio', { name: permissionMap[permission] }).click();
+  await page.getByTestId(`${usageMode}-usage-mode`).click();
+  await page.getByTestId(`${type}-type`).click();
+  await page.getByTestId(`${permission}-permission`).click();
 
   await page.getByRole('button', { name: 'Create', exact: true }).click();
   await page.reload();
-  const nameInput = page
-    .locator('#general-folder-storage vaadin-grid-cell-content')
-    .filter({ hasText: 'Name' })
-    .locator('vaadin-text-field')
-    .nth(1)
-    .locator('input');
-  await nameInput.click();
-  await nameInput.fill(folderName);
+  await page.locator('#react-root').getByTitle('Name').click();
+  await page.getByRole('option', { name: 'Name' }).locator('div').click();
+  await page.locator('#rc_select_8').click();
+  await page.locator('#rc_select_8').fill(folderName);
+  await page.getByRole('button', { name: 'search' }).click();
+  await page.getByRole('link', { name: folderName }).click();
   await expect(
-    page.locator('vaadin-grid-cell-content').filter({ hasText: folderName }),
+    page
+      .getByRole('cell', { name: `VFolder Identicon ${folderName}` })
+      .filter({ hasText: folderName }),
   ).toBeVisible();
-  await nameInput.fill('');
 }
 
 export async function deleteVFolderAndVerify(page: Page, folderName: string) {

react/src/components/FolderCreateModal.tsx

@@ -255,9 +255,13 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
 
         <Form.Item label={t('data.UsageMode')} name={'usage_mode'}>
           <Radio.Group>
-            <Radio value={'general'}>General</Radio>
+            <Radio value={'general'} data-testid="general-usage-mode">
+              General
+            </Radio>
             {baiClient._config.enableModelFolders ? (
-              <Radio value={'model'}>Model</Radio>
+              <Radio value={'model'} data-testid="model-usage-mode">
+                Model
+              </Radio>
             ) : null}
           </Radio.Group>
         </Form.Item>
@@ -276,11 +280,15 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
              * so we need both checks for proper access control
              */}
             {_.includes(allowedTypes, 'user') ? (
-              <Radio value={'user'}>User</Radio>
+              <Radio value={'user'} data-testid="user-type">
+                User
+              </Radio>
             ) : null}
             {(userRole === 'admin' || userRole === 'superadmin') &&
             _.includes(allowedTypes, 'group') ? (
-              <Radio value={'project'}>Project</Radio>
+              <Radio value={'project'} data-testid="project-type">
+                Project
+              </Radio>
             ) : null}
           </Radio.Group>
         </Form.Item>
@@ -305,8 +313,12 @@ const FolderCreateModal: React.FC<FolderCreateModalProps> = ({
 
         <Form.Item label={t('data.Permission')} name={'permission'}>
           <Radio.Group>
-            <Radio value={'rw'}>Read & Write</Radio>
-            <Radio value={'ro'}>Read Only</Radio>
+            <Radio value={'rw'} data-testid="rw-permission">
+              Read & Write
+            </Radio>
+            <Radio value={'ro'} data-testid="ro-permission">
+              Read Only
+            </Radio>
           </Radio.Group>
         </Form.Item>