|
|
@@ -15,24 +15,37 @@
|
|
|
// limitations under the License.
|
|
|
|
|
|
import React, { useRef, useEffect, useState, RefObject } from 'react';
|
|
|
-import { Input, Button, Dropdown, Row, Col } from 'antd';
|
|
|
+import { Input, Button, Dropdown } from 'antd';
|
|
|
import type { MenuProps } from 'antd';
|
|
|
-import { RightOutlined } from '@ant-design/icons';
|
|
|
|
|
|
import HdfsIcon from '../../../components/icons/HdfsIcon';
|
|
|
import S3Icon from '../../../components/icons/S3Icon';
|
|
|
import AdlsIcon from '../../../components/icons/AdlsIcon';
|
|
|
|
|
|
import { BreadcrumbData } from '../types';
|
|
|
-import OverflowingItem from './OverflowingItem';
|
|
|
+import Breadcrumb from './Breadcrumb/Breadcrumb';
|
|
|
+import DropDownMenuItem from './DropdownMenuItem/DropdownMenuItem';
|
|
|
import './PathBrowser.scss';
|
|
|
|
|
|
interface PathBrowserProps {
|
|
|
breadcrumbs?: BreadcrumbData[];
|
|
|
- handleFilePathChange: (path: string) => void;
|
|
|
+ onFilepathChange: (path: string) => void;
|
|
|
+ seperator: string;
|
|
|
+ showIcon: boolean;
|
|
|
+ testId?: string;
|
|
|
}
|
|
|
|
|
|
-const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathChange }) => {
|
|
|
+const defaultProps = {
|
|
|
+ testId: 'hue-path-browser'
|
|
|
+};
|
|
|
+
|
|
|
+const PathBrowser: React.FC<PathBrowserProps> = ({
|
|
|
+ breadcrumbs,
|
|
|
+ onFilepathChange,
|
|
|
+ seperator,
|
|
|
+ showIcon,
|
|
|
+ testId
|
|
|
+}) => {
|
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
|
|
|
|
const icons = {
|
|
|
@@ -78,11 +91,11 @@ const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathCh
|
|
|
return {
|
|
|
key: breadcrumb.url,
|
|
|
label: (
|
|
|
- <OverflowingItem
|
|
|
+ <DropDownMenuItem
|
|
|
+ key={breadcrumb.url}
|
|
|
label={breadcrumb.label}
|
|
|
url={breadcrumb.url}
|
|
|
- handleFilePathChange={handleFilePathChange}
|
|
|
- componentType="menu"
|
|
|
+ onFilepathChange={onFilepathChange}
|
|
|
/>
|
|
|
)
|
|
|
};
|
|
|
@@ -94,40 +107,51 @@ const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathCh
|
|
|
return (
|
|
|
<>
|
|
|
{!isEditMode ? (
|
|
|
- <div className="hue-path-browser">
|
|
|
- <div className="hue-filesystem__icon">
|
|
|
- {icons[extractFileSystem(breadcrumbs[0].label)]}
|
|
|
- </div>
|
|
|
- <div className="hue-path-browser__breadcrumb">
|
|
|
+ <div className="hue-path-browser" data-testid={`${testId}`}>
|
|
|
+ {showIcon && (
|
|
|
+ <div
|
|
|
+ className="hue-path-browser__file-system-icon"
|
|
|
+ data-testid={`${testId}__file-system-icon`}
|
|
|
+ >
|
|
|
+ {icons[extractFileSystem(breadcrumbs[0].label)]}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div className="hue-path-browser__breadcrumbs" data-testid={`${testId}-breadcrumb`}>
|
|
|
{breadcrumbs.length <= 3 ? (
|
|
|
breadcrumbs.map((item: BreadcrumbData, index: number) => {
|
|
|
return (
|
|
|
- <>
|
|
|
- <OverflowingItem
|
|
|
+ <React.Fragment key={item.url + index}>
|
|
|
+ <Breadcrumb
|
|
|
key={item.url}
|
|
|
label={index === 0 ? extractFileSystem(item.label) : item.label}
|
|
|
url={item.url}
|
|
|
- handleFilePathChange={handleFilePathChange}
|
|
|
- componentType="breadcrumb"
|
|
|
+ onFilepathChange={onFilepathChange}
|
|
|
/>
|
|
|
- {index != breadcrumbs.length - 1 ? (
|
|
|
- <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
|
|
|
- ) : (
|
|
|
- <></>
|
|
|
+ {index != breadcrumbs.length - 1 && (
|
|
|
+ <div
|
|
|
+ className="hue-path-browser__breadcrumb-seperator"
|
|
|
+ data-testid={`${testId}-breadcrumb-seperator`}
|
|
|
+ >
|
|
|
+ {seperator}
|
|
|
+ </div>
|
|
|
)}
|
|
|
- </>
|
|
|
+ </React.Fragment>
|
|
|
);
|
|
|
})
|
|
|
) : (
|
|
|
<>
|
|
|
- <OverflowingItem
|
|
|
+ <Breadcrumb
|
|
|
label={extractFileSystem(breadcrumbs[0].label)}
|
|
|
url={breadcrumbs[0].url}
|
|
|
- handleFilePathChange={handleFilePathChange}
|
|
|
- componentType="breadcrumb"
|
|
|
+ onFilepathChange={onFilepathChange}
|
|
|
key={breadcrumbs[0].url}
|
|
|
/>
|
|
|
- <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
|
|
|
+ <div
|
|
|
+ className="hue-path-browser__breadcrumb-seperator"
|
|
|
+ data-testid={`${testId}-breadcrumb-seperator`}
|
|
|
+ >
|
|
|
+ {seperator}
|
|
|
+ </div>
|
|
|
<Dropdown
|
|
|
overlayClassName="hue-path-browser__dropdown"
|
|
|
menu={{
|
|
|
@@ -136,46 +160,63 @@ const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathCh
|
|
|
}}
|
|
|
trigger={['hover', 'click']}
|
|
|
autoFocus
|
|
|
+ data-testid={`${testId}-dropdown`}
|
|
|
>
|
|
|
- <Button className="hue-path-browser__dropdown-button">..</Button>
|
|
|
+ <Button
|
|
|
+ className="hue-path-browser__dropdown-button"
|
|
|
+ data-testid={`${testId}-dropdown-btn`}
|
|
|
+ >
|
|
|
+ ..
|
|
|
+ </Button>
|
|
|
</Dropdown>
|
|
|
- <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
|
|
|
- <OverflowingItem
|
|
|
+ <div
|
|
|
+ className="hue-path-browser__breadcrumb-seperator"
|
|
|
+ data-testid={`${testId}-breadcrumb-seperator`}
|
|
|
+ >
|
|
|
+ {seperator}
|
|
|
+ </div>
|
|
|
+ <Breadcrumb
|
|
|
key={breadcrumbs[breadcrumbs.length - 2].url}
|
|
|
label={breadcrumbs[breadcrumbs.length - 2].label}
|
|
|
url={breadcrumbs[breadcrumbs.length - 2].url}
|
|
|
- handleFilePathChange={handleFilePathChange}
|
|
|
- componentType="breadcrumb"
|
|
|
+ onFilepathChange={onFilepathChange}
|
|
|
/>
|
|
|
- <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
|
|
|
- <OverflowingItem
|
|
|
+ <div
|
|
|
+ className="hue-path-browser__breadcrumb-seperator"
|
|
|
+ data-testid={`${testId}-breadcrumb-seperator`}
|
|
|
+ >
|
|
|
+ {seperator}
|
|
|
+ </div>
|
|
|
+ <Breadcrumb
|
|
|
key={breadcrumbs[breadcrumbs.length - 1].url}
|
|
|
label={breadcrumbs[breadcrumbs.length - 1].label}
|
|
|
url={breadcrumbs[breadcrumbs.length - 1].url}
|
|
|
- handleFilePathChange={handleFilePathChange}
|
|
|
- componentType="breadcrumb"
|
|
|
+ onFilepathChange={onFilepathChange}
|
|
|
/>
|
|
|
</>
|
|
|
)}
|
|
|
</div>
|
|
|
<Button
|
|
|
- className="hue-toggle-breadcrumb-input"
|
|
|
+ className="hue-path-browser__toggle-breadcrumb-input-btn"
|
|
|
+ aria-label="hue-path-browser__toggle-breadcrumb-input-btn"
|
|
|
title="Edit path"
|
|
|
onClick={() => {
|
|
|
setIsEditMode(true);
|
|
|
}}
|
|
|
+ data-testid={`${testId}-toggle-input-btn`}
|
|
|
></Button>
|
|
|
</div>
|
|
|
) : (
|
|
|
<div ref={wrapperRef}>
|
|
|
<Input
|
|
|
- prefix={icons[extractFileSystem(breadcrumbs[0].label)]}
|
|
|
+ prefix={showIcon ? icons[extractFileSystem(breadcrumbs[0].label)] : <span />}
|
|
|
defaultValue={decodeURIComponent(breadcrumbs[breadcrumbs.length - 1].url)}
|
|
|
onPressEnter={customPath => {
|
|
|
- handleFilePathChange((customPath.target as HTMLInputElement).value);
|
|
|
+ onFilepathChange((customPath.target as HTMLInputElement).value);
|
|
|
}}
|
|
|
className="hue-path-browser__input"
|
|
|
autoFocus
|
|
|
+ data-testid={`${testId}-input`}
|
|
|
></Input>
|
|
|
</div>
|
|
|
)}
|
|
|
@@ -184,4 +225,5 @@ const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathCh
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+PathBrowser.defaultProps = defaultProps;
|
|
|
export default PathBrowser;
|