21225: Add mutually exclusive tabs to multi panel view, use for project tabs

[arvados.git] / services / workbench2 / src / views / project-panel / project-panel.tsx

diff --git a/services/workbench2/src/views/project-panel/project-panel.tsx b/services/workbench2/src/views/project-panel/project-panel.tsx
index ef6e7bdf3aee58064d3ae4bb76b6bd5eb0ad2bf4..3d64f6517abdcd2e64faa389e987bab1e193a643 100644 (file)
--- a/services/workbench2/src/views/project-panel/project-panel.tsx
+++ b/services/workbench2/src/views/project-panel/project-panel.tsx
@@ -52,27 +52,26 @@ import { CollectionResource } from 'models/collection';
 import { resourceIsFrozen } from 'common/frozen-resources';
 import { ProjectResource } from 'models/project';
 import { deselectAllOthers, toggleOne } from 'store/multiselect/multiselect-actions';
+import { DetailsCardRoot } from 'views-components/details-card/details-card-root';
+import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
+import { PROJECT_PANEL_ID } from 'store/project-panel/project-panel-action-bind';
 
-type CssRules = 'root' | 'button' | 'loader' | 'notFoundView';
+type CssRules = 'root' | 'button' | 'mpvRoot' | 'dataExplorer';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
     },
     button: {
         marginLeft: theme.spacing.unit,
     },
-    loader: {
-        top: "25%",
-        left: "46.5%",
-        marginLeft: "-84px",
-        position: "absolute",
+    mpvRoot: {
+        flexGrow: 1,
     },
-    notFoundView: {
-        top: "30%",
-        left: "50%",
-        marginLeft: "-84px",
-        position: "absolute",
+    dataExplorer: {
+        height: "100%",
     },
 });
 
@@ -244,10 +243,12 @@ export const projectPanelColumns: DataColumns<string, ProjectResource> = [
     },
 ];
 
-export const PROJECT_PANEL_ID = 'projectPanel';
-
 const DEFAULT_VIEW_MESSAGES = ['Your project is empty.', 'Please create a project or create a collection and upload a data.'];
 
+const panelsData: MPVPanelState[] = [
+    { name: "Subprojects", visible: true },
+];
+
 interface ProjectPanelDataProps {
     currentItemId: string;
     resources: ResourcesState;
@@ -256,7 +257,6 @@ interface ProjectPanelDataProps {
     userUuid: string;
     dataExplorerItems: any;
     working: boolean;
-    isNotFound: boolean;
 }
 
 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
@@ -264,11 +264,9 @@ type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles<CssRu
 const mapStateToProps = (state: RootState) => {
     const currentItemId = getProperty<string>(PROJECT_PANEL_CURRENT_UUID)(state.properties);
     const project = getResource<GroupResource>(currentItemId || "")(state.resources);
-    const isNotFound = state.dataExplorer[PROJECT_PANEL_ID].isNotFound;
     return {
         currentItemId,
         project,
-        isNotFound,
         resources: state.resources,
         userUuid: state.auth.user!.uuid,
     };
@@ -281,16 +279,31 @@ export const ProjectPanel = withStyles(styles)(
             render() {
                 const { classes } = this.props;
                 return <div data-cy='project-panel' className={classes.root}>
-                    <DataExplorer
-                        id={PROJECT_PANEL_ID}
-                        onRowClick={this.handleRowClick}
-                        onRowDoubleClick={this.handleRowDoubleClick}
-                        onContextMenu={this.handleContextMenu}
-                        contextMenuColumn={true}
-                        defaultViewIcon={ProjectIcon}
-                        defaultViewMessages={DEFAULT_VIEW_MESSAGES}
-                        isNotFound={this.props.isNotFound}
-                    />
+                    <DetailsCardRoot />
+                    <MPVContainer
+                        className={classes.mpvRoot}
+                        spacing={8}
+                        panelStates={panelsData}
+                        mutuallyExclusive
+                        justify-content="flex-start"
+                        direction="column"
+                        wrap="nowrap">
+                        <MPVPanelContent
+                            forwardProps
+                            xs="auto"
+                            data-cy="process-details"
+                            className={classes.dataExplorer}>
+                            <DataExplorer
+                                id={PROJECT_PANEL_ID}
+                                onRowClick={this.handleRowClick}
+                                onRowDoubleClick={this.handleRowDoubleClick}
+                                onContextMenu={this.handleContextMenu}
+                                contextMenuColumn={true}
+                                defaultViewIcon={ProjectIcon}
+                                defaultViewMessages={DEFAULT_VIEW_MESSAGES}
+                            />
+                        </MPVPanelContent>
+                    </MPVContainer>
                 </div>
             }