浏览代码

[frontend] added test for filesystems and made suggested improvements

Nidhi Bhat G 3 年之前
父节点
当前提交
abda280b29

+ 8 - 3
desktop/core/src/desktop/js/reactComponents/FileChooser/FileSystemList/FileSystemList.scss → desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FIleChooserModal.scss

@@ -16,6 +16,11 @@
 
 @import '../../../components/styles/colors';
 
+.file-chooser__modal .ant-modal-body {
+  height: 554px;
+  padding: 0;
+}
+
 .file-system__panel.ant-menu {
   height: 554px;
   width: 187px;
@@ -23,16 +28,16 @@
   padding-top: 20px;
 }
 
-.ant-menu-item {
+.file-system__panel .ant-menu-item {
   display: flex !important;
   align-items: center;
 }
 
-.ant-menu-item-icon {
+.file-system__panel .ant-menu-item-icon {
   height: 20px !important;
   width: 20px !important;
 }
 
-.ant-menu-item-selected {
+.file-system__panel .ant-menu-item-selected {
   background-color: $fluid-gray-300 !important;
 }

+ 30 - 16
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx

@@ -16,6 +16,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Modal from 'antd/lib/modal/Modal';
+import { Menu, Spin } from 'antd';
 
 import HdfsIcon from '../../../components/icons/HdfsIcon';
 import S3Icon from '../../../components/icons/S3Icon';
@@ -23,18 +24,19 @@ import AdlsIcon from '../../../components/icons/AdlsIcon';
 
 import { fetchFileSystems } from '../api';
 import { FileSystem } from '../types';
-import FileSystemList from '../FileSystemList/FileSystemList';
+import './FileChooserModal.scss';
 interface FileProps {
   show: boolean;
   onCancel: () => void;
-  title: string;
-  okText: string;
+  title?: string;
+  okText?: string;
 }
 
 const defaultProps = { title: 'Choose a file', okText: 'Select' };
 
 const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }) => {
-  const [fileSystemList, setFileSystemList] = useState<Array<FileSystem>>([]);
+  const [fileSystemList, setFileSystemList] = useState<FileSystem[] | undefined>();
+  const [loading, setLoading] = useState(true);
 
   const icons = {
     hdfs: <HdfsIcon />,
@@ -51,21 +53,31 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
     onCancel();
   };
 
+  const onPathChange = e => {
+    //TODO: Use fileSystemList[e.key].user_home_dir to retrieve files
+  };
+
   useEffect(() => {
-    if (show) {
-      fetchFileSystems().then(fileSystemResponse => {
-        const fileSystems = Object.keys(fileSystemResponse.filesystems);
-        if (fileSystems !== undefined || fileSystems.length !== 0) {
-          const fileSystemsObj = fileSystems.map(system => {
+    if (show && !fileSystemList) {
+      setLoading(true);
+      fetchFileSystems()
+        .then(fileSystems => {
+          const fileSystemsObj = fileSystems.map((system, index) => {
             return {
-              label: system,
-              key: system,
-              icon: icons[system]
+              label: system.file_system,
+              key: index,
+              icon: icons[system.file_system],
+              user_home_dir: system.user_home_directory
             };
           });
           setFileSystemList(fileSystemsObj);
-        }
-      });
+        })
+        .catch(error => {
+          //TODO: Properly handle errors.
+        })
+        .finally(() => {
+          setLoading(false);
+        });
     }
   }, [show]);
 
@@ -77,9 +89,11 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
       onCancel={handleCancel}
       okText={okText}
       width={930}
-      bodyStyle={{ height: '554px', padding: '0px' }}
+      className="file-chooser__modal"
     >
-      <FileSystemList fileSystems={fileSystemList}></FileSystemList>
+      <Spin spinning={loading}>
+        <Menu items={fileSystemList} onSelect={onPathChange} className="file-system__panel"></Menu>
+      </Spin>
     </Modal>
   );
 };

+ 19 - 15
desktop/core/src/desktop/js/reactComponents/FileChooser/FileSystemList/FileSystemList.tsx → desktop/core/src/desktop/js/reactComponents/FileChooser/api.test.ts

@@ -14,22 +14,26 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
-import { Menu } from 'antd';
+import { CancellablePromise } from '../../api/cancellablePromise';
+import * as ApiUtils from '../../api/utils';
+import { fetchFileSystems } from './api';
 
-import './FileSystemList.scss';
-import { FileSystem } from '../types';
+describe('tests the filesystems api', () => {
+  it('test for valid filesystem api response', async () => {
+    const mockData = [
+      { file_system: 'hdfs', user_home_directory: '/user/demo' },
+      { file_system: 'abfs', user_home_directory: 'abfs://jahlenc' }
+    ];
 
-interface FileSystemProps {
-  fileSystems: Array<FileSystem>;
-}
+    const getSpy = jest
+      .spyOn(ApiUtils, 'get')
+      .mockImplementation(() => CancellablePromise.resolve(mockData));
 
-const FileSystemList: React.FC<FileSystemProps> = ({ fileSystems }) => {
-  return (
-    <>
-      <Menu items={fileSystems} className="file-system__panel"></Menu>
-    </>
-  );
-};
+    const filesystems = await fetchFileSystems();
 
-export default FileSystemList;
+    expect(getSpy).toHaveBeenCalledWith('/api/storage/filesystems');
+    expect(filesystems).toEqual(mockData);
+  });
+
+  //TODO: tests for errors
+});

+ 6 - 8
desktop/core/src/desktop/js/reactComponents/FileChooser/api.ts

@@ -14,16 +14,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { post } from '../../api/utils';
+import { get } from '../../api/utils';
 import { CancellablePromise } from '../../api/cancellablePromise';
 
-const FILESYSTEMS_API_URL = '/api/storage/get_filesystems';
+const FILESYSTEMS_API_URL = '/api/storage/filesystems';
 
-export interface FetchFileSystemsResponse {
-  filesystems: Array<string>;
-  status: number;
+export interface ApiFileSystem {
+  file_system: string;
+  user_home_directory: string;
 }
 
-export const fetchFileSystems = (): CancellablePromise<FetchFileSystemsResponse> => {
-  return post(FILESYSTEMS_API_URL);
-};
+export const fetchFileSystems = (): CancellablePromise<ApiFileSystem[]> => get(FILESYSTEMS_API_URL);

+ 2 - 1
desktop/core/src/desktop/js/reactComponents/FileChooser/types.ts

@@ -17,6 +17,7 @@
 //TODO: the interface will change based on the new api to accomodate errors
 export interface FileSystem {
   label: string;
-  key: string;
+  key: number;
   icon: JSX.Element;
+  user_home_dir: string;
 }

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -20,6 +20,7 @@
   @import 'node_modules/antd/es/modal/style/index.less';
   @import 'node_modules/antd/es/skeleton/style/index.less';
   @import 'node_modules/antd/es/menu/style/index.less';
+  @import 'node_modules/antd/es/spin/style/index.less';
 
   /* stylelint-enable no-invalid-position-at-import-rule */