18123: Add edit permission level dialog for group members and outgoing permissions.
[arvados-workbench2.git] / src / views-components / data-explorer / renderers.tsx
index 71d6f824258aaf8d54e692d8037247db880eb5ea..73ef32b06f8abfa0525f2a823864e2642df7fb1b 100644 (file)
@@ -2,41 +2,46 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@material-ui/core';
 import { FavoriteStar, PublicFavoriteStar } from '../favorite-star/favorite-star';
-import { Resource, ResourceKind, TrashableResource } from '~/models/resource';
-import { ProjectIcon, FilterGroupIcon, CollectionIcon, ProcessIcon, DefaultIcon, ShareIcon, CollectionOldVersionIcon, WorkflowIcon } from '~/components/icon/icon';
-import { formatDate, formatFileSize, formatTime } from '~/common/formatters';
-import { resourceLabel } from '~/common/labels';
+import { Resource, ResourceKind, TrashableResource } from 'models/resource';
+import { ProjectIcon, FilterGroupIcon, CollectionIcon, ProcessIcon, DefaultIcon, ShareIcon, CollectionOldVersionIcon, WorkflowIcon, RemoveIcon, RenameIcon } from 'components/icon/icon';
+import { formatDate, formatFileSize, formatTime } from 'common/formatters';
+import { resourceLabel } from 'common/labels';
 import { connect, DispatchProp } from 'react-redux';
-import { RootState } from '~/store/store';
-import { getResource } from '~/store/resources/resources';
-import { GroupContentsResource } from '~/services/groups-service/groups-service';
-import { getProcess, Process, getProcessStatus, getProcessStatusColor, getProcessRuntime } from '~/store/processes/process';
-import { ArvadosTheme } from '~/common/custom-theme';
+import { RootState } from 'store/store';
+import { getResource } from 'store/resources/resources';
+import { GroupContentsResource } from 'services/groups-service/groups-service';
+import { getProcess, Process, getProcessStatus, getProcessStatusColor, getProcessRuntime } from 'store/processes/process';
+import { ArvadosTheme } from 'common/custom-theme';
 import { compose, Dispatch } from 'redux';
-import { WorkflowResource } from '~/models/workflow';
-import { ResourceStatus as WorkflowStatus } from '~/views/workflow-panel/workflow-panel-view';
-import { getUuidPrefix, openRunProcess } from '~/store/workflow-panel/workflow-panel-actions';
-import { openSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
-import { getUserFullname, User, UserResource } from '~/models/user';
-import { toggleIsActive, toggleIsAdmin } from '~/store/users/users-actions';
-import { LinkResource } from '~/models/link';
-import { navigateTo } from '~/store/navigation/navigation-action';
-import { withResourceData } from '~/views-components/data-explorer/with-resources';
-import { CollectionResource } from '~/models/collection';
-import { IllegalNamingWarning } from '~/components/warning/warning';
-import { loadResource } from '~/store/resources/resources-actions';
-import { GroupClass } from '~/models/group';
-
-const renderName = (dispatch: Dispatch, item: GroupContentsResource) =>
-    <Grid container alignItems="center" wrap="nowrap" spacing={16}>
+import { WorkflowResource } from 'models/workflow';
+import { ResourceStatus as WorkflowStatus } from 'views/workflow-panel/workflow-panel-view';
+import { getUuidPrefix, openRunProcess } from 'store/workflow-panel/workflow-panel-actions';
+import { openSharingDialog } from 'store/sharing-dialog/sharing-dialog-actions';
+import { getUserFullname, getUserDisplayName, User, UserResource } from 'models/user';
+import { toggleIsActive, toggleIsAdmin } from 'store/users/users-actions';
+import { LinkResource } from 'models/link';
+import { navigateTo, navigateToGroupDetails } from 'store/navigation/navigation-action';
+import { withResourceData } from 'views-components/data-explorer/with-resources';
+import { CollectionResource } from 'models/collection';
+import { IllegalNamingWarning } from 'components/warning/warning';
+import { loadResource } from 'store/resources/resources-actions';
+import { GroupClass } from 'models/group';
+import { openRemoveGroupMemberDialog, openEditPermissionLevelDialog } from 'store/group-details-panel/group-details-panel-actions';
+import { formatPermissionLevel } from 'views-components/sharing-dialog/permission-select';
+import { PermissionLevel } from 'models/permission';
+
+const renderName = (dispatch: Dispatch, item: GroupContentsResource) => {
+
+    const navFunc = ("groupClass" in item && item.groupClass === GroupClass.ROLE ? navigateToGroupDetails : navigateTo);
+    return <Grid container alignItems="center" wrap="nowrap" spacing={16}>
         <Grid item>
             {renderIcon(item)}
         </Grid>
         <Grid item>
-            <Typography color="primary" style={{ width: 'auto', cursor: 'pointer' }} onClick={() => dispatch<any>(navigateTo(item.uuid))}>
+            <Typography color="primary" style={{ width: 'auto', cursor: 'pointer' }} onClick={() => dispatch<any>(navFunc(item.uuid))}>
                 {item.kind === ResourceKind.PROJECT || item.kind === ResourceKind.COLLECTION
                     ? <IllegalNamingWarning name={item.name} />
                     : null}
@@ -50,6 +55,7 @@ const renderName = (dispatch: Dispatch, item: GroupContentsResource) =>
             </Typography>
         </Grid>
     </Grid>;
+};
 
 export const ResourceName = connect(
     (state: RootState, props: { uuid: string }) => {
@@ -131,11 +137,11 @@ export const ResourceShare = connect(
     })((props: { ownerUuid?: string, uuidPrefix: string, uuid?: string } & DispatchProp<any>) =>
         resourceShare(props.dispatch, props.uuidPrefix, props.ownerUuid, props.uuid));
 
+// User Resources
 const renderFirstName = (item: { firstName: string }) => {
     return <Typography noWrap>{item.firstName}</Typography>;
 };
 
-// User Resources
 export const ResourceFirstName = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<UserResource>(props.uuid)(state.resources);
@@ -151,6 +157,16 @@ export const ResourceLastName = connect(
         return resource || { lastName: '' };
     })(renderLastName);
 
+const renderFullName = (item: { firstName: string, lastName: string }) =>
+    <Typography noWrap>{(item.firstName + " " + item.lastName).trim()}</Typography>;
+
+export const ResourceFullName = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const resource = getResource<UserResource>(props.uuid)(state.resources);
+        return resource || { firstName: '', lastName: '' };
+    })(renderFullName);
+
+
 const renderUuid = (item: { uuid: string }) =>
     <Typography noWrap>{item.uuid}</Typography>;
 
