From 798064c6616d98f8b6b3dfe562458bffe662f4ad Mon Sep 17 00:00:00 2001 From: Stephen Smith Date: Mon, 25 Oct 2021 10:26:50 -0400 Subject: [PATCH] 18123: Add group data table renderers Arvados-DCO-1.1-Signed-off-by: Stephen Smith --- .../data-explorer/renderers.tsx | 70 +++++++++++++++---- .../group-details-panel.tsx | 42 ++++++++--- 2 files changed, 88 insertions(+), 24 deletions(-) diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx index 05ae4ce2..77b5b694 100644 --- a/src/views-components/data-explorer/renderers.tsx +++ b/src/views-components/data-explorer/renderers.tsx @@ -6,7 +6,7 @@ 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 { ProjectIcon, FilterGroupIcon, CollectionIcon, ProcessIcon, DefaultIcon, ShareIcon, CollectionOldVersionIcon, WorkflowIcon, RemoveIcon } from 'components/icon/icon'; import { formatDate, formatFileSize, formatTime } from 'common/formatters'; import { resourceLabel } from 'common/labels'; import { connect, DispatchProp } from 'react-redux'; @@ -29,6 +29,7 @@ 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 } from 'store/group-details-panel/group-details-panel-actions'; const renderName = (dispatch: Dispatch, item: GroupContentsResource) => @@ -286,20 +287,6 @@ 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 (
-// {!isUnknow ? ( -// renderLink(dispatch, item.tailUuid, "name", currentLabel) -// ) : ( -// -// {item.tailUuid} -// -// )} -//
); -// }; - const renderLink = (dispatch: Dispatch, item: Resource) => { var displayName = ''; @@ -344,6 +331,59 @@ export const ResourceLinkUuid = connect( return resource || { uuid: '' }; })(renderUuid); +export const ResourceLinkHeadUuid = connect( + (state: RootState, props: { uuid: string }) => { + const link = getResource(props.uuid)(state.resources); + const headResource = getResource(link?.headUuid || '')(state.resources); + + return headResource || { uuid: '' }; + })(renderUuid); + +export const ResourceLinkTailUuid = connect( + (state: RootState, props: { uuid: string }) => { + const link = getResource(props.uuid)(state.resources); + const tailResource = getResource(link?.tailUuid || '')(state.resources); + + return tailResource || { uuid: '' }; + })(renderUuid); + +const renderLinkDelete = (dispatch: Dispatch, item: LinkResource) => { + if (item.uuid) { + return + dispatch(openRemoveGroupMemberDialog(item.uuid))}> + + + ; + } else { + return ; + } +} + +export const ResourceLinkDelete = connect( + (state: RootState, props: { uuid: string }) => { + const link = getResource(props.uuid)(state.resources); + return { + item: link || { uuid: '', kind: ResourceKind.NONE } + }; + })((props: { item: LinkResource } & DispatchProp) => + renderLinkDelete(props.dispatch, props.item)); + +export const ResourceLinkTailEmail = connect( + (state: RootState, props: { uuid: string }) => { + const link = getResource(props.uuid)(state.resources); + const resource = getResource(link?.tailUuid || '')(state.resources); + + return resource || { email: '' }; + })(renderEmail); + +export const ResourceLinkTailUsername = connect( + (state: RootState, props: { uuid: string }) => { + const link = getResource(props.uuid)(state.resources); + const resource = getResource(link?.tailUuid || '')(state.resources); + + return resource || { username: '' }; + })(renderUsername); + // Process Resources const resourceRunProcess = (dispatch: Dispatch, uuid: string) => { return ( diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx index 5b1a884e..f292b97b 100644 --- a/src/views/group-details-panel/group-details-panel.tsx +++ b/src/views/group-details-panel/group-details-panel.tsx @@ -7,7 +7,7 @@ import { connect } from 'react-redux'; import { DataExplorer } from "views-components/data-explorer/data-explorer"; import { DataColumns } from 'components/data-table/data-table'; -import { ResourceUuid, ResourceEmail, ResourceUsername, ResourceLinkName, ResourceLinkHead, ResourceLinkTail } from 'views-components/data-explorer/renderers'; +import { ResourceLinkHeadUuid, ResourceLinkTailUuid, ResourceLinkTailEmail, ResourceLinkTailUsername, ResourceLinkName, ResourceLinkHead, ResourceLinkTail, ResourceLinkDelete } from 'views-components/data-explorer/renderers'; import { createTree } from 'models/tree'; import { noop } from 'lodash/fp'; import { RootState } from 'store/store'; @@ -24,12 +24,15 @@ export enum GroupDetailsPanelMembersColumnNames { UUID = "UUID", EMAIL = "Email", USERNAME = "Username", + PERMISSION = "Permission", + REMOVE = "Remove", } export enum GroupDetailsPanelPermissionsColumnNames { - HEAD = "Head", NAME = "Name", + PERMISSION = "Permission", UUID = "UUID", + REMOVE = "Remove", } export const groupDetailsMembersPanelColumns: DataColumns = [ @@ -45,34 +48,48 @@ export const groupDetailsMembersPanelColumns: DataColumns = [ selected: true, configurable: true, filters: createTree(), - render: uuid => + render: uuid => + }, + { + name: GroupDetailsPanelMembersColumnNames.EMAIL, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: GroupDetailsPanelMembersColumnNames.PERMISSION, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => }, { name: GroupDetailsPanelMembersColumnNames.UUID, selected: true, configurable: true, filters: createTree(), - render: uuid => + render: uuid => }, { - name: GroupDetailsPanelMembersColumnNames.EMAIL, + name: GroupDetailsPanelMembersColumnNames.REMOVE, selected: true, configurable: true, filters: createTree(), - render: uuid => + render: uuid => }, ]; export const groupDetailsPermissionsPanelColumns: DataColumns = [ { - name: GroupDetailsPanelPermissionsColumnNames.HEAD, + name: GroupDetailsPanelPermissionsColumnNames.NAME, selected: true, configurable: true, filters: createTree(), render: uuid => }, { - name: GroupDetailsPanelPermissionsColumnNames.NAME, + name: GroupDetailsPanelPermissionsColumnNames.PERMISSION, selected: true, configurable: true, filters: createTree(), @@ -83,7 +100,14 @@ export const groupDetailsPermissionsPanelColumns: DataColumns = [ selected: true, configurable: true, filters: createTree(), - render: uuid => + render: uuid => + }, + { + name: GroupDetailsPanelPermissionsColumnNames.REMOVE, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => }, ]; -- 2.39.5