From d0f8e7019ce3470a60e16b8bcbf4b43f0fa507af Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 19 Jun 2019 11:34:02 +0200
Subject: [PATCH] implemented *awesome* new ButtonGrouped ui-component

---
 .../src/buttons/ButtonGrouped.js              | 29 +++++++++++++++++++
 .../ui-components/src/buttons/index.js        |  1 +
 .../containers/AdvancedPermissionsDialog.js   | 24 ++++++++-------
 3 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/buttons/ButtonGrouped.js

diff --git a/scm-ui-components/packages/ui-components/src/buttons/ButtonGrouped.js b/scm-ui-components/packages/ui-components/src/buttons/ButtonGrouped.js
new file mode 100644
index 0000000000..2ddf8a9316
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/buttons/ButtonGrouped.js
@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  children: React.Node
+};
+
+class ButtonGrouped extends React.Component<Props> {
+  render() {
+    const { className, children } = this.props;
+
+    var childWrapper = [];
+    React.Children.forEach(children, child => {
+      if (child) {
+        childWrapper.push(<p className="control">{child}</p>);
+      }
+    });
+
+    return (
+      <div className={classNames("field", "is-grouped", className)}>
+        {childWrapper}
+      </div>
+    );
+  }
+}
+
+export default ButtonGrouped;
diff --git a/scm-ui-components/packages/ui-components/src/buttons/index.js b/scm-ui-components/packages/ui-components/src/buttons/index.js
index 014d92958d..3a70167002 100644
--- a/scm-ui-components/packages/ui-components/src/buttons/index.js
+++ b/scm-ui-components/packages/ui-components/src/buttons/index.js
@@ -8,6 +8,7 @@ export { default as EditButton } from "./EditButton.js";
 export { default as SubmitButton } from "./SubmitButton.js";
 export { default as DownloadButton } from "./DownloadButton.js";
 export { default as ButtonGroup } from "./ButtonGroup.js";
+export { default as ButtonGrouped } from "./ButtonGrouped.js";
 export {
   default as RemoveEntryOfTableButton
 } from "./RemoveEntryOfTableButton.js";
diff --git a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
index d15b9112b9..70b6442626 100644
--- a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
+++ b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
@@ -1,7 +1,11 @@
 // @flow
-
 import React from "react";
-import { Button, SubmitButton, Modal } from "@scm-manager/ui-components";
+import {
+  ButtonGrouped,
+  Button,
+  SubmitButton,
+  Modal
+} from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
@@ -56,15 +60,13 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
 
     const footer = (
       <form onSubmit={this.onSubmit}>
-        <div className="field is-grouped">
-          <p className="control">{submitButton}</p>
-          <p className="control">
-            <Button
-              label={t("permission.advanced.dialog.abort")}
-              action={onClose}
-            />
-          </p>
-        </div>
+        <ButtonGrouped>
+          {submitButton}
+          <Button
+            label={t("permission.advanced.dialog.abort")}
+            action={onClose}
+          />
+        </ButtonGrouped>
       </form>
     );