From: Stephen Smith <stephen@curii.com>
Date: Thu, 12 Aug 2021 19:12:24 +0000 (-0400)
Subject: Merge branch '17532-collection-version-history-username' into main. Closes #17532
X-Git-Tag: 2.3.0~6
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/2e83c4e79939937cb88c5fe9c02ce91459fc2655?hp=266f22d37cf94f56f857dbbb3e1e5fd2e9934175

Merge branch '17532-collection-version-history-username' into main. Closes #17532

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
---

diff --git a/cypress/integration/collection.spec.js b/cypress/integration/collection.spec.js
index e45971f4..c169de2f 100644
--- a/cypress/integration/collection.spec.js
+++ b/cypress/integration/collection.spec.js
@@ -534,10 +534,14 @@ describe('Collection panel tests', function () {
                     .within(() => {
                         // Version 1: 6 bytes in size
                         cy.get('[data-cy=collection-version-browser-select-1]')
-                            .should('contain', '1').and('contain', '6 B');
+                            .should('contain', '1')
+                            .and('contain', '6 B')
+                            .and('contain', adminUser.user.uuid);
                         // Version 2: 3 bytes in size (one file removed)
                         cy.get('[data-cy=collection-version-browser-select-2]')
-                            .should('contain', '2').and('contain', '3 B');
+                            .should('contain', '2')
+                            .and('contain', '3 B')
+                            .and('contain', activeUser.user.full_name);
                         cy.get('[data-cy=collection-version-browser-select-3]')
                             .should('not.exist');
                         cy.get('[data-cy=collection-version-browser-select-1]')
diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index 314390e2..3965e69d 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -425,24 +425,27 @@ export const ResourceOwnerName = connect(
         return { owner: ownerName ? ownerName!.name : resource!.ownerUuid };
     })((props: { owner: string }) => renderOwner(props.owner));
 
-export const ResourceOwnerWithName =
-    compose(
-        connect(
-            (state: RootState, props: { uuid: string }) => {
-                let ownerName = '';
-                const resource = getResource<GroupContentsResource & UserResource>(props.uuid)(state.resources);
+const userFromID =
+    connect(
+        (state: RootState, props: { uuid: string }) => {
+            let userFullname = '';
+            const resource = getResource<GroupContentsResource & UserResource>(props.uuid)(state.resources);
+
+            if (resource) {
+                userFullname = getUserFullname(resource as User) || (resource as GroupContentsResource).name;
+            }
 
-                if (resource) {
-                    ownerName = getUserFullname(resource as User) || (resource as GroupContentsResource).name;
-                }
+            return { uuid: props.uuid, userFullname };
+        });
 
-                return { uuid: props.uuid, ownerName };
-            }),
+export const ResourceOwnerWithName =
+    compose(
+        userFromID,
         withStyles({}, { withTheme: true }))
-        ((props: { uuid: string, ownerName: string, dispatch: Dispatch, theme: ArvadosTheme }) => {
-            const { uuid, ownerName, dispatch, theme } = props;
+        ((props: { uuid: string, userFullname: string, dispatch: Dispatch, theme: ArvadosTheme }) => {
+            const { uuid, userFullname, dispatch, theme } = props;
 
-            if (ownerName === '') {
+            if (userFullname === '') {
                 dispatch<any>(loadResource(uuid, false));
                 return <Typography style={{ color: theme.palette.primary.main }} inline noWrap>
                     {uuid}
@@ -450,10 +453,23 @@ export const ResourceOwnerWithName =
             }
 
             return <Typography style={{ color: theme.palette.primary.main }} inline noWrap>
-                {ownerName} ({uuid})
+                {userFullname} ({uuid})
             </Typography>;
         });
 
+export const UserNameFromID =
+    compose(userFromID)(
+        (props: { uuid: string, userFullname: string, dispatch: Dispatch }) => {
+            const { uuid, userFullname, dispatch } = props;
+
+            if (userFullname === '') {
+                dispatch<any>(loadResource(uuid, false));
+            }
+            return <span>
+                {userFullname ? userFullname : uuid}
+            </span>;
+        });
+
 export const ResponsiblePerson =
     compose(
         connect(
diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index c61b3340..3905427b 100644
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -12,11 +12,12 @@ import { filterResources, getResource } from 'store/resources/resources';
 import { connect } from 'react-redux';
 import { Grid, ListItem, StyleRulesCallback, Typography, withStyles, WithStyles } from '@material-ui/core';
 import { formatDate, formatFileSize } from 'common/formatters';
+import { UserNameFromID } from '../data-explorer/renderers';
 import { Dispatch } from 'redux';
 import { navigateTo } from 'store/navigation/navigation-action';
 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
 
-export type CssRules = 'versionBrowserHeader' | 'versionBrowserItem';
+export type CssRules = 'versionBrowserHeader' | 'versionBrowserItem' | 'versionBrowserField';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     versionBrowserHeader: {
@@ -24,6 +25,9 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         fontWeight: 'bold',
     },
     versionBrowserItem: {
+        flexWrap: 'wrap',
+    },
+    versionBrowserField: {
         textAlign: 'center',
     }
 });
@@ -126,25 +130,31 @@ const CollectionVersionBrowser = withStyles(styles)(
                             key={item.version}
                             onClick={e => showVersion(item)}
                             onContextMenu={event => handleContextMenu(event, item)}
-                            selected={isSelectedVersion}>
+                            selected={isSelectedVersion}
+                            className={classes.versionBrowserItem}>
                             <Grid item xs={2}>
-                                <Typography variant="caption" className={classes.versionBrowserItem}>
+                                <Typography variant="caption" className={classes.versionBrowserField}>
                                     {item.version}
                                 </Typography>
                             </Grid>
                             <Grid item xs={4}>
-                                <Typography variant="caption" className={classes.versionBrowserItem}>
+                                <Typography variant="caption" className={classes.versionBrowserField}>
                                     {formatFileSize(item.fileSizeTotal)}
                                 </Typography>
                             </Grid>
                             <Grid item xs={6}>
-                                <Typography variant="caption" className={classes.versionBrowserItem}>
+                                <Typography variant="caption" className={classes.versionBrowserField}>
                                     {formatDate(item.modifiedAt)}
                                 </Typography>
                             </Grid>
+                            <Grid item xs={12}>
+                                <Typography variant="caption" className={classes.versionBrowserField}>
+                                    Modified by: <UserNameFromID uuid={item.modifiedByUserUuid} />
+                                </Typography>
+                            </Grid>
                         </ListItem>
                     );
                 })}
                 </Grid>
             </div>;
-        }));
\ No newline at end of file
+        }));