From a77e9c77488a22d4833194cdf5f175a828fcee4b Mon Sep 17 00:00:00 2001
From: jsonBackup <jb-2000@gmx.de>
Date: Sun, 25 Feb 2024 14:29:17 +0100
Subject: [PATCH] Update `bootstrap` to `5.3.3`

Update `reactstrap` to `9.2.2`
Add padding to migrations/setups container
---
 src/Moryx.CommandCenter.Web/package.json      |   4 +-
 .../src/common/components/ModuleHeader.tsx    |   2 +-
 .../src/common/scss/Form.scss                 |   8 +-
 .../src/common/scss/Menu.scss                 |   4 +
 .../src/common/scss/commandcenter.scss        | 581 +++++++++---------
 .../src/databases/container/DatabaseModel.tsx |   6 +-
 .../src/databases/container/Databases.tsx     |   2 +-
 .../src/modules/container/Modules.tsx         |   2 +-
 8 files changed, 318 insertions(+), 291 deletions(-)

diff --git a/src/Moryx.CommandCenter.Web/package.json b/src/Moryx.CommandCenter.Web/package.json
index f3e0e52f5..26d9a0577 100644
--- a/src/Moryx.CommandCenter.Web/package.json
+++ b/src/Moryx.CommandCenter.Web/package.json
@@ -18,7 +18,7 @@
         "@types/react-dom": "^18.2.19",
         "@types/react-redux": "^7.1.33",
         "@types/uuid": "^9.0.8",
-        "bootstrap": "4.6.2",
+        "bootstrap": "5.3.3",
         "bootstrap5-toggle": "^5.0.6",
         "moment": "^2.30.1",
         "query-string": "^8.2.0",
@@ -30,7 +30,7 @@
         "react-router-dom": "^6.22.0",
         "react-router-redux": "^4.0.8",
         "react-toastify": "^10.0.4",
-        "reactstrap": "^8.10.1",
+        "reactstrap": "^9.2.2",
         "redux": "^5.0.1",
         "ts-loader": "^9.5.1",
         "uuid": "^9.0.1"
