瀏覽代碼

[frontend] Added new file creation functionalities to storage browser

Nidhi Bhat G 1 年之前
父節點
當前提交
1eccd9d3bc

+ 28 - 3
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx

@@ -34,7 +34,7 @@ import { FileOutlined } from '@ant-design/icons';
 import PathBrowser from '../../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
 import InputModal from '../../InputModal/InputModal';
 import StorageBrowserTable from '../StorageBrowserTable/StorageBrowserTable';
-import { fetchFiles, mkdir } from '../../../../reactComponents/FileChooser/api';
+import { fetchFiles, mkdir, touch } from '../../../../reactComponents/FileChooser/api';
 import {
   PathAndFileData,
   StorageBrowserTableData,
@@ -69,6 +69,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
   //TODO: Add filter functionality
   const [filterData] = useState<string>('');
   const [showNewFolderModal, setShowNewFolderModal] = useState<boolean>();
+  const [showNewFileModal, setShowNewFileModal] = useState<boolean>();
   const [refreshKey, setRefreshKey] = useState<number>(0);
 
   const { t } = i18nReact.useTranslation();
@@ -82,7 +83,10 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
         {
           icon: <FileOutlined />,
           key: 'new_file',
-          label: t('New File')
+          label: t('New File'),
+          onClick: () => {
+            setShowNewFileModal(true);
+          }
         },
         {
           icon: <FolderIcon />,
@@ -131,8 +135,8 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
     }
   ];
 
-  //TODO:Add loading after calling mkdir api
   const handleCreateNewFolder = (folderName: string) => {
+    setloadingFiles(true);
     mkdir(folderName, filePath)
       .then(() => {
         setRefreshKey(oldKey => oldKey + 1);
@@ -143,6 +147,18 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
       });
   };
 
+  const handleCreateNewFile = (fileName: string) => {
+    setloadingFiles(true);
+    touch(fileName, filePath)
+      .then(() => {
+        setRefreshKey(oldKey => oldKey + 1);
+      })
+      .catch(error => {
+        // eslint-disable-next-line no-restricted-syntax
+        console.log(error);
+      });
+  };
+
   useEffect(() => {
     setloadingFiles(true);
     fetchFiles(filePath, pageSize, pageNumber, filterData, sortByColumn, sortOrder)
@@ -244,6 +260,15 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
           onCreate={handleCreateNewFolder}
           onClose={() => setShowNewFolderModal(!showNewFolderModal)}
         />
+        <InputModal
+          title={'Create New File'}
+          description={'You can add a new file to your storage browser'}
+          inputLabel={'Enter file name here'}
+          okText={'Create'}
+          showModal={showNewFileModal}
+          onCreate={handleCreateNewFile}
+          onClose={() => setShowNewFileModal(!showNewFileModal)}
+        />
       </div>
     </Spin>
   );

+ 9 - 0
desktop/core/src/desktop/js/reactComponents/FileChooser/api.ts

@@ -21,6 +21,7 @@ import { PathAndFileData, SortOrder } from './types';
 const FILESYSTEMS_API_URL = '/api/v1/storage/filesystems';
 const VIEWFILES_API_URl = '/api/v1/storage/view=';
 const MAKE_DIRECTORY_API_URL = '/api/v1/storage/mkdir';
+const TOUCH_API_URL = '/api/v1/storage/touch';
 
 export interface ApiFileSystem {
   file_system: string;
@@ -74,3 +75,11 @@ export const mkdir = async (folderName: string, path: string): Promise<AxiosResp
   const response = await axios.post(MAKE_DIRECTORY_API_URL, createDirFormData);
   return response;
 };
+
+export const touch = async (fileName: string, path: string): Promise<AxiosResponse> => {
+  const touchFormData = new FormData();
+  touchFormData.append('name', fileName);
+  touchFormData.append('path', path);
+  const response = await axios.post(TOUCH_API_URL, touchFormData);
+  return response;
+};