16719: Deduplicates collection detail component.

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 999d4c79ffe2d5f240ab69af47debe1ff605ec71..1089706d5b994c0438d8326b289f84bf8f7245f9 100644 (file)
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -5,11 +5,8 @@
 import * as React from 'react';
 import { CollectionIcon } from '~/components/icon/icon';
 import { CollectionResource } from '~/models/collection';
-import { formatDate, formatFileSize } from '~/common/formatters';
-import { resourceLabel } from '~/common/labels';
-import { ResourceKind } from '~/models/resource';
 import { DetailsData } from "./details-data";
-import { DetailsAttribute } from "~/components/details-attribute/details-attribute";
+import { CollectionDetailsAttributes } from '~/views/collection-panel/collection-panel';
 
 export class CollectionDetails extends DetailsData<CollectionResource> {
 
@@ -18,17 +15,6 @@ export class CollectionDetails extends DetailsData<CollectionResource> {
     }
 
     getDetails() {
-        return <div>
-            <DetailsAttribute label='Type' value={resourceLabel(ResourceKind.COLLECTION)} />
-            <DetailsAttribute label='Size' value='---' />
-            <DetailsAttribute label='Owner' linkToUuid={this.item.ownerUuid} lowercaseValue={true} />
-            <DetailsAttribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
-            <DetailsAttribute label='Created at' value={formatDate(this.item.createdAt)} />
-            <DetailsAttribute label='Collection UUID' linkToUuid={this.item.uuid} value={this.item.uuid} />
-            <DetailsAttribute label='Content address' linkToUuid={this.item.portableDataHash} value={this.item.portableDataHash} />
-            {/* Missing attrs */}
-            <DetailsAttribute label='Number of files' value={this.item.fileCount} />
-            <DetailsAttribute label='Content size' value={formatFileSize(this.item.fileSizeTotal)} />
-        </div>;
+        return <CollectionDetailsAttributes item={this.item} />;
     }
 }

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 6e0b8609b6a5a9da0155394904326cad8f78dab8..f41e8967625624a0b801bd4e197c1de0a1cfadaf 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -166,27 +166,7 @@ export const CollectionPanel = withStyles(styles)(
                                         <Typography variant="caption">
                                             {item.description}
                                         </Typography>
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label={isOldVersion ? "This version's UUID" : "Collection UUID"}
-                                            linkToUuid={item.uuid} />
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label={isOldVersion ? "This version's PDH" : "Portable data hash"}
-                                            linkToUuid={item.portableDataHash} />
-                                        {isOldVersion &&
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label='Most recent version'
-                                            linkToUuid={item.currentVersionUuid} />
-                                        }
-                                        <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
-                                        <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label='Version number' value={item.version} />
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label='Number of files' value={item.fileCount} />
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label='Content size' value={formatFileSize(item.fileSizeTotal)} />
-                                        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                            label='Owner' linkToUuid={item.ownerUuid} />
+                                        <CollectionDetailsAttributes item={item} classes={classes} />
                                         {(item.properties.container_request || item.properties.containerRequest) &&
                                             <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
                                                 <DetailsAttribute classLabel={classes.link} label='Link to process' />
@@ -295,3 +275,32 @@ export const CollectionPanel = withStyles(styles)(
         }
     )
 );
+
+export const CollectionDetailsAttributes = (props: {item: CollectionResource, classes?: Record<CssRules, string>}) => {
+    const item = props.item;
+    const classes = props.classes || {label: '', value: ''};
+    const isOldVersion = item && item.currentVersionUuid !== item.uuid;
+    return <span>
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label={isOldVersion ? "This version's UUID" : "Collection UUID"}
+            linkToUuid={item.uuid} />
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label={isOldVersion ? "This version's PDH" : "Portable data hash"}
+            linkToUuid={item.portableDataHash} />
+        {isOldVersion &&
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label='Most recent version'
+            linkToUuid={item.currentVersionUuid} />
+        }
+        <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
+        <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label='Version number' value={item.version} />
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label='Number of files' value={item.fileCount} />
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label='Content size' value={formatFileSize(item.fileSizeTotal)} />
+        <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+            label='Owner' linkToUuid={item.ownerUuid} />
+    </span>;
+};