X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/ec862c8c86eab36e998186f3138dd396d4ec13f6..8822913c680fa37634b9ab103bc962b77ebde830:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 9ce93bf2..ce930746 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -20,7 +20,6 @@ import { MultipleFilesRemoveDialog } from 'views-components/file-remove-dialog/m import { Routes } from 'routes/routes'; import { SidePanel } from 'views-components/side-panel/side-panel'; import { ProcessPanel } from 'views/process-panel/process-panel'; -import { ProcessLogPanel } from 'views/process-log-panel/process-log-panel'; import { ChangeWorkflowDialog } from 'views-components/run-process-dialog/change-workflow-dialog'; import { CreateProjectDialog } from 'views-components/dialog-forms/create-project-dialog'; import { CreateCollectionDialog } from 'views-components/dialog-forms/create-collection-dialog'; @@ -33,8 +32,12 @@ import { MoveProcessDialog } from 'views-components/dialog-forms/move-process-di 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 { ProcessCommandDialog } from 'views-components/process-command-dialog/process-command-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'; @@ -43,18 +46,18 @@ import { SharedWithMePanel } from 'views/shared-with-me-panel/shared-with-me-pan 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 { SiteManagerPanel } from "views/site-manager-panel/site-manager-panel"; -import { MyAccountPanel } from 'views/my-account-panel/my-account-panel'; +import { UserProfilePanel } from 'views/user-profile-panel/user-profile-panel'; import { SharingDialog } from 'views-components/sharing-dialog/sharing-dialog'; import { NotFoundDialog } from 'views-components/not-found-dialog/not-found-dialog'; import { AdvancedTabDialog } from 'views-components/advanced-tab-dialog/advanced-tab-dialog'; import { ProcessInputDialog } from 'views-components/process-input-dialog/process-input-dialog'; import { VirtualMachineUserPanel } from 'views/virtual-machine-panel/virtual-machine-user-panel'; import { VirtualMachineAdminPanel } from 'views/virtual-machine-panel/virtual-machine-admin-panel'; -import { ProjectPropertiesDialog } from 'views-components/project-properties-dialog/project-properties-dialog'; import { RepositoriesPanel } from 'views/repositories-panel/repositories-panel'; import { KeepServicePanel } from 'views/keep-service-panel/keep-service-panel'; import { ApiClientAuthorizationPanel } from 'views/api-client-authorization-panel/api-client-authorization-panel'; @@ -69,27 +72,27 @@ import { RemoveApiClientAuthorizationDialog } from 'views-components/api-client- import { RemoveKeepServiceDialog } from 'views-components/keep-services-dialog/remove-dialog'; import { RemoveLinkDialog } from 'views-components/links-dialog/remove-dialog'; import { RemoveSshKeyDialog } from 'views-components/ssh-keys-dialog/remove-dialog'; +import { VirtualMachineAttributesDialog } from 'views-components/virtual-machines-dialog/attributes-dialog'; import { RemoveVirtualMachineDialog } from 'views-components/virtual-machines-dialog/remove-dialog'; +import { RemoveVirtualMachineLoginDialog } from 'views-components/virtual-machines-dialog/remove-login-dialog'; +import { VirtualMachineAddLoginDialog } from 'views-components/virtual-machines-dialog/add-login-dialog'; import { AttributesApiClientAuthorizationDialog } from 'views-components/api-client-authorizations-dialog/attributes-dialog'; import { AttributesKeepServiceDialog } from 'views-components/keep-services-dialog/attributes-dialog'; import { AttributesLinkDialog } from 'views-components/links-dialog/attributes-dialog'; import { AttributesSshKeyDialog } from 'views-components/ssh-keys-dialog/attributes-dialog'; -import { VirtualMachineAttributesDialog } from 'views-components/virtual-machines-dialog/attributes-dialog'; import { UserPanel } from 'views/user-panel/user-panel'; import { UserAttributesDialog } from 'views-components/user-dialog/attributes-dialog'; import { CreateUserDialog } from 'views-components/dialog-forms/create-user-dialog'; import { HelpApiClientAuthorizationDialog } from 'views-components/api-client-authorizations-dialog/help-dialog'; -import { UserManageDialog } from 'views-components/user-dialog/manage-dialog'; -import { SetupShellAccountDialog } from 'views-components/dialog-forms/setup-shell-account-dialog'; +import { DeactivateDialog } from 'views-components/user-dialog/deactivate-dialog'; +import { ActivateDialog } from 'views-components/user-dialog/activate-dialog'; +import { SetupDialog } from 'views-components/user-dialog/setup-dialog'; import { GroupsPanel } from 'views/groups-panel/groups-panel'; -import { CreateGroupDialog } from 'views-components/dialog-forms/create-group-dialog'; import { RemoveGroupDialog } from 'views-components/groups-dialog/remove-dialog'; import { GroupAttributesDialog } from 'views-components/groups-dialog/attributes-dialog'; 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 { AddGroupMembersDialog } from 'views-components/dialog-forms/add-group-member-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'; @@ -101,6 +104,8 @@ import { RestoreCollectionVersionDialog } from 'views-components/collections-dia 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'; @@ -114,7 +119,11 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, splitter: { '& > .layout-splitter': { - width: '2px' + width: '2px', + }, + '& > .layout-splitter-disabled': { + pointerEvents: 'none', + cursor: 'pointer' } }, asidePanel: { @@ -129,6 +138,9 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ minWidth: 0, paddingLeft: theme.spacing.unit * 3, paddingRight: theme.spacing.unit * 3, + // Reserve vertical space for app bar + MainContentBar + minHeight: `calc(100vh - ${theme.spacing.unit * 16}px)`, + display: 'flex', } }); @@ -136,6 +148,7 @@ interface WorkbenchDataProps { isUserActive: boolean; isNotLinking: boolean; sessionIdleTimeout: number; + sidePanelIsCollapsed: boolean; } type WorkbenchPanelProps = WithStyles & WorkbenchDataProps; @@ -156,9 +169,9 @@ let routes = <> - + @@ -170,7 +183,8 @@ let routes = <> - + + @@ -184,9 +198,26 @@ const reduceRoutesFn: (a: React.ReactElement[], 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) => - + 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 {props.sessionIdleTimeout > 0 && } - @@ -223,7 +253,6 @@ export const WorkbenchPanel = - @@ -239,11 +268,13 @@ export const WorkbenchPanel = - - - + + + + + + - @@ -254,11 +285,12 @@ export const WorkbenchPanel = + + - @@ -266,10 +298,14 @@ export const WorkbenchPanel = - + + + + {React.createElement(React.Fragment, null, pluginConfig.dialogs)} + } );