services/workbench2/src/views/trash-panel/trash-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { IconButton, WithStyles, withStyles, Tooltip } from '@material-ui/core';
   8 import { DataExplorer } from "views-components/data-explorer/data-explorer";
   9 import { connect, DispatchProp } from 'react-redux';
  10 import { DataColumns } from 'components/data-table/data-table';
  11 import { RootState } from 'store/store';
  12 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
  13 import { SortDirection } from 'components/data-table/data-column';
  14 import { ResourceKind, TrashableResource } from 'models/resource';
  15 import { ArvadosTheme } from 'common/custom-theme';
  16 import { RestoreFromTrashIcon, TrashIcon } from 'components/icon/icon';
  17 import { TRASH_PANEL_ID } from "store/trash-panel/trash-panel-action";
  18 import { getProperty } from "store/properties/properties";
  19 import { PROJECT_PANEL_CURRENT_UUID } from "store/project-panel/project-panel-action";
  20 import { openContextMenu } from "store/context-menu/context-menu-actions";
  21 import { getResource, ResourcesState } from "store/resources/resources";
  22 import {
  23     ResourceDeleteDate,
  24     ResourceFileSize,
  25     ResourceName,
  26     ResourceTrashDate,
  27     ResourceType
  28 } from "views-components/data-explorer/renderers";
  29 import { navigateTo } from "store/navigation/navigation-action";
  30 import { loadDetailsPanel } from "store/details-panel/details-panel-action";
  31 import { toggleTrashed } from "store/trash/trash-actions";
  32 import { ContextMenuKind } from 'views-components/context-menu/menu-item-sort';
  33 import { Dispatch } from "redux";
  34 import { createTree } from 'models/tree';
  35 import {
  36     getTrashPanelTypeFilters
  37 } from 'store/resource-type-filters/resource-type-filters';
  38 import { CollectionResource } from 'models/collection';
  39 import { toggleOne, deselectAllOthers } from 'store/multiselect/multiselect-actions';
  40
  41 type CssRules = "toolbar" | "button" | "root";
  42
  43 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  44     toolbar: {
  45         paddingBottom: theme.spacing(3),
  46         textAlign: "right"
  47     },
  48     button: {
  49         marginLeft: theme.spacing(1)
  50     },
  51     root: {
  52         width: '100%',
  53     },
  54 });
  55
  56 export enum TrashPanelColumnNames {
  57     NAME = "Name",
  58     TYPE = "Type",
  59     FILE_SIZE = "File size",
  60     TRASHED_DATE = "Trashed date",
  61     TO_BE_DELETED = "To be deleted"
  62 }
  63
  64 export interface TrashPanelFilter extends DataTableFilterItem {
  65     type: ResourceKind;
  66 }
  67
  68 export const ResourceRestore =
  69     connect((state: RootState, props: { uuid: string, dispatch?: Dispatch<any> }) => {
  70         const resource = getResource<TrashableResource>(props.uuid)(state.resources);
  71         return { resource, dispatch: props.dispatch };
  72     })((props: { resource?: TrashableResource, dispatch?: Dispatch<any> }) =>
  73         <Tooltip title="Restore">
  74             <IconButton style={{ padding: '0' }} onClick={() => {
  75                 if (props.resource && props.dispatch) {
  76                     props.dispatch(toggleTrashed(
  77                         props.resource.kind,
  78                         props.resource.uuid,
  79                         props.resource.ownerUuid,
  80                         props.resource.isTrashed
  81                     ));
  82                 }}}
  83             >
  84                 <RestoreFromTrashIcon />
  85             </IconButton>
  86         </Tooltip>
  87     );
  88
  89 export const trashPanelColumns: DataColumns<string, CollectionResource> = [
  90     {
  91         name: TrashPanelColumnNames.NAME,
  92         selected: true,
  93         configurable: true,
  94         sort: {direction: SortDirection.NONE, field: "name"},
  95         filters: createTree(),
  96         render: uuid => <ResourceName uuid={uuid} />
  97     },
  98     {
  99         name: TrashPanelColumnNames.TYPE,
 100         selected: true,
 101         configurable: true,
 102         filters: getTrashPanelTypeFilters(),
 103         render: uuid => <ResourceType uuid={uuid} />,
 104     },
 105     {
 106         name: TrashPanelColumnNames.FILE_SIZE,
 107         selected: true,
 108         configurable: true,
 109         sort: {direction: SortDirection.NONE, field: "fileSizeTotal"},
 110         filters: createTree(),
 111         render: uuid => <ResourceFileSize uuid={uuid} />
 112     },
 113     {
 114         name: TrashPanelColumnNames.TRASHED_DATE,
 115         selected: true,
 116         configurable: true,
 117         sort: {direction: SortDirection.DESC, field: "trashAt"},
 118         filters: createTree(),
 119         render: uuid => <ResourceTrashDate uuid={uuid} />
 120     },
 121     {
 122         name: TrashPanelColumnNames.TO_BE_DELETED,
 123         selected: true,
 124         configurable: true,
 125         sort: {direction: SortDirection.NONE, field: "deleteAt"},
 126         filters: createTree(),
 127         render: uuid => <ResourceDeleteDate uuid={uuid} />
 128     },
 129     {
 130         name: '',
 131         selected: true,
 132         configurable: false,
 133         filters: createTree(),
 134         render: uuid => <ResourceRestore uuid={uuid} />
 135     }
 136 ];
 137
 138 interface TrashPanelDataProps {
 139     currentItemId: string;
 140     resources: ResourcesState;
 141 }
 142
 143 type TrashPanelProps = TrashPanelDataProps & DispatchProp & WithStyles<CssRules>;
 144
 145 export const TrashPanel = withStyles(styles)(
 146     connect((state: RootState) => ({
 147         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 148         resources: state.resources
 149     }))(
 150         class extends React.Component<TrashPanelProps> {
 151             render() {
 152                 return <div className={this.props.classes.root}><DataExplorer
 153                     id={TRASH_PANEL_ID}
 154                     onRowClick={this.handleRowClick}
 155                     onRowDoubleClick={this.handleRowDoubleClick}
 156                     onContextMenu={this.handleContextMenu}
 157                     contextMenuColumn={false}
 158                     defaultViewIcon={TrashIcon}
 159                     defaultViewMessages={['Your trash list is empty.']} />
 160                 </div>;
 161             }
 162
 163             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 164                 const resource = getResource<TrashableResource>(resourceUuid)(this.props.resources);
 165                 if (resource) {
 166                     this.props.dispatch<any>(openContextMenu(event, {
 167                         name: '',
 168                         uuid: resource.uuid,
 169                         ownerUuid: resource.ownerUuid,
 170                         isTrashed: resource.isTrashed,
 171                         kind: resource.kind,
 172                         menuKind: ContextMenuKind.TRASH
 173                     }));
 174                 }
 175                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 176             }
 177
 178             handleRowDoubleClick = (uuid: string) => {
 179                 this.props.dispatch<any>(navigateTo(uuid));
 180             }
 181
 182             handleRowClick = (uuid: string) => {
 183                 this.props.dispatch<any>(toggleOne(uuid))
 184                 this.props.dispatch<any>(deselectAllOthers(uuid))
 185                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 186             }
 187         }
 188     )
 189 );