Create AddGroupMembersDialog

Feature #14505

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

diff --git a/src/store/group-details-panel/group-details-panel-actions.ts b/src/store/group-details-panel/group-details-panel-actions.ts
index be134dd59cfa2e74b49cf0d5b43f8713ed7fe110..e908e8e80f1663bb2d084f9cb01deff901214715 100644 (file)
--- a/src/store/group-details-panel/group-details-panel-actions.ts
+++ b/src/store/group-details-panel/group-details-panel-actions.ts
@@ -6,8 +6,15 @@ import { bindDataExplorerActions } from '~/store/data-explorer/data-explorer-act
 import { Dispatch } from 'redux';
 import { propertiesActions } from '~/store/properties/properties-actions';
 import { getProperty } from '~/store/properties/properties';
+import { Person } from '~/views-components/sharing-dialog/people-select';
+import { dialogActions } from '~/store/dialog/dialog-actions';
+import { reset } from 'redux-form';
 
 export const GROUP_DETAILS_PANEL_ID = 'groupDetailsPanel';
+export const ADD_GROUP_MEMBERS_DIALOG = 'addGrupMembers';
+export const ADD_GROUP_MEMBERS_FORM = 'addGrupMembers';
+export const ADD_GROUP_MEMBERS_USERS_FIELD_NAME = 'users';
+
 
 export const GroupDetailsPanelActions = bindDataExplorerActions(GROUP_DETAILS_PANEL_ID);
 
@@ -18,3 +25,13 @@ export const loadGroupDetailsPanel = (groupUuid: string) =>
     };
 
 export const getCurrentGroupDetailsPanelUuid = getProperty<string>(GROUP_DETAILS_PANEL_ID);
+
+export interface AddGroupMembersFormData {
+    [ADD_GROUP_MEMBERS_USERS_FIELD_NAME]: Person[];
+}
+
+export const openAddGroupMembersDialog = () =>
+    (dispatch: Dispatch) => {
+        dispatch(dialogActions.OPEN_DIALOG({ id: ADD_GROUP_MEMBERS_DIALOG, data: {} }));
+        dispatch(reset(ADD_GROUP_MEMBERS_FORM));
+    };

diff --git a/src/views-components/dialog-forms/add-group-member-dialog.tsx b/src/views-components/dialog-forms/add-group-member-dialog.tsx
new file mode 100644 (file)
index 0000000..3840ecd
--- /dev/null
+++ b/src/views-components/dialog-forms/add-group-member-dialog.tsx
@@ -0,0 +1,44 @@
+// 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, WrappedFieldArrayProps, FieldArray } from 'redux-form';
+import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog";
+import { FormDialog } from '~/components/form-dialog/form-dialog';
+import { PeopleSelect, Person } from '~/views-components/sharing-dialog/people-select';
+import { ADD_GROUP_MEMBERS_DIALOG, ADD_GROUP_MEMBERS_FORM, AddGroupMembersFormData, ADD_GROUP_MEMBERS_USERS_FIELD_NAME } from '~/store/group-details-panel/group-details-panel-actions';
+import { minLength } from '~/validators/min-length';
+
+export const AddGroupMembersDialog = compose(
+    withDialog(ADD_GROUP_MEMBERS_DIALOG),
+    reduxForm<AddGroupMembersFormData>({
+        form: ADD_GROUP_MEMBERS_FORM,
+    })
+)(
+    (props: AddGroupMembersDialogProps) =>
+        <FormDialog
+            dialogTitle='Add users'
+            formFields={UsersField}
+            submitLabel='Add'
+            {...props}
+        />
+);
+
+type AddGroupMembersDialogProps = WithDialogProps<{}> & InjectedFormProps<AddGroupMembersFormData>;
+
+const UsersField = () =>
+    <FieldArray
+        name={ADD_GROUP_MEMBERS_USERS_FIELD_NAME}
+        component={UsersSelect}
+        validate={UsersFieldValidation} />;
+
+const UsersFieldValidation = [minLength(1, () => 'Select at least one user')];
+
+const UsersSelect = ({ fields }: WrappedFieldArrayProps<Person>) =>
+    <PeopleSelect
+        label='Enter email adresses '
+        items={fields.getAll() || []}
+        onSelect={fields.push}
+        onDelete={fields.remove} />;

diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx
index 749fd90fc40466128eb4868aab18588a3058e98c..7334a93adf1366c41e95218382c99cb6db07e73c 100644 (file)
--- a/src/views/group-details-panel/group-details-panel.tsx
+++ b/src/views/group-details-panel/group-details-panel.tsx
@@ -11,7 +11,7 @@ import { ResourceUuid, ResourceFirstName, ResourceLastName, ResourceEmail, Resou
 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';
+import { GROUP_DETAILS_PANEL_ID, openAddGroupMembersDialog } from '~/store/group-details-panel/group-details-panel-actions';
 import { openContextMenu } from '~/store/context-menu/context-menu-actions';
 import { ResourcesState, getResource } from '~/store/resources/resources';
 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
@@ -73,6 +73,7 @@ const mapStateToProps = (state: RootState) => {
 
 const mapDispatchToProps = {
     onContextMenu: openContextMenu,
+    onAddUser: openAddGroupMembersDialog,
 };
 
 export interface GroupDetailsPanelProps {

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 76c7d251ed884e414099c985b6b0cbbb40c9e003..695834a69bf1aecb8ebcfaa5196ebc373a81e744 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -82,6 +82,7 @@ import { GroupAttributesDialog } from '~/views-components/groups-dialog/attribut
 import { GroupDetailsPanel } from '~/views/group-details-panel/group-details-panel';
 import { RemoveGroupMemberDialog } from '~/views-components/groups-dialog/member-remove-dialog';
 import { GroupMemberAttributesDialog } from '~/views-components/groups-dialog/member-attributes-dialog';
+import { AddGroupMembersDialog } from '~/views-components/dialog-forms/add-group-member-dialog';
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -169,6 +170,7 @@ export const WorkbenchPanel =
             <Grid item>
                 <DetailsPanel />
             </Grid>
+            <AddGroupMembersDialog />
             <AdvancedTabDialog />
             <AttributesApiClientAuthorizationDialog />
             <AttributesComputeNodeDialog />