Merge branch 'master' into 13797-refatoring-part2

refs #13797
2

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --cc src/store/project-panel/project-panel-middleware.ts
Simple merge

diff --cc src/views/project-panel/project-panel.tsx
index 3bc4656df12d041bfcac2e1f12a1597fefb95cb9,312a24858c6adb03ca67b2d839c354e261d1a6e3..daf22b11faca3b02e87441a625cf50f513f84191
--- 1/src/views/project-panel/project-panel.tsx
--- 2/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@@ -16,67 -16,10 +16,12 @@@ import { ContainerRequestState } from '
  import { SortDirection } from '../../components/data-table/data-column';
  import { ResourceKind } from '../../models/resource';
  import { resourceLabel } from '../../common/labels';
 +import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon } from '../../components/icon/icon';
 +import { ArvadosTheme } from '../../common/custom-theme';
  
- export const PROJECT_PANEL_ID = "projectPanel";
- 
- export interface ProjectPanelFilter extends DataTableFilterItem {
-     type: ResourceKind | ContainerRequestState;
- }
- 
- interface ProjectPanelDataProps {
-     currentItemId: string;
- }
- 
- interface ProjectPanelActionProps {
-     onItemClick: (item: ProjectPanelItem) => void;
-     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
-     onDialogOpen: (ownerUuid: string) => void;
-     onItemDoubleClick: (item: ProjectPanelItem) => void;
-     onItemRouteChange: (itemId: string) => void;
- }
- 
- type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp
-                         & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
- 
- class ProjectPanel extends React.Component<ProjectPanelProps> {
-     render() {
-         const { classes } = this.props;
-         return <div>
-             <div className={classes.toolbar}>
-                 <Button color="primary" variant="raised" className={classes.button}>
-                     Create a collection
-                 </Button>
-                 <Button color="primary" variant="raised" className={classes.button}>
-                     Run a process
-                 </Button>
-                 <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
-                     New project
-                 </Button>
-             </div>
-             <DataExplorer
-                 id={PROJECT_PANEL_ID}
-                 onRowClick={this.props.onItemClick}
-                 onRowDoubleClick={this.props.onItemDoubleClick}
-                 onContextMenu={this.props.onContextMenu}
-                 extractKey={(item: ProjectPanelItem) => item.uuid} />
-         </div>;
-     }
-     
-     handleNewProjectClick = () => {
-         this.props.onDialogOpen(this.props.currentItemId);
-     }
-     componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
-         if (match.params.id !== currentItemId) {
-             onItemRouteChange(match.params.id);
-         }
-     }
- }
- 
  type CssRules = "toolbar" | "button";
  
 -const styles: StyleRulesCallback<CssRules> = theme => ({
 +const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
      toolbar: {
          paddingBottom: theme.spacing.unit * 3,
          textAlign: "right"
@@@ -137,89 -86,126 +82,144 @@@ const renderStatus = (item: ProjectPane
      </Typography>;
  
  export enum ProjectPanelColumnNames {
 -    Name = "Name",
 -    Status = "Status",
 -    Type = "Type",
 -    Owner = "Owner",
 -    FileSize = "File size",
 -    LastModified = "Last modified"
 +    NAME = "Name",
 +    STATUS = "Status",
 +    TYPE = "Type",
 +    OWNER = "Owner",
 +    FILE_SIZE = "File size",
 +    LAST_MODIFIED = "Last modified"
+ }
  
+ export interface ProjectPanelFilter extends DataTableFilterItem {
+     type: ResourceKind | ContainerRequestState;
  }
  
 -export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
 -    name: ProjectPanelColumnNames.Name,
 -    selected: true,
 -    sortDirection: SortDirection.Asc,
 -    render: renderName,
 -    width: "450px"
 -}, {
 -    name: "Status",
 -    selected: true,
 -    filters: [{
 -        name: ContainerRequestState.Committed,
 +export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [
 +    {
 +        name: ProjectPanelColumnNames.NAME,
          selected: true,
 -        type: ContainerRequestState.Committed
 -    }, {
 -        name: ContainerRequestState.Final,
 +        sortDirection: SortDirection.Asc,
 +        render: renderName,
 +        width: "450px"
 +    },
 +    {
 +        name: "Status",
          selected: true,
 -        type: ContainerRequestState.Final
 -    }, {
 -        name: ContainerRequestState.Uncommitted,
 +        filters: [
 +            {
 +                name: ContainerRequestState.Committed,
 +                selected: true,
 +                type: ContainerRequestState.Committed
 +            },
 +            {
 +                name: ContainerRequestState.Final,
 +                selected: true,
 +                type: ContainerRequestState.Final
 +            },
 +            {
 +                name: ContainerRequestState.Uncommitted,
 +                selected: true,
 +                type: ContainerRequestState.Uncommitted
 +            }
 +        ],
 +        render: renderStatus,
 +        width: "75px"
 +    },
 +    {
 +        name: ProjectPanelColumnNames.TYPE,
          selected: true,
 -        type: ContainerRequestState.Uncommitted
 -    }],
 -    render: renderStatus,
 -    width: "75px"
 -}, {
 -    name: ProjectPanelColumnNames.Type,
 -    selected: true,
 -    filters: [{
 -        name: resourceLabel(ResourceKind.Collection),
 +        filters: [
 +            {
 +                name: resourceLabel(ResourceKind.Collection),
 +                selected: true,
 +                type: ResourceKind.Collection
 +            },
 +            {
 +                name: resourceLabel(ResourceKind.Process),
 +                selected: true,
 +                type: ResourceKind.Process
 +            },
 +            {
 +                name: resourceLabel(ResourceKind.Project),
 +                selected: true,
 +                type: ResourceKind.Project
 +            }
 +        ],
 +        render: item => renderType(item.kind),
 +        width: "125px"
 +    },
 +    {
 +        name: ProjectPanelColumnNames.OWNER,
          selected: true,
 -        type: ResourceKind.Collection
 -    }, {
 -        name: resourceLabel(ResourceKind.Process),
 +        render: item => renderOwner(item.owner),
 +        width: "200px"
 +    },
 +    {
 +        name: ProjectPanelColumnNames.FILE_SIZE,
          selected: true,
 -        type: ResourceKind.Process
 -    }, {
 -        name: resourceLabel(ResourceKind.Project),
 +        render: item => renderFileSize(item.fileSize),
 +        width: "50px"
 +    },
 +    {
 +        name: ProjectPanelColumnNames.LAST_MODIFIED,
          selected: true,
 -        type: ResourceKind.Project
 -    }],
 -    render: item => renderType(item.kind),
 -    width: "125px"
 -}, {
 -    name: ProjectPanelColumnNames.Owner,
 -    selected: true,
 -    render: item => renderOwner(item.owner),
 -    width: "200px"
 -}, {
 -    name: ProjectPanelColumnNames.FileSize,
 -    selected: true,
 -    render: item => renderFileSize(item.fileSize),
 -    width: "50px"
 -}, {
 -    name: ProjectPanelColumnNames.LastModified,
 -    selected: true,
 -    sortDirection: SortDirection.None,
 -    render: item => renderDate(item.lastModified),
 -    width: "150px"
 -}];
 +        sortDirection: SortDirection.None,
 +        render: item => renderDate(item.lastModified),
 +        width: "150px"
 +    }
 +];
  
- export default withStyles(styles)(
-     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(ProjectPanel));
+ export const PROJECT_PANEL_ID = "projectPanel";
+ 
 -type ProjectPanelProps = {
 -    currentItemId: string,
 -    onItemClick: (item: ProjectPanelItem) => void,
++interface ProjectPanelDataProps {
++    currentItemId: string;
++}
++
++interface ProjectPanelActionProps {
++    onItemClick: (item: ProjectPanelItem) => void;
+     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
+     onDialogOpen: (ownerUuid: string) => void;
 -    onItemDoubleClick: (item: ProjectPanelItem) => void,
 -    onItemRouteChange: (itemId: string) => void
++    onItemDoubleClick: (item: ProjectPanelItem) => void;
++    onItemRouteChange: (itemId: string) => void;
+ }
 -    & DispatchProp
 -    & WithStyles<CssRules>
 -    & RouteComponentProps<{ id: string }>;
++
++type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp
++                        & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
+ 
+ export const ProjectPanel = withStyles(styles)(
+     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
+         class extends React.Component<ProjectPanelProps> {
+             render() {
+                 const { classes } = this.props;
+                 return <div>
+                     <div className={classes.toolbar}>
+                         <Button color="primary" variant="raised" className={classes.button}>
+                             Create a collection
+                         </Button>
+                         <Button color="primary" variant="raised" className={classes.button}>
+                             Run a process
+                         </Button>
+                         <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
+                             New project
+                         </Button>
+                     </div>
+                     <DataExplorer
+                         id={PROJECT_PANEL_ID}
+                         onRowClick={this.props.onItemClick}
+                         onRowDoubleClick={this.props.onItemDoubleClick}
+                         onContextMenu={this.props.onContextMenu}
+                         extractKey={(item: ProjectPanelItem) => item.uuid} />
+                 </div>;
+             }
+ 
+             handleNewProjectClick = () => {
+                 this.props.onDialogOpen(this.props.currentItemId);
+             }
+             componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
+                 if (match.params.id !== currentItemId) {
+                     onItemRouteChange(match.params.id);
+                 }
+             }
+         }
+     )
 -);
++);