From a9bf952a4dadbf7bed1f04ae91eee0da31219a68 Mon Sep 17 00:00:00 2001
From: Vladislav Kuschew <vkuschew@phoenixcontact.com>
Date: Fri, 23 Dec 2022 07:28:54 +0100
Subject: [PATCH] Added confirmation dialog to database delete action and
 changed layout

To avoid accidentally pressing the button, I have moved the button group to the right.
---
 .../src/databases/container/DatabaseModel.tsx | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/Moryx.Runtime.Maintenance.Web.UI/src/databases/container/DatabaseModel.tsx b/src/Moryx.Runtime.Maintenance.Web.UI/src/databases/container/DatabaseModel.tsx
index bff4a3f..8310516 100644
--- a/src/Moryx.Runtime.Maintenance.Web.UI/src/databases/container/DatabaseModel.tsx
+++ b/src/Moryx.Runtime.Maintenance.Web.UI/src/databases/container/DatabaseModel.tsx
@@ -160,6 +160,10 @@ class DatabaseModel extends React.Component<DatabaseModelPropsModel & DatabaseMo
     }
 
     public onEraseDatabase(): void {
+        if (confirm("Do you really want to delete the entire database?") == false) {
+            return;
+        }
+
         this.props.onShowWaitDialog(true);
 
         this.props.RestClient.eraseDatabase(this.createConfigModel(), this.props.DataModel.TargetModel).then((data) => {
@@ -366,24 +370,34 @@ class DatabaseModel extends React.Component<DatabaseModelPropsModel & DatabaseMo
                             </Col>
                         </Row>
                         <Row className="up-space-lg">
+                            <Col md={6}/>
                             <Col md={6}>
-                                <h3>Migration &amp; Setup</h3>
+                                <Container fluid={true}>
+                                    <Row>
+                                        <h3>Database</h3>
+                                    </Row>
+                                    <Row>
+                                        <Col md={12}>
+                                            <ButtonGroup>
+                                                <Button color="primary"
+                                                        onClick={() => this.onCreateDatabase()}
+                                                        disabled={this.state.testConnectionResult !== TestConnectionResult.ConnectionOkDbDoesNotExist}>
+                                                    Create database
+                                                </Button>
+                                                <Button color="primary"
+                                                        onClick={() => this.onEraseDatabase()}
+                                                        disabled={this.state.testConnectionResult !== TestConnectionResult.Success}>
+                                                    Erase database
+                                                </Button>
+                                            </ButtonGroup>
+                                        </Col>
+                                    </Row>
+                                </Container>
                             </Col>
                         </Row>
-                        <Row>
+                        <Row className="up-space-lg">
                             <Col md={6}>
-                                <ButtonGroup>
-                                    <Button color="primary"
-                                            onClick={() => this.onCreateDatabase()}
-                                            disabled={this.state.testConnectionResult !== TestConnectionResult.ConnectionOkDbDoesNotExist}>
-                                        Create database
-                                    </Button>
-                                    <Button color="primary"
-                                            onClick={() => this.onEraseDatabase()}
-                                            disabled={this.state.testConnectionResult !== TestConnectionResult.Success}>
-                                        Erase database
-                                    </Button>
-                                </ButtonGroup>
+                                <h3>Migration &amp; Setup</h3>
                             </Col>
                         </Row>
                         <Row className="up-space-lg">