X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/89fc1810ba39a7a0aebccba690c7bc663bca8c0b..4e508e00be54a40845147e17b2410d27a8516dc1:/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 19408d5db9..c77858cd0c 100644
--- a/services/workbench2/src/views/project-panel/project-panel.tsx
+++ b/services/workbench2/src/views/project-panel/project-panel.tsx
@@ -7,36 +7,8 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import { DispatchProp, connect } from 'react-redux';
 import { RouteComponentProps } from 'react-router';
 import { StyleRulesCallback, WithStyles } from '@material-ui/core';
-
-import { DataExplorer } from 'views-components/data-explorer/data-explorer';
-import { DataColumns } from 'components/data-table/data-table';
 import { RootState } from 'store/store';
-import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
-import { ContainerRequestState } from 'models/container-request';
-import { SortDirection } from 'components/data-table/data-column';
-import { ResourceKind, Resource } from 'models/resource';
-import {
-    ResourceName,
-    ProcessStatus as ResourceStatus,
-    ResourceType,
-    ResourceOwnerWithName,
-    ResourcePortableDataHash,
-    ResourceFileSize,
-    ResourceFileCount,
-    ResourceUUID,
-    ResourceContainerUuid,
-    ContainerRunTime,
-    ResourceOutputUuid,
-    ResourceLogUuid,
-    ResourceParentProcess,
-    ResourceModifiedByUserUuid,
-    ResourceVersion,
-    ResourceCreatedAtDate,
-    ResourceLastModifiedDate,
-    ResourceTrashDate,
-    ResourceDeleteDate,
-} from 'views-components/data-explorer/renderers';
-import { ProjectIcon } from 'components/icon/icon';
+import { Resource } from 'models/resource';
 import { ResourcesState, getResource } from 'store/resources/resources';
 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
@@ -44,17 +16,16 @@ import { navigateTo } from 'store/navigation/navigation-action';
 import { getProperty } from 'store/properties/properties';
 import { PROJECT_PANEL_CURRENT_UUID } from 'store/project-panel/project-panel-action';
 import { ArvadosTheme } from 'common/custom-theme';
-import { createTree } from 'models/tree';
-import { getInitialResourceTypeFilters, getInitialProcessStatusFilters } from 'store/resource-type-filters/resource-type-filters';
 import { GroupContentsResource } from 'services/groups-service/groups-service';
 import { GroupClass, GroupResource } from 'models/group';
 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 { DetailsCardRoot } from 'views-components/details-card/details-card-root';
+import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
+import { ProjectPanelData } from './project-panel-data';
 
-type CssRules = 'root' | 'button' ;
+type CssRules = 'root' | 'button' | 'mpvRoot' | 'dataExplorer';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -65,179 +36,17 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     button: {
         marginLeft: theme.spacing.unit,
     },
-});
-
-export enum ProjectPanelColumnNames {
-    NAME = 'Name',
-    STATUS = 'Status',
-    TYPE = 'Type',
-    OWNER = 'Owner',
-    PORTABLE_DATA_HASH = 'Portable Data Hash',
-    FILE_SIZE = 'File Size',
-    FILE_COUNT = 'File Count',
-    UUID = 'UUID',
-    CONTAINER_UUID = 'Container UUID',
-    RUNTIME = 'Runtime',
-    OUTPUT_UUID = 'Output UUID',
-    LOG_UUID = 'Log UUID',
-    PARENT_PROCESS = 'Parent Process UUID',
-    MODIFIED_BY_USER_UUID = 'Modified by User UUID',
-    VERSION = 'Version',
-    CREATED_AT = 'Date Created',
-    LAST_MODIFIED = 'Last Modified',
-    TRASH_AT = 'Trash at',
-    DELETE_AT = 'Delete at',
-}
-
-export interface ProjectPanelFilter extends DataTableFilterItem {
-    type: ResourceKind | ContainerRequestState;
-}
-
-export const projectPanelColumns: DataColumns<string, ProjectResource> = [
-    {
-        name: ProjectPanelColumnNames.NAME,
-        selected: true,
-        configurable: true,
-        sort: { direction: SortDirection.NONE, field: 'name' },
-        filters: createTree(),
-        render: (uuid) => <ResourceName uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.STATUS,
-        selected: true,
-        configurable: true,
-        mutuallyExclusiveFilters: true,
-        filters: getInitialProcessStatusFilters(),
-        render: (uuid) => <ResourceStatus uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.TYPE,
-        selected: true,
-        configurable: true,
-        filters: getInitialResourceTypeFilters(),
-        render: (uuid) => <ResourceType uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.OWNER,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceOwnerWithName uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.PORTABLE_DATA_HASH,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourcePortableDataHash uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.FILE_SIZE,
-        selected: true,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceFileSize uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.FILE_COUNT,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceFileCount uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.UUID,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceUUID uuid={uuid} />,
+    mpvRoot: {
+        flexGrow: 1,
     },
-    {
-        name: ProjectPanelColumnNames.CONTAINER_UUID,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceContainerUuid uuid={uuid} />,
+    dataExplorer: {
+        height: "100%",
     },
-    {
-        name: ProjectPanelColumnNames.RUNTIME,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ContainerRunTime uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.OUTPUT_UUID,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceOutputUuid uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.LOG_UUID,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceLogUuid uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.PARENT_PROCESS,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceParentProcess uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.MODIFIED_BY_USER_UUID,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceModifiedByUserUuid uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.VERSION,
-        selected: false,
-        configurable: true,
-        filters: createTree(),
-        render: (uuid) => <ResourceVersion uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.CREATED_AT,
-        selected: false,
-        configurable: true,
-        sort: { direction: SortDirection.NONE, field: 'createdAt' },
-        filters: createTree(),
-        render: (uuid) => <ResourceCreatedAtDate uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.LAST_MODIFIED,
-        selected: true,
-        configurable: true,
-        sort: { direction: SortDirection.DESC, field: 'modifiedAt' },
-        filters: createTree(),
-        render: (uuid) => <ResourceLastModifiedDate uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.TRASH_AT,
-        selected: false,
-        configurable: true,
-        sort: { direction: SortDirection.NONE, field: 'trashAt' },
-        filters: createTree(),
-        render: (uuid) => <ResourceTrashDate uuid={uuid} />,
-    },
-    {
-        name: ProjectPanelColumnNames.DELETE_AT,
-        selected: false,
-        configurable: true,
-        sort: { direction: SortDirection.NONE, field: 'deleteAt' },
-        filters: createTree(),
-        render: (uuid) => <ResourceDeleteDate uuid={uuid} />,
-    },
-];
-
-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: "Data", visible: true },
+];
 
 interface ProjectPanelDataProps {
     currentItemId: string;
@@ -270,15 +79,22 @@ export const ProjectPanel = withStyles(styles)(
                 const { classes } = this.props;
                 return <div data-cy='project-panel' className={classes.root}>
                     <DetailsCardRoot />
-                    <DataExplorer
-                        id={PROJECT_PANEL_ID}
-                        onRowClick={this.handleRowClick}
-                        onRowDoubleClick={this.handleRowDoubleClick}
-                        onContextMenu={this.handleContextMenu}
-                        contextMenuColumn={true}
-                        defaultViewIcon={ProjectIcon}
-                        defaultViewMessages={DEFAULT_VIEW_MESSAGES}
-                    />
+                    <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}>
+                            <ProjectPanelData />
+                        </MPVPanelContent>
+                    </MPVContainer>
                 </div>
             }
 
