fix(FR-1007): Allow to create a new folder in folder explorer (#3678)

# Fix FolderExplorerActions TypeScript issues and update folder creation functionality

This PR improves the FolderExplorerActions component by:

1. Adding proper TypeScript typing for the FolderExplorerElement interface
2. Replacing LegacyRef with RefObject for better type safety
3. Removing unnecessary @ts-ignore comments
4. Fixing the "Create" button functionality to call openMkdirDialog() instead of openCreateFileDialog()

**Checklist:**

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: ironAiken2

react/src/components/FolderExplorerActions.tsx

@@ -1,17 +1,18 @@
+import { FolderExplorerElement } from './LegacyFolderExplorer';
 import {
   DeleteOutlined,
   FileAddOutlined,
   FolderAddOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
 import { Button, Dropdown, Tooltip, Flex, theme } from 'antd';
-import React, { LegacyRef } from 'react';
+import React, { RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface FolderExplorerActionsProps {
   isSelected: boolean;
   isWritable: boolean;
-  folderExplorerRef: LegacyRef<HTMLDivElement>;
+  folderExplorerRef: RefObject<FolderExplorerElement | null>;
   size?: 'small' | 'default';
 }
 
@@ -38,7 +39,6 @@ const FolderExplorerActions: React.FC<FolderExplorerActionsProps> = ({
           disabled={!isSelected || !isWritable}
           icon={<DeleteOutlined />}
           onClick={() => {
-            // @ts-ignore
             folderExplorerRef.current?._openDeleteMultipleFileDialog();
           }}
         >
@@ -50,8 +50,7 @@ const FolderExplorerActions: React.FC<FolderExplorerActionsProps> = ({
           disabled={!isWritable}
           icon={<FileAddOutlined />}
           onClick={() => {
-            // @ts-ignore
-            folderExplorerRef.current?.openCreateFileDialog();
+            folderExplorerRef.current?.openMkdirDialog();
           }}
         >
           {size !== 'small' && t('button.Create')}
@@ -66,7 +65,6 @@ const FolderExplorerActions: React.FC<FolderExplorerActionsProps> = ({
               label: t('data.explorer.UploadFiles'),
               icon: <FileAddOutlined />,
               onClick: () => {
-                // @ts-ignore
                 folderExplorerRef.current?.handleUpload('file');
               },
             },
@@ -75,7 +73,6 @@ const FolderExplorerActions: React.FC<FolderExplorerActionsProps> = ({
               label: t('data.explorer.UploadFolder'),
               icon: <FolderAddOutlined />,
               onClick: () => {
-                // @ts-ignore
                 folderExplorerRef.current?.handleUpload('folder');
               },
             },

react/src/components/LegacyFolderExplorer.tsx

@@ -26,8 +26,11 @@ interface LegacyFolderExplorerProps extends BAIModalProps {
   vfolderID: string;
   onRequestClose: () => void;
 }
-interface FolderExplorerElement extends HTMLDivElement {
+export interface FolderExplorerElement extends HTMLDivElement {
   _fetchVFolder: () => void;
+  _openDeleteMultipleFileDialog: () => void;
+  openMkdirDialog: () => void;
+  handleUpload: (name: 'file' | 'folder') => void;
 }
 
 const LegacyFolderExplorer: React.FC<LegacyFolderExplorerProps> = ({