X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/a080578919155fc6f6d1be2f966951b629ae5b45..72ed766fa1a94853a1c57d0f43390a81e3d92c90:/src/views/favorite-panel/favorite-panel.tsx diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx index 36a34107..9c906eef 100644 --- a/src/views/favorite-panel/favorite-panel.tsx +++ b/src/views/favorite-panel/favorite-panel.tsx @@ -3,22 +3,36 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { FavoritePanelItem } from './favorite-panel-item'; -import { Grid, Typography, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core'; -import { formatDate, formatFileSize } from '../../common/formatters'; -import { DataExplorer } from "../../views-components/data-explorer/data-explorer"; -import { DispatchProp, connect } from 'react-redux'; -import { DataColumns } from '../../components/data-table/data-table'; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core'; +import { DataExplorer } from "~/views-components/data-explorer/data-explorer"; +import { connect, DispatchProp } from 'react-redux'; +import { DataColumns } from '~/components/data-table/data-table'; import { RouteComponentProps } from 'react-router'; -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 } from '../../models/resource'; -import { resourceLabel } from '../../common/labels'; -import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon } from '../../components/icon/icon'; -import { ArvadosTheme } from '../../common/custom-theme'; -import { FavoriteStar } from "../../views-components/favorite-star/favorite-star"; +import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters'; +import { SortDirection } from '~/components/data-table/data-column'; +import { ResourceKind, EditableResource } from '~/models/resource'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { FAVORITE_PANEL_ID } from "~/store/favorite-panel/favorite-panel-action"; +import { + ProcessStatus, + ResourceFileSize, + ResourceLastModifiedDate, + ResourceName, + ResourceOwner, + ResourceType +} from '~/views-components/data-explorer/renderers'; +import { FavoriteIcon } from '~/components/icon/icon'; +import { openContextMenu, resourceKindToContextMenuKind } from '~/store/context-menu/context-menu-actions'; +import { loadDetailsPanel } from '~/store/details-panel/details-panel-action'; +import { navigateTo } from '~/store/navigation/navigation-action'; +import { ContainerRequestState } from "~/models/container-request"; +import { FavoritesState } from '~/store/favorites/favorites-reducer'; +import { RootState } from '~/store/store'; +import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view'; +import { createTree } from '~/models/tree'; +import { getSimpleObjectTypeFilters } from '~/store/resource-type-filters/resource-type-filters'; +import { getResourceWithEditableStatus, ResourcesState } from '~/store/resources/resources'; +import { ProjectResource } from '~/models/project'; type CssRules = "toolbar" | "button"; @@ -32,61 +46,6 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, }); -const renderName = (item: FavoritePanelItem) => - - - {renderIcon(item)} - - - - {item.name} - - - - - - - - ; - - -const renderIcon = (item: FavoritePanelItem) => { - switch (item.kind) { - case ResourceKind.PROJECT: - return ; - case ResourceKind.COLLECTION: - return ; - case ResourceKind.PROCESS: - return ; - default: - return ; - } -}; - -const renderDate = (date: string) => { - return {formatDate(date)}; -}; - -const renderFileSize = (fileSize?: number) => - - {formatFileSize(fileSize)} - ; - -const renderOwner = (owner: string) => - - {owner} - ; - -const renderType = (type: string) => - - {resourceLabel(type)} - ; - -const renderStatus = (item: FavoritePanelItem) => - - {item.status || "-"} - ; - export enum FavoritePanelColumnNames { NAME = "Name", STATUS = "Status", @@ -100,115 +59,116 @@ export interface FavoritePanelFilter extends DataTableFilterItem { type: ResourceKind | ContainerRequestState; } -export const columns: DataColumns = [ +export const favoritePanelColumns: DataColumns = [ { name: FavoritePanelColumnNames.NAME, selected: true, - sortDirection: SortDirection.ASC, - render: renderName, - width: "450px" + configurable: true, + sortDirection: SortDirection.NONE, + filters: createTree(), + render: uuid => }, { name: "Status", selected: true, - 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" + configurable: true, + filters: createTree(), + render: uuid => }, { name: FavoritePanelColumnNames.TYPE, selected: true, - 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" + configurable: true, + filters: getSimpleObjectTypeFilters(), + render: uuid => }, { name: FavoritePanelColumnNames.OWNER, selected: true, - render: item => renderOwner(item.owner), - width: "200px" + configurable: true, + filters: createTree(), + render: uuid => }, { name: FavoritePanelColumnNames.FILE_SIZE, selected: true, - render: item => renderFileSize(item.fileSize), - width: "50px" + configurable: true, + filters: createTree(), + render: uuid => }, { name: FavoritePanelColumnNames.LAST_MODIFIED, selected: true, - sortDirection: SortDirection.NONE, - render: item => renderDate(item.lastModified), - width: "150px" + configurable: true, + sortDirection: SortDirection.DESC, + filters: createTree(), + render: uuid => } ]; -export const FAVORITE_PANEL_ID = "favoritePanel"; - interface FavoritePanelDataProps { - currentItemId: string; + favorites: FavoritesState; + resources: ResourcesState; + isAdmin: boolean; + userUuid: string; } interface FavoritePanelActionProps { - onItemClick: (item: FavoritePanelItem) => void; - onContextMenu: (event: React.MouseEvent, item: FavoritePanelItem) => void; + onItemClick: (item: string) => void; onDialogOpen: (ownerUuid: string) => void; - onItemDoubleClick: (item: FavoritePanelItem) => void; - onItemRouteChange: (itemId: string) => void; + onItemDoubleClick: (item: string) => void; } +const mapStateToProps = (state : RootState): FavoritePanelDataProps => ({ + favorites: state.favorites, + resources: state.resources, + isAdmin: state.auth.user!.isAdmin, + userUuid: state.auth.user!.uuid, +}); type FavoritePanelProps = FavoritePanelDataProps & FavoritePanelActionProps & DispatchProp - & WithStyles & RouteComponentProps<{ id: string }>; + & WithStyles & RouteComponentProps<{ id: string }>; export const FavoritePanel = withStyles(styles)( - connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))( + connect(mapStateToProps)( class extends React.Component { + + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + const { isAdmin, userUuid, resources } = this.props; + const resource = getResourceWithEditableStatus(resourceUuid, userUuid)(resources); + const menuKind = resourceKindToContextMenuKind(resourceUuid, isAdmin, (resource || {} as EditableResource).isEditable); + if (menuKind) { + this.props.dispatch(openContextMenu(event, { + name: '', + uuid: resourceUuid, + ownerUuid: '', + kind: ResourceKind.NONE, + menuKind + })); + } + this.props.dispatch(loadDetailsPanel(resourceUuid)); + } + + handleRowDoubleClick = (uuid: string) => { + this.props.dispatch(navigateTo(uuid)); + } + + handleRowClick = (uuid: string) => { + this.props.dispatch(loadDetailsPanel(uuid)); + } + render() { return item.uuid} /> - ; - } - - componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: FavoritePanelProps) { - if (match.params.id !== currentItemId) { - onItemRouteChange(match.params.id); - } + onRowClick={this.handleRowClick} + onRowDoubleClick={this.handleRowDoubleClick} + onContextMenu={this.handleContextMenu} + contextMenuColumn={true} + dataTableDefaultView={ + + } />; } } )