13493: Merge branch 'master' into 13494-collection-version-browser

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

diff --combined src/views-components/details-panel/collection-details.tsx
index f2b7c131e9ac5c823625c92a158fc1d42478d915,625d8405f0d2f34748b8cd6ffcc4e681fb25c23b..d2457559e4d8207189df0c0818a9b698e60643c1
--- 1/src/views-components/details-panel/collection-details.tsx
--- 2/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@@ -14,26 -14,7 +14,26 @@@ export class CollectionDetails extends 
          return <CollectionIcon className={className} />;
      }
  
 -    getDetails() {
 -        return <CollectionDetailsAttributes item={this.item} twoCol={false} />;
 +    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} />;
++        return <CollectionDetailsAttributes twoCol={false} item={this.item} />;
 +    }
 +
 +    private getVersionBrowser() {
 +        return <div />;
      }
  }

diff --combined src/views/collection-panel/collection-panel.tsx
index d3566f36ff45f515344874a6f5d14b28b58c7e31,4cdd8c55f0d231ed5925a147ff94ba6482b94145..feade60c1d500c86b9655f84beff95793dd434bd
--- 1/src/views/collection-panel/collection-panel.tsx
--- 2/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@@ -14,7 -14,7 +14,7 @@@ import { ArvadosTheme } from '~/common/
  import { RootState } from '~/store/store';
  import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon, CollectionOldVersionIcon } from '~/components/icon/icon';
  import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
- import { CollectionResource } from '~/models/collection';
+ import { CollectionResource, getCollectionUrl } from '~/models/collection';
  import { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
  import { CollectionTagForm } from './collection-tag-form';
  import { deleteCollectionTag, navigateToProcess, collectionPanelActions } from '~/store/collection-panel/collection-panel-action';
@@@ -31,6 -31,7 +31,7 @@@ import { UserResource } from '~/models/
  import { getUserUuid } from '~/common/getuser';
  import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
  import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
+ import { Link } from 'react-router-dom';
  
  type CssRules = 'root'
      | 'filesCard'
@@@ -113,7 -114,7 +114,7 @@@ export const CollectionPanel = withStyl
              if (item.ownerUuid === currentUserUUID) {
                  isWritable = true;
              } else {
-                 const itemOwner = getResource<GroupResource|UserResource>(item.ownerUuid)(state.resources);
+                 const itemOwner = getResource<GroupResource | UserResource>(item.ownerUuid)(state.resources);
                  if (itemOwner) {
                      isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
                  }
@@@ -134,21 -135,21 +135,21 @@@
                                  <Grid container justify="space-between">
                                      <Grid item xs={11}><span>
                                          <IconButton onClick={this.openCollectionDetails}>
-                                             { isOldVersion
-                                             ? <CollectionOldVersionIcon className={classes.iconHeader} />
-                                             : <CollectionIcon className={classes.iconHeader} /> }
+                                             {isOldVersion
+                                                 ? <CollectionOldVersionIcon className={classes.iconHeader} />
+                                                 : <CollectionIcon className={classes.iconHeader} />}
                                          </IconButton>
-                                         <IllegalNamingWarning name={item.name}/>
+                                         <IllegalNamingWarning name={item.name} />
                                          <span>
                                              {item.name}
                                              {isWritable ||
-                                             <Tooltip title="Read-only">
-                                                 <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
-                                             </Tooltip>
+                                                 <Tooltip title="Read-only">
+                                                     <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
+                                                 </Tooltip>
                                              }
                                          </span>
                                      </span></Grid>
-                                     <Grid item xs={1} style={{textAlign: "right"}}>
+                                     <Grid item xs={1} style={{ textAlign: "right" }}>
                                          <Tooltip title="Actions" disableFocusListener>
                                              <IconButton
                                                  data-cy='collection-panel-options-btn'
@@@ -166,16 -167,16 +167,16 @@@
                                          <Typography variant="caption">
                                              {item.description}
                                          </Typography>
-                                         <CollectionDetailsAttributes item={item} classes={classes} />
+                                         <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} />
                                          {(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' />
                                              </span>
                                          }
                                          {isOldVersion &&
-                                         <Typography className={classes.warningLabel} variant="caption">
-                                             This is an old version. Copy it as a new one if you need to make changes. Go to the current version if you need to share it.
-                                         </Typography>
+                                             <Typography className={classes.warningLabel} variant="caption">
+                                                 This is an old version. Make a copy to make changes. Go to the <Link to={getCollectionUrl(item.currentVersionUuid)}>head version</Link> for sharing options.
+                                           </Typography>
                                          }
                                      </Grid>
                                  </Grid>
@@@ -192,25 -193,25 +193,25 @@@
                                          <CollectionTagForm />
                                      </Grid>}
                                      <Grid item xs={12}>
-                                     { Object.keys(item.properties).length > 0
-                                         ? Object.keys(item.properties).map(k =>
-                                             Array.isArray(item.properties[k])
-                                             ? item.properties[k].map((v: string) =>
-                                                 getPropertyChip(
-                                                     k, v,
-                                                     isWritable
-                                                         ? this.handleDelete(k, item.properties[k])
-                                                         : undefined,
-                                                     classes.tag))
-                                             : getPropertyChip(
-                                                 k, item.properties[k],
-                                                 isWritable
-                                                     ? this.handleDelete(k, item.properties[k])
-                                                     : undefined,
-                                                 classes.tag)
-                                         )
-                                         : <div className={classes.centeredLabel}>No properties set on this collection.</div>
-                                     }
+                                         {Object.keys(item.properties).length > 0
+                                             ? Object.keys(item.properties).map(k =>
+                                                 Array.isArray(item.properties[k])
+                                                     ? item.properties[k].map((v: string) =>
+                                                         getPropertyChip(
+                                                             k, v,
+                                                             isWritable
+                                                                 ? this.handleDelete(k, item.properties[k])
+                                                                 : undefined,
+                                                             classes.tag))
+                                                     : getPropertyChip(
+                                                         k, item.properties[k],
+                                                         isWritable
+                                                             ? this.handleDelete(k, item.properties[k])
+                                                             : undefined,
+                                                         classes.tag)
+                                             )
+                                             : <div className={classes.centeredLabel}>No properties set on this collection.</div>
+                                         }
                                      </Grid>
                                  </Grid>
                              </ExpansionPanelDetails>
@@@ -224,7 -225,7 +225,7 @@@
                                      dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
                                      dispatch<any>(loadCollectionFiles(this.props.item.uuid));
                                  }
