|
@@ -15,8 +15,10 @@
|
|
|
// limitations under the License.
|
|
// limitations under the License.
|
|
|
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import React, { useState, useEffect } from 'react';
|
|
|
-import { Spin, Input, Dropdown, Button } from 'antd';
|
|
|
|
|
|
|
+import { Spin, Dropdown, Input } from 'antd';
|
|
|
import type { MenuProps } from 'antd';
|
|
import type { MenuProps } from 'antd';
|
|
|
|
|
+import Button from 'cuix/dist/components/Button';
|
|
|
|
|
+import { PrimaryButton } from 'cuix/dist/components/Button';
|
|
|
|
|
|
|
|
import { i18nReact } from '../../../../utils/i18nReact';
|
|
import { i18nReact } from '../../../../utils/i18nReact';
|
|
|
import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
|
|
import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
|
|
@@ -27,7 +29,6 @@ import DownloadIcon from '@cloudera/cuix-core/icons/react/DownloadIcon';
|
|
|
import DropDownIcon from '@cloudera/cuix-core/icons/react/DropdownIcon';
|
|
import DropDownIcon from '@cloudera/cuix-core/icons/react/DropdownIcon';
|
|
|
import FolderIcon from '@cloudera/cuix-core/icons/react/ProjectIcon';
|
|
import FolderIcon from '@cloudera/cuix-core/icons/react/ProjectIcon';
|
|
|
import ImportIcon from '@cloudera/cuix-core/icons/react/ImportIcon';
|
|
import ImportIcon from '@cloudera/cuix-core/icons/react/ImportIcon';
|
|
|
-import PlusCircleIcon from '@cloudera/cuix-core/icons/react/PlusCircleIcon';
|
|
|
|
|
//TODO: Use cuix icon (Currently fileIcon does not exist in cuix)
|
|
//TODO: Use cuix icon (Currently fileIcon does not exist in cuix)
|
|
|
import { FileOutlined } from '@ant-design/icons';
|
|
import { FileOutlined } from '@ant-design/icons';
|
|
|
|
|
|
|
@@ -53,10 +54,10 @@ const defaultProps = {
|
|
|
testId: 'hue-storage-browser-tabContent'
|
|
testId: 'hue-storage-browser-tabContent'
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
|
|
|
|
|
|
|
+const StorageBrowserTabContent = ({
|
|
|
user_home_dir,
|
|
user_home_dir,
|
|
|
testId
|
|
testId
|
|
|
-}): JSX.Element => {
|
|
|
|
|
|
|
+}: StorageBrowserTabContentProps): JSX.Element => {
|
|
|
const [filePath, setFilePath] = useState<string>(user_home_dir);
|
|
const [filePath, setFilePath] = useState<string>(user_home_dir);
|
|
|
const [filesData, setFilesData] = useState<PathAndFileData>();
|
|
const [filesData, setFilesData] = useState<PathAndFileData>();
|
|
|
const [files, setFiles] = useState<StorageBrowserTableData[]>();
|
|
const [files, setFiles] = useState<StorageBrowserTableData[]>();
|
|
@@ -198,15 +199,15 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
|
|
|
<div className="hue-storage-browser-tabContent" data-testid={testId}>
|
|
<div className="hue-storage-browser-tabContent" data-testid={testId}>
|
|
|
<div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
|
|
<div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
|
|
|
<BucketIcon className="hue-storage-browser__icon" data-testid={`${testId}-icon`} />
|
|
<BucketIcon className="hue-storage-browser__icon" data-testid={`${testId}-icon`} />
|
|
|
- <div className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
|
|
|
|
|
|
|
+ <h3 className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
|
|
|
{filesData?.breadcrumbs[filesData?.breadcrumbs?.length - 1].label}
|
|
{filesData?.breadcrumbs[filesData?.breadcrumbs?.length - 1].label}
|
|
|
- </div>
|
|
|
|
|
|
|
+ </h3>
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
className="hue-storage-browser__path-browser-panel"
|
|
className="hue-storage-browser__path-browser-panel"
|
|
|
data-testid={`${testId}-path-browser-panel`}
|
|
data-testid={`${testId}-path-browser-panel`}
|
|
|
>
|
|
>
|
|
|
- <div className="hue-storage-browser__filePath">{t('File Path:')}</div>
|
|
|
|
|
|
|
+ <span className="hue-storage-browser__filePath">{t('File Path:')}</span>
|
|
|
<PathBrowser
|
|
<PathBrowser
|
|
|
breadcrumbs={filesData?.breadcrumbs}
|
|
breadcrumbs={filesData?.breadcrumbs}
|
|
|
onFilepathChange={setFilePath}
|
|
onFilepathChange={setFilePath}
|
|
@@ -225,7 +226,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
|
|
|
}}
|
|
}}
|
|
|
trigger={['hover', 'click']}
|
|
trigger={['hover', 'click']}
|
|
|
>
|
|
>
|
|
|
- <Button className="hue-storage-browser__bulk-action-btn">
|
|
|
|
|
|
|
+ <Button data-event={''}>
|
|
|
{t('Bulk Actions')}
|
|
{t('Bulk Actions')}
|
|
|
<DropDownIcon />
|
|
<DropDownIcon />
|
|
|
</Button>
|
|
</Button>
|
|
@@ -238,10 +239,10 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
|
|
|
}}
|
|
}}
|
|
|
trigger={['hover', 'click']}
|
|
trigger={['hover', 'click']}
|
|
|
>
|
|
>
|
|
|
- <Button className="hue-storage-browser__new-btn" icon={<PlusCircleIcon />}>
|
|
|
|
|
|
|
+ <PrimaryButton data-event={''}>
|
|
|
{t('New')}
|
|
{t('New')}
|
|
|
<DropDownIcon />
|
|
<DropDownIcon />
|
|
|
- </Button>
|
|
|
|
|
|
|
+ </PrimaryButton>
|
|
|
</Dropdown>
|
|
</Dropdown>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|