lang file anpassen + refactoring

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetDiff.js

@@ -25,7 +25,7 @@ class ChangesetDiff extends React.Component<Props> {
   render() {
     const { changeset, t } = this.props;
     if (!this.isDiffSupported(changeset)) {
-      return <Notification type="danger">{t("changesets.diff.not-supported")}</Notification>;
+      return <Notification type="danger">{t("changesets.changeset.diffNotSupported")}</Notification>;
     } else {
       const url = this.createUrl(changeset);
       return <LoadingDiff url={url} />;

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

@@ -11,12 +11,15 @@
     "name-invalid": "The repository name is invalid",
     "contact-invalid": "Contact must be a valid mail address"
   },
-  "overview": {
-    "title": "Repositories",
-    "subtitle": "Overview of available repositories",
-    "create-button": "Create"
+  "help": {
+    "nameHelpText": "The name of the repository. This name will be part of the repository url.",
+    "typeHelpText": "The type of the repository (e.g. Mercurial, Git or Subversion).",
+    "contactHelpText": "Email address of the person who is responsible for this repository.",
+    "descriptionHelpText": "A short description of the repository."
   },
-  "repository-root": {
+  "repositoryRoot": {
+    "errorTitle": "Error",
+    "errorSubtitle": "Unknown repository error",
     "menu": {
       "navigationLabel": "Repository Navigation",
       "informationNavLink": "Information",
@@ -25,29 +28,37 @@
       "settingsNavLink": "Settings",
       "editNavLink": "General",
       "permissionsNavLink": "Permissions"
-    },
-    "errorTitle": "Error",
-    "errorSubtitle": "Unknown repository error"
+    }
+  },
+  "overview": {
+    "title": "Repositories",
+    "subtitle": "Overview of available repositories",
+    "createButton": "Create"
   },
   "create": {
     "title": "Create Repository",
     "subtitle": "Create a new repository"
   },
-  "repository-form": {
-    "submit": "Save"
-  },
-  "edit-nav-link": {
-    "label": "Edit"
-  },
-  "delete-nav-action": {
-    "label": "Delete",
-    "confirm-alert": {
-      "title": "Delete repository",
-      "message": "Do you really want to delete the repository?",
-      "submit": "Yes",
-      "cancel": "No"
+  "changesets": {
+    "errorTitle": "Error",
+    "errorSubtitle": "Could not fetch changesets",
+    "branchSelectorLabel": "Branches",
+    "changeset": {
+      "description": "Description",
+      "summary": "Changeset {{id}} was committed {{time}}",
+      "diffNotSupported": "Diff of changesets is not supported by the type of repository",
+      "id": "ID",
+      "contact": "Contact",
+      "date": "Date"
+    },
+    "author": {
+      "name": "Author",
+      "mail": "Mail"
     }
   },
+  "repositoryForm": {
+    "submit": "Save"
+  },
   "sources": {
     "file-tree": {
       "name": "Name",
@@ -67,71 +78,54 @@
       "size": "Size"
     }
   },
-  "changesets": {
-    "diff": {
-      "not-supported": "Diff of changesets is not supported by the type of repository"
-    },
+  "permission": {
+    "user": "User",
+    "group": "Group",
     "error-title": "Error",
-    "error-subtitle": "Could not fetch changesets",
-    "changeset": {
-      "id": "ID",
-      "description": "Description",
-      "contact": "Contact",
-      "date": "Date",
-      "summary": "Changeset {{id}} was committed {{time}}"
+    "error-subtitle": "Unknown permissions error",
+    "name": "User or Group",
+    "type": "Type",
+    "group-permission": "Group Permission",
+    "user-permission": "User Permission",
+    "edit-permission": {
+      "delete-button": "Delete",
+      "save-button": "Save Changes"
     },
-    "author": {
-      "name": "Author",
-      "mail": "Mail"
+    "delete-permission-button": {
+      "label": "Delete",
+      "confirm-alert": {
+        "title": "Delete permission",
+        "message": "Do you really want to delete the permission?",
+        "submit": "Yes",
+        "cancel": "No"
+      }
+    },
+    "add-permission": {
+      "add-permission-heading": "Add new Permission",
+      "submit-button": "Submit",
+      "name-input-invalid": "Permission is not allowed to be empty! If it is not empty, your input name is invalid or it already exists!"
+    },
+    "help": {
+      "groupPermissionHelpText": "States if a permission is a group permission.",
+      "nameHelpText": "Manage permissions for a specific user or group",
+      "typeHelpText": "READ = read; WRITE = read and write; OWNER = read, write and also the ability to manage the properties and permissions"
+    },
+    "autocomplete": {
+      "no-group-options": "No group suggestion available",
+      "group-placeholder": "Enter group",
+      "no-user-options": "No user suggestion available",
+      "user-placeholder": "Enter user",
+      "loading": "Loading..."
     }
   },
-  "branch-selector": {
-    "label": "Branches"
-  },
-  "permission": {
-      "user": "User",
-      "group": "Group",
-      "error-title": "Error",
-      "error-subtitle": "Unknown permissions error",
-      "name": "User or Group",
-      "type": "Type",
-      "group-permission": "Group Permission",
-      "user-permission": "User Permission",
-      "edit-permission": {
-        "delete-button": "Delete",
-        "save-button": "Save Changes"
-      },
-      "delete-permission-button": {
-        "label": "Delete",
-        "confirm-alert": {
-          "title": "Delete permission",
-          "message": "Do you really want to delete the permission?",
-          "submit": "Yes",
-          "cancel": "No"
-        }
-      },
-      "add-permission": {
-        "add-permission-heading": "Add new Permission",
-        "submit-button": "Submit",
-        "name-input-invalid": "Permission is not allowed to be empty! If it is not empty, your input name is invalid or it already exists!"
-      },
-      "help": {
-        "groupPermissionHelpText": "States if a permission is a group permission.",
-        "nameHelpText": "Manage permissions for a specific user or group",
-        "typeHelpText": "READ = read; WRITE = read and write; OWNER = read, write and also the ability to manage the properties and permissions"
-      },
-      "autocomplete": {
-        "no-group-options": "No group suggestion available",
-        "group-placeholder": "Enter group",
-        "no-user-options": "No user suggestion available",
-        "user-placeholder": "Enter user",
-        "loading": "Loading..."
-      }
-  },
-  "help": {
-    "nameHelpText": "The name of the repository. This name will be part of the repository url.",
-    "typeHelpText": "The type of the repository (e.g. Mercurial, Git or Subversion).",
-    "contactHelpText": "Email address of the person who is responsible for this repository.",
-    "descriptionHelpText": "A short description of the repository."
+  "delete": {
+    "subtitle": "Delete Repository",
+    "button": "Delete",
+    "confirmAlert": {
+      "title": "Delete repository",
+      "message": "Do you really want to delete the repository?",
+      "submit": "Yes",
+      "cancel": "No"
+    }
   }
 }

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

@@ -10,46 +10,6 @@
     "creationDate": "Creation Date",
     "lastModified": "Last Modified"
   },
-  "users": {
-    "title": "Users",
-    "subtitle": "Create, read, update and delete users"
-  },
-  "create-user-button": {
-    "label": "Create"
-  },
-  "add-user": {
-    "title": "Create User",
-    "subtitle": "Create a new user"
-  },
-  "single-user": {
-    "menu": {
-      "navigationLabel": "User Navigation",
-      "informationNavLink": "Information",
-      "settingsNavLink": "Settings",
-      "editNavLink": "General",
-      "setPasswordNavLink": "Password"
-    },
-    "edit": {
-      "subtitle": "Edit User",
-      "button": "Submit"
-    },
-    "delete": {
-      "subtitle": "Delete User",
-      "button": "Delete",
-      "confirm-alert": {
-        "title": "Delete user",
-        "message": "Do you really want to delete the user?",
-        "submit": "Yes",
-        "cancel": "No"
-      }
-    },
-    "password": {
-      "button": "Set password",
-      "set-password-successful": "Password successfully set"
-    },
-    "errorTitle": "Error",
-    "errorSubtitle": "Unknown user error"
-  },
   "validation": {
     "mail-invalid": "This email is invalid",
     "name-invalid": "This name is invalid",
@@ -61,5 +21,43 @@
     "mailHelpText": "Email address of the user.",
     "adminHelpText": "An administrator is able to create, modify and delete repositories, groups and users.",
     "activeHelpText": "Activate or deactive the user."
+  },
+  "users": {
+    "title": "Users",
+    "subtitle": "Create, read, update and delete users",
+    "createButton": "Create"
+  },
+  "singleUser": {
+    "errorTitle": "Error",
+    "errorSubtitle": "Unknown user error",
+    "menu": {
+      "navigationLabel": "User Navigation",
+      "informationNavLink": "Information",
+      "settingsNavLink": "Settings",
+      "editNavLink": "General",
+      "setPasswordNavLink": "Password"
+    }
+  },
+  "addUser": {
+    "title": "Create User",
+    "subtitle": "Create a new user"
+  },
+  "delete": {
+    "subtitle": "Delete User",
+    "button": "Delete",
+    "confirm-alert": {
+      "title": "Delete user",
+      "message": "Do you really want to delete the user?",
+      "submit": "Yes",
+      "cancel": "No"
+    }
+  },
+  "singleUserPassword": {
+    "button": "Set password",
+    "setPasswordSuccessful": "Password successfully set"
+  },
+  "userForm": {
+    "subtitle": "Edit User",
+    "button": "Submit"
   }
 }

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

@@ -24,15 +24,15 @@ class DeleteRepo extends React.Component<Props> {
   confirmDelete = () => {
     const { t } = this.props;
     confirmAlert({
-      title: t("repository.delete.confirm-alert.title"),
-      message: t("repository.delete.confirm-alert.message"),
+      title: t("delete.confirmAlert.title"),
+      message: t("delete.confirmAlert.message"),
       buttons: [
         {
-          label: t("repository.delete.confirm-alert.submit"),
+          label: t("delete.confirmAlert.submit"),
           onClick: () => this.delete()
         },
         {
-          label: t("repository.delete.confirm-alert.cancel"),
+          label: t("delete.confirmAlert.cancel"),
           onClick: () => null
         }
       ]
@@ -53,11 +53,11 @@ class DeleteRepo extends React.Component<Props> {
 
     return (
       <>
-        <Subtitle subtitle={t("repository.delete.subtitle")} />
+        <Subtitle subtitle={t("delete.subtitle")} />
         <div className="columns">
           <div className="column">
             <DeleteButton
-              label={t("repository.delete.button")}
+              label={t("delete.button")}
               action={action}
             />
           </div>

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

@@ -15,7 +15,7 @@ class EditNavLink extends React.Component<Props> {
       return null;
     }
     const { editUrl, t } = this.props;
-    return <NavLink to={editUrl} label={t("repository-root.menu.editNavLink")} />;
+    return <NavLink to={editUrl} label={t("repositoryRoot.menu.editNavLink")} />;
   }
 }
 

scm-ui/src/repos/components/EditNavLink.test.js

@@ -33,6 +33,6 @@ describe("EditNavLink", () => {
       <EditNavLink repository={repository} editUrl="" />,
       options.get()
     );
-    expect(navLink.text()).toBe("edit-nav-link.label");
+    expect(navLink.text()).toBe("repositoryRoot.menu.editNavLink");
   });
 });

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

@@ -20,7 +20,7 @@ class PermissionsNavLink extends React.Component<Props> {
     }
     const { permissionUrl, t } = this.props;
     return (
-      <NavLink to={permissionUrl} label={t("repository-root.menu.permissionsNavLink")} />
+      <NavLink to={permissionUrl} label={t("repositoryRoot.menu.permissionsNavLink")} />
     );
   }
 }

scm-ui/src/repos/components/form/RepositoryForm.js

@@ -83,32 +83,29 @@ class RepositoryForm extends React.Component<Props, State> {
     const repository = this.state.repository;
 
     return (
-      <>
-        <Subtitle subtitle={t("repository.edit.subtitle")} />
-        <form onSubmit={this.submit}>
-          {this.renderCreateOnlyFields()}
-          <InputField
-            label={t("repository.contact")}
-            onChange={this.handleContactChange}
-            value={repository ? repository.contact : ""}
-            validationError={this.state.contactValidationError}
-            errorMessage={t("validation.contact-invalid")}
-            helpText={t("help.contactHelpText")}
-          />
+      <form onSubmit={this.submit}>
+        {this.renderCreateOnlyFields()}
+        <InputField
+          label={t("repository.contact")}
+          onChange={this.handleContactChange}
+          value={repository ? repository.contact : ""}
+          validationError={this.state.contactValidationError}
+          errorMessage={t("validation.contact-invalid")}
+          helpText={t("help.contactHelpText")}
+        />
 
-          <Textarea
-            label={t("repository.description")}
-            onChange={this.handleDescriptionChange}
-            value={repository ? repository.description : ""}
-            helpText={t("help.descriptionHelpText")}
-          />
-          <SubmitButton
-            disabled={!this.isValid()}
-            loading={loading}
-            label={t("repository-form.submit")}
-          />
-        </form>
-      </>
+        <Textarea
+          label={t("repository.description")}
+          onChange={this.handleDescriptionChange}
+          value={repository ? repository.description : ""}
+          helpText={t("help.descriptionHelpText")}
+        />
+        <SubmitButton
+          disabled={!this.isValid()}
+          loading={loading}
+          label={t("repositoryForm.submit")}
+        />
+      </form>
     );
   }
 

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

@@ -37,8 +37,8 @@ class ChangesetView extends React.Component<Props> {
     if (error) {
       return (
         <ErrorPage
-          title={t("changeset-error.title")}
-          subtitle={t("changeset-error.subtitle")}
+          title={t("changesets.errorTitle")}
+          subtitle={t("changesets.errorSubtitle")}
           error={error}
         />
       );

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

@@ -101,7 +101,7 @@ class BranchRoot extends React.Component<Props> {
     if (repository._links.branches) {
       return (
         <BranchSelector
-          label={t("branch-selector.label")}
+          label={t("changesets.branchSelectorLabel")}
           branches={branches}
           selectedBranch={selected}
           selected={(b: Branch) => {

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

@@ -90,7 +90,7 @@ class Overview extends React.Component<Props> {
     if (showCreateButton) {
       return (
         <CreateButton
-          label={t("overview.create-button")}
+          label={t("overview.createButton")}
           link="/repos/create"
         />
       );

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

@@ -78,8 +78,8 @@ class RepositoryRoot extends React.Component<Props> {
     if (error) {
       return (
         <ErrorPage
-          title={t("repository-root.errorTitle")}
-          subtitle={t("repository-root.errorSubtitle")}
+          title={t("repositoryRoot.errorTitle")}
+          subtitle={t("repositoryRoot.errorSubtitle")}
           error={error}
         />
       );
@@ -166,13 +166,13 @@ class RepositoryRoot extends React.Component<Props> {
           </div>
           <div className="column">
             <Navigation>
-              <Section label={t("repository-root.menu.navigationLabel")}>
-                <NavLink to={url} label={t("repository-root.menu.informationNavLink")} />
+              <Section label={t("repositoryRoot.menu.navigationLabel")}>
+                <NavLink to={url} label={t("repositoryRoot.menu.informationNavLink")} />
                 <RepositoryNavLink
                   repository={repository}
                   linkName="changesets"
                   to={`${url}/changesets/`}
-                  label={t("repository-root.menu.historyNavLink")}
+                  label={t("repositoryRoot.menu.historyNavLink")}
                   activeWhenMatch={this.matches}
                   activeOnlyWhenExact={false}
                 />
@@ -180,23 +180,23 @@ class RepositoryRoot extends React.Component<Props> {
                   repository={repository}
                   linkName="sources"
                   to={`${url}/sources`}
-                  label={t("repository-root.menu.sourcesNavLink")}
+                  label={t("repositoryRoot.menu.sourcesNavLink")}
                   activeOnlyWhenExact={false}
                 />
+                <ExtensionPoint
+                  name="repository.navigation"
+                  props={extensionProps}
+                  renderAll={true}
+                />
                 <SubNavigation
                   to={`${url}/settings/general`}
-                  label={t("repository-root.menu.settingsNavLink")}
+                  label={t("repositoryRoot.menu.settingsNavLink")}
                 >
                   <NavLink repository={repository} editUrl={`${url}/settings/general`} />
                   <PermissionsNavLink
                     permissionUrl={`${url}/settings/permissions`}
                     repository={repository}
                   />
-                  <ExtensionPoint
-                    name="repository.navigation"
-                    props={extensionProps}
-                    renderAll={true}
-                  />
                 </SubNavigation>
               </Section>
             </Navigation>

scm-ui/src/repos/sources/containers/Sources.js

@@ -118,7 +118,7 @@ class Sources extends React.Component<Props> {
         <BranchSelector
           branches={branches}
           selectedBranch={revision}
-          label={t("branch-selector.label")}
+          label={t("changesets.branchSelectorLabel")}
           selected={(b: Branch) => {
             this.branchSelected(b);
           }}

scm-ui/src/users/components/DeleteUser.js

@@ -38,15 +38,15 @@ class DeleteUser extends React.Component<Props> {
   confirmDelete = () => {
     const { t } = this.props;
     confirmAlert({
-      title: t("single-user.delete.confirm-alert.title"),
-      message: t("single-user.delete.confirm-alert.message"),
+      title: t("delete.confirm-alert.title"),
+      message: t("delete.confirm-alert.message"),
       buttons: [
         {
-          label: t("single-user.delete.confirm-alert.submit"),
+          label: t("delete.confirm-alert.submit"),
           onClick: () => this.deleteUser()
         },
         {
-          label: t("single-user.delete.confirm-alert.cancel"),
+          label: t("delete.confirm-alert.cancel"),
           onClick: () => null
         }
       ]
@@ -66,11 +66,11 @@ class DeleteUser extends React.Component<Props> {
     }
     return (
       <>
-        <Subtitle subtitle={t("single-user.delete.subtitle")} />
+        <Subtitle subtitle={t("delete.subtitle")} />
         <div className="columns">
           <div className="column">
             <DeleteButton
-              label={t("single-user.delete.button")}
+              label={t("delete.button")}
               action={action}
             />
           </div>

scm-ui/src/users/components/SetUserPassword.js

@@ -90,7 +90,7 @@ class SetUserPassword extends React.Component<Props, State> {
       message = (
         <Notification
           type={"success"}
-          children={t("single-user.password.set-password-successful")}
+          children={t("singleUserPassword.setPasswordSuccessful")}
           onClose={() => this.onClose()}
         />
       );
@@ -108,7 +108,7 @@ class SetUserPassword extends React.Component<Props, State> {
         <SubmitButton
           disabled={!this.state.passwordValid}
           loading={loading}
-          label={t("single-user.password.button")}
+          label={t("singleUserPassword.button")}
         />
       </form>
     );

scm-ui/src/users/components/UserForm.js

@@ -106,7 +106,7 @@ class UserForm extends React.Component<Props, State> {
     }
     return (
       <>
-        <Subtitle subtitle={t("single-user.edit.subtitle")} />
+        <Subtitle subtitle={t("userForm.subtitle")} />
         <form onSubmit={this.submit}>
           <div className="columns">
             <div className="column is-half">
@@ -153,7 +153,7 @@ class UserForm extends React.Component<Props, State> {
               <SubmitButton
                 disabled={!this.isValid()}
                 loading={loading}
-                label={t("single-user.edit.button")}
+                label={t("userForm.button")}
               />
             </div>
           </div>

scm-ui/src/users/components/buttons/CreateUserButton.js

@@ -1,20 +0,0 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import { CreateButton } from "@scm-manager/ui-components";
-
-// TODO remove
-type Props = {
-  t: string => string
-};
-
-class CreateUserButton extends React.Component<Props> {
-  render() {
-    const { t } = this.props;
-    return (
-      <CreateButton label={t("create-user-button.label")} link="/users/add" />
-    );
-  }
-}
-
-export default translate("users")(CreateUserButton);

scm-ui/src/users/components/navLinks/GeneralUserNavLink.js

@@ -17,7 +17,7 @@ class GeneralUserNavLink extends React.Component<Props> {
     if (!this.isEditable()) {
       return null;
     }
-    return <NavLink label={t("single-user.menu.editNavLink")} to={editUrl} />;
+    return <NavLink label={t("singleUser.menu.editNavLink")} to={editUrl} />;
   }
 
   isEditable = () => {

scm-ui/src/users/components/navLinks/SetPasswordNavLink.js

@@ -17,7 +17,7 @@ class ChangePasswordNavLink extends React.Component<Props> {
     if (!this.hasPermissionToSetPassword()) {
       return null;
     }
-    return <NavLink label={t("single-user.menu.setPasswordNavLink")} to={passwordUrl} />;
+    return <NavLink label={t("singleUser.menu.setPasswordNavLink")} to={passwordUrl} />;
   }
 
   hasPermissionToSetPassword = () => {

scm-ui/src/users/containers/AddUser.js

@@ -47,8 +47,8 @@ class AddUser extends React.Component<Props> {
 
     return (
       <Page
-        title={t("add-user.title")}
-        subtitle={t("add-user.subtitle")}
+        title={t("addUser.title")}
+        subtitle={t("addUser.subtitle")}
         error={error}
         showContentOnError={true}
       >

scm-ui/src/users/containers/SingleUser.js

@@ -64,8 +64,8 @@ class SingleUser extends React.Component<Props> {
     if (error) {
       return (
         <ErrorPage
-          title={t("single-user.errorTitle")}
-          subtitle={t("single-user.errorSubtitle")}
+          title={t("singleUser.errorTitle")}
+          subtitle={t("singleUser.errorSubtitle")}
           error={error}
         />
       );
@@ -93,14 +93,14 @@ class SingleUser extends React.Component<Props> {
           </div>
           <div className="column">
             <Navigation>
-              <Section label={t("single-user.menu.navigationLabel")}>
+              <Section label={t("singleUser.menu.navigationLabel")}>
                 <NavLink
                   to={`${url}`}
-                  label={t("single-user.menu.informationNavLink")}
+                  label={t("singleUser.menu.informationNavLink")}
                 />
                 <SubNavigation
                   to={`${url}/settings/general`}
-                  label={t("single-user.menu.settingsNavLink")}
+                  label={t("singleUser.menu.settingsNavLink")}
                 >
                   <GeneralUserNavLink
                     user={user}

scm-ui/src/users/containers/Users.js

@@ -1,143 +1,143 @@
-// @flow
-import React from "react";
-import type { History } from "history";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-
-import {
-  fetchUsersByPage,
-  fetchUsersByLink,
-  getUsersFromState,
-  selectListAsCollection,
-  isPermittedToCreateUsers,
-  isFetchUsersPending,
-  getFetchUsersFailure
-} from "../modules/users";
-
-import { Page, Paginator } from "@scm-manager/ui-components";
-import { UserTable } from "./../components/table";
-import type { User, PagedCollection } from "@scm-manager/ui-types";
-import CreateUserButton from "../components/buttons/CreateUserButton";
-import { getUsersLink } from "../../modules/indexResource";
-
-type Props = {
-  users: User[],
-  loading: boolean,
-  error: Error,
-  canAddUsers: boolean,
-  list: PagedCollection,
-  page: number,
-  usersLink: string,
-
-  // context objects
-  t: string => string,
-  history: History,
-
-  // dispatch functions
-  fetchUsersByPage: (link: string, page: number) => void,
-  fetchUsersByLink: (link: string) => void
-};
-
-class Users extends React.Component<Props> {
-  componentDidMount() {
-    this.props.fetchUsersByPage(this.props.usersLink, this.props.page);
-  }
-
-  onPageChange = (link: string) => {
-    this.props.fetchUsersByLink(link);
-  };
-
-  /**
-   * reflect page transitions in the uri
-   */
-  componentDidUpdate() {
-    const { page, list } = this.props;
-    if (list && (list.page || list.page === 0)) {
-      // backend starts paging by 0
-      const statePage: number = list.page + 1;
-      if (page !== statePage) {
-        this.props.history.push(`/users/${statePage}`);
-      }
-    }
-  }
-
-  render() {
-    const { users, loading, error, t } = this.props;
-    return (
-      <Page
-        title={t("users.title")}
-        subtitle={t("users.subtitle")}
-        loading={loading || !users}
-        error={error}
-      >
-        <UserTable users={users} />
-        {this.renderPaginator()}
-        {this.renderCreateButton()}
-      </Page>
-    );
-  }
-
-  renderPaginator() {
-    const { list } = this.props;
-    if (list) {
-      return <Paginator collection={list} onPageChange={this.onPageChange} />;
-    }
-    return null;
-  }
-
-  renderCreateButton() {
-    if (this.props.canAddUsers) {
-      return <CreateUserButton />;
-    } else {
-      return;
-    }
-  }
-}
-
-const getPageFromProps = props => {
-  let page = props.match.params.page;
-  if (page) {
-    page = parseInt(page, 10);
-  } else {
-    page = 1;
-  }
-  return page;
-};
-
-const mapStateToProps = (state, ownProps) => {
-  const users = getUsersFromState(state);
-  const loading = isFetchUsersPending(state);
-  const error = getFetchUsersFailure(state);
-
-  const usersLink = getUsersLink(state);
-
-  const page = getPageFromProps(ownProps);
-  const canAddUsers = isPermittedToCreateUsers(state);
-  const list = selectListAsCollection(state);
-
-  return {
-    users,
-    loading,
-    error,
-    canAddUsers,
-    list,
-    page,
-    usersLink
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchUsersByPage: (link: string, page: number) => {
-      dispatch(fetchUsersByPage(link, page));
-    },
-    fetchUsersByLink: (link: string) => {
-      dispatch(fetchUsersByLink(link));
-    }
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(translate("users")(Users));
+// @flow
+import React from "react";
+import type { History } from "history";
+import { connect } from "react-redux";
+import { translate } from "react-i18next";
+
+import {
+  fetchUsersByPage,
+  fetchUsersByLink,
+  getUsersFromState,
+  selectListAsCollection,
+  isPermittedToCreateUsers,
+  isFetchUsersPending,
+  getFetchUsersFailure
+} from "../modules/users";
+
+import { Page, CreateButton, Paginator } from "@scm-manager/ui-components";
+import { UserTable } from "./../components/table";
+import type { User, PagedCollection } from "@scm-manager/ui-types";
+import { getUsersLink } from "../../modules/indexResource";
+
+type Props = {
+  users: User[],
+  loading: boolean,
+  error: Error,
+  canAddUsers: boolean,
+  list: PagedCollection,
+  page: number,
+  usersLink: string,
+
+  // context objects
+  t: string => string,
+  history: History,
+
+  // dispatch functions
+  fetchUsersByPage: (link: string, page: number) => void,
+  fetchUsersByLink: (link: string) => void
+};
+
+class Users extends React.Component<Props> {
+  componentDidMount() {
+    this.props.fetchUsersByPage(this.props.usersLink, this.props.page);
+  }
+
+  onPageChange = (link: string) => {
+    this.props.fetchUsersByLink(link);
+  };
+
+  /**
+   * reflect page transitions in the uri
+   */
+  componentDidUpdate() {
+    const { page, list } = this.props;
+    if (list && (list.page || list.page === 0)) {
+      // backend starts paging by 0
+      const statePage: number = list.page + 1;
+      if (page !== statePage) {
+        this.props.history.push(`/users/${statePage}`);
+      }
+    }
+  }
+
+  render() {
+    const { users, loading, error, t } = this.props;
+    return (
+      <Page
+        title={t("users.title")}
+        subtitle={t("users.subtitle")}
+        loading={loading || !users}
+        error={error}
+      >
+        <UserTable users={users} />
+        {this.renderPaginator()}
+        {this.renderCreateButton()}
+      </Page>
+    );
+  }
+
+  renderPaginator() {
+    const { list } = this.props;
+    if (list) {
+      return <Paginator collection={list} onPageChange={this.onPageChange} />;
+    }
+    return null;
+  }
+
+  renderCreateButton() {
+    const { t } = this.props;
+    if (this.props.canAddUsers) {
+      return <CreateButton label={t("users.createButton")} link="/users/add" />;
+    } else {
+      return;
+    }
+  }
+}
+
+const getPageFromProps = props => {
+  let page = props.match.params.page;
+  if (page) {
+    page = parseInt(page, 10);
+  } else {
+    page = 1;
+  }
+  return page;
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const users = getUsersFromState(state);
+  const loading = isFetchUsersPending(state);
+  const error = getFetchUsersFailure(state);
+
+  const usersLink = getUsersLink(state);
+
+  const page = getPageFromProps(ownProps);
+  const canAddUsers = isPermittedToCreateUsers(state);
+  const list = selectListAsCollection(state);
+
+  return {
+    users,
+    loading,
+    error,
+    canAddUsers,
+    list,
+    page,
+    usersLink
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchUsersByPage: (link: string, page: number) => {
+      dispatch(fetchUsersByPage(link, page));
+    },
+    fetchUsersByLink: (link: string) => {
+      dispatch(fetchUsersByLink(link));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate("users")(Users));