-                             } />
+                                 } />
                          </div>
                      </div>
                      : null;
@@@ -261,10 -262,9 +262,10 @@@
                  this.props.dispatch<any>(deleteCollectionTag(key, value));
              }
  
 -            openCollectionDetails = () => {
 +            openCollectionDetails = (e: React.MouseEvent<HTMLElement>) => {
                  const { item } = this.props;
                  if (item) {
 +                    e.stopPropagation();
                      this.props.dispatch(openDetailsPanel(item.uuid));
                  }
              }
@@@ -277,31 -277,51 +278,51 @@@
      )
  );
  
- export const CollectionDetailsAttributes = (props: {item: CollectionResource, classes?: Record<CssRules, string>}) => {
+ export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string> }) => {
      const item = props.item;
-     const classes = props.classes || {label: '', value: ''};
+     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} />
+     const mdSize = props.twoCol ? 6 : 12;
+     return <Grid container>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                 label={isOldVersion ? "This version's UUID" : "Collection UUID"}
+                 linkToUuid={item.uuid} />
+         </Grid>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                 label={isOldVersion ? "This version's PDH" : "Portable data hash"}
+                 linkToUuid={item.portableDataHash} />
+         </Grid>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                 label='Owner' linkToUuid={item.ownerUuid} />
+         </Grid>
+ 
          {isOldVersion &&
-         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-             label='Most recent version'
-             linkToUuid={item.currentVersionUuid} />
+             <Grid item xs={12} md={mdSize}>
+                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                     label='Head version'
+                     linkToUuid={item.currentVersionUuid} />
+             </Grid>
          }
-         <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>;
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                 label='Version number' value={item.version} />
+         </Grid>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
+         </Grid>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
+         </Grid>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                 label='Number of files' value={item.fileCount} />
+         </Grid>
+         <Grid item xs={12} md={mdSize}>
+             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+                 label='Content size' value={formatFileSize(item.fileSizeTotal)} />
+         </Grid>
+     </Grid>;
  };