X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/37a1d67e8325906b9cfbb6bf3df608e72bd33b67..765f6475a53ac7e635b737642ef375459324a117:/src/views/collection-content-address-panel/collection-content-address-panel.tsx

diff --git a/src/views/collection-content-address-panel/collection-content-address-panel.tsx b/src/views/collection-content-address-panel/collection-content-address-panel.tsx
index 425588f1..8e8266cc 100644
--- a/src/views/collection-content-address-panel/collection-content-address-panel.tsx
+++ b/src/views/collection-content-address-panel/collection-content-address-panel.tsx
@@ -2,27 +2,41 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { StyleRulesCallback, WithStyles, withStyles, Grid, Button } from '@material-ui/core';
-import { CollectionIcon } from '~/components/icon/icon';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { BackIcon } from '~/components/icon/icon';
-import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
-import { COLLECTIONS_CONTENT_ADDRESS_PANEL_ID } from '~/store/collections-content-address-panel/collections-content-address-panel-actions';
-import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
+import React from 'react';
+import {
+    StyleRulesCallback,
+    WithStyles,
+    withStyles,
+    Button
+} from '@material-ui/core';
+import { CollectionIcon } from 'components/icon/icon';
+import { ArvadosTheme } from 'common/custom-theme';
+import { BackIcon } from 'components/icon/icon';
+import { COLLECTIONS_CONTENT_ADDRESS_PANEL_ID } from 'store/collections-content-address-panel/collections-content-address-panel-actions';
+import { DataExplorer } from "views-components/data-explorer/data-explorer";
 import { Dispatch } from 'redux';
-import { getIsAdmin } from '~/store/public-favorites/public-favorites-actions';
-import { resourceKindToContextMenuKind, openContextMenu } from '~/store/context-menu/context-menu-actions';
-import { ResourceKind } from '~/models/resource';
-import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
+import {
+    resourceUuidToContextMenuKind,
+    openContextMenu
+} from 'store/context-menu/context-menu-actions';
+import { ResourceKind } from 'models/resource';
+import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
 import { connect } from 'react-redux';
-import { navigateTo } from '~/store/navigation/navigation-action';
-import { DataColumns } from '~/components/data-table/data-table';
-import { SortDirection } from '~/components/data-table/data-column';
-import { createTree } from '~/models/tree';
-import { ResourceName, ResourceOwner, ResourceLastModifiedDate } from '~/views-components/data-explorer/renderers';
+import { navigateTo } from 'store/navigation/navigation-action';
+import { DataColumns } from 'components/data-table/data-table';
+import { SortDirection } from 'components/data-table/data-column';
+import { createTree } from 'models/tree';
+import {
+    ResourceName,
+    ResourceOwnerName,
+    ResourceLastModifiedDate,
+    ResourceStatus
+} from 'views-components/data-explorer/renderers';
+import { getResource, ResourcesState } from 'store/resources/resources';
+import { RootState } from 'store/store';
+import { CollectionResource } from 'models/collection';
 