@@ -232,11 +248,6 @@ export const TokenScopes = withResourceData('scopes', renderCommonData);
 
 export const TokenUserId = withResourceData('userId', renderCommonData);
 
-// Compute Node Resources
-const renderNodeInfo = (data: string) => {
-    return <Typography>{JSON.stringify(data, null, 4)}</Typography>;
-};
-
 const clusterColors = [
     ['#f44336', '#fff'],
     ['#2196f3', '#fff'],
@@ -262,20 +273,6 @@ export const ResourceCluster = (props: { uuid: string }) => {
     }}>{clusterId}</span>;
 };
 
-export const ComputeNodeInfo = withResourceData('info', renderNodeInfo);
-
-export const ComputeNodeDomain = withResourceData('domain', renderCommonData);
-
-export const ComputeNodeFirstPingAt = withResourceData('firstPingAt', renderCommonDate);
-
-export const ComputeNodeHostname = withResourceData('hostname', renderCommonData);
-
-export const ComputeNodeIpAddress = withResourceData('ipAddress', renderCommonData);
-
-export const ComputeNodeJobUuid = withResourceData('jobUuid', renderCommonData);
-
-export const ComputeNodeLastPingAt = withResourceData('lastPingAt', renderCommonDate);
-
 // Links Resources
 const renderLinkName = (item: { name: string }) =>
     <Typography noWrap>{item.name || '(none)'}</Typography>;
@@ -295,45 +292,53 @@ export const ResourceLinkClass = connect(
         return resource || { linkClass: '' };
     })(renderLinkClass);
 
