Two Buttons in DialogFooter

gsa/CMakeLists.txt

@@ -243,9 +243,10 @@ set (GSA_JS_SRC_FILES
      ${GSA_SRC_DIR}/src/web/components/dialog/linkconfirmationdialog.js
      ${GSA_SRC_DIR}/src/web/components/dialog/overlay.js
      ${GSA_SRC_DIR}/src/web/components/dialog/resizer.js
+     ${GSA_SRC_DIR}/src/web/components/dialog/savedialog.js
      ${GSA_SRC_DIR}/src/web/components/dialog/scrollablecontent.js
      ${GSA_SRC_DIR}/src/web/components/dialog/title.js
-     ${GSA_SRC_DIR}/src/web/components/dialog/savedialog.js
+     ${GSA_SRC_DIR}/src/web/components/dialog/twobuttonfooter.js
      ${GSA_SRC_DIR}/src/web/components/errorboundary/errorboundary.js
      ${GSA_SRC_DIR}/src/web/components/folding/folding.js
      ${GSA_SRC_DIR}/src/web/components/footnote/footnote.js

gsa/src/web/components/dialog/footer.js

@@ -34,20 +34,20 @@ import Layout from 'web/components/layout/layout';
 
 import Button from './button';
 
-const StyledLayout = styled(Layout)`
+export const DialogFooterLayout = styled(Layout)`
   border-width: 1px 0 0 0;
   border-style: solid;
   border-color: ${Theme.lightGray};
   margin-top: 15px;
-  padding: 10px 20px 10px 15px;
+  padding: 10px 20px 10px 20px;
 `;
 
 const DialogFooter = ({
   title,
   onClick,
   loading = false,
 }) => (
-  <StyledLayout
+  <DialogFooterLayout
     align={['end', 'center']}
     shrink="0"
   >
@@ -58,7 +58,7 @@ const DialogFooter = ({
     >
       {title}
     </Button>
-  </StyledLayout>
+  </DialogFooterLayout>
 );
 
 DialogFooter.propTypes = {

gsa/src/web/components/dialog/linkconfirmationdialog.js

@@ -23,34 +23,18 @@
  */
 import React from 'react';
 
-import styled from 'styled-components';
-
 import _ from 'gmp/locale';
 
 import PropTypes from 'web/utils/proptypes';
 
-import Theme from 'web/utils/theme';
-
 import Dialog from 'web/components/dialog/dialog';
 import DialogContent from 'web/components/dialog/content';
-import DialogTitle from 'web/components/dialog/title';
 import ScrollableContent from 'web/components/dialog/scrollablecontent';
-
-import Button from 'web/components/dialog/button';
-
-import Layout from 'web/components/layout/layout';
+import DialogTitle from 'web/components/dialog/title';
+import DialogTwoButtonFooter from 'web/components/dialog/twobuttonfooter';
 
 const DEFAULT_DIALOG_WIDTH = '400px';
 
-const StyledLayout = styled(Layout)`
-  justify-content: space-between;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: ${Theme.lightGray};
-  margin-top: 15px;
-  padding: 10px 15px 10px 15px;
-`;
-
 class ConfirmationDialogContent extends React.Component {
 
   constructor(...args) {
@@ -87,20 +71,11 @@ class ConfirmationDialogContent extends React.Component {
         <ScrollableContent>
           {text}
         </ScrollableContent>
-        <StyledLayout >
-          <Button
-            onClick={this.props.close}
-            title={_('Cancel')}
-          >
-            {_('Cancel')}
-          </Button>
-          <Button
-            onClick={this.handleResume}
-            title={_('Follow Link')}
-          >
-            {_('Follow Link')}
-          </Button>
-        </StyledLayout>
+        <DialogTwoButtonFooter
+          rightButtonTitle={_('Follow Link')}
+          onLeftButtonClick={this.props.close}
+          onRightButtonClick={this.handleResume}
+        />
       </DialogContent>
     );
   }

gsa/src/web/components/dialog/savedialog.js

@@ -27,17 +27,17 @@ import _ from 'gmp/locale';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import State from '../../utils/state.js';
-import PropTypes from '../../utils/proptypes.js';
+import State from 'web/utils/state';
+import PropTypes from 'web/utils/proptypes';
 
 import ErrorBoundary from 'web/components/errorboundary/errorboundary';
 
-import Dialog from '../dialog/dialog.js';
-import DialogContent from '../dialog/content.js';
-import DialogError from '../dialog/error.js';
-import DialogFooter from '../dialog/footer.js';
-import DialogTitle from '../dialog/title.js';
-import ScrollableContent from '../dialog/scrollablecontent.js';
+import Dialog from '../dialog/dialog';
+import DialogContent from '../dialog/content';
+import DialogError from '../dialog/error';
+import DialogFooter from '../dialog/twobuttonfooter';
+import DialogTitle from '../dialog/title';
+import ScrollableContent from '../dialog/scrollablecontent';
 
 class SaveDialogContent extends React.Component {
 
@@ -138,9 +138,10 @@ class SaveDialogContent extends React.Component {
                 </ScrollableContent>
               </ErrorBoundary>
               <DialogFooter
-                title={buttonTitle}
                 loading={this.state.loading}
-                onClick={() => this.handleSaveClick(childValues)}
+                rightButtonTitle={buttonTitle}
+                onLeftButtonClick={close}
+                onRightButtonClick={() => this.handleSaveClick(childValues)}
               />
             </DialogContent>
           );

gsa/src/web/components/dialog/twobuttonfooter.js

@@ -0,0 +1,77 @@
+/* Greenbone Security Assistant
+ *
+ * Authors:
+ * Steffen Waterkamp <steffen.waterkamp@greenbone.net>
+ *
+ * Copyright:
+ * Copyright (C) 2018 Greenbone Networks GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import React from 'react';
+
+import styled from 'styled-components';
+
+import _ from 'gmp/locale';
+
+import PropTypes from 'web/utils/proptypes';
+
+import {DialogFooterLayout} from 'web/components/dialog/footer';
+
+import Button from './button';
+
+const StyledLayout = styled(DialogFooterLayout)`
+  justify-content: space-between;
+`;
+
+const DialogTwoButtonFooter = ({
+  leftButtonTitle = _('Cancel'),
+  rightButtonTitle,
+  onLeftButtonClick,
+  onRightButtonClick,
+  loading = false,
+}) => (
+  <StyledLayout
+    align={['end', 'center']}
+    shrink="0"
+  >
+    <Button
+      onClick={onLeftButtonClick}
+      title={leftButtonTitle}
+    >
+      {leftButtonTitle}
+    </Button>
+    <Button
+      onClick={onRightButtonClick}
+      title={rightButtonTitle}
+      loading={loading}
+    >
+      {rightButtonTitle}
+    </Button>
+  </StyledLayout>
+);
+
+DialogTwoButtonFooter.propTypes = {
+  leftButtonTitle: PropTypes.string,
+  loading: PropTypes.bool,
+  rightButtonTitle: PropTypes.string.isRequired,
+  onLeftButtonClick: PropTypes.func,
+  onRightButtonClick: PropTypes.func,
+};
+
+export default DialogTwoButtonFooter;
+
+// vim: set ts=2 sw=2 tw=80:

gsa/src/web/components/powerfilter/withFilterDialog.js

@@ -26,15 +26,15 @@ import _ from 'gmp/locale';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import Filter from 'gmp/models/filter.js';
+import Filter from 'gmp/models/filter';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import Dialog from '../dialog/dialog.js';
-import DialogContent from '../dialog/content.js';
-import DialogTitle from '../dialog/title.js';
-import DialogFooter from '../dialog/footer.js';
-import ScrollableContent from '../dialog/scrollablecontent.js';
+import Dialog from '../dialog/dialog';
+import DialogContent from '../dialog/content';
+import DialogTitle from '../dialog/title';
+import DialogFooter from '../dialog/twobuttonfooter';
+import ScrollableContent from '../dialog/scrollablecontent';
 
 const withFilterDialog = (options = {}) => FilterDialogComponent => {
 
@@ -159,8 +159,9 @@ const withFilterDialog = (options = {}) => FilterDialogComponent => {
               </ScrollableContent>
 
               <DialogFooter
-                title={_('Update')}
-                onClick={this.handleSave}
+                rightButtonTitle={_('Update')}
+                onLeftButtonClick={close}
+                onRightButtonClick={this.handleSave}
               />
             </DialogContent>
           )}