Add GroupDetailsPanel view

Feature #14505

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts
index 27ba3c8b65c73958b92a12baa0610b32eac4880e..e185e8cfd471d48ddc6697aee6f69ba8bd9351a6 100644 (file)
--- a/src/store/workbench/workbench-actions.ts
+++ b/src/store/workbench/workbench-actions.ts
@@ -65,6 +65,7 @@ import { loadApiClientAuthorizationsPanel } from '~/store/api-client-authorizati
 import * as groupPanelActions from '~/store/groups-panel/groups-panel-actions';
 import { groupsPanelColumns } from '~/views/groups-panel/groups-panel';
 import * as groupDetailsPanelActions from '~/store/group-details-panel/group-details-panel-actions';
+import { groupDetailsPanelColumns } from '~/views/group-details-panel/group-details-panel';
 
 export const WORKBENCH_LOADING_SCREEN = 'workbenchLoadingScreen';
 
@@ -100,6 +101,7 @@ export const loadWorkbench = () =>
                 dispatch(searchResultsPanelActions.SET_COLUMNS({ columns: searchResultsPanelColumns }));
                 dispatch(userBindedActions.SET_COLUMNS({ columns: userPanelColumns }));
                 dispatch(groupPanelActions.GroupsPanelActions.SET_COLUMNS({ columns: groupsPanelColumns }));
+                dispatch(groupDetailsPanelActions.GroupDetailsPanelActions.SET_COLUMNS({columns: groupDetailsPanelColumns}));
                 dispatch<any>(initSidePanelTree());
                 if (router.location) {
                     const match = matchRootRoute(router.location.pathname);

diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx
new file mode 100644 (file)
index 0000000..fb4825d
--- /dev/null
+++ b/src/views/group-details-panel/group-details-panel.tsx
@@ -0,0 +1,89 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
+import { DataColumns } from '~/components/data-table/data-table';
+import { ResourceUuid, ResourceFirstName, ResourceLastName, ResourceEmail, ResourceUsername } from '~/views-components/data-explorer/renderers';
+import { createTree } from '~/models/tree';
+import { noop } from 'lodash/fp';
+import { RootState } from '~/store/store';
+import { GROUP_DETAILS_PANEL_ID } from '~/store/group-details-panel/group-details-panel-actions';
+
+export enum GroupDetailsPanelColumnNames {
+    FIRST_NAME = "First name",
+    LAST_NAME = "Last name",
+    UUID = "UUID",
+    EMAIL = "Email",
+    USERNAME = "Username",
+}
+
+export const groupDetailsPanelColumns: DataColumns<string> = [
+    {
+        name: GroupDetailsPanelColumnNames.FIRST_NAME,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <ResourceFirstName uuid={uuid} />
+    },
+    {
+        name: GroupDetailsPanelColumnNames.LAST_NAME,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <ResourceLastName uuid={uuid} />
+    },
+    {
+        name: GroupDetailsPanelColumnNames.UUID,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <ResourceUuid uuid={uuid} />
+    },
+    {
+        name: GroupDetailsPanelColumnNames.EMAIL,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <ResourceEmail uuid={uuid} />
+    },
+    {
+        name: GroupDetailsPanelColumnNames.USERNAME,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: uuid => <ResourceUsername uuid={uuid} />
+    },
+];
+
+const mapStateToProps = (state: RootState) => {
+    return {
+        resources: state.resources
+    };
+};
+
+const mapDispatchToProps = {};
+
+export interface GroupDetailsPanelProps { }
+
+export const GroupDetailsPanel = connect(
+    mapStateToProps, mapDispatchToProps
+)(
+    class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
+
+        render() {
+            return (
+                <DataExplorer
+                    id={GROUP_DETAILS_PANEL_ID}
+                    onRowClick={noop}
+                    onRowDoubleClick={noop}
+                    onContextMenu={noop}
+                    contextMenuColumn={true}
+                    hideColumnSelector />
+            );
+        }
+    });
+

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index e137d0a0e53f53a083eb8b8c2fe9fa3d122bb90f..9c8726a88dbddde89b91c66f1a0f6676d291ab25 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -79,6 +79,7 @@ import { GroupsPanel } from '~/views/groups-panel/groups-panel';
 import { CreateGroupDialog } from '~/views-components/dialog-forms/create-group-dialog';
 import { RemoveGroupDialog } from '~/views-components/groups-dialog/remove-dialog';
 import { GroupAttributesDialog } from '~/views-components/groups-dialog/attributes-dialog';
+import { GroupDetailsPanel } from '~/views/group-details-panel/group-details-panel';
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -157,7 +158,7 @@ export const WorkbenchPanel =
                                 <Route path={Routes.API_CLIENT_AUTHORIZATIONS} component={ApiClientAuthorizationPanel} />
                                 <Route path={Routes.MY_ACCOUNT} component={MyAccountPanel} />
                                 <Route path={Routes.GROUPS} component={GroupsPanel} />
-                                <Route path={Routes.GROUP_DETAILS} render={() => <h1>Group details</h1>} />
+                                <Route path={Routes.GROUP_DETAILS} component={GroupDetailsPanel} />
                             </Switch>
                         </Grid>
                     </Grid>