Issue 5581 - UI - Support cockpit dark theme

Description: We were previously overriding the background color which caused issues with the dark theme. Also changed database tree to add a "Create Suffix" Icon in the tree instead of the button below the tree Fixed browser crash in "edit entry" when changing read only variable relates: #5581 Reviewed by: spichugi(Thanks!)
389ds · Jan 11, 2023 · ea5daa5 · ea5daa5
1 parent 9e8d42c
commit ea5daa5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/src/cockpit/389-console/src/css/ds.css b/src/cockpit/389-console/src/css/ds.css
@@ -1,6 +1,5 @@
 .ds-logo {
     margin: 5px;
-    background-color: white !important;
 }
 
 .ds-logo-style {
@@ -62,10 +61,21 @@ td {
 }
 
 .ds-tree {
-    font-size: 0.5;
+    border: 1px solid #909090;
     background-color: #f8f8f8;
+    width: 300px;
+    min-width: 300px;
+    min-height: 350px;
+    max-height: 550px;
+    margin-bottom: 5px;
+    overflow: auto;
+    margin-left: 15px;
+    margin-top: 20px;
+}
+
+.pf-theme-dark .ds-tree {
     border: 1px solid #909090;
-    color: black;
+    background-color: rgb(54, 55, 58);
     width: 300px;
     min-width: 300px;
     min-height: 350px;
@@ -76,6 +86,18 @@ td {
     margin-top: 20px;
 }
 
+.pf-theme-dark .pf-c-form-control {
+  --pf-c-form__label-required--Color: var(--pf-global--danger-color--200);
+  --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--200);
+  --pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--200);
+  --pf-c-form__helper-text--m-error--Color: var(--pf-global--danger-color--200);
+  --pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff7468' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
+}
+
+.pf-theme-dark .pf-c-button.pf-m-danger {
+    background-color: var(--pf-global--danger-color--200);
+}
+
 .ds-pf-red-color {
     color: #f54f42 !important;
 }
@@ -183,18 +205,6 @@ td {
     width: 50%;
 }
 
-.ds-fractional-panel {
-    background-color: white;
-    width: 50%;
-    margin: 2px 2px 2px 2px;
-    padding-left: 10px;
-}
-
-.ds-fractional-panel p {
-    padding: 0px !important;
-    margin-left: 0 !important;
-}
-
 .ds-operate-spinner {
     margin-left: 10px;
     top: 10px;

diff --git a/src/cockpit/389-console/src/database.jsx b/src/cockpit/389-console/src/database.jsx
@@ -43,7 +43,7 @@ import {
 } from '@patternfly/react-icons';
 import PropTypes from "prop-types";
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon';
 const DB_CONFIG = "dbconfig";
 const CHAINING_CONFIG = "chaining-config";
 const BACKUP_CONFIG = "backups";
@@ -476,7 +476,17 @@ export class Database extends React.Component {
                             icon: <CatalogIcon />,
                             id: "suffixes-tree",
                             children: suffixData,
-                            defaultExpanded: true
+                            defaultExpanded: true,
+                            action: (
+                                <Button
+                                    onClick={this.handleShowSuffixModal}
+                                    variant="plain"
+                                    aria-label="Create new suffix"
+                                    title="Create new suffix"
+                                >
+                                    <PlusIcon />
+                                </Button>
+                            ),
                         }
                     ];
                     let current_node = this.state.node_name;
@@ -1310,13 +1320,6 @@ export class Database extends React.Component {
                                 />
                             </div>
                         </div>
-                        <Button
-                            className="ds-left-margin-md"
-                            variant="primary"
-                            onClick={this.handleShowSuffixModal}
-                        >
-                            Create Suffix
-                        </Button>
                     </div>
                     <div className="ds-tree-content">
                         {db_element}

diff --git a/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/editLdapEntry.jsx b/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/editLdapEntry.jsx
@@ -613,7 +613,7 @@ class EditLdapEntry extends React.Component {
             const required = oc.cells[1].split(',');
             const optional = oc.cells[2].split(',');
 
-            for (const attr of required) {
+            for (let attr of required) {
                 attr = attr.trim().toLowerCase();
                 if (attr === '') {
                     continue;
@@ -655,7 +655,7 @@ class EditLdapEntry extends React.Component {
                 }
             }
 
-            for (const attr of optional) {
+            for (let attr of optional) {
                 attr = attr.trim();
                 if (attr === '') {
                     continue;