Offer invitations in room creation

Turns the "Create Room" form into a tabbed form with
tabs that mimic the room display. In the "Members" tab
an AutocompleteArrayInput allows selecting multiple
users by their displayname.

The displayname is also what is displayed ìn the
invitations list.

Creating the room immediately sends out the invitations
as well.

Change-Id: I3915144114ffe4c629848363c9cb7917634d04d8

src/components/rooms.js

@@ -1,15 +1,17 @@
 import React from "react";
 import {
-  BooleanField,
+  AutocompleteArrayInput,
   BooleanInput,
   Create,
   Datagrid,
+  FormTab,
   List,
   Pagination,
   ReferenceArrayField,
+  ReferenceArrayInput,
   Show,
-  SimpleForm,
   Tab,
+  TabbedForm,
   TabbedShowLayout,
   TextField,
   TextInput,
@@ -100,20 +102,37 @@ const validateHasAliasIfPublic = formdata => {
 
 export const RoomCreate = props => (
   <Create {...props}>
-    <SimpleForm validate={validateHasAliasIfPublic}>
-      <TextInput
-        source="name"
-        parse={removeLeadingWhitespace}
-        validate={validateDisplayName}
-      />
-      <TextInput
-        source="canonical_alias"
-        parse={fv => replaceAllWhitespace(removeLeadingSigil(fv))}
-        validate={validateAlias}
-        placeholder="#"
-      />
-      <BooleanInput source="public" label="synapseadmin.rooms.make_public" />
-    </SimpleForm>
+    <TabbedForm validate={validateHasAliasIfPublic}>
+      <FormTab label="synapseadmin.rooms.details" icon={<ViewListIcon />}>
+        <TextInput
+          source="name"
+          parse={removeLeadingWhitespace}
+          validate={validateDisplayName}
+        />
+        <TextInput
+          source="canonical_alias"
+          parse={fv => replaceAllWhitespace(removeLeadingSigil(fv))}
+          validate={validateAlias}
+          placeholder="#"
+        />
+        <BooleanInput source="public" label="synapseadmin.rooms.make_public" />
+      </FormTab>
+      <FormTab
+        label="resources.rooms.fields.invite_members"
+        icon={<UserIcon />}
+      >
+        <ReferenceArrayInput
+          reference="users"
+          source="invitees"
+          filterToQuery={searchText => ({ user_id: searchText })}
+        >
+          <AutocompleteArrayInput
+            optionText="displayname"
+            suggestionText="displayname"
+          />
+        </ReferenceArrayInput>
+      </FormTab>
+    </TabbedForm>
   </Create>
 );
 

src/i18n/de.js

@@ -65,6 +65,8 @@ export default {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Mitglieder",
+        invite_members: "Mitglieder einladen",
+        invitees: "Einladungen",
       },
     },
     connections: {

src/i18n/en.js

@@ -65,6 +65,9 @@ export default {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Members",
+        invite_members: "Invite Members",
+
+        invitees: "Invitations",
       },
     },
     connections: {

src/synapse/dataProvider.js

@@ -23,6 +23,7 @@ const resourceMap = {
       is_guest: !!u.is_guest,
       admin: !!u.admin,
       deactivated: !!u.deactivated,
+      displayname: u.display_name || u.displayname,
     }),
     data: "users",
     total: json => json.total,
@@ -40,16 +41,23 @@ const resourceMap = {
     }),
     data: "rooms",
     total: json => json.total_rooms,
-    create: params => ({
-      method: "POST",
-      endpoint: "/_matrix/client/r0/createRoom",
-      body: {
-        name: params.data.name,
-        room_alias_name: params.data.canonical_alias,
-        visibility: params.data.public ? "public" : "private",
-      },
-      map: r => ({ id: r.room_id }),
-    }),
+    create: params => {
+      let invitees = params.data.invitees;
+      return {
+        method: "POST",
+        endpoint: "/_matrix/client/r0/createRoom",
+        body: {
+          name: params.data.name,
+          room_alias_name: params.data.canonical_alias,
+          visibility: params.data.public ? "public" : "private",
+          invite:
+            Array.isArray(invitees) && invitees.length > 0
+              ? invitees
+              : undefined,
+        },
+        map: r => ({ id: r.room_id }),
+      };
+    },
   },
   connections: {
     path: "/_synapse/admin/v1/whois",