diff --git a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx
index 3f858560e..8dcb5a21b 100644
--- a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx
+++ b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx
@@ -45,7 +45,7 @@ export class ModuleHeader extends React.Component<ModulePropModel & ModuleDispat
 
     public render(): React.ReactNode {
         return (
-            <Navbar className="navbar-default" expand="md">
+            <Navbar className="navbar-default" expand="md" container={false}>
                 <Nav className="navbar-left" navbar={true}>
                     <NavItem>
                         <NavLink end={true} to={`/modules/${this.props.ModuleName}`} className="navbar-nav-link">
diff --git a/src/Moryx.CommandCenter.Web/src/common/scss/Form.scss b/src/Moryx.CommandCenter.Web/src/common/scss/Form.scss
index 3f3b96a19..fd769735f 100644
--- a/src/Moryx.CommandCenter.Web/src/common/scss/Form.scss
+++ b/src/Moryx.CommandCenter.Web/src/common/scss/Form.scss
@@ -4,6 +4,12 @@
     height: 1.95rem !important;
 }
 
+.form-control,
+.form-select {
+    border: 1px solid #ced4da;
+    color: #495057;
+}
+
 .log-menu {
     padding: 0px;
 }
@@ -12,7 +18,7 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    border:none;
+    border: none;
     border-radius: 0;
     font-size: 1em;
     background-repeat: no-repeat;
diff --git a/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss b/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss
index d847f7ce9..cbfd2aeba 100644
--- a/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss
+++ b/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss
@@ -4,8 +4,11 @@
     cursor: pointer;
     line-height: 1.15;
     font-size: 11pt;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
     border-left: 0px;
     border-right: 0px;
+    border-top: 0px;
+    padding: .75rem 1.25rem;
 }
 
 .menu-item:hover {
@@ -14,6 +17,7 @@
 
 .menu-item a {
     color: $black;
+    text-decoration: none;
 }
 
 .menu-item a:hover {
diff --git a/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss b/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss
index 1b9991330..a69d9decc 100644
--- a/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss
+++ b/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss
@@ -9,500 +9,517 @@
  * General
  */
 .selectable {
-  cursor: pointer;
+    cursor: pointer;
+}
+
+.selectable.nav-link {
+    color: inherit;
 }
 
 /*
  * Main Body
  */
 #pxclogo {
-  height: 40px;
-  margin-top: 10px;
-  background: transparent;
+    height: 40px;
+    margin-top: 10px;
+    background: transparent;
 }
 
 #clock {
-  margin-top: 10px;
-  height:40px;
-  font-weight: bold;
+    margin-top: 10px;
+    height: 40px;
+    font-weight: bold;
 }
 
 body {
-  padding-top: 0px;
-  background: #ffffff;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #333;
+    padding-top: 0px;
+    background: #ffffff;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #333;
 }
 
 svg.icon {
-  height: 20px;
+    height: 20px;
 }
 
 svg.icon-white {
-  height: 20px;
-  path {
-    fill: #ffffff;
-  }
+    height: 20px;
+
+    path {
+        fill: #ffffff;
+    }
 }
 
 svg.icon-green {
-  height: 20px;
-  path {
-    fill: green;
-  }
+    height: 20px;
+
+    path {
+        fill: green;
+    }
 }
 
 svg.icon-red {
-  height: 20px;
-  path {
-    fill: red;
-  }
+    height: 20px;
+
+    path {
+        fill: red;
+    }
 }
 
 .right-space {
-  margin-right: 5px;
+    margin-right: 5px;
 }
 
 .up-space {
-  margin-top: 5px;
+    margin-top: 5px;
 }
 
 .up-space-lg {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .up-space-very-lg {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 
 .down-space {
-  margin-bottom: 5px;
+    margin-bottom: 5px;
 }
 
 .down-space-lg {
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .down-space-very-lg {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .bg-success {
-  background: $green !important;
+    background: $green !important;
 }
 
 .badge-success {
-  color: #fff;
-  background-color: $green;
+    color: #fff;
+    background-color: $green;
 }
 
 .lg-height {
-  height: 70px !important;
+    height: 70px !important;
 }
 
 .center-text {
-  text-align: -webkit-center;
+    text-align: -webkit-center;
+}
+
+.no-padding {
+    padding: 0px;
 }
+
 /*
  * Navigation
  */
- .card-header {
-  margin-bottom: 0 !important;
-  height: 50px;
-  padding: 0 ;
-  display: flex;
-  align-items: center;
-  justify-content: center;
- }
-
- .navbar {
-   transition: 0.3s;
-   overflow: hidden;
-   padding: 0;
-   height: inherit;
+.card-header {
+    margin-bottom: 0 !important;
+    height: 50px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.navbar {
+    min-height: unset !important;
+    transition: 0.3s;
+    overflow: hidden;
+    padding: 0;
+    height: inherit;
 }
 
 .navbar-default.navbar.navbar-expand-md {
-  background-color: transparent;
+    background-color: transparent;
 }
 
-  .navbar-left.navbar-nav {
+.navbar-left.navbar-nav {
     width: 100%;
     list-style-type: none;
     margin-left: 0;
     margin-top: 0;
     height: inherit;
-  }
+}
 
-  .nav-item {
+.nav-item {
     height: 100%;
     display: flex;
     align-items: center;
     margin-top: 0 !important;
     justify-content: center;
     border-right: 1px solid $gray-200;
-  }
+}
 
-  .nav-item:last-child {
+.nav-item:last-child {
     border: none;
-  }
+}
 
-  .nav-item:hover {
+.nav-item:hover {
     background: $gray-200;
     cursor: pointer;
     color: $gray-600;
-  }
+}
 
-  .active {
+.active {
     background: $gray-300;
     margin-top: 0 !important;
-  }
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #dee2e6;
+
+    .nav-link.active {
+        border-color: #dee2e6 #dee2e6 #fff;
+        color: #495057;
+    }
+
+    .nav-link:hover {
+        border-color: #e9ecef #e9ecef #dee2e6;
+    }
+}
 
-  .navbar-nav-link {
+.table th {
+    border-top: 1px solid #343a40;
+}
+
+.navbar-nav-link {
     color: $gray-800;
     text-decoration: none;
     height: 100%;
     padding: 5px;
-  }
+}
 
-  a.navbar-nav-link {
+a.navbar-nav-link {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0px 7px;
-  }
+}
 
-  .navbar-nav-link:hover,
-  .navbar-nav-link:focus {
+.navbar-nav-link:hover,
+.navbar-nav-link:focus {
     color: $gray-600;
     text-decoration: none;
-  }
+}
 
-  .navbar-collapse {
+.navbar-collapse {
     height: 50px;
-  }
+}
 
-  .nav-listgroup-item {
+.nav-listgroup-item {
     padding: 0;
     height: 40px;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-top: none;
     border-left: none;
     border-right: none;
-  }
+}
+
+.table {
+    thead th {
+        border-bottom: 2px solid #343a40;
+    }
+
+    td {
+        border-top: 1px solid #343a40;
+        padding: .75rem;
+    }
+}
+
+.table> :not(caption)>*>* {
+    border-bottom: none;
+}
 
 /*
  * Content Panel
  */
 .commandcenter-app-container {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .commandcenter-content {
-  margin-top: 20px;
-  height: 100%;
+    margin-top: 20px;
+    height: 100%;
 }
 
 .component {
-  border-radius: 4px;
+    border-radius: 4px;
 }
 
 .card {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
-  overflow: hidden;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+    overflow: hidden;
 }
+
 /*
- * Dashboard
+ * Config Editor
  */
-.modulebox-container {
-  
-  .modulebox {
-    width: 350px;
-    min-height: 150px;
-    float:left;
-    margin: 0px 5px 10px 5px;
-  }
+.config-editor-header {
+    padding: 2px 0px 2px 0px;
+    margin: 0px;
+    border-style: solid;
+    border-width: 1px 0px 2px 0px;
+    border-color: lightgray;
+    font-weight: bold;
+}
 
-  a.normal {
-    color: $gray-100;
-  }
+.config-editor {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+    background-color: transparent;
 
-  a.composite {
-    color: $black;
-  }
+    .actionButton {
+        @media (min-width: 768px) {
+            min-width: 120px;
+        }
 
-  .modulebox-body {
-    padding: 0px 5px 0px 0px;
-  }
-}
+        min-width: auto;
+    }
 
-.no-padding {
-  padding: 0px;
-}
+    .row {
+        margin-right: 0px;
+        margin-left: 0px;
+    }
 
-.no-margin {
-  margin: 0px;
-}
+    .entry-row {
+        padding: 5px 0px 5px 0px;
+        align-items: "center";
+    }
 
-.float-right {
-  float: right;
-}
+    .table-row {
+        align-items: "center";
 
-/*
- * Config Editor
- */
- .config-editor-header {
-   padding: 2px 0px 2px 0px;
-   margin: 0px;
-   border-style: solid;
-   border-width: 1px 0px 2px 0px;
-   border-color: lightgray;
-   font-weight: bold;
- }
+        &:nth-child(even) {
+            background-color: #f2f2f2;
+        }
 
-.config-editor {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 20px;
-  background-color: transparent;
-  
-  .actionButton {
-    @media (min-width: 768px) {
-      min-width: 120px;
-    }
-    min-width: auto;
-  }
-  
-  .row {
-    margin-right: 0px;
-    margin-left: 0px;
-  }
-
-  .entry-row {
-    padding: 5px 0px 5px 0px;
-    align-items: "center";
-  }
-  
-  .table-row {
-    align-items: "center";
-
-    &:nth-child(even){
-      background-color: #f2f2f2;
+        &:nth-child(odd) {
+            background-color: white;
+        }
     }
-    
-    &:nth-child(odd){
-      background-color: white;
+
+    .name-column {
+        padding: 10px 0px 10px 10px;
+
+        .property-description {
+            color: darkgray;
+            margin: 0 0 0;
+        }
     }
-  }
-  
-  .name-column {
-    padding: 10px 0px 10px 10px;
-    
-    .property-description {
-      color: darkgray;
-      margin: 0 0 0;
+
+    .property-column {
+        padding: 10px 0px 10px 10px;
     }
-  }
-  
-  .property-column {
-    padding: 10px 0px 10px 10px;
-  }
 }
 
 .expanded-collection {
-  .collection-entry {
-    &:nth-child(even){
-      background-color: white;
-    }
-    
-    &:nth-child(odd){
-      background-color: #edf0f3;
+    .collection-entry {
+        &:nth-child(even) {
+            background-color: white;
+        }
+
+        &:nth-child(odd) {
+            background-color: #edf0f3;
+        }
     }
-  }
 }
+
 .col-name {
-  padding: 15px 0px 15px 15px;
-  float: left;
+    padding: 15px 0px 15px 15px;
+    float: left;
 }
+
 .col-btn {
-  padding: 15px 15px 15px 0px;
-  float: right;
+    padding: 15px 15px 15px 0px;
+    float: right;
 }
 
 /*
  * General module view
  */
 .btn-group.module-btn-group {
-  .btn {
-    min-width: 70px;
-    @media(min-width: 375px) {
-      min-width: 100px;
+    .btn {
+        min-width: 70px;
+
+        @media(min-width: 375px) {
+            min-width: 100px;
+        }
     }
-  }
 }
 
+.toggle-on {
+    min-width: 62px;
+}
+
+.card>.list-group {
+    border-bottom: none;
+}
+
+.list-group {
+    margin: 0 !important;
+}
+
+.list-group-item {
+    margin-top: 0 !important;
+}
+
+.list-group-item.selectable {
+    padding: .75rem 1.25rem;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.list-group-item.selectable:not(:first-child) {
+    border-top: none;
+}
 
 /*
  * Sidebar
  */
 .sidebar-panel {
-  .panel-body {
-    padding: 0px;
-  }
-  
-  .nav-wrapper {
-    position: relative;
-    min-height: 50px;
-  }
-  
-  .navlist {
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none;
-  }
-  
-  .navitem > a, .nav-subitem {
-    position: relative;
-    display: block;
-    cursor: pointer;
+    .panel-body {
+        padding: 0px;
+    }
 
-    &:hover, &.active {
-      background-color: #eee;
+    .nav-wrapper {
+        position: relative;
+        min-height: 50px;
     }
-    
-    .navdropdown {
-      padding-left: 20px;
+
+    .navlist {
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+    }
+
+    .navitem>a,
+    .nav-subitem {
+        position: relative;
+        display: block;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+            background-color: #eee;
+        }
+
+        .navdropdown {
+            padding-left: 20px;
+        }
+    }
+
+    .navitem>a,
+    .nav-subitem>a {
+        //color: $linkColor;
+        position: relative;
+        display: block;
+        padding: 10px 10px;
+        text-decoration: none;
     }
-  }  
-  
-  .navitem>a, .nav-subitem>a{
-    //color: $linkColor;
-    position: relative;
-    display: block;
-    padding: 10px 10px;
-    text-decoration: none;
-  }
 }
 
 /*
  * Modals
  */
- .modal {
-  text-align: center;
-  padding: 0!important;
+.modal {
+    text-align: center;
+    padding: 0 !important;
 }
 
 .modal:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  margin-right: -4px;
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -4px;
 }
 
 .modal-dialog {
-  display: inline-block;
-  text-align: left;
-  vertical-align: middle;
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.log-modal-dialog {
+    max-width: 65% !important;
+}
+
+.notification-modal-dialog {
+    max-width: 90% !important;
 }
 
 /*
  * Font
  */
 .font-bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .font-italic {
-  font-style: italic;
+    font-style: italic;
 }
 
 .font-disabled {
-  color: gray;
+    color: gray;
 }
 
 .font-normal {
-  font-size: 16px;
+    font-size: 16px;
 }
 
 .font-small {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 .font-smaller {
-  font-size: 12px;
+    font-size: 12px;
 }
 
 .font-smallest {
-  font-size: 10px;
+    font-size: 10px;
 }
 
 /*
  * Progress
  */
 .progress {
-  height: 20px;
-  background: whitesmoke;
+    height: 20px;
+    background: whitesmoke;
 }
 
 .progress-bar {
-  background: orangered;
-  color: black;
-}
-
-/*
- * Footer
- */
-footer {
-  text-align: left;
-  font-size: 8pt;
-  color: rgb(119, 119, 119);
-  bottom: 0;
-  width: 100%;
-  height: 60px;
-}
-
-footer hr {
-  width: 100%;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border: 0;
-  border-top-width: 0px;
-  border-top-style: none;
-  border-top: 1px solid #eee;
-}
-
-footer ul li {
-  display: inline;
-  padding-right: 20px;
-  margin-bottom: 10px;
-}
-
-.log-modal-dialog {
-  max-width: 65% !important;
-}
-
-.notification-modal-dialog {
-  max-width: 90% !important;
+    background: orangered;
+    color: black;
 }
 
 /* 
  * Overwrite bootstrap styles that would otherwise
- * conflict with MORYS material styles
+ * conflict with MORYX material styles
 */
-
-.border-bottom {
-  border-bottom: 1px solid #e5e5e5 !important;
+a {
+    text-decoration-line: none;
 }
 
-.px-4 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
+.active>.container-fluid {
+    padding: calc(var(--bs-gutter-x) * .5)
 }
 
-a:hover {
-  text-decoration-line: none;
+.border-bottom {
+    border-bottom: 1px solid #e5e5e5 !important;
 }
+
+.px-4 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+}
\ No newline at end of file
diff --git a/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx b/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx
index a8388514a..154fb01d5 100644
--- a/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx
+++ b/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx
@@ -350,7 +350,7 @@ class DatabaseModel extends React.Component<DatabaseModelPropsModel & DatabaseMo
                                 <Container fluid={true}>
                                     <Row className="up-space-lg">
                                         <Col md={12}>
-                                            <Input type="select" size={5} className="auto-height"
+                                            <Input type="select" className="auto-height"
                                                 onChange={(e: React.FormEvent<HTMLInputElement>) => this.onSelectBackup(e)}>
                                                 {
                                                     this.props.DataModel.backups.map((backup, idx) => {
@@ -443,7 +443,7 @@ class DatabaseModel extends React.Component<DatabaseModelPropsModel & DatabaseMo
                                                                 <Button color="primary"
                                                                     onClick={() => this.onApplyMigration()}
                                                                     disabled={this.state.selectedMigration === "" || (this.state.testConnectionResult !== TestConnectionResult.Success && this.state.testConnectionResult !== TestConnectionResult.PendingMigrations)}>
-                                                                    Apply selected migration
+                                                                    Apply all migrations
                                                                 </Button>
                                                                 <Button color="primary"
                                                                     onClick={() => this.onRollbackDatabase()}
@@ -468,7 +468,7 @@ class DatabaseModel extends React.Component<DatabaseModelPropsModel & DatabaseMo
                                                 <Container fluid={true}>
                                                     <Row>
                                                         <Col md={12}>
-                                                            <Input type="select" size={10} className="auto-height"
+                                                            <Input type="select" className="auto-height"
                                                                 onChange={(e: React.FormEvent<HTMLInputElement>) => this.onSelectSetup(e)}>
                                                                 {
                                                                     this.props.DataModel.setups.map((setup, idx) => {
diff --git a/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx b/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx
index 3dcc054f1..6a8bfd09e 100644
--- a/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx
+++ b/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx
@@ -98,7 +98,7 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
                 <Col md={3}>
                     <Card>
                         <CardHeader tag="h5">
-                            <Navbar className="navbar-default" expand="md">
+                            <Navbar className="navbar-default" expand="md" container={false}>
                                 <Nav className="navbar-left" navbar={true}>
                                     <NavItem>
                                         <Link to="/modules" className="navbar-nav-link">
diff --git a/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx b/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx
index e2410ca07..c57d12d89 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx
@@ -133,7 +133,7 @@ class Modules extends React.Component<ModulesPropModel & ModulesDispatchPropMode
                 <Col md={3}>
                     <Card>
                         <CardHeader tag="h5">
-                            <Navbar className="navbar-default" expand="md">
+                            <Navbar className="navbar-default" expand="md" container={false}>
                                 <Nav className="navbar-left" navbar={true}>
                                     <NavItem className="active">
                                         <NavLink to="/modules" className="navbar-nav-link">