-const renderLinkTail = (dispatch: Dispatch, item: { uuid: string, tailUuid: string, tailKind: string }) => {
-    const currentLabel = resourceLabel(item.tailKind);
-    const isUnknow = currentLabel === "Unknown";
-    return (<div>
-        {!isUnknow ? (
-            renderLink(dispatch, item.tailUuid, currentLabel)
-        ) : (
-                <Typography noWrap color="default">
-                    {item.tailUuid}
-                </Typography>
-            )}
-    </div>);
+const getResourceDisplayName = (resource: Resource): string => {
+    if ((resource as UserResource).kind === ResourceKind.USER
+          && typeof (resource as UserResource).firstName !== 'undefined') {
+        // We can be sure the resource is UserResource
+        return getUserDisplayName(resource as UserResource);
+    } else {
+        return (resource as GroupContentsResource).name;
+    }
+}
+
+const renderResourceLink = (dispatch: Dispatch, item: Resource) => {
+    var displayName = getResourceDisplayName(item);
+
+    return <Typography noWrap color="primary" style={{ 'cursor': 'pointer' }} onClick={() => dispatch<any>(navigateTo(item.uuid))}>
+        {resourceLabel(item.kind)}: {displayName || item.uuid}
+    </Typography>;
 };
 
-const renderLink = (dispatch: Dispatch, uuid: string, label: string) =>
-    <Typography noWrap color="primary" style={{ 'cursor': 'pointer' }} onClick={() => dispatch<any>(navigateTo(uuid))}>
-        {label}: {uuid}
+const renderResource = (dispatch: Dispatch, item: Resource) => {
+    var displayName = getResourceDisplayName(item);
+
+    return <Typography variant='body2'>
+        {resourceLabel(item.kind)}: {displayName || item.uuid}
     </Typography>;
+};
 
 export const ResourceLinkTail = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<LinkResource>(props.uuid)(state.resources);
+        const tailResource = getResource<Resource>(resource?.tailUuid || '')(state.resources);
+
         return {
-            item: resource || { uuid: '', tailUuid: '', tailKind: ResourceKind.NONE }
+            item: tailResource || { uuid: resource?.tailUuid || '', kind: resource?.tailKind || ResourceKind.NONE }
         };
-    })((props: { item: any } & DispatchProp<any>) =>
-        renderLinkTail(props.dispatch, props.item));
-
-const renderLinkHead = (dispatch: Dispatch, item: { uuid: string, headUuid: string, headKind: ResourceKind }) =>
-    renderLink(dispatch, item.headUuid, resourceLabel(item.headKind));
+    })((props: { item: Resource } & DispatchProp<any>) =>
+        renderResourceLink(props.dispatch, props.item));
 
 export const ResourceLinkHead = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<LinkResource>(props.uuid)(state.resources);
+        const headResource = getResource<Resource>(resource?.headUuid || '')(state.resources);
+
         return {
-            item: resource || { uuid: '', headUuid: '', headKind: ResourceKind.NONE }
+            item: headResource || { uuid: resource?.headUuid || '', kind: resource?.headKind || ResourceKind.NONE }
         };
-    })((props: { item: any } & DispatchProp<any>) =>
-        renderLinkHead(props.dispatch, props.item));
+    })((props: { item: Resource } & DispatchProp<any>) =>
+        renderResourceLink(props.dispatch, props.item));
 
 export const ResourceLinkUuid = connect(
     (state: RootState, props: { uuid: string }) => {
@@ -341,6 +346,102 @@ export const ResourceLinkUuid = connect(
         return resource || { uuid: '' };
     })(renderUuid);
 
+export const ResourceLinkHeadUuid = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        const headResource = getResource<Resource>(link?.headUuid || '')(state.resources);
+
+        return headResource || { uuid: '' };
+    })(renderUuid);
+
+export const ResourceLinkTailUuid = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        const tailResource = getResource<Resource>(link?.tailUuid || '')(state.resources);
+
+        return tailResource || { uuid: '' };
+    })(renderUuid);
+
+const renderLinkDelete = (dispatch: Dispatch, item: LinkResource) => {
+    if (item.uuid) {
+        return <Typography noWrap>
+            <IconButton onClick={() => dispatch<any>(openRemoveGroupMemberDialog(item.uuid))}>
+                <RemoveIcon />
+            </IconButton>
+        </Typography>;
+    } else {
+      return <Typography noWrap></Typography>;
+    }
+}
+
+export const ResourceLinkDelete = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        return {
+            item: link || { uuid: '', kind: ResourceKind.NONE }
+        };
+    })((props: { item: LinkResource } & DispatchProp<any>) =>
+      renderLinkDelete(props.dispatch, props.item));
+
+export const ResourceLinkTailEmail = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        const resource = getResource<UserResource>(link?.tailUuid || '')(state.resources);
+
+        return resource || { email: '' };
+    })(renderEmail);
+
+export const ResourceLinkTailUsername = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        const resource = getResource<UserResource>(link?.tailUuid || '')(state.resources);
+
+        return resource || { username: '' };
+    })(renderUsername);
+
+const renderPermissionLevel = (dispatch: Dispatch, link: LinkResource, resource: Resource) => {
+    return <Typography noWrap>
+        {formatPermissionLevel(link.name as PermissionLevel)}
+        <IconButton onClick={() => dispatch<any>(openEditPermissionLevelDialog(link.uuid, resource.uuid))}>
+            <RenameIcon />
+        </IconButton>
+    </Typography>;
+}
+
+export const ResourceLinkHeadPermissionLevel = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        const resource = getResource<Resource>(link?.headUuid || '')(state.resources);
+
+        return {
+            link: link || { uuid: '', name: '', kind: ResourceKind.NONE },
+            resource: resource || { uuid: '', kind: ResourceKind.NONE }
+        };
+    })((props: { link: LinkResource, resource: Resource } & DispatchProp<any>) =>
+        renderPermissionLevel(props.dispatch, props.link, props.resource));
+
+export const ResourceLinkTailPermissionLevel = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const link = getResource<LinkResource>(props.uuid)(state.resources);
+        const resource = getResource<Resource>(link?.tailUuid || '')(state.resources);
+
+        return {
+            link: link || { uuid: '', name: '', kind: ResourceKind.NONE },
+            resource: resource || { uuid: '', kind: ResourceKind.NONE }
+        };
+    })((props: { link: LinkResource, resource: Resource } & DispatchProp<any>) =>
+        renderPermissionLevel(props.dispatch, props.link, props.resource));
+
+// Displays resource type and display name without link
+export const ResourceLabel = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const resource = getResource<Resource>(props.uuid)(state.resources);
+        return {
+            item: resource || { uuid: '', kind: ResourceKind.NONE }
+        };
+    })((props: { item: Resource } & DispatchProp<any>) =>
+        renderResource(props.dispatch, props.item));
+
 // Process Resources
 const resourceRunProcess = (dispatch: Dispatch, uuid: string) => {
     return (
@@ -417,6 +518,11 @@ export const renderFileSize = (fileSize?: number) =>
 export const ResourceFileSize = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<CollectionResource>(props.uuid)(state.resources);
+
+        if (resource && resource.kind !== ResourceKind.COLLECTION) {
+            return { fileSize: '' };
+        }
+
         return { fileSize: resource ? resource.fileSizeTotal : 0 };
     })((props: { fileSize?: number }) => renderFileSize(props.fileSize));
 