-type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
+type CssRules = 'backLink' | 'backIcon' | 'root' | 'content';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     backLink: {
@@ -37,28 +51,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     backIcon: {
         marginRight: theme.spacing.unit
     },
-    card: {
-        width: '100%'
+    root: {
+        width: '100%',
     },
-    title: {
-        color: theme.palette.grey["700"]
+    content: {
+        // reserve space for the content address bar
+        height: `calc(100% - ${theme.spacing.unit * 7}px)`,
     },
-    iconHeader: {
-        fontSize: '1.875rem',
-        color: theme.customs.colors.green700
-    },
-    link: {
-        fontSize: '0.875rem',
-        color: theme.palette.primary.main,
-        textAlign: 'right',
-        '&:hover': {
-            cursor: 'pointer'
-        }
-    }
 });
 
 enum CollectionContentAddressPanelColumnNames {
     COLLECTION_WITH_THIS_ADDRESS = "Collection with this address",
+    STATUS = "Status",
     LOCATION = "Location",
     LAST_MODIFIED = "Last modified"
 }
@@ -72,12 +76,19 @@ export const collectionContentAddressPanelColumns: DataColumns<string> = [
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
+    {
+        name: CollectionContentAddressPanelColumnNames.STATUS,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <ResourceStatus uuid={uuid} />
+    },
     {
         name: CollectionContentAddressPanelColumnNames.LOCATION,
         selected: true,
         configurable: true,
         filters: createTree(),
-        render: uuid => <ResourceOwner uuid={uuid} />
+        render: uuid => <ResourceOwnerName uuid={uuid} />
     },
     {
         name: CollectionContentAddressPanelColumnNames.LAST_MODIFIED,
@@ -89,19 +100,29 @@ export const collectionContentAddressPanelColumns: DataColumns<string> = [
     }
 ];
 
-export interface CollectionContentAddressPanelActionProps {
-    onContextMenu: (event: React.MouseEvent<any>, uuid: string) => void;
+interface CollectionContentAddressPanelActionProps {
+    onContextMenu: (resources: ResourcesState) => (event: React.MouseEvent<any>, uuid: string) => void;
     onItemClick: (item: string) => void;
     onItemDoubleClick: (item: string) => void;
 }
 
+interface CollectionContentAddressPanelDataProps {
+    resources: ResourcesState;
+}
+
+const mapStateToProps = ({ resources }: RootState): CollectionContentAddressPanelDataProps => ({
+    resources
+})
+
 const mapDispatchToProps = (dispatch: Dispatch): CollectionContentAddressPanelActionProps => ({
-    onContextMenu: (event, resourceUuid) => {
-        const isAdmin = dispatch<any>(getIsAdmin());
-        const kind = resourceKindToContextMenuKind(resourceUuid, isAdmin);
+    onContextMenu: (resources: ResourcesState) => (event, resourceUuid) => {
+        const resource = getResource<CollectionResource>(resourceUuid)(resources);
+        const kind = dispatch<any>(resourceUuidToContextMenuKind(resourceUuid));
         if (kind) {
             dispatch<any>(openContextMenu(event, {
-                name: '',
+                name: resource ? resource.name : '',
+                description: resource ? resource.description : '',
+                storageClassesDesired: resource ? resource.storageClassesDesired : [],
                 uuid: resourceUuid,
                 ownerUuid: '',
                 kind: ResourceKind.NONE,
@@ -125,30 +146,29 @@ interface CollectionContentAddressDataProps {
 }
 
 export const CollectionsContentAddressPanel = withStyles(styles)(
-    connect(null, mapDispatchToProps)(
-        class extends React.Component<CollectionContentAddressPanelActionProps & CollectionContentAddressDataProps & WithStyles<CssRules>> {
+    connect(mapStateToProps, mapDispatchToProps)(
+        class extends React.Component<CollectionContentAddressPanelActionProps & CollectionContentAddressPanelDataProps & CollectionContentAddressDataProps & WithStyles<CssRules>> {
             render() {
-                return <Grid item xs={12}>
+                return <div className={this.props.classes.root}>
                     <Button
-                        onClick={() => history.back()}
+                        onClick={() => window.history.back()}
                         className={this.props.classes.backLink}>
                         <BackIcon className={this.props.classes.backIcon} />
                         Back
                     </Button>
-                    <DataExplorer
+                    <div className={this.props.classes.content}><DataExplorer
                         id={COLLECTIONS_CONTENT_ADDRESS_PANEL_ID}
+                        hideSearchInput
                         onRowClick={this.props.onItemClick}
                         onRowDoubleClick={this.props.onItemDoubleClick}
-                        onContextMenu={this.props.onContextMenu}
+                        onContextMenu={this.props.onContextMenu(this.props.resources)}
                         contextMenuColumn={true}
-                        title={this.props.match.params.id}
-                        dataTableDefaultView={
-                            <DataTableDefaultView
-                                icon={CollectionIcon}
-                                messages={['Collections with this content address not found.']} />
-                        } />;
-                    </Grid >;
+                        title={`Content address: ${this.props.match.params.id}`}
+                        defaultViewIcon={CollectionIcon}
+                        defaultViewMessages={['Collections with this content address not found.']} />
+                    </div>
+                </div>;
             }
         }
     )
-);
\ No newline at end of file
+);