13494: Refactors detail panel. Removes unused 'Size' field.

Detail panel now doesn't have a disabled 'Activity' tab that wasn't used
by anything. Instead, it can be customized to have any number of tabs
in addition to the default 'Details' tab.

This lays the ground for the new collection panel's Versions tab.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>

diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index 1089706d5b994c0438d8326b289f84bf8f7245f9..f2b7c131e9ac5c823625c92a158fc1d42478d915 100644 (file)
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -14,7 +14,26 @@ export class CollectionDetails extends DetailsData<CollectionResource> {
         return <CollectionIcon className={className} />;
     }
 
-    getDetails() {
+    getTabLabels() {
+        return ['Details', 'Versions'];
+    }
+
+    getDetails(tabNumber: number) {
+        switch (tabNumber) {
+            case 0:
+                return this.getCollectionInfo();
+            case 1:
+                return this.getVersionBrowser();
+            default:
+                return <div />;
+        }
+    }
+
+    private getCollectionInfo() {
         return <CollectionDetailsAttributes item={this.item} />;
     }
+
+    private getVersionBrowser() {
+        return <div />;
+    }
 }

diff --git a/src/views-components/details-panel/details-data.tsx b/src/views-components/details-panel/details-data.tsx
index ca8e2cd7dd86d661af91500515add9b809dcaf13..68aa5787fa7ac637359467738b06283a8437ad67 100644 (file)
--- a/src/views-components/details-panel/details-data.tsx
+++ b/src/views-components/details-panel/details-data.tsx
@@ -12,10 +12,10 @@ export abstract class DetailsData<T extends DetailsResource = DetailsResource> {
         return this.item.name || 'Projects';
     }
 
-    abstract getIcon(className?: string): React.ReactElement<any>;
-    abstract getDetails(): React.ReactElement<any>;
-
-    getActivity(): React.ReactElement<any> {
-        return <div />;
+    getTabLabels(): string[] {
+        return ['Details'];
     }
+
+    abstract getIcon(className?: string): React.ReactElement<any>;
+    abstract getDetails(tabNr?: number): React.ReactElement<any>;
 }

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index b6b0cdf10b8078c099f981faa2ae2a22ea9bdfec..bf6e9a4eba3bbe0b4ff1ccc991033aa5100c581d 100644 (file)
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -162,14 +162,15 @@ export const DetailsPanel = withStyles(styles)(
                     </Grid>
                     <Grid item>
                         <Tabs value={tabsValue} onChange={this.handleChange}>
-                            <Tab disableRipple label="Details" />
-                            <Tab disableRipple label="Activity" disabled />
+                            { item.getTabLabels().map((tabLabel, idx) =>
+                                <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
+                            }
                         </Tabs>
                     </Grid>
                     <Grid item xs className={this.props.classes.tabContainer} >
-                        {tabsValue === 0
-                            ? item.getDetails()
-                            : null}
+                    {tabsValue !== undefined
+                        ? item.getDetails(tabsValue)
+                        : null}
                     </Grid>
                 </Grid >;
             }

diff --git a/src/views-components/details-panel/process-details.tsx b/src/views-components/details-panel/process-details.tsx
index 2fbdd31363afb88634f594f5fc53c9dd87b90acb..aa1b3a1d73532de76b07398bc177da7f0d57ea1f 100644 (file)
--- a/src/views-components/details-panel/process-details.tsx
+++ b/src/views-components/details-panel/process-details.tsx
@@ -20,14 +20,11 @@ export class ProcessDetails extends DetailsData<ProcessResource> {
     getDetails() {
         return <div>
             <DetailsAttribute label='Type' value={resourceLabel(ResourceKind.PROCESS)} />
-            <DetailsAttribute label='Size' value='---' />
             <DetailsAttribute label='Owner' linkToUuid={this.item.ownerUuid} value={this.item.ownerUuid} />
 
-            {/* Missing attr */}
             <DetailsAttribute label='Status' value={this.item.state} />
             <DetailsAttribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
 
-            {/* Missing attrs */}
             <DetailsAttribute label='Started at' value={formatDate(this.item.createdAt)} />
             <DetailsAttribute label='Finished at' value={formatDate(this.item.expiresAt)} />
 

diff --git a/src/views-components/details-panel/project-details.tsx b/src/views-components/details-panel/project-details.tsx
index 1be04b00ee8d31e31a94530cb12754df2aee2084..b901abce8ba7a9d497ab17873152fae196b4c990 100644 (file)
--- a/src/views-components/details-panel/project-details.tsx
+++ b/src/views-components/details-panel/project-details.tsx
@@ -59,14 +59,10 @@ const ProjectDetailsComponent = connect(null, mapDispatchToProps)(
     withStyles(styles)(
         ({ classes, project, onClick }: ProjectDetailsComponentProps) => <div>
             <DetailsAttribute label='Type' value={resourceLabel(ResourceKind.PROJECT)} />
-            {/* Missing attr */}
-            <DetailsAttribute label='Size' value='---' />
             <DetailsAttribute label='Owner' linkToUuid={project.ownerUuid} lowercaseValue={true} />
             <DetailsAttribute label='Last modified' value={formatDate(project.modifiedAt)} />
             <DetailsAttribute label='Created at' value={formatDate(project.createdAt)} />
             <DetailsAttribute label='Project UUID' linkToUuid={project.uuid} value={project.uuid} />
-            {/* Missing attr */}
-            {/*<DetailsAttribute label='File size' value='1.4 GB' />*/}
             <DetailsAttribute label='Description'>
                 {project.description ?
                     <RichTextEditorLink