reorder directory structure, add PermissionRoleDetail and Root

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

@@ -10,7 +10,6 @@
     "navLink": "Permission Roles",
     "title": "Permission Roles",
     "noPermissionRoles": "No permission roles found.",
-    "system": "System",
     "createButton": "Create Permission Role",
     "form": {
       "subtitle": "Edit Permission Role",
@@ -19,6 +18,10 @@
       "submit": "Save"
     }
   },
+  "role": {
+    "name": "Name",
+    "system": "System"
+  },
   "config-form": {
     "submit": "Submit",
     "submit-success-notification": "Configuration changed successfully!",

scm-ui/src/config/containers/Config.js

@@ -10,8 +10,9 @@ import type { Links } from "@scm-manager/ui-types";
 import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components";
 import { getLinks } from "../../modules/indexResource";
 import GlobalConfig from "./GlobalConfig";
-import GlobalPermissionRoles from "./GlobalPermissionRoles";
-import GlobalPermissionRoleForm from "./GlobalPermissionRoleForm";
+import PermissionRolesOverview from "../roles/containers/PermissionRolesOverview";
+import PermissionRoleRoot from "../roles/containers/PermissionRoleRoot";
+import CreatePermissionRole from "../roles/containers/CreatePermissionRole";
 
 type Props = {
   links: Links,
@@ -36,7 +37,7 @@ class Config extends React.Component<Props> {
 
   matchesRoles = (route: any) => {
     const url = this.matchedUrl();
-    const regex = new RegExp(`${url}/role/.+/edit`);
+    const regex = new RegExp(`${url}/role/.+/info`);
     return route.location.pathname.match(regex);
   };
 
@@ -54,16 +55,19 @@ class Config extends React.Component<Props> {
         <div className="columns">
           <div className="column is-three-quarters">
             <Route path={url} exact component={GlobalConfig} />
+            <Route
+              path={`${url}/role/:role`}
+              component={() => <PermissionRoleRoot baseUrl={`${url}/roles`} />}
+            />
             <Route
               path={`${url}/roles`}
               exact
-              render={() => (
-                <GlobalPermissionRoles
-                  baseUrl={`${url}/role`}
+              render={() => <PermissionRolesOverview baseUrl={`${url}/role`} />}
             />
-              )}
+            <Route
+              path={`${url}/roles/create`}
+              render={() => <CreatePermissionRole />}
             />
-            <Route path={`${url}/role`} component={GlobalPermissionRoleForm} />
             <ExtensionPoint
               name="config.route"
               props={extensionProps}
@@ -78,9 +82,10 @@ class Config extends React.Component<Props> {
                   label={t("config.globalConfigurationNavLink")}
                 />
                 <NavLink
-                  to={`${url}/roles`}
+                  to={`${url}/roles/`}
                   label={t("roles.navLink")}
                   activeWhenMatch={this.matchesRoles}
+                  activeOnlyWhenExact={false}
                 />
                 <ExtensionPoint
                   name="config.navigation"

scm-ui/src/config/roles/components/PermissionRoleDetail.js

@@ -0,0 +1,29 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { Role } from "@scm-manager/ui-types";
+import SystemRoleTag from "./SystemRoleTag";
+
+type Props = {
+  role: Role,
+
+  // context props
+  t: string => string,
+};
+
+class PermissionRoleDetail extends React.Component<Props> {
+  render() {
+    const { role, t } = this.props;
+
+    return (
+      <div className="media">
+        <div className="media-content subtitle">
+          <strong>{t("role.name")}:</strong> {role.name}{" "}
+          <SystemRoleTag system={!role._links.update} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default translate("config")(PermissionRoleDetail);

scm-ui/src/config/roles/components/PermissionRoleRow.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import type { Role } from "@scm-manager/ui-types";
-import SystemRoleTag from "../SystemRoleTag";
+import SystemRoleTag from "./SystemRoleTag";
 
 type Props = {
   baseUrl: string,
@@ -11,19 +11,16 @@ type Props = {
 
 class PermissionRoleRow extends React.Component<Props> {
   renderLink(to: string, label: string, system?: boolean) {
-    if (!system) {
-      return <Link to={to}>{label}</Link>;
-    }
     return (
-      <>
+      <Link to={to}>
         {label} <SystemRoleTag system={system} />
-      </>
+      </Link>
     );
   }
 
   render() {
     const { baseUrl, role } = this.props;
-    const to = `${baseUrl}/${encodeURIComponent(role.name)}/edit`;
+    const to = `${baseUrl}/${encodeURIComponent(role.name)}/info`;
     return (
       <tr>
         <td>{this.renderLink(to, role.name, !role._links.update)}</td>

scm-ui/src/config/roles/components/SystemRoleTag.js

@@ -24,7 +24,7 @@ class SystemRoleTag extends React.Component<Props> {
     if (system) {
       return (
         <span className={classNames("tag is-dark", classes.tag)}>
-          {t("roles.system")}
+          {t("role.system")}
         </span>
       );
     }

scm-ui/src/config/roles/containers/CreatePermissionRole.js

@@ -0,0 +1,12 @@
+// @flow
+import React from "react";
+
+type Props = {};
+
+class CreatePermissionRole extends React.Component<Props> {
+  render() {
+    return <>yep</>;
+  }
+}
+
+export default CreatePermissionRole;

scm-ui/src/config/roles/containers/GlobalPermissionRoleForm.js

@@ -4,14 +4,14 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import type { Role } from "@scm-manager/ui-types";
 import { InputField, SubmitButton } from "@scm-manager/ui-components";
-import PermissionCheckbox from "../../repos/permissions/components/PermissionCheckbox";
+import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
 import {
   fetchAvailableVerbs,
   getFetchVerbsFailure,
   getVerbsFromState,
   isFetchVerbsPending
 } from "../modules/roles";
-import { getRepositoryVerbsLink } from "../../modules/indexResource";
+import { getRepositoryVerbsLink } from "../../../modules/indexResource";
 
 type Props = {
   role?: Role,

scm-ui/src/config/roles/containers/PermissionRoleRoot.js

@@ -0,0 +1,103 @@
+//@flow
+import React from "react";
+import { connect } from "react-redux";
+import { Redirect, Route, Switch, withRouter } from "react-router-dom";
+import type {Role} from "@scm-manager/ui-types";
+import {ErrorNotification, Loading} from "@scm-manager/ui-components";
+import { getRolesLink } from "../../../modules/indexResource";
+import {
+  fetchRoleByName,
+  getRoleByName,
+  isFetchRolePending,
+  getFetchRoleFailure
+} from "../modules/roles";
+import PermissionRoleDetail from "../components/PermissionRoleDetail";
+
+type Props = {
+  roleLink: string,
+  roleName: string,
+  role: Role,
+  loading: boolean,
+  error: Error,
+
+  // context props
+  match: any,
+  t: string => string,
+
+  // dispatch functions
+  fetchRoleByName: (roleLink: string, roleName: string) => void
+};
+
+class PermissionRoleRoot extends React.Component<Props> {
+  componentDidMount() {
+    const { fetchRoleByName, roleLink, roleName } = this.props;
+    fetchRoleByName(roleLink, roleName);
+  }
+
+  stripEndingSlash = (url: string) => {
+    if (url.endsWith("/")) {
+      return url.substring(0, url.length - 1);
+    }
+    return url;
+  };
+
+  matchedUrl = () => {
+    return this.stripEndingSlash(this.props.match.url);
+  };
+
+  render() {
+    const { loading, error, role} = this.props;
+
+    const url = this.matchedUrl();
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (loading || !role) {
+      return <Loading />;
+    }
+
+    return (
+      <Switch>
+        <Redirect exact from={url} to={`${url}/info`} />
+        <Route
+          path={`${url}/info`}
+          component={() => (
+            <PermissionRoleDetail role={role} />
+          )}
+        />
+      </Switch>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const roleName = decodeURIComponent(ownProps.match.params.role);
+  const role = getRoleByName(state, roleName);
+  const loading = isFetchRolePending(state, roleName);
+  const error = getFetchRoleFailure(state, roleName);
+  const roleLink = getRolesLink(state);
+  return {
+    roleName,
+    role,
+    loading,
+    error,
+    roleLink
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchRoleByName: (roleLink: string, roleName: string) => {
+      dispatch(fetchRoleByName(roleLink, roleName));
+    }
+  };
+};
+
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(PermissionRoleRoot)
+);

scm-ui/src/config/roles/containers/PermissionRolesOverview.js

@@ -21,8 +21,9 @@ import {
   isFetchRolesPending,
   getFetchRolesFailure
 } from "../modules/roles";
-import PermissionRoleTable from "../components/table/PermissionRoleTable";
-import { getRolesLink } from "../../modules/indexResource";
+import PermissionRoleTable from "../components/PermissionRoleTable";
+import { getRolesLink } from "../../../modules/indexResource";
+
 type Props = {
   baseUrl: string,
   roles: Role[],
@@ -41,7 +42,7 @@ type Props = {
   fetchRolesByPage: (link: string, page: number) => void
 };
 
-class GlobalPermissionRoles extends React.Component<Props> {
+class PermissionRolesOverview extends React.Component<Props> {
   componentDidMount() {
     const { fetchRolesByPage, rolesLink, page } = this.props;
     fetchRolesByPage(rolesLink, page);
@@ -119,4 +120,4 @@ const mapDispatchToProps = dispatch => {
 export default withRouter(connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("config")(GlobalPermissionRoles)));
+)(translate("config")(PermissionRolesOverview)));

scm-ui/src/config/roles/modules/roles.js

@@ -1,10 +1,10 @@
 // @flow
 import { apiClient } from "@scm-manager/ui-components";
-import { isPending } from "../../modules/pending";
-import { getFailure } from "../../modules/failure";
-import * as types from "../../modules/types";
+import { isPending } from "../../../modules/pending";
+import { getFailure } from "../../../modules/failure";
+import * as types from "../../../modules/types";
 import { combineReducers, Dispatch } from "redux";
-import type { Action, PagedCollection, Role } from "@scm-manager/ui-types";
+import type {Action, PagedCollection, Repository, Role} from "@scm-manager/ui-types";
 
 export const FETCH_ROLES = "scm/roles/FETCH_ROLES";
 export const FETCH_ROLES_PENDING = `${FETCH_ROLES}_${types.PENDING_SUFFIX}`;
@@ -469,6 +469,17 @@ export function getRolesFromState(state: Object) {
   return roleEntries;
 }
 
+export function getRoleCreateLink(state: Object) {
+  if (
+    state &&
+    state.list &&
+    state.list._links &&
+    state.list._links.create
+  ) {
+    return state.list._links.create.href;
+  }
+}
+
 export function getVerbsFromState(state: Object) {
   return state.roles.verbs.verbs;
 }

scm-ui/src/createReduxStore.js

@@ -15,7 +15,7 @@ import pending from "./modules/pending";
 import failure from "./modules/failure";
 import permissions from "./repos/permissions/modules/permissions";
 import config from "./config/modules/config";
-import roles from "./config/modules/roles";
+import roles from "./config/roles/modules/roles";
 import namespaceStrategies from "./config/modules/namespaceStrategies";
 import indexResources from "./modules/indexResource";