//
// SPDX-License-Identifier: AGPL-3.0
-import React, { useState } from 'react';
+import React from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { Route, Switch } from "react-router";
import { ProjectPanel } from "views/project-panel/project-panel";
import { MoveProjectDialog } from 'views-components/dialog-forms/move-project-dialog';
import { MoveCollectionDialog } from 'views-components/dialog-forms/move-collection-dialog';
import { FilesUploadCollectionDialog } from 'views-components/dialog-forms/files-upload-collection-dialog';
-import { PartialCopyCollectionDialog } from 'views-components/dialog-forms/partial-copy-collection-dialog';
+import { PartialCopyToNewCollectionDialog } from 'views-components/dialog-forms/partial-copy-to-new-collection-dialog';
+import { PartialCopyToExistingCollectionDialog } from 'views-components/dialog-forms/partial-copy-to-existing-collection-dialog';
+import { PartialCopyToSeparateCollectionsDialog } from 'views-components/dialog-forms/partial-copy-to-separate-collections-dialog';
+import { PartialMoveToNewCollectionDialog } from 'views-components/dialog-forms/partial-move-to-new-collection-dialog';
+import { PartialMoveToExistingCollectionDialog } from 'views-components/dialog-forms/partial-move-to-existing-collection-dialog';
+import { PartialMoveToSeparateCollectionsDialog } from 'views-components/dialog-forms/partial-move-to-separate-collections-dialog';
import { RemoveProcessDialog } from 'views-components/process-remove-dialog/process-remove-dialog';
import { MainContentBar } from 'views-components/main-content-bar/main-content-bar';
import { Grid } from '@material-ui/core';
import { RunProcessPanel } from 'views/run-process-panel/run-process-panel';
import SplitterLayout from 'react-splitter-layout';
import { WorkflowPanel } from 'views/workflow-panel/workflow-panel';
+import { RegisteredWorkflowPanel } from 'views/workflow-panel/registered-workflow-panel';
import { SearchResultsPanel } from 'views/search-results-panel/search-results-panel';
import { SshKeyPanel } from 'views/ssh-key-panel/ssh-key-panel';
import { SshKeyAdminPanel } from 'views/ssh-key-panel/ssh-key-admin-panel';
import { GroupDetailsPanel } from 'views/group-details-panel/group-details-panel';
import { RemoveGroupMemberDialog } from 'views-components/groups-dialog/member-remove-dialog';
import { GroupMemberAttributesDialog } from 'views-components/groups-dialog/member-attributes-dialog';
-import { PartialCopyToCollectionDialog } from 'views-components/dialog-forms/partial-copy-to-collection-dialog';
import { PublicFavoritePanel } from 'views/public-favorites-panel/public-favorites-panel';
import { LinkAccountPanel } from 'views/link-account-panel/link-account-panel';
import { FedLogin } from './fed-login';
import { WebDavS3InfoDialog } from 'views-components/webdav-s3-dialog/webdav-s3-dialog';
import { pluginConfig } from 'plugins';
import { ElementListReducer } from 'common/plugintypes';
+import { COLLAPSE_ICON_SIZE } from 'views-components/side-panel-toggle/side-panel-toggle'
+import { Banner } from 'views-components/baner/banner';
type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
},
splitter: {
'& > .layout-splitter': {
- width: '2px'
+ width: '2px',
+ },
+ '& > .layout-splitter-disabled': {
+ pointerEvents: 'none',
+ cursor: 'pointer'
}
},
asidePanel: {
isUserActive: boolean;
isNotLinking: boolean;
sessionIdleTimeout: number;
+ sidePanelIsCollapsed: boolean;
}
type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
<Route path={Routes.TRASH} component={TrashPanel} />
<Route path={Routes.SHARED_WITH_ME} component={SharedWithMePanel} />
<Route path={Routes.RUN_PROCESS} component={RunProcessPanel} />
+ <Route path={Routes.REGISTEREDWORKFLOW} component={RegisteredWorkflowPanel} />
<Route path={Routes.WORKFLOWS} component={WorkflowPanel} />
<Route path={Routes.SEARCH_RESULTS} component={SearchResultsPanel} />
<Route path={Routes.VIRTUAL_MACHINES_USER} component={VirtualMachineUserPanel} />
routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children)));
+const applyCollapsedState = (isCollapsed) => {
+ const rightPanel: Element = document.getElementsByClassName('layout-pane')[1]
+ const totalWidth: number = document.getElementsByClassName('splitter-layout')[0]?.clientWidth
+ const rightPanelExpandedWidth = ((totalWidth - COLLAPSE_ICON_SIZE)) / (totalWidth / 100)
+ if (rightPanel) {
+ rightPanel.setAttribute('style', `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`)
+ }
+ const splitter = document.getElementsByClassName('layout-splitter')[0]
+ isCollapsed ? splitter?.classList.add('layout-splitter-disabled') : splitter?.classList.remove('layout-splitter-disabled')
+
+}
+
export const WorkbenchPanel =
- withStyles(styles)((props: WorkbenchPanelProps) =>{
- const [collapsedState, setCollapsedState] = useState<boolean>(false)
+ withStyles(styles)((props: WorkbenchPanelProps) => {
+
+ //panel size will not scale automatically on window resize, so we do it manually
+ window.addEventListener('resize', () => applyCollapsedState(props.sidePanelIsCollapsed))
+ applyCollapsedState(props.sidePanelIsCollapsed)
+
return <Grid container item xs className={props.classes.root}>
{props.sessionIdleTimeout > 0 && <AutoLogout />}
<Grid container item xs className={props.classes.container}>
primaryIndex={0} primaryMinSize={10}
secondaryInitialSize={getSplitterInitialSize()} secondaryMinSize={40}
onSecondaryPaneSizeChange={saveSplitterSize}>
- {props.isUserActive && props.isNotLinking && !collapsedState && <Grid container item xs component='aside' direction='column' className={props.classes.asidePanel}>
+ {props.isUserActive && props.isNotLinking && <Grid container item xs component='aside' direction='column' className={props.classes.asidePanel}>
<SidePanel />
</Grid>}
<Grid container item xs component="main" direction="column" className={props.classes.contentWrapper}>
- <button onClick={()=>setCollapsedState(!collapsedState)}>collpase</button>
<Grid item xs>
{props.isNotLinking && <MainContentBar />}
</Grid>
<MoveProjectDialog />
<MultipleFilesRemoveDialog />
<PublicKeyDialog />
- <PartialCopyCollectionDialog />
- <PartialCopyToCollectionDialog />
+ <PartialCopyToNewCollectionDialog />
+ <PartialCopyToExistingCollectionDialog />
+ <PartialCopyToSeparateCollectionsDialog />
+ <PartialMoveToNewCollectionDialog />
+ <PartialMoveToExistingCollectionDialog />
+ <PartialMoveToSeparateCollectionsDialog />
<ProcessInputDialog />
<RestoreCollectionVersionDialog />
<RemoveApiClientAuthorizationDialog />
<VirtualMachineAttributesDialog />
<FedLogin />
<WebDavS3InfoDialog />
+ <Banner />
{React.createElement(React.Fragment, null, pluginConfig.dialogs)}
- </Grid>}
+ </Grid>
+ }
);