From 11588024929860013add46b5a169765eb6179862 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 26 Jul 2018 09:49:44 +0200
Subject: [PATCH] refactoring of buttons to navLinks

---
 .../components/buttons/EditUserButton.js      | 34 -------------------
 .../components/buttons/EditUserButton.test.js | 31 -----------------
 scm-ui/src/users/components/buttons/index.js  |  2 --
 .../DeleteUserNavLink.js}                     |  4 +--
 .../DeleteUserNavLink.test.js}                | 32 ++++++++---------
 .../components/navLinks/EditUserNavLink.js    | 28 +++++++++++++++
 .../navLinks/EditUserNavLink.test.js          | 27 +++++++++++++++
 scm-ui/src/users/components/navLinks/index.js |  2 ++
 scm-ui/src/users/containers/SingleUser.js     |  6 ++--
 9 files changed, 78 insertions(+), 88 deletions(-)
 delete mode 100644 scm-ui/src/users/components/buttons/EditUserButton.js
 delete mode 100644 scm-ui/src/users/components/buttons/EditUserButton.test.js
 delete mode 100644 scm-ui/src/users/components/buttons/index.js
 rename scm-ui/src/users/components/{buttons/DeleteUserButton.js => navLinks/DeleteUserNavLink.js} (92%)
 rename scm-ui/src/users/components/{buttons/DeleteUserButton.test.js => navLinks/DeleteUserNavLink.test.js} (61%)
 create mode 100644 scm-ui/src/users/components/navLinks/EditUserNavLink.js
 create mode 100644 scm-ui/src/users/components/navLinks/EditUserNavLink.test.js
 create mode 100644 scm-ui/src/users/components/navLinks/index.js

diff --git a/scm-ui/src/users/components/buttons/EditUserButton.js b/scm-ui/src/users/components/buttons/EditUserButton.js
deleted file mode 100644
index dc7b8d9351..0000000000
--- a/scm-ui/src/users/components/buttons/EditUserButton.js
+++ /dev/null
@@ -1,34 +0,0 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import { EditButton } from "../../../components/buttons";
-import type { UserEntry } from "../../types/UserEntry";
-
-type Props = {
-  t: string => string,
-  entry: UserEntry
-};
-
-class EditUserButton extends React.Component<Props> {
-  render() {
-    const { entry, t } = this.props;
-    const link = "/users/edit/" + entry.entry.name;
-
-    if (!this.isEditable()) {
-      return "";
-    }
-    return (
-      <EditButton
-        label={t("edit-user-button.label")}
-        link={link}
-        loading={entry.loading}
-      />
-    );
-  }
-
-  isEditable = () => {
-    return this.props.entry.entry._links.update;
-  };
-}
-
-export default translate("users")(EditUserButton);
diff --git a/scm-ui/src/users/components/buttons/EditUserButton.test.js b/scm-ui/src/users/components/buttons/EditUserButton.test.js
deleted file mode 100644
index c708284f0f..0000000000
--- a/scm-ui/src/users/components/buttons/EditUserButton.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import "../../../tests/enzyme";
-import "../../../tests/i18n";
-import EditUserButton from "./EditUserButton";
-
-it("should render nothing, if the edit link is missing", () => {
-  const entry = {
-    entry: {
-      _links: {}
-    }
-  };
-
-  const button = shallow(<EditUserButton entry={entry} />);
-  expect(button.text()).toBe("");
-});
-
-it("should render the button", () => {
-  const entry = {
-    entry: {
-      _links: {
-        update: {
-          href: "/users"
-        }
-      }
-    }
-  };
-
-  const button = shallow(<EditUserButton entry={entry} />);
-  expect(button.text()).not.toBe("");
-});
diff --git a/scm-ui/src/users/components/buttons/index.js b/scm-ui/src/users/components/buttons/index.js
deleted file mode 100644
index b5baba92d5..0000000000
--- a/scm-ui/src/users/components/buttons/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as DeleteUserButton } from "./DeleteUserButton";
-export { default as EditUserButton } from "./EditUserButton";
diff --git a/scm-ui/src/users/components/buttons/DeleteUserButton.js b/scm-ui/src/users/components/navLinks/DeleteUserNavLink.js
similarity index 92%
rename from scm-ui/src/users/components/buttons/DeleteUserButton.js
rename to scm-ui/src/users/components/navLinks/DeleteUserNavLink.js
index 39a33d32ac..96334e4560 100644
--- a/scm-ui/src/users/components/buttons/DeleteUserButton.js
+++ b/scm-ui/src/users/components/navLinks/DeleteUserNavLink.js
@@ -12,7 +12,7 @@ type Props = {
   deleteUser: (user: User) => void
 };
 