@@ -439,24 +545,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) {
-                    ownerName = getUserFullname(resource as User) || (resource as GroupContentsResource).name;
-                }
+            if (resource) {
+                userFullname = getUserFullname(resource as User) || (resource as GroupContentsResource).name;
+            }
 
-                return { uuid: props.uuid, ownerName };
-            }),
+            return { uuid: props.uuid, userFullname };
+        });
+
+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}
@@ -464,32 +573,69 @@ 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(
-            (state: RootState, props: { uuid: string }) => {
-                let responsiblePersonName = '';
+            (state: RootState, props: { uuid: string, parentRef: HTMLElement | null }) => {
+                let responsiblePersonName: string = '';
+                let responsiblePersonUUID: string = '';
+                let responsiblePersonProperty: string = '';
+
+                if (state.auth.config.clusterConfig.Collections.ManagedProperties) {
+                    let index = 0;
+                    const keys = Object.keys(state.auth.config.clusterConfig.Collections.ManagedProperties);
+
+                    while (!responsiblePersonProperty && keys[index]) {
+                        const key = keys[index];
+                        if (state.auth.config.clusterConfig.Collections.ManagedProperties[key].Function === 'original_owner') {
+                            responsiblePersonProperty = key;
+                        }
+                        index++;
+                    }
+                }
+
                 let resource: Resource | undefined = getResource<GroupContentsResource & UserResource>(props.uuid)(state.resources);
 
-                while (resource && resource.kind !== ResourceKind.USER) {
-                    resource = getResource<GroupContentsResource & UserResource>(resource.ownerUuid)(state.resources);
+                while (resource && resource.kind !== ResourceKind.USER && responsiblePersonProperty) {
+                    responsiblePersonUUID = (resource as CollectionResource).properties[responsiblePersonProperty];
+                    resource = getResource<GroupContentsResource & UserResource>(responsiblePersonUUID)(state.resources);
                 }
 
                 if (resource && resource.kind === ResourceKind.USER) {
                     responsiblePersonName = getUserFullname(resource as UserResource) || (resource as GroupContentsResource).name;
                 }
 
-                return { uuid: props.uuid, responsiblePersonName };
+                return { uuid: responsiblePersonUUID, responsiblePersonName, parentRef: props.parentRef };
             }),
         withStyles({}, { withTheme: true }))
-        ((props: { uuid: string, responsiblePersonName: string, theme: ArvadosTheme }) => {
-            const { uuid, responsiblePersonName, theme } = props;
+        ((props: { uuid: string | null, responsiblePersonName: string, parentRef: HTMLElement | null, theme: ArvadosTheme }) => {
+            const { uuid, responsiblePersonName, parentRef, theme } = props;
+
+            if (!uuid && parentRef) {
+                parentRef.style.display = 'none';
+                return null;
+            } else if (parentRef) {
+                parentRef.style.display = 'block';
+            }
 
-            if (responsiblePersonName === '') {
+            if (!responsiblePersonName) {
                 return <Typography style={{ color: theme.palette.primary.main }} inline noWrap>
                     {uuid}
                 </Typography>;