Skip to content

Commit

Permalink
task/WP-65-DropdownViewFullPath
Browse files Browse the repository at this point in the history
  • Loading branch information
Taylor Grafft authored and Taylor Grafft committed Sep 29, 2023
1 parent 9caf6a8 commit 11f5121
Show file tree
Hide file tree
Showing 9 changed files with 313 additions and 135 deletions.
183 changes: 137 additions & 46 deletions client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import React from 'react';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { Button } from '_common';
import {
DropdownToggle,
DropdownMenu,
DropdownItem,
ButtonDropdown,
} from 'reactstrap';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { v4 as uuidv4 } from 'uuid';
import './DataFilesBreadcrumbs.scss';
import '../DataFilesModals/DataFilesShowPathModal.jsx';
import {
useSystemDisplayName,
useFileListing,
Expand Down Expand Up @@ -35,7 +45,7 @@ const BreadcrumbLink = ({
case 'FilesListing':
return (
<Link
className="breadcrumb-link"
className="breadcrumb-link truncate"
to={`${basePath}/${api}/${scheme}/${system}${path}/`}
>
{children}
Expand All @@ -46,7 +56,7 @@ const BreadcrumbLink = ({
return (
<span>
<a
className="breadcrumb-link"
className="breadcrumb-link truncate"
href={`/workbench/data/${api}/${scheme}/${system}${path}/`}
onClick={onClick}
>
Expand Down Expand Up @@ -120,6 +130,45 @@ const DataFilesBreadcrumbs = ({
const paths = [];
const pathComps = [];

const [dropdownOpen, setDropdownOpen] = useState(false);
const toggleDropdown = () => setDropdownOpen(!dropdownOpen);

const handleNavigation = (targetPath) => {
const basePath = isPublic ? '/public-data' : '/workbench/data';
let url;

if (scheme === 'projects' && !targetPath) {
url = `${basePath}/${api}/projects/`;
} else if (api === 'googledrive' && !targetPath) {
url = `${basePath}/${api}/${scheme}/${system}/`;
} else {
url = `${basePath}/${api}/${scheme}/${system}${targetPath}/`;
}

if (!url) {
console.error('URL is not defined');
return;
}

return url;
};

const dispatch = useDispatch();

const fileData = {
system: system,
path: path,
};

const openFullPathModal = (e) => {
e.stopPropagation();
e.preventDefault();
dispatch({
type: 'DATA_FILES_TOGGLE_MODAL',
payload: { operation: 'showpath', props: { file: fileData } },
});
};

const { fetchSelectedSystem } = useSystems();

const selectedSystem = fetchSelectedSystem({ scheme, system, path });
Expand Down Expand Up @@ -155,52 +204,94 @@ const DataFilesBreadcrumbs = ({
}
}, '');

const lastTwoPaths = paths.slice(-1);
const lastTwoPathComps = pathComps.slice(-1);
const reversedPath = paths.reverse();

return (
<div className={`breadcrumbs ${className}`}>
{scheme === 'projects' && (
<>
<RootProjectsLink
api={api}
section={section}
operation={operation}
label="Shared Workspaces"
/>{' '}
{system && `/ `}
</>
<div className="breadcrumb-container">
<div id="path-button-wrapper">
<ButtonDropdown
isOpen={dropdownOpen}
toggle={toggleDropdown}
className="go-to-button-dropdown"
>
<DropdownToggle
color="secondary"
id="data-files-path"
className="data-files-btn"
>
Go to ...
</DropdownToggle>
<DropdownMenu>
{reversedPath.slice(1, reversedPath.length).map((path, index) => {
const folderName = path.split('/').pop();
return (
<>
<Link key={index} to={handleNavigation(path)}>
<DropdownItem>
<i className="icon-folder" />
{folderName.length > 20
? folderName.substring(0, 20)
: folderName}
</DropdownItem>
</Link>
</>
);
})}
<DropdownItem divider />
<Link to={handleNavigation(homeDir)}>
<DropdownItem>
<i className="icon-my-data" />
<span className="multiline-menu-item-wrapper">
{systemName || 'Shared Workspaces'}
<small>Root</small>
</span>
</DropdownItem>
</Link>
</DropdownMenu>
</ButtonDropdown>
</div>
<div className={`breadcrumbs ${className}`}>
{lastTwoPathComps.length === 0 ? (
<span className="system-name truncate">
{systemName || 'Shared Workspaces'}
</span>
) : (
lastTwoPathComps.map((pathComp, i) => {
if (i === lastTwoPaths.length - 1) {
return (
<span key={uuidv4()} className="truncate">
{pathComp}
</span>
);
}
return (
<React.Fragment key={uuidv4()}>
<span className="vertical-align-separator">/</span>
<BreadcrumbLink
api={api}
scheme={scheme}
system={system}
path={lastTwoPaths[i]}
section={section}
>
<>{pathComp}</>
</BreadcrumbLink>
</React.Fragment>
);
})
)}
</div>
{systemName && api !== 'googledrive' ? (
<Button type="link" onClick={openFullPathModal}>
View Full Path
</Button>
) : (
<Button type="link" disabled={true} onClick={openFullPathModal}>
View Full Path
</Button>
)}
<BreadcrumbLink
api={api}
scheme={scheme}
system={system}
path={startingPath}
section={section}
isPublic={isPublic}
>
<>{systemName}</>
</BreadcrumbLink>
{pathComps.map((pathComp, i) => {
if (i < paths.length - 2) {
return ' /... ';
}
if (i === paths.length - 1) {
return <span key={uuidv4()}> / {pathComp}</span>;
}
return (
<React.Fragment key={uuidv4()}>
{' '}
/{' '}
<BreadcrumbLink
api={api}
scheme={scheme}
system={system}
path={paths[i]}
section={section}
>
<>{pathComp}</>
</BreadcrumbLink>
</React.Fragment>
);
})}
</div>
);
};
Expand Down
101 changes: 101 additions & 0 deletions client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
/* ... */
@include truncate-with-ellipsis;
margin-right: 2em;
display: flex;
align-items: center;
}
.breadcrumb-link,
.breadcrumb-link:hover {
Expand Down Expand Up @@ -34,3 +36,102 @@
max-width: 700px;
}
}

.data-files-btn {
background-color: var(--global-color-accent--normal);
border-color: var(--global-color-accent--normal);
border-radius: 0;
font-family: 'Roboto, sans-serif';
}

.data-files-btn-cancel {
border-radius: 0;
}

#path-button-wrapper {
padding-left: var(--horizontal-buffer);
}
#data-files-path {
font-size: 12px;
padding: 5px 10px;
border-color: #707070;
}

.data-files-nav {
padding-top: 20px;
}

/* HACK: Quick solution to prevent styles from cascading into header dropdown */
.go-to-button-dropdown {
.dropdown-menu {
border-color: var(--global-color-accent--normal);
border-radius: 0;
margin-top: 11px;
padding: 0;
width: 200px;
vertical-align: top;
}
.dropdown-menu::before,
.dropdown-menu::after {
position: absolute;
top: -10px;
left: 15px;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--global-color-accent--normal);
border-left: 10px solid transparent;
content: '';
}
.dropdown-menu::after {
top: -9px;
left: 15px;
border-bottom: 10px solid #ffffff;
}

.dropdown-item {
display: inline-block;
padding: 10px 6px;
color: var(--global-color-primary--x-dark);
font-size: 14px;
i {
padding-right: 19px;
font-size: 20px;
vertical-align: top;
}
&:hover {
color: var(--global-color-primary--x-dark);
}
}
.dropdown-item:focus,
.dropdown-item:hover {
background-color: var(--global-color-accent--weak);
}
}

.breadcrumb-container {
display: flex;
align-items: center;
}

.truncate {
display: inline-block;
max-width: 600px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 20px;
}

.multiline-menu-item-wrapper {
display: inline-block;
padding-left: 5px;
line-height: 1.1em;
small {
display: block;
color: var(--global-color-primary--x-dark);
}
}

.breadcrumbs .vertical-align-separator {
margin-right: 2px;
margin-left: 10px;
}
33 changes: 2 additions & 31 deletions client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe('DataFilesBreadcrumbs', () => {
systems: systemsFixture,
});
const history = createMemoryHistory();
const { getByText, debug } = renderComponent(
const { getAllByText, debug } = renderComponent(
<DataFilesBreadcrumbs
api="tapis"
scheme="private"
Expand All @@ -60,36 +60,7 @@ describe('DataFilesBreadcrumbs', () => {
createMemoryHistory()
);

expect(getByText('Frontera')).toBeDefined();
expect(getByText('Frontera').closest('a').getAttribute('href')).toEqual(
'/workbench/data/tapis/private/frontera.home.username/'
);
});

it('render breadcrumbs with initial empty systems', () => {
const store = mockStore({
systems: initialSystemState,
projects: projectsFixture,
});
const history = createMemoryHistory();
const { getByText, debug } = renderComponent(
<DataFilesBreadcrumbs
api="tapis"
scheme="private"
system="frontera.home.username"
path="/path/to/the/files"
section="FilesListing"
/>,
store,
createMemoryHistory()
);

expect(getByText(/Frontera/)).toBeDefined();
expect(
getByText(/Frontera/)
.closest('a')
.getAttribute('href')
).toEqual('/workbench/data/tapis/private/frontera.home.username/');
expect(getAllByText('Frontera')).toBeDefined();
});

it('render breadcrumbs for projects', () => {
Expand Down
Loading

0 comments on commit 11f5121

Please sign in to comment.