-class DeleteUserButton extends React.Component<Props> {
+class DeleteUserNavLink extends React.Component<Props> {
   static defaultProps = {
     confirmDialog: true
   };
@@ -54,4 +54,4 @@ class DeleteUserButton extends React.Component<Props> {
   }
 }
 
-export default translate("users")(DeleteUserButton);
+export default translate("users")(DeleteUserNavLink);
diff --git a/scm-ui/src/users/components/buttons/DeleteUserButton.test.js b/scm-ui/src/users/components/navLinks/DeleteUserNavLink.test.js
similarity index 61%
rename from scm-ui/src/users/components/buttons/DeleteUserButton.test.js
rename to scm-ui/src/users/components/navLinks/DeleteUserNavLink.test.js
index 09e1d87cb9..dddfd0f595 100644
--- a/scm-ui/src/users/components/buttons/DeleteUserButton.test.js
+++ b/scm-ui/src/users/components/navLinks/DeleteUserNavLink.test.js
@@ -2,24 +2,24 @@ import React from "react";
 import { mount, shallow } from "enzyme";
 import "../../../tests/enzyme";
 import "../../../tests/i18n";
-import DeleteUserButton from "./DeleteUserButton";
+import DeleteUserNavLink from "./DeleteUserNavLink";
 
 import { confirmAlert } from "../../../components/modals/ConfirmAlert";
 jest.mock("../../../components/modals/ConfirmAlert");
 
-describe("DeleteUserButton", () => {
+describe("DeleteUserNavLink", () => {
   it("should render nothing, if the delete link is missing", () => {
     const user = {
       _links: {}
     };
 
-    const button = shallow(
-      <DeleteUserButton user={user} deleteUser={() => {}} />
+    const navLink = shallow(
+      <DeleteUserNavLink user={user} deleteUser={() => {}} />
     );
-    expect(button.text()).toBe("");
+    expect(navLink.text()).toBe("");
   });
 
-  it("should render the button", () => {
+  it("should render the navLink", () => {
     const user = {
       _links: {
         delete: {
@@ -28,13 +28,13 @@ describe("DeleteUserButton", () => {
       }
     };
 
-    const button = mount(
-      <DeleteUserButton user={user} deleteUser={() => {}} />
+    const navLink = mount(
+      <DeleteUserNavLink user={user} deleteUser={() => {}} />
     );
-    expect(button.text()).not.toBe("");
+    expect(navLink.text()).not.toBe("");
   });
 
-  it("should open the confirm dialog on button click", () => {
+  it("should open the confirm dialog on navLink click", () => {
     const user = {
       _links: {
         delete: {
@@ -43,10 +43,10 @@ describe("DeleteUserButton", () => {
       }
     };
 
-    const button = mount(
-      <DeleteUserButton user={user} deleteUser={() => {}} />
+    const navLink = mount(
+      <DeleteUserNavLink user={user} deleteUser={() => {}} />
     );
-    button.find("a").simulate("click");
+    navLink.find("a").simulate("click");
 
     expect(confirmAlert.mock.calls.length).toBe(1);
   });
@@ -65,14 +65,14 @@ describe("DeleteUserButton", () => {
       calledUrl = user._links.delete.href;
     }
 
-    const button = mount(
-      <DeleteUserButton
+    const navLink = mount(
+      <DeleteUserNavLink
         user={user}
         confirmDialog={false}
         deleteUser={capture}
       />
     );
-    button.find("a").simulate("click");
+    navLink.find("a").simulate("click");
 
     expect(calledUrl).toBe("/users");
   });
diff --git a/scm-ui/src/users/components/navLinks/EditUserNavLink.js b/scm-ui/src/users/components/navLinks/EditUserNavLink.js
new file mode 100644
index 0000000000..246d7fc536
--- /dev/null
+++ b/scm-ui/src/users/components/navLinks/EditUserNavLink.js
@@ -0,0 +1,28 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { UserEntry } from "../../types/UserEntry";
+import { NavLink } from "../../../components/navigation";
+
+type Props = {
+  t: string => string,
+  user: UserEntry,
+  editUrl: String
+};
+
+class EditUserNavLink extends React.Component<Props> {
+  render() {
+    const { t, editUrl } = this.props;
+
+    if (!this.isEditable()) {
+      return null;
+    }
+    return <NavLink label={t("edit-user-button.label")} to={editUrl} />;
+  }
+
+  isEditable = () => {
+    return this.props.user._links.update;
+  };
+}
+
+export default translate("users")(EditUserNavLink);
diff --git a/scm-ui/src/users/components/navLinks/EditUserNavLink.test.js b/scm-ui/src/users/components/navLinks/EditUserNavLink.test.js
new file mode 100644
index 0000000000..ec46c531a1
--- /dev/null
+++ b/scm-ui/src/users/components/navLinks/EditUserNavLink.test.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { shallow } from "enzyme";
+import "../../../tests/enzyme";
+import "../../../tests/i18n";
+import EditUserNavLink from "./EditUserNavLink";
+
+it("should render nothing, if the edit link is missing", () => {
+  const user = {
+      _links: {}
+  };
+
+  const navLink = shallow(<EditUserNavLink user={user} editUrl='/user/edit'/>);
+  expect(navLink.text()).toBe("");
+});
+
+it("should render the navLink", () => {
+  const user = {
+      _links: {
+        update: {
+          href: "/users"
+        }
+      }
+  };
+
+  const navLink = shallow(<EditUserNavLink user={user} editUrl='/user/edit'/>);
+  expect(navLink.text()).not.toBe("");
+});
diff --git a/scm-ui/src/users/components/navLinks/index.js b/scm-ui/src/users/components/navLinks/index.js
new file mode 100644
index 0000000000..a3ccd16a32
--- /dev/null
+++ b/scm-ui/src/users/components/navLinks/index.js
@@ -0,0 +1,2 @@
+export { default as DeleteUserNavLink } from "./DeleteUserNavLink";
+export { default as EditUserNavLink } from "./EditUserNavLink";
diff --git a/scm-ui/src/users/containers/SingleUser.js b/scm-ui/src/users/containers/SingleUser.js
index 215f78ae6e..3ba758c503 100644
--- a/scm-ui/src/users/containers/SingleUser.js
+++ b/scm-ui/src/users/containers/SingleUser.js
@@ -12,7 +12,7 @@ import { fetchUser, deleteUser } from "../modules/users";
 import Loading from "../../components/Loading";
 
 import { Navigation, Section, NavLink } from "../../components/navigation";
-import { DeleteUserButton } from "./../components/buttons";
+import { DeleteUserNavLink, EditUserNavLink } from "./../components/navLinks";
 import ErrorPage from "../../components/ErrorPage";
 
 type Props = {
@@ -84,10 +84,10 @@ class SingleUser extends React.Component<Props> {
             <Navigation>
               <Section label="Navigation">
                 <NavLink to={`${url}`} label="Information" />
-                <NavLink to={`${url}/edit`} label="Edit" />
+                <EditUserNavLink user={user} editUrl={`${url}/edit`} />
               </Section>
               <Section label="Actions">
-                <DeleteUserButton user={user} deleteUser={this.deleteUser} />
+                <DeleteUserNavLink user={user} deleteUser={this.deleteUser} />
                 <NavLink to="/users" label="Back" />
               </Section>
             </Navigation>