improve user and repository detail pages

scm-ui/public/locales/en/repos.json

@@ -3,7 +3,9 @@
     "name": "Name",
     "type": "Type",
     "contact": "Contact",
-    "description": "Description"
+    "description": "Description",
+    "creationDate": "Creation Date",
+    "lastModified": "Last Modified"
   },
   "validation": {
     "name-invalid": "The repository name is invalid",
@@ -16,7 +18,9 @@
   },
   "repository-root": {
     "error-title": "Error",
-    "error-subtitle": "Unknown repository error"
+    "error-subtitle": "Unknown repository error",
+    "actions-label": "Actions",
+    "back-label": "Back"
   },
   "create": {
     "title": "Create Repository",

scm-ui/public/locales/en/users.json

@@ -5,7 +5,10 @@
     "mail": "E-Mail",
     "password": "Password",
     "admin": "Admin",
-    "active": "Active"
+    "active": "Active",
+    "type": "Type",
+    "creationDate": "Creation Date",
+    "lastModified": "Last Modified"
   },
   "users": {
     "title": "Users",

scm-ui/src/components/MailLink.js

@@ -0,0 +1,18 @@
+// @flow
+import React from "react";
+
+type Props = {
+  address?: string
+};
+
+class MailLink extends React.Component<Props> {
+  render() {
+    const { address } = this.props;
+    if (!address) {
+      return null;
+    }
+    return <a href={"mailto: " + address}>{address}</a>;
+  }
+}
+
+export default MailLink;

scm-ui/src/repos/components/RepositoryDetails.js

@@ -1,16 +1,56 @@
 //@flow
 import React from "react";
-import type {Repository} from '../types/Repositories';
+import { translate } from "react-i18next";
+import type { Repository } from "../types/Repositories";
+import MailLink from "../../components/MailLink";
+import DateFromNow from "../../components/DateFromNow";
 
 type Props = {
-  repository: Repository
+  repository: Repository,
+  // context props
+  t: string => string
 };
 
 class RepositoryDetails extends React.Component<Props> {
   render() {
-    const { repository } = this.props;
+    const { repository, t } = this.props;
-    return <div>{repository.description}</div>;
+    return (
+      <table className="table">
+        <tbody>
+          <tr>
+            <td>{t("repository.name")}</td>
+            <td>{repository.name}</td>
+          </tr>
+          <tr>
+            <td>{t("repository.type")}</td>
+            <td>{repository.type}</td>
+          </tr>
+          <tr>
+            <td>{t("repository.contact")}</td>
+            <td>
+              <MailLink address={repository.contact} />
+            </td>
+          </tr>
+          <tr>
+            <td>{t("repository.description")}</td>
+            <td>{repository.description}</td>
+          </tr>
+          <tr>
+            <td>{t("repository.creationDate")}</td>
+            <td>
+              <DateFromNow date={repository.creationDate} />
+            </td>
+          </tr>
+          <tr>
+            <td>{t("repository.lastModified")}</td>
+            <td>
+              <DateFromNow date={repository.lastModified} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
   }
 }
 
-export default RepositoryDetails;
+export default translate("repos")(RepositoryDetails);

scm-ui/src/repos/containers/RepositoryRoot.js

@@ -1,15 +1,20 @@
 //@flow
 import React from "react";
-import {fetchRepo, getFetchRepoFailure, getRepository, isFetchRepoPending} from '../modules/repos';
+import {
+  fetchRepo,
+  getFetchRepoFailure,
+  getRepository,
+  isFetchRepoPending
+} from "../modules/repos";
 import { connect } from "react-redux";
-import {Route} from "react-router-dom"
+import { Route } from "react-router-dom";
-import type {Repository} from '../types/Repositories';
+import type { Repository } from "../types/Repositories";
-import {Page} from '../../components/layout';
+import { Page } from "../../components/layout";
-import Loading from '../../components/Loading';
+import Loading from "../../components/Loading";
-import ErrorPage from '../../components/ErrorPage';
+import ErrorPage from "../../components/ErrorPage";
 import { translate } from "react-i18next";
-import {Navigation} from '../../components/navigation';
+import { Navigation, NavLink, Section } from "../../components/navigation";
-import RepositoryDetails from '../components/RepositoryDetails';
+import RepositoryDetails from "../components/RepositoryDetails";
 
 type Props = {
   namespace: string,
@@ -44,7 +49,6 @@ class RepositoryRoot extends React.Component<Props> {
     return this.stripEndingSlash(this.props.match.url);
   };
 
-
   render() {
     const { loading, error, repository, t } = this.props;
 
@@ -59,27 +63,34 @@ class RepositoryRoot extends React.Component<Props> {
     }
 
     if (!repository || loading) {
-      return <Loading />
+      return <Loading />;
     }
 
     const url = this.matchedUrl();
 
-    return <Page title={repository.namespace + "/" + repository.name}>
+    return (
+      <Page title={repository.namespace + "/" + repository.name}>
         <div className="columns">
           <div className="column is-three-quarters">
-          <Route path={url} exact component={() => <RepositoryDetails repository={repository} />} />
+            <Route
+              path={url}
+              exact
+              component={() => <RepositoryDetails repository={repository} />}
+            />
           </div>
           <div className="column">
             <Navigation>
-
+              <Section label={t("repository-root.actions-label")}>
+                <NavLink to="/repos" label={t("repository-root.back-label")} />
+              </Section>
             </Navigation>
           </div>
         </div>
       </Page>
+    );
   }
 }
 
-
 const mapStateToProps = (state, ownProps) => {
   const { namespace, name } = ownProps.match.params;
   const repository = getRepository(state, namespace, name);
@@ -96,8 +107,8 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    fetchRepo : (namespace: string, name: string) => {
+    fetchRepo: (namespace: string, name: string) => {
-      dispatch(fetchRepo(namespace, name))
+      dispatch(fetchRepo(namespace, name));
     }
   };
 };

scm-ui/src/users/components/table/Details.js

@@ -3,6 +3,8 @@ import React from "react";
 import type { User } from "../../types/User";
 import { translate } from "react-i18next";
 import { Checkbox } from "../../../components/forms";
+import MailLink from "../../../components/MailLink";
+import DateFromNow from "../../../components/DateFromNow";
 
 type Props = {
   user: User,
@@ -25,7 +27,9 @@ class Details extends React.Component<Props> {
           </tr>
           <tr>
             <td>{t("user.mail")}</td>
-            <td>{user.mail}</td>
+            <td>
+              <MailLink address={user.mail} />
+            </td>
           </tr>
           <tr>
             <td>{t("user.admin")}</td>
@@ -39,6 +43,22 @@ class Details extends React.Component<Props> {
               <Checkbox checked={user.active} />
             </td>
           </tr>
+          <tr>
+            <td>{t("user.type")}</td>
+            <td>{user.type}</td>
+          </tr>
+          <tr>
+            <td>{t("user.creationDate")}</td>
+            <td>
+              <DateFromNow date={user.creationDate} />
+            </td>
+          </tr>
+          <tr>
+            <td>{t("user.lastModified")}</td>
+            <td>
+              <DateFromNow date={user.lastModified} />
+            </td>
+          </tr>
         </tbody>
       </table>
     );

scm-ui/src/users/types/User.js

@@ -8,5 +8,8 @@ export type User = {
   password: string,
   admin: boolean,
   active: boolean,
+  type?: string,
+  creationDate?: string,
+  lastModified?: string,
   _links: Links
 };