Add CreateGroupDialog

Feature #14505

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

diff --git a/src/store/groups-panel/groups-panel-actions.ts b/src/store/groups-panel/groups-panel-actions.ts
index 5adce5c672251aa2ea4be48aab02775d6d0b7835..28a1c07e191160b9ba7ad81db5131cf42711d083 100644 (file)
--- a/src/store/groups-panel/groups-panel-actions.ts
+++ b/src/store/groups-panel/groups-panel-actions.ts
@@ -3,8 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { bindDataExplorerActions } from "~/store/data-explorer/data-explorer-action";
+import { dialogActions } from '~/store/dialog/dialog-actions';
 
 export const GROUPS_PANEL_ID = "groupsPanel";
+export const CREATE_GROUP_DIALOG = "createGroupDialog";
+export const CREATE_GROUP_FORM = "createGroupForm";
+
 export const GroupsPanelActions = bindDataExplorerActions(GROUPS_PANEL_ID);
 
 export const loadGroupsPanel = () => GroupsPanelActions.REQUEST_ITEMS();
+
+export const openCreateGroupDialog = () =>
+    dialogActions.OPEN_DIALOG({ id: CREATE_GROUP_DIALOG, data: {} });

diff --git a/src/views-components/dialog-forms/create-group-dialog.tsx b/src/views-components/dialog-forms/create-group-dialog.tsx
new file mode 100644 (file)
index 0000000..10d60c3
--- /dev/null
+++ b/src/views-components/dialog-forms/create-group-dialog.tsx
@@ -0,0 +1,32 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { compose } from "redux";
+import { reduxForm, InjectedFormProps } from 'redux-form';
+import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog";
+import { FormDialog } from '~/components/form-dialog/form-dialog';
+import { CREATE_GROUP_DIALOG, CREATE_GROUP_FORM } from '~/store/groups-panel/groups-panel-actions';
+
+export const CreateGroupDialog = compose(
+    withDialog(CREATE_GROUP_DIALOG),
+    reduxForm<{}>({
+        form: CREATE_GROUP_FORM,
+        onSubmit: (data, dispatch) => { return; }
+    })
+)(
+    (props: CreateGroupDialogComponentProps) =>
+        <FormDialog
+            dialogTitle='Create a group'
+            formFields={CreateGroupFormFields}
+            submitLabel='Create'
+            {...props}
+        />
+);
+
+type CreateGroupDialogComponentProps = WithDialogProps<{}> & InjectedFormProps<{}>;
+
+const CreateGroupFormFields = (props: CreateGroupDialogComponentProps) => <span>
+    CreateGroupFormFields
+</span>;

diff --git a/src/views/groups-panel/groups-panel.tsx b/src/views/groups-panel/groups-panel.tsx
index 7f919d5ad22d3a663dcb47bcae1a09030cc880cc..39028ecf87d5e9d08bdc9a076603ebb3f3d6f66f 100644 (file)
--- a/src/views/groups-panel/groups-panel.tsx
+++ b/src/views/groups-panel/groups-panel.tsx
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
+import { connect } from 'react-redux';
 import { Grid, Button } from "@material-ui/core";
 
 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
@@ -12,7 +13,7 @@ import { ResourceOwner } from '~/views-components/data-explorer/renderers';
 import { AddIcon } from '~/components/icon/icon';
 import { ResourceName } from '~/views-components/data-explorer/renderers';
 import { createTree } from '~/models/tree';
-import { GROUPS_PANEL_ID } from '~/store/groups-panel/groups-panel-actions';
+import { GROUPS_PANEL_ID, openCreateGroupDialog } from '~/store/groups-panel/groups-panel-actions';
 import { noop } from 'lodash/fp';
 
 export enum GroupsPanelColumnNames {
@@ -50,27 +51,33 @@ export interface GroupsPanelProps {
     onNewGroup: () => void;
 }
 
-export class GroupsPanel extends React.Component<GroupsPanelProps> {
+export const GroupsPanel = connect(
+    null,
+    {
+        onNewGroup: openCreateGroupDialog
+    }
+)(
+    class GroupsPanel extends React.Component<GroupsPanelProps> {
 
-    render() {
-        return (
-            <DataExplorer
-                id={GROUPS_PANEL_ID}
-                onRowClick={noop}
-                onRowDoubleClick={noop}
-                onContextMenu={noop}
-                contextMenuColumn={true}
-                hideColumnSelector
-                actions={
-                    <Grid container justify='flex-end'>
-                        <Button
-                            variant="contained"
-                            color="primary"
-                            onClick={this.props.onNewGroup}>
-                            <AddIcon /> New group
+        render() {
+            return (
+                <DataExplorer
+                    id={GROUPS_PANEL_ID}
+                    onRowClick={noop}
+                    onRowDoubleClick={noop}
+                    onContextMenu={noop}
+                    contextMenuColumn={true}
+                    hideColumnSelector
+                    actions={
+                        <Grid container justify='flex-end'>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                onClick={this.props.onNewGroup}>
+                                <AddIcon /> New group
                         </Button>
-                    </Grid>
-                } />
-        );
-    }
-}
+                        </Grid>
+                    } />
+            );
+        }
+    });

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 468797eb622bd4548b4ef6eb43b870344dde68fd..2a7731846b1832036310db23ed4f8448ffdef542 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -76,6 +76,7 @@ import { UserAttributesDialog } from '~/views-components/user-dialog/attributes-
 import { CreateUserDialog } from '~/views-components/dialog-forms/create-user-dialog';
 import { HelpApiClientAuthorizationDialog } from '~/views-components/api-client-authorizations-dialog/help-dialog';
 import { GroupsPanel } from '~/views/groups-panel/groups-panel';
+import { CreateGroupDialog } from '~/views-components/dialog-forms/create-group-dialog';
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -172,6 +173,7 @@ export const WorkbenchPanel =
             <CopyCollectionDialog />
             <CopyProcessDialog />
             <CreateCollectionDialog />
+            <CreateGroupDialog />
             <CreateProjectDialog />
             <CreateRepositoryDialog />
             <CreateSshKeyDialog />