21316: Merge commit '1416f698b72de4b09350d9c2fb25c1405c3247bc' into 21316-left-panel...
authorLisa Knox <lisaknox83@gmail.com>
Fri, 5 Jan 2024 18:56:55 +0000 (13:56 -0500)
committerLisa Knox <lisaknox83@gmail.com>
Fri, 5 Jan 2024 18:56:55 +0000 (13:56 -0500)
Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

1  2 
services/workbench2/src/store/details-panel/details-panel-action.ts
services/workbench2/src/store/details-panel/details-panel-reducer.ts
services/workbench2/src/store/side-panel/side-panel-action.ts
services/workbench2/src/store/side-panel/side-panel-reducer.tsx
services/workbench2/src/views-components/side-panel-toggle/side-panel-toggle.tsx
services/workbench2/src/views-components/side-panel-tree/side-panel-tree.tsx
services/workbench2/src/views-components/side-panel/side-panel.tsx
services/workbench2/src/views/main-panel/main-panel-root.tsx
services/workbench2/src/views/main-panel/main-panel.tsx
services/workbench2/src/views/workbench/workbench.tsx

index f8cd9efe46f76f4e5a9eea7c9f85915456512d6e,0000000000000000000000000000000000000000..f338687de9aadec9bb277268262379b785c0a797
mode 100644,000000..100644
--- /dev/null
@@@ -1,92 -1,0 +1,93 @@@
 +// Copyright (C) The Arvados Authors. All rights reserved.
 +//
 +// SPDX-License-Identifier: AGPL-3.0
 +
 +import React from "react";
 +import { Dispatch } from "redux";
 +import { connect } from "react-redux";
 +import { TreePicker, TreePickerProps } from "../tree-picker/tree-picker";
 +import { TreeItem } from "components/tree/tree";
 +import { ProjectResource } from "models/project";
 +import { ListItemTextIcon } from "components/list-item-text-icon/list-item-text-icon";
 +import { ProcessIcon, ProjectIcon, FilterGroupIcon, FavoriteIcon, ProjectsIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon, TerminalIcon, ResourceIcon } from 'components/icon/icon';
 +import { activateSidePanelTreeItem, toggleSidePanelTreeItemCollapse, SIDE_PANEL_TREE, SidePanelTreeCategory } from 'store/side-panel-tree/side-panel-tree-actions';
 +import { openSidePanelContextMenu } from 'store/context-menu/context-menu-actions';
 +import { noop } from 'lodash';
 +import { ResourceKind } from "models/resource";
 +import { IllegalNamingWarning } from "components/warning/warning";
 +import { GroupClass } from "models/group";
 +
 +export interface SidePanelTreeProps {
 +    onItemActivation: (id: string) => void;
 +    sidePanelProgress?: boolean;
 +    isCollapsed?: boolean
++    setCurrentSideWidth: (width: number) => void
 +}
 +
 +type SidePanelTreeActionProps = Pick<TreePickerProps<ProjectResource | string>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
 +
 +const mapDispatchToProps = (dispatch: Dispatch, props: SidePanelTreeProps): SidePanelTreeActionProps => ({
 +    onContextMenu: (event, { id }) => {
 +        dispatch<any>(openSidePanelContextMenu(event, id));
 +    },
 +    toggleItemActive: (_, { id }) => {
 +        dispatch<any>(activateSidePanelTreeItem(id));
 +        props.onItemActivation(id);
 +    },
 +    toggleItemOpen: (_, { id }) => {
 +        dispatch<any>(toggleSidePanelTreeItemCollapse(id));
 +    },
 +    toggleItemSelection: noop,
 +});
 +
 +export const SidePanelTree = connect(undefined, mapDispatchToProps)(
 +    (props: SidePanelTreeActionProps) =>
 +        <div data-cy="side-panel-tree">
 +            <TreePicker {...props} render={renderSidePanelItem} pickerId={SIDE_PANEL_TREE} />
 +        </div>);
 +
 +const renderSidePanelItem = (item: TreeItem<ProjectResource>) => {
 +    const name = typeof item.data === 'string' ? item.data : item.data.name;
 +    const warn = typeof item.data !== 'string' && item.data.kind === ResourceKind.PROJECT
 +        ? <IllegalNamingWarning name={name} />
 +        : undefined;
 +    return <ListItemTextIcon
 +        icon={getProjectPickerIcon(item)}
 +        name={name}
 +        nameDecorator={warn}
 +        isActive={item.active}
 +        hasMargin={true}
 +    />;
 +};
 +
 +const getProjectPickerIcon = (item: TreeItem<ProjectResource | string>) =>
 +    typeof item.data === 'string'
 +        ? getSidePanelIcon(item.data)
 +        : (item.data && item.data.groupClass === GroupClass.FILTER)
 +            ? FilterGroupIcon
 +            : ProjectsIcon;
 +
 +export const getSidePanelIcon = (category: string) => {
 +    switch (category) {
 +        case SidePanelTreeCategory.FAVORITES:
 +            return FavoriteIcon;
 +        case SidePanelTreeCategory.PROJECTS:
 +            return ProjectsIcon;
 +        case SidePanelTreeCategory.SHARED_WITH_ME:
 +            return ShareMeIcon;
 +        case SidePanelTreeCategory.TRASH:
 +            return TrashIcon;
 +        case SidePanelTreeCategory.PUBLIC_FAVORITES:
 +            return PublicFavoriteIcon;
 +        case SidePanelTreeCategory.ALL_PROCESSES:
 +            return ProcessIcon;
 +        case SidePanelTreeCategory.INSTANCE_TYPES:
 +            return ResourceIcon;
 +        case SidePanelTreeCategory.GROUPS:
 +            return GroupsIcon;
 +        case SidePanelTreeCategory.SHELL_ACCESS:
 +            return TerminalIcon
 +        default:
 +            return ProjectIcon;
 +    }
 +};
