From a2cb0b15b7804aead6dba5ef61e19725c5b7370a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 10:07:00 +0100
Subject: [PATCH] use modal component for advanced permissions dialog

---
 .../containers/AdvancedPermissionsDialog.js   | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
index 0d844fdf3f..5d53605484 100644
--- a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
+++ b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react";
-import { Button, SubmitButton } from "@scm-manager/ui-components";
+import { Button, SubmitButton, Modal } from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
@@ -38,6 +38,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
 
     const verbSelectBoxes = Object.entries(verbs).map(e => (
       <PermissionCheckbox
+        key={e[0]}
         disabled={readOnly}
         name={e[0]}
         checked={e[1]}
@@ -49,32 +50,30 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
       <SubmitButton label={t("permission.advanced.dialog.submit")} />
     ) : null;
 
+    const closeButton = (
+      <button className="delete" aria-label="close" onClick={() => onClose()} />
+    );
+
+    const body = (
+      <>
+        <div className="content">{verbSelectBoxes}</div>
+        <form onSubmit={this.onSubmit}>
+          {submitButton}
+          <Button
+            label={t("permission.advanced.dialog.abort")}
+            action={onClose}
+          />
+        </form>
+      </>
+    );
+
     return (
-      <div className={"modal is-active"}>
-        <div className="modal-background" />
-        <div className="modal-card">
-          <header className="modal-card-head">
-            <p className="modal-card-title">
-              {t("permission.advanced.dialog.title")}
-            </p>
-            <button
-              className="delete"
-              aria-label="close"
-              onClick={() => onClose()}
-            />
-          </header>
-          <section className="modal-card-body">
-            <div className="content">{verbSelectBoxes}</div>
-            <form onSubmit={this.onSubmit}>
-              {submitButton}
-              <Button
-                label={t("permission.advanced.dialog.abort")}
-                action={onClose}
-              />
-            </form>
-          </section>
-        </div>
-      </div>
+      <Modal
+        title={t("permission.advanced.dialog.title")}
+        closeButton={closeButton}
+        body={body}
+        active={true}
+      />
     );
   }