Move connections to a tab of user

src/App.js

@@ -5,7 +5,6 @@ import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { UserList, UserCreate, UserEdit } from "./components/users";
 import { RoomList } from "./components/rooms";
-import { ConnectionsShow } from "./components/connections";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
 import { ViewListIcon as RoomIcon } from "@material-ui/icons/ViewList";
@@ -37,7 +36,7 @@ const App = () => (
       icon={UserIcon}
     />
     <Resource name="rooms" list={RoomList} icon={RoomIcon} />
-    <Resource name="connections" show={ConnectionsShow} />
+    <Resource name="connections" />
   </Admin>
 );
 

src/components/connections.js

@@ -1,43 +0,0 @@
-import React from "react";
-import {
-  Datagrid,
-  Show,
-  SimpleForm,
-  TextField,
-  ArrayField,
-  DateField,
-} from "react-admin";
-
-export const ConnectionsShow = props => (
-  <Show {...props}>
-    <SimpleForm toolbar={false}>
-      <TextField source="user_id" label="resources.users.fields.id" />
-      <ArrayField
-        source="devices[].sessions[0].connections"
-        label="resources.connections.name"
-      >
-        <Datagrid style={{ width: "100%" }}>
-          <TextField source="ip" sortable={false} />
-          <DateField
-            source="last_seen"
-            showTime
-            options={{
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit",
-              second: "2-digit",
-            }}
-            sortable={false}
-          />
-          <TextField
-            source="user_agent"
-            sortable={false}
-            style={{ width: "100%" }}
-          />
-        </Datagrid>
-      </ArrayField>
-    </SimpleForm>
-  </Show>
-);

src/components/users.js

@@ -1,4 +1,6 @@
 import React from "react";
+import PhoneIcon from "@material-ui/icons/Phone";
+import PersonPinIcon from "@material-ui/icons/PersonPin";
 import {
   Datagrid,
   Create,
@@ -14,7 +16,10 @@ import {
   TextInput,
   ReferenceField,
   regex,
-  ShowButton,
+  TabbedForm,
+  FormTab,
+  ArrayField,
+  DateField,
 } from "react-admin";
 
 const UserFilter = props => (
@@ -57,7 +62,6 @@ export const UserList = props => (
       <BooleanField source="is_guest" sortable={false} />
       <BooleanField source="admin" sortable={false} />
       <BooleanField source="deactivated" sortable={false} />
-      <ShowButton basePath="connections" data="id" />
     </Datagrid>
   </List>
 );
@@ -81,12 +85,44 @@ export const UserCreate = props => (
 
 export const UserEdit = props => (
   <Edit {...props}>
-    <SimpleForm>
+    <TabbedForm>
-      <TextInput source="id" disabled />
+      <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
-      <TextInput source="displayname" />
+        <TextInput source="id" disabled />
-      <PasswordInput source="password" autoComplete="new-password" />
+        <TextInput source="displayname" />
-      <BooleanInput source="admin" />
+        <PasswordInput source="password" autoComplete="new-password" />
-      <BooleanInput source="deactivated" />
+        <BooleanInput source="admin" />
-    </SimpleForm>
+        <BooleanInput source="deactivated" />
+      </FormTab>
+      <FormTab label="resources.connections.name" icon={<PhoneIcon />}>
+        <ReferenceField reference="connections" source="id" addLabel={false}>
+          <ArrayField
+            source="devices[].sessions[0].connections"
+            label="resources.connections.name"
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="ip" sortable={false} />
+              <DateField
+                source="last_seen"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField
+                source="user_agent"
+                sortable={false}
+                style={{ width: "100%" }}
+              />
+            </Datagrid>
+          </ArrayField>
+        </ReferenceField>
+      </FormTab>
+    </TabbedForm>
   </Edit>
 );

src/i18n/de.js

@@ -15,6 +15,7 @@ export default {
   resources: {
     users: {
       name: "Benutzer",
+      backtolist: "Zurück zur Liste",
       fields: {
         avatar: "Avatar",
         id: "Benutzer-ID",

src/i18n/en.js

@@ -15,6 +15,7 @@ export default {
   resources: {
     users: {
       name: "User |||| Users",
+      backtolist: "Back to list",
       fields: {
         avatar: "Avatar",
         id: "User-ID",