index b094b769cb0bc93a979b7cf03eee300753f8dcd0,0000000000000000000000000000000000000000..3020e0d2987ccbd6a393a0b87100033ec83a9c01
mode 100644,000000..100644
--- /dev/null
@@@ -1,445 -1,0 +1,464 @@@
- import React from "react";
 +// Copyright (C) The Arvados Authors. All rights reserved.
 +//
 +// SPDX-License-Identifier: AGPL-3.0
 +
- 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 ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`}`);
-     }
-     const splitter = document.getElementsByClassName("layout-splitter")[0];
-     isCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
- };
++import React, { useEffect, useState } 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 { DetailsPanel } from "views-components/details-panel/details-panel";
 +import { ArvadosTheme } from "common/custom-theme";
 +import { ContextMenu } from "views-components/context-menu/context-menu";
 +import { FavoritePanel } from "../favorite-panel/favorite-panel";
 +import { TokenDialog } from "views-components/token-dialog/token-dialog";
 +import { RichTextEditorDialog } from "views-components/rich-text-editor-dialog/rich-text-editor-dialog";
 +import { Snackbar } from "views-components/snackbar/snackbar";
 +import { CollectionPanel } from "../collection-panel/collection-panel";
 +import { RenameFileDialog } from "views-components/rename-file-dialog/rename-file-dialog";
 +import { FileRemoveDialog } from "views-components/file-remove-dialog/file-remove-dialog";
 +import { MultipleFilesRemoveDialog } from "views-components/file-remove-dialog/multiple-files-remove-dialog";
 +import { Routes } from "routes/routes";
 +import { SidePanel } from "views-components/side-panel/side-panel";
 +import { ProcessPanel } from "views/process-panel/process-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";
 +import { CopyCollectionDialog, CopyMultiCollectionDialog } from "views-components/dialog-forms/copy-collection-dialog";
 +import { CopyProcessDialog } from "views-components/dialog-forms/copy-process-dialog";
 +import { UpdateCollectionDialog } from "views-components/dialog-forms/update-collection-dialog";
 +import { UpdateProcessDialog } from "views-components/dialog-forms/update-process-dialog";
 +import { UpdateProjectDialog } from "views-components/dialog-forms/update-project-dialog";
 +import { MoveProcessDialog } from "views-components/dialog-forms/move-process-dialog";
 +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 { 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 { TrashPanel } from "views/trash-panel/trash-panel";
 +import { SharedWithMePanel } from "views/shared-with-me-panel/shared-with-me-panel";
 +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 { 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 { 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";
 +import { LinkPanel } from "views/link-panel/link-panel";
 +import { RepositoriesSampleGitDialog } from "views-components/repositories-sample-git-dialog/repositories-sample-git-dialog";
 +import { RepositoryAttributesDialog } from "views-components/repository-attributes-dialog/repository-attributes-dialog";
 +import { CreateRepositoryDialog } from "views-components/dialog-forms/create-repository-dialog";
 +import { RemoveRepositoryDialog } from "views-components/repository-remove-dialog/repository-remove-dialog";
 +import { CreateSshKeyDialog } from "views-components/dialog-forms/create-ssh-key-dialog";
 +import { PublicKeyDialog } from "views-components/ssh-keys-dialog/public-key-dialog";
 +import { RemoveApiClientAuthorizationDialog } from "views-components/api-client-authorizations-dialog/remove-dialog";
 +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 { 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 { 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 { 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 { 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 { CollectionsContentAddressPanel } from "views/collection-content-address-panel/collection-content-address-panel";
 +import { AllProcessesPanel } from "../all-processes-panel/all-processes-panel";
 +import { NotFoundPanel } from "../not-found-panel/not-found-panel";
 +import { AutoLogout } from "views-components/auto-logout/auto-logout";
 +import { RestoreCollectionVersionDialog } from "views-components/collections-dialog/restore-version-dialog";
 +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";
 +import { InstanceTypesPanel } from "views/instance-types-panel/instance-types-panel";
 +
 +type CssRules = "root" | "container" | "splitter" | "asidePanel" | "contentWrapper" | "content";
 +
 +const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 +    root: {
 +        paddingTop: theme.spacing.unit * 7,
 +        background: theme.palette.background.default,
 +    },
 +    container: {
 +        position: "relative",
 +    },
 +    splitter: {
 +        "& > .layout-splitter": {
 +            width: "3px",
 +        },
 +        "& > .layout-splitter-disabled": {
 +            pointerEvents: "none",
 +            cursor: "pointer",
 +        },
 +    },
 +    asidePanel: {
 +        paddingTop: theme.spacing.unit,
 +        height: "100%",
 +    },
 +    contentWrapper: {
 +        paddingTop: theme.spacing.unit,
 +        minWidth: 0,
 +    },
 +    content: {
 +        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",
 +    },
 +});
 +
 +interface WorkbenchDataProps {
 +    isUserActive: boolean;
 +    isNotLinking: boolean;
 +    sessionIdleTimeout: number;
 +    sidePanelIsCollapsed: boolean;
++    isTransitioning: boolean;
++    currentSideWidth: number;
 +}
 +
 +type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
 +
 +const defaultSplitterSize = 90;
 +
 +const getSplitterInitialSize = () => {
 +    const splitterSize = localStorage.getItem("splitterSize");
 +    return splitterSize ? Number(splitterSize) : defaultSplitterSize;
 +};
 +
 +const saveSplitterSize = (size: number) => localStorage.setItem("splitterSize", size.toString());
 +
 +let routes = (
 +    <>
 +        <Route
 +            path={Routes.PROJECTS}
 +            component={ProjectPanel}
 +        />
 +        <Route
 +            path={Routes.COLLECTIONS}
 +            component={CollectionPanel}
 +        />
 +        <Route
 +            path={Routes.FAVORITES}
 +            component={FavoritePanel}
 +        />
 +        <Route
 +            path={Routes.ALL_PROCESSES}
 +            component={AllProcessesPanel}
 +        />
 +        <Route
 +            path={Routes.PROCESSES}
 +            component={ProcessPanel}
 +        />
 +        <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}
 +        />
 +        <Route
 +            path={Routes.VIRTUAL_MACHINES_ADMIN}
 +            component={VirtualMachineAdminPanel}
 +        />
 +        <Route
 +            path={Routes.REPOSITORIES}
 +            component={RepositoriesPanel}
 +        />
 +        <Route
 +            path={Routes.SSH_KEYS_USER}
 +            component={SshKeyPanel}
 +        />
 +        <Route
 +            path={Routes.SSH_KEYS_ADMIN}
 +            component={SshKeyAdminPanel}
 +        />
 +        <Route
 +            path={Routes.INSTANCE_TYPES}
 +            component={InstanceTypesPanel}
 +        />
 +        <Route
 +            path={Routes.SITE_MANAGER}
 +            component={SiteManagerPanel}
 +        />
 +        <Route
 +            path={Routes.KEEP_SERVICES}
 +            component={KeepServicePanel}
 +        />
 +        <Route
 +            path={Routes.USERS}
 +            component={UserPanel}
 +        />
 +        <Route
 +            path={Routes.API_CLIENT_AUTHORIZATIONS}
 +            component={ApiClientAuthorizationPanel}
 +        />
 +        <Route
 +            path={Routes.MY_ACCOUNT}
 +            component={UserProfilePanel}
 +        />
 +        <Route
 +            path={Routes.USER_PROFILE}
 +            component={UserProfilePanel}
 +        />
 +        <Route
 +            path={Routes.GROUPS}
 +            component={GroupsPanel}
 +        />
 +        <Route
 +            path={Routes.GROUP_DETAILS}
 +            component={GroupDetailsPanel}
 +        />
 +        <Route
 +            path={Routes.LINKS}
 +            component={LinkPanel}
 +        />
 +        <Route
 +            path={Routes.PUBLIC_FAVORITES}
 +            component={PublicFavoritePanel}
 +        />
 +        <Route
 +            path={Routes.LINK_ACCOUNT}
 +            component={LinkAccountPanel}
 +        />
 +        <Route
 +            path={Routes.COLLECTIONS_CONTENT_ADDRESS}
 +            component={CollectionsContentAddressPanel}
 +        />
 +    </>
 +);
 +
 +const reduceRoutesFn: (a: React.ReactElement[], b: ElementListReducer) => React.ReactElement[] = (a, b) => b(a);
 +
 +routes = React.createElement(
 +    React.Fragment,
 +    null,
 +    pluginConfig.centerPanelList.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children))
 +);
 +
-     //panel size will not scale automatically on window resize, so we do it manually
-     if (props && props.sidePanelIsCollapsed) window.addEventListener("resize", () => applyCollapsedState(props.sidePanelIsCollapsed));
-     applyCollapsedState(props.sidePanelIsCollapsed);
 +export const WorkbenchPanel = withStyles(styles)((props: WorkbenchPanelProps) => {
-             className={props.classes.root}
++const { classes, sidePanelIsCollapsed, isNotLinking, isTransitioning, isUserActive, sessionIdleTimeout, currentSideWidth } = props
++
++    const applyCollapsedState = (savedWidthInPx) => {
++        const rightPanel: Element = document.getElementsByClassName("layout-pane")[1];
++        const totalWidth: number = document.getElementsByClassName("splitter-layout")[0]?.clientWidth;
++        const savedWidthInPercent = (savedWidthInPx / totalWidth) * 100
++        const rightPanelExpandedWidth = (totalWidth - COLLAPSE_ICON_SIZE) / (totalWidth / 100);
++
++        if(isTransitioning && !!rightPanel) {
++            rightPanel.setAttribute('style', `width: ${sidePanelIsCollapsed ? `calc(${savedWidthInPercent}% - 1rem)` : `${getSplitterInitialSize()}%`};`)
++        }
++
++        if (rightPanel) {
++            rightPanel.setAttribute("style", `width: ${sidePanelIsCollapsed ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`};`);
++        }
++        const splitter = document.getElementsByClassName("layout-splitter")[0];
++        sidePanelIsCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
++    };
++
++    const [savedWidth, setSavedWidth] = useState<number>(0)
++
++    useEffect(()=>{
++        if (isTransitioning) setSavedWidth(currentSideWidth)
++    }, [isTransitioning, currentSideWidth])
++
++    useEffect(()=>{
++        if (isTransitioning) applyCollapsedState(savedWidth);
++        // eslint-disable-next-line react-hooks/exhaustive-deps
++    }, [isTransitioning, savedWidth])
++
++    applyCollapsedState(savedWidth);
 +
 +    return (
 +        <Grid
 +            container
 +            item
 +            xs
-             {props.sessionIdleTimeout > 0 && <AutoLogout />}
++            className={classes.root}
 +        >
-                 className={props.classes.container}
++            {sessionIdleTimeout > 0 && <AutoLogout />}
 +            <Grid
 +                container
 +                item
 +                xs
-                     customClassName={props.classes.splitter}
++                className={classes.container}
 +            >
 +                <SplitterLayout
-                     {props.isUserActive && props.isNotLinking && (
++                    customClassName={classes.splitter}
 +                    percentage={true}
 +                    primaryIndex={0}
 +                    primaryMinSize={10}
 +                    secondaryInitialSize={getSplitterInitialSize()}
 +                    secondaryMinSize={40}
 +                    onSecondaryPaneSizeChange={saveSplitterSize}
 +                >
-                             className={props.classes.asidePanel}
++                    {isUserActive && isNotLinking && (
 +                        <Grid
 +                            container
 +                            item
 +                            xs
 +                            component="aside"
 +                            direction="column"
-                         className={props.classes.contentWrapper}
++                            className={classes.asidePanel}
 +                        >
 +                            <SidePanel />
 +                        </Grid>
 +                    )}
 +                    <Grid
 +                        container
 +                        item
 +                        xs
 +                        component="main"
 +                        direction="column"
-                             {props.isNotLinking && <MainContentBar />}
++                        className={classes.contentWrapper}
 +                    >
 +                        <Grid
 +                            item
 +                            xs
 +                        >
-                             className={props.classes.content}
++                            {isNotLinking && <MainContentBar />}
 +                        </Grid>
 +                        <Grid
 +                            item
 +                            xs
++                            className={classes.content}
 +                        >
 +                            <Switch>
 +                                {routes.props.children}
 +                                <Route
 +                                    path={Routes.NO_MATCH}
 +                                    component={NotFoundPanel}
 +                                />
 +                            </Switch>
 +                        </Grid>
 +                    </Grid>
 +                </SplitterLayout>
 +            </Grid>
 +            <Grid item>
 +                <DetailsPanel />
 +            </Grid>
 +            <AdvancedTabDialog />
 +            <AttributesApiClientAuthorizationDialog />
 +            <AttributesKeepServiceDialog />
 +            <AttributesLinkDialog />
 +            <AttributesSshKeyDialog />
 +            <ChangeWorkflowDialog />
 +            <ContextMenu />
 +            <CopyCollectionDialog />
 +            <CopyMultiCollectionDialog />
 +            <CopyProcessDialog />
 +            <CreateCollectionDialog />
 +            <CreateProjectDialog />
 +            <CreateRepositoryDialog />
 +            <CreateSshKeyDialog />
 +            <CreateUserDialog />
 +            <TokenDialog />
 +            <FileRemoveDialog />
 +            <FilesUploadCollectionDialog />
 +            <GroupAttributesDialog />
 +            <GroupMemberAttributesDialog />
 +            <HelpApiClientAuthorizationDialog />
 +            <MoveCollectionDialog />
 +            <MoveProcessDialog />
 +            <MoveProjectDialog />
 +            <MultipleFilesRemoveDialog />
 +            <PublicKeyDialog />
 +            <PartialCopyToNewCollectionDialog />
 +            <PartialCopyToExistingCollectionDialog />
 +            <PartialCopyToSeparateCollectionsDialog />
 +            <PartialMoveToNewCollectionDialog />
 +            <PartialMoveToExistingCollectionDialog />
 +            <PartialMoveToSeparateCollectionsDialog />
 +            <ProcessInputDialog />
 +            <RestoreCollectionVersionDialog />
 +            <RemoveApiClientAuthorizationDialog />
 +            <RemoveGroupDialog />
 +            <RemoveGroupMemberDialog />
 +            <RemoveKeepServiceDialog />
 +            <RemoveLinkDialog />
 +            <RemoveProcessDialog />
 +            <RemoveRepositoryDialog />
 +            <RemoveSshKeyDialog />
 +            <RemoveVirtualMachineDialog />
 +            <RemoveVirtualMachineLoginDialog />
 +            <VirtualMachineAddLoginDialog />
 +            <RenameFileDialog />
 +            <RepositoryAttributesDialog />
 +            <RepositoriesSampleGitDialog />
 +            <RichTextEditorDialog />
 +            <SharingDialog />
 +            <NotFoundDialog />
 +            <Snackbar />
 +            <UpdateCollectionDialog />
 +            <UpdateProcessDialog />
 +            <UpdateProjectDialog />
 +            <UserAttributesDialog />
 +            <DeactivateDialog />
 +            <ActivateDialog />
 +            <SetupDialog />
 +            <VirtualMachineAttributesDialog />
 +            <FedLogin />
 +            <WebDavS3InfoDialog />
 +            <Banner />
 +            {React.createElement(React.Fragment, null, pluginConfig.dialogs)}
 +        </Grid>
 +    );
 +});