refactoring

scm-ui/src/permissions/components/table/PermissionRow.js

@@ -1,23 +0,0 @@
-// @flow
-import React from "react";
-import type { Permission } from "../../types/Permissions";
-import { Checkbox } from "../../../components/forms";
-
-type Props = {
-  permission: Permission
-};
-
-export default class PermissionRow extends React.Component<Props> {
-  render() {
-    const { permission } = this.props;
-    return (
-      <tr>
-        <td>{permission.name}</td>
-        <td className="is-hidden-mobile">{permission.type}</td>
-        <td>
-          <Checkbox checked={permission ? permission.groupPermission : false} />
-        </td>
-      </tr>
-    );
-  }
-}

scm-ui/src/permissions/containers/Permissions.js

@@ -6,12 +6,12 @@ import {
   fetchPermissions,
   getFetchPermissionsFailure,
   isFetchPermissionsPending,
-  getPermissionsOfRepo,
+  getPermissionsOfRepo
 } from "../modules/permissions";
 import Loading from "../../components/Loading";
 import ErrorPage from "../../components/ErrorPage";
 import type { PermissionCollection } from "../types/Permissions";
-import PermissionsTable from "./PermissionsTable";
+import SinglePermission from "./SinglePermission";
 
 type Props = {
   namespace: string,
@@ -53,12 +53,28 @@ class Permissions extends React.Component<Props> {
 
     if (permissions.length > 0)
       return (
-        <PermissionsTable
+        <table className="table is-hoverable is-fullwidth">
-          permissions={permissions}
+          <thead>
+            <tr>
+              <th>{t("permission.name")}</th>
+              <th className="is-hidden-mobile">{t("permission.type")}</th>
+              <th>{t("permission.group-permission")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {permissions.map((permission, index) => {
+              return (
+                <SinglePermission
+                  key={index}
                   namespace={namespace}
                   name={name}
+                  permission={permission}
                 />
               );
+            })}
+          </tbody>
+        </table>
+      );
 
     return <div />;
   }

scm-ui/src/permissions/containers/PermissionsTable.js

@@ -1,57 +0,0 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import PermissionRow from "../components/table/PermissionRow";
-import type { Permission, PermissionCollection } from "../types/Permissions";
-import SinglePermission from "./SinglePermission";
-import type { History } from "history";
-
-type Props = {
-  t: string => string,
-  permissions: PermissionCollection,
-  modifyPermission: (Permission, string, string, () => void) => void,
-  namespace: string,
-  name: string,
-  match: any,
-  history: History
-};
-
-class PermissionsTable extends React.Component<Props> {
-  permissionsModified = () => {
-    const { history, name, namespace } = this.props;
-    console.log(history);
-    history.push(`/repo/${namespace}/${name}/permissions`);
-  };
-
-  render() {
-    const { permissions, t, namespace, name } = this.props;
-
-    return (
-      <table className="table is-hoverable is-fullwidth">
-        <thead>
-          <tr>
-            <th>{t("permission.name")}</th>
-            <th className="is-hidden-mobile">{t("permission.type")}</th>
-            <th>{t("permission.group-permission")}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {permissions.map((permission, index) => {
-            if (permission._links.update)
-              return (
-                <SinglePermission
-                  key={index}
-                  namespace={namespace}
-                  name={name}
-                  permission={permission}
-                />
-              );
-            else return <PermissionRow key={index} permission={permission} />;
-          })}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("permissions")(PermissionsTable);

scm-ui/src/permissions/containers/SinglePermission.js

@@ -62,19 +62,25 @@ class SinglePermission extends React.Component<Props, State> {
       <DeleteButton label={t("edit-permission.delete-button")} />
     ) : null;
 
-    return (
+    const typeSelector = this.props.permission._links.update ? (
-      <tr>
+      <td>
-        <td>{permission.name}</td>
-        <td className="is-hidden-mobile">
         <Select
           onChange={this.handleTypeChange}
           value={permission.type ? permission.type : ""}
           options={this.createSelectOptions(types)}
         />
       </td>
+    ) : (
+      <td>{permission.type}</td>
+    );
+
+    return (
+      <tr>
+        <td>{permission.name}</td>
         <td>
           <Checkbox checked={permission ? permission.groupPermission : false} />
         </td>
+        {typeSelector}
         <td>{deleteButton}</td>
       </tr>
     );