From b43ec69c8656a28573b30abef4b8f3a44a8caedc Mon Sep 17 00:00:00 2001
From: Mark Reynolds <mreynolds@redhat.com>
Date: Mar 05 2020 14:56:46 +0000
Subject: Issue 50926 - Remove dual spinner and other UI fixes


Description:  Removed unnecessary spinner when loading the backup table.
              Removed duplicate ID's from html
              Revised Create Instance modal to be easier to read
              Fixed typo in posix winsync fixup task help description
              Removed unused CSS styles
              Fixed plugin modal alignment issues
              Fixed typo in Enable Replication modal

relates: https://pagure.io/389-ds-base/issue/50926

Reviewed by: spichugi(Thanks!)

---

diff --git a/src/cockpit/389-console/src/css/ds.css b/src/cockpit/389-console/src/css/ds.css
index 76bf2a9..9248116 100644
--- a/src/cockpit/389-console/src/css/ds.css
+++ b/src/cockpit/389-console/src/css/ds.css
@@ -23,16 +23,6 @@
     text-align: left !important;
 }
 
-/* Main nav page index.html */
-.ds-content {
-    padding: 0;
-    padding-top: 115px;  /* this pushes the content below fixed nav bar */
-    padding-bottom: 50px;
-    margin-top: 0;
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
 .ds-chart-right {
     margin-left: 65px;
 }
@@ -70,25 +60,6 @@ td {
     max-width: 200px !important;
 }
 
-.ds-hr {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    border-style: inset;
-    border-width: 1px;
-    padding: 0px !important;
-}
-
-.ds-hr-logs {
-    display: block;
-    margin-left: 0;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    border-style: inset;
-    border-width: 1px;
-    padding: 0px !important;
-    width: 525px;
-}
-
 .ds-no-padding {
     padding: 0px !important;
 }
@@ -117,10 +88,6 @@ td {
     opacity: 0.7;
 }
 
-.ds-split {
-    width: 400px;
-}
-
 .ds-input {
     margin-top: 5px !important;
     padding-right: 5px !important;
@@ -141,20 +108,6 @@ td {
     text-align: right;
 }
 
-.ds-pw-input {
-    margin-top: 5px;
-    padding-right: 5px;
-    padding-left: 5px !important;
-    min-width: 65px !important;
-    max-width: 65px !important;
-}
-
-.ds-history-input {
-    margin-top: !important;
-    margin-right: 5px;
-    margin-left: 40px;
-}
-
 .ds-divider {
     width: 35px;
 }
@@ -180,27 +133,6 @@ td {
     text-align: left;
 }
 
-.ds-dblink-form-input {
-    width: 415px !important;
-    margin-top: 5px;
-    padding-right: 10px;
-    height: 37px !important;
-}
-
-.ds-repl-table {
-    background-color: white !important;
-    padding: 0px !important;
-    border: 1px solid #909090;
-    table-layout: fixed;
-    width: 100%;
-    clear: both;
-    word-wrap: break-word !important;
-    text-align: center;
-    margin-top: -10px !important;
-    line-height: 1;
-}
-
-
 .ds-db-table {
     border: 1px solid #d1d1d1;
     word-wrap: break-word !important;
@@ -270,12 +202,6 @@ td {
     margin-right: 5px !important;
 }
 
-.ds-send-expiring-checkbox {
-    margin-top: 12px !important;
-    margin-right: 12px !important;
-    padding: 5px;
-}
-
 .ds-operate-spinner {
     margin-left: 10px;
     top: 10px;
@@ -298,38 +224,11 @@ td {
     margin-bottom: 10px !important;
 }
 
-.ds-config-label-lrg {
-    margin-top: 10px;
-    width: 160px !important;
-    margin-bottom: 10px !important;
-}
-
-.ds-config-sub-label {
-    margin-top: 10px;
-    width: 225px !important;
-    margin-bottom: 10px !important;
-    padding-left: 20px;
-}
-
 .ds-label-sm {
     width: 175px !important;
     margin-bottom: 10px !important;
 }
 
-.ds-expire-label {
-    margin-top: 7px;
-    margin-bottom: 7px;
-    width: 285px !important;
-}
-
-.ds-minage-label {
-    padding: 10px;
-}
-
-.ds-expired-div {
-    padding-left: 30px !important;
-}
-
 .ds-modal-row {
     margin-left: 20px;
     margin-right: 0px !important;
@@ -348,17 +247,6 @@ td {
     width: 85px;
 }
 
-.ds-oc-form-list {
-    width: 232px !important;
-    max-height: 350px !important;
-    min-height: 350px !important;
-}
-
-.ds-oc-form-list:focus {
-    max-height: 350px !important;
-    min-height: 350px !important;
-}
-
 p {
     line-height: 1;
     white-space: normal;
@@ -435,11 +323,6 @@ option {
     background-color: #f3f3f3;
 }
 
-.ds-nav-tab a {
-    text-align: center;
-    min-width: 125px !important;
-}
-
 .ds-float-right {
     float: right;
 }
@@ -459,29 +342,6 @@ option {
     Width: 18px !important;
 }
 
-.ds-footer {
-    background-color: #f5f5f5 !important;
-    margin-left: -25px;
-    padding: 10px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: 50px;
-    border-top: 1px solid #e2e2e2 !important;
-}
-
-.ds-nav-bar {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background-color: white;
-    z-index: 1;
-}
-
-.ds-nav-item a {
-    text-align: left;
-}
-
 .ds-config-header {
     margin-bottom: 20px;
 }
@@ -555,38 +415,6 @@ option {
   overflow-y:auto;
 }
 
-/* wizard accordions are narrower */
-.ds-wiz-accordion {
-    margin-top: 20px;
-    color: #228bc0 !important;
-    background-color: white;
-    border: 0;
-    position: relative;
-    overflow: hidden;
-    width: 500px;
-    text-align: left;
-}
-
-.ds-wiz-accordion:after {
-    display: inline-block;
-    content: "";
-    height: 1px;
-    background: #228bc0;
-    position: absolute;
-    width: 500px;
-    top: 50% !important;
-    margin-left: 10px;
-    text-align: left;
-}
-
-.ds-wiz-accordion:focus {
-    outline: none !important;
-    border: 0 !important;
-    -moz-outline: none !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: 0 !important;
-}
-
 .ds-indent {
     margin-left: 15px !important;
     margin-right: 15px !important;
@@ -678,10 +506,6 @@ option {
     transform: translate(-25%, -35%);
 }
 
-.ds-popup {
-    min-width: 350px !important;
-}
-
 .ds-input-auto {
     width: 100%;
     margin-right: 10px;
diff --git a/src/cockpit/389-console/src/ds.jsx b/src/cockpit/389-console/src/ds.jsx
index 439a850..c003d16 100644
--- a/src/cockpit/389-console/src/ds.jsx
+++ b/src/cockpit/389-console/src/ds.jsx
@@ -120,13 +120,6 @@ export class DSInstance extends React.Component {
                             state: "success"
                         }
                     }));
-                } else {
-                    this.setState(prevState => ({
-                        pageLoadingState: {
-                            ...prevState.pageLoadingState,
-                            state: "loading"
-                        }
-                    }));
                 }
             }
         );
@@ -311,9 +304,6 @@ export class DSInstance extends React.Component {
     }
 
     loadBackups() {
-        this.setState({
-            loadingOperate: true
-        });
         const cmd = ["dsctl", "-j", this.state.serverId, "backups"];
         log_cmd("loadBackupsDSInstance", "Load Backups", cmd);
         cockpit.spawn(cmd, { superuser: true, err: "message" }).done(content => {
@@ -324,7 +314,6 @@ export class DSInstance extends React.Component {
             }
             this.setState({
                 backupRows: rows,
-                loadingOperate: false
             });
         });
     }
@@ -490,7 +479,6 @@ export class DSInstance extends React.Component {
         } = this.state;
 
         let mainContent = "";
-
         if (pageLoadingState.state === "loading") {
             mainContent = (
                 <div id="loading-instances" className="all-pages ds-center">
@@ -760,7 +748,7 @@ class CreateInstanceModal extends React.Component {
             createDBSuffix: "",
             createDBName: "",
             createTLSCert: true,
-            createInitDB: "",
+            createInitDB: "noInit",
             loadingCreate: false
         };
 
@@ -1088,19 +1076,19 @@ class CreateInstanceModal extends React.Component {
                         >
                             <Icon type="pf" name="close" />
                         </button>
-                        <Modal.Title>Create New Server Instance</Modal.Title>
+                        <Modal.Title className="ds-center">Create New Server Instance</Modal.Title>
                     </Modal.Header>
                     <Modal.Body>
                         <Form horizontal>
                             <FormGroup controlId="createServerId">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="The instance name, this is what gets appended to 'slapi-'. The instance name can only contain letters, numbers, and:  # % : - _"
                                 >
                                     Instance Name
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         id="createServerId"
                                         type="text"
@@ -1113,12 +1101,12 @@ class CreateInstanceModal extends React.Component {
                             <FormGroup controlId="createPort">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="The server port number"
                                 >
                                     Port
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         type="number"
                                         min="0"
@@ -1131,12 +1119,12 @@ class CreateInstanceModal extends React.Component {
                             <FormGroup controlId="createSecurePort">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="The secure port number for TLS connections"
                                 >
                                     Secure Port
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         type="number"
                                         min="0"
@@ -1149,12 +1137,12 @@ class CreateInstanceModal extends React.Component {
                             <FormGroup controlId="createTLSCert">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="Create a self-signed certificate database"
                                 >
-                                    Create Self-Signed TLS Certificate DB
+                                    Create Self-Signed TLS Certificate
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <Checkbox
                                         id="createTLSCert"
                                         checked={createTLSCert}
@@ -1165,12 +1153,12 @@ class CreateInstanceModal extends React.Component {
                             <FormGroup controlId="createDM">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="The DN for the unrestricted  user"
                                 >
                                     Directory Manager DN
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         type="text"
                                         id="createDM"
@@ -1182,12 +1170,12 @@ class CreateInstanceModal extends React.Component {
                             <FormGroup controlId="createDMPassword">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="Directory Manager password."
                                 >
                                     Directory Manager Password
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         id="createDMPassword"
                                         type="password"
@@ -1198,10 +1186,10 @@ class CreateInstanceModal extends React.Component {
                                 </Col>
                             </FormGroup>
                             <FormGroup controlId="createDMPasswordConfirm">
-                                <Col componentClass={ControlLabel} sm={4} title="Confirm password.">
+                                <Col componentClass={ControlLabel} sm={5} title="Confirm password.">
                                     Confirm Password
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         id="createDMPasswordConfirm"
                                         type="password"
@@ -1213,15 +1201,15 @@ class CreateInstanceModal extends React.Component {
                             </FormGroup>
                             <hr />
                             <h5 className="ds-center">Optional Database Settings</h5>
-                            <FormGroup controlId="createDBSuffix">
+                            <FormGroup className="ds-margin-top-lg" controlId="createDBSuffix">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="Database suffix, like 'dc=example,dc=com'. The suffix must be a valid LDAP Distiguished Name (DN)"
                                 >
                                     Database Suffix
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         type="text"
                                         id="createDBSuffix"
@@ -1234,12 +1222,12 @@ class CreateInstanceModal extends React.Component {
                             <FormGroup controlId="createDBName">
                                 <Col
                                     componentClass={ControlLabel}
-                                    sm={4}
+                                    sm={5}
                                     title="The name for the backend database, like 'userroot'. The name can be a combination of alphanumeric characters, dashes (-), and underscores (_). No other characters are allowed, and the name must be unique across all backends."
                                 >
                                     Database Name
                                 </Col>
-                                <Col sm={8}>
+                                <Col sm={7}>
                                     <FormControl
                                         type="text"
                                         id="createDBName"
@@ -1254,7 +1242,7 @@ class CreateInstanceModal extends React.Component {
                                 controlId="createInitDBn"
                                 disabled={false}
                             >
-                                <Col smOffset={4} sm={8}>
+                                <Col smOffset={5} sm={7}>
                                     <Radio
                                         id="createInitDB"
                                         value="noInit"
@@ -1272,7 +1260,7 @@ class CreateInstanceModal extends React.Component {
                                 controlId="createInitDBs"
                                 disabled={false}
                             >
-                                <Col smOffset={4} sm={8}>
+                                <Col smOffset={5} sm={7}>
                                     <Radio
                                         id="createInitDB"
                                         value="createSuffix"
@@ -1290,7 +1278,7 @@ class CreateInstanceModal extends React.Component {
                                 controlId="createInitDBp"
                                 disabled={false}
                             >
-                                <Col smOffset={4} sm={8}>
+                                <Col smOffset={5} sm={7}>
                                     <Radio
                                         id="createInitDB"
                                         value="createSample"
diff --git a/src/cockpit/389-console/src/lib/customTableToolbar.jsx b/src/cockpit/389-console/src/lib/customTableToolbar.jsx
index d6b6e2e..6605591 100644
--- a/src/cockpit/389-console/src/lib/customTableToolbar.jsx
+++ b/src/cockpit/389-console/src/lib/customTableToolbar.jsx
@@ -36,7 +36,6 @@ class CustomTableToolbar extends React.Component {
                     <div className="ds-float-left">
                         <FormControl
                             type="text"
-                            id="find"
                             placeholder={placeholder}
                             value={searchFilterValue}
                             onChange={handleValueChange}
diff --git a/src/cockpit/389-console/src/lib/database/databaseTables.jsx b/src/cockpit/389-console/src/lib/database/databaseTables.jsx
index beca690..67bae31 100644
--- a/src/cockpit/389-console/src/lib/database/databaseTables.jsx
+++ b/src/cockpit/389-console/src/lib/database/databaseTables.jsx
@@ -930,6 +930,7 @@ class BackupTable extends React.Component {
         } else {
             backupTable =
                 <DSTable
+                    id="backupTable"
                     noSearchBar
                     getColumns={this.getColumns}
                     rowKey={this.state.rowKey}
diff --git a/src/cockpit/389-console/src/lib/dsTable.jsx b/src/cockpit/389-console/src/lib/dsTable.jsx
index 4b17840..399f1a3 100644
--- a/src/cockpit/389-console/src/lib/dsTable.jsx
+++ b/src/cockpit/389-console/src/lib/dsTable.jsx
@@ -273,7 +273,6 @@ class DSTable extends React.Component {
                     onNextPage={this.onNextPage}
                     onLastPage={this.onLastPage}
                     onSubmit={this.onSubmit}
-                    id={this.props.searchField}
                 />
             </div>
         );
@@ -400,7 +399,7 @@ DSTable.propTypes = {
     toolBarDisableLoadingSpinner: PropTypes.bool,
     toolBarPagination: PropTypes.array,
     toolBarPaginationPerPage: PropTypes.number,
-    noSearchBar: PropTypes.bool
+    noSearchBar: PropTypes.bool,
 };
 
 DSShortTable.propTypes = {
diff --git a/src/cockpit/389-console/src/lib/plugins/attributeUniqueness.jsx b/src/cockpit/389-console/src/lib/plugins/attributeUniqueness.jsx
index 66453f9..e31532c 100644
--- a/src/cockpit/389-console/src/lib/plugins/attributeUniqueness.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/attributeUniqueness.jsx
@@ -467,12 +467,14 @@ class AttributeUniqueness extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup controlId="configName">
-                                            <Col sm={3}>
-                                                <ControlLabel title='Sets the name of the plug-in configuration record. (cn) You can use any string, but "attribute_name Attribute Uniqueness" is recommended.'>
-                                                    Config Name
-                                                </ControlLabel>
+                                            <Col
+                                                componentClass={ControlLabel}
+                                                sm={4}
+                                                title='Sets the name of the plug-in configuration record. (cn) You can use any string, but "attribute_name Attribute Uniqueness" is recommended.'
+                                            >
+                                                Config Name
                                             </Col>
-                                            <Col sm={9}>
+                                            <Col sm={8}>
                                                 <FormControl
                                                     type="text"
                                                     value={configName}
@@ -488,12 +490,12 @@ class AttributeUniqueness extends React.Component {
                                         >
                                             <Col
                                                 componentClass={ControlLabel}
-                                                sm={3}
+                                                sm={4}
                                                 title="Sets the name of the attribute whose values must be unique. This attribute is multi-valued. (uniqueness-attribute-name)"
                                             >
                                                 Attribute Names
                                             </Col>
-                                            <Col sm={9}>
+                                            <Col sm={8}>
                                                 <Typeahead
                                                     allowNew
                                                     multiple
@@ -516,12 +518,12 @@ class AttributeUniqueness extends React.Component {
                                         >
                                             <Col
                                                 componentClass={ControlLabel}
-                                                sm={3}
+                                                sm={4}
                                                 title="Sets the DN under which the plug-in checks for uniqueness of the attributes value. This attribute is multi-valued (uniqueness-subtrees)"
                                             >
                                                 Subtrees
                                             </Col>
-                                            <Col sm={9}>
+                                            <Col sm={8}>
                                                 <Typeahead
                                                     allowNew
                                                     multiple
@@ -550,12 +552,12 @@ class AttributeUniqueness extends React.Component {
                                         >
                                             <Col
                                                 componentClass={ControlLabel}
-                                                sm={3}
+                                                sm={4}
                                                 title="Verifies that the value of the attribute set in uniqueness-attribute-name is unique in this subtree (uniqueness-top-entry-oc)"
                                             >
                                                 Top Entry OC
                                             </Col>
-                                            <Col sm={9}>
+                                            <Col sm={8}>
                                                 <Typeahead
                                                     allowNew
                                                     onChange={value => {
@@ -577,12 +579,12 @@ class AttributeUniqueness extends React.Component {
                                         >
                                             <Col
                                                 componentClass={ControlLabel}
-                                                sm={3}
+                                                sm={4}
                                                 title="Verifies if an attribute is unique, if the entry contains the object class set in this parameter (uniqueness-subtree-entries-oc)"
                                             >
                                                 Subtree Entries OC
                                             </Col>
-                                            <Col sm={6}>
+                                            <Col sm={5}>
                                                 <Typeahead
                                                     allowNew
                                                     onChange={value => {
@@ -614,7 +616,7 @@ class AttributeUniqueness extends React.Component {
                                         >
                                             <Col
                                                 componentClass={ControlLabel}
-                                                sm={3}
+                                                sm={4}
                                                 title="Identifies whether or not the config is enabled."
                                             >
                                                 Enable config
diff --git a/src/cockpit/389-console/src/lib/plugins/autoMembership.jsx b/src/cockpit/389-console/src/lib/plugins/autoMembership.jsx
index 6de8d3a..ab0661c 100644
--- a/src/cockpit/389-console/src/lib/plugins/autoMembership.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/autoMembership.jsx
@@ -771,8 +771,8 @@ class AutoMembership extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup key="definitionName" controlId="definitionName">
-                                            <Col sm={3}>
-                                                <ControlLabel>Definition Name</ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3}>
+                                                Definition Name
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
@@ -787,10 +787,8 @@ class AutoMembership extends React.Component {
                                         {Object.entries(modalDefinitionFields).map(
                                             ([id, content]) => (
                                                 <FormGroup key={id} controlId={id}>
-                                                    <Col sm={3}>
-                                                        <ControlLabel title={content.help}>
-                                                            {content.name}
-                                                        </ControlLabel>
+                                                    <Col componentClass={ControlLabel} sm={3} title={content.help}>
+                                                        {content.name}
                                                     </Col>
                                                     <Col sm={9}>
                                                         <FormControl
@@ -806,12 +804,8 @@ class AutoMembership extends React.Component {
                                             key="groupingAttrEntry"
                                             controlId="groupingAttrEntry"
                                         >
-                                            <Col sm={3}>
-                                                <ControlLabel
-                                                    title={`Specifies the name of the member attribute in the group entry and the attribute in the object entry that supplies the member attribute value, in the format group_member_attr:entry_attr (autoMemberGroupingAttr)`}
-                                                >
-                                                    Grouping Attributes
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Specifies the name of the member attribute in the group entry and the attribute in the object entry that supplies the member attribute value, in the format group_member_attr:entry_attr (autoMemberGroupingAttr)">
+                                                Grouping Attributes
                                             </Col>
                                             <Col sm={4}>
                                                 <Typeahead
@@ -840,6 +834,7 @@ class AutoMembership extends React.Component {
                                     </Form>
                                 </Col>
                             </Row>
+                            <hr />
                             <Row>
                                 <Col sm={12}>
                                     <AutoMembershipRegexTable
@@ -898,8 +893,8 @@ class AutoMembership extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup key="regexName" controlId="regexName">
-                                            <Col sm={3}>
-                                                <ControlLabel>Regex Name</ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3}>
+                                                Regex Name
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
@@ -912,12 +907,8 @@ class AutoMembership extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup key="regexExclusive" controlId="regexExclusive">
-                                            <Col sm={3}>
-                                                <ControlLabel
-                                                    title={`Sets a single regular expression to use to identify entries to exclude (autoMemberExclusiveRegex)`}
-                                                >
-                                                    Exclusive Regex
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Sets a single regular expression to use to identify entries to exclude (autoMemberExclusiveRegex)">
+                                                Exclusive Regex
                                             </Col>
                                             <Col sm={9}>
                                                 <Typeahead
@@ -936,12 +927,8 @@ class AutoMembership extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup key="regexInclusive" controlId="regexInclusive">
-                                            <Col sm={3}>
-                                                <ControlLabel
-                                                    title={`Sets a single regular expression to use to identify entries to exclude (autoMemberExclusiveRegex)`}
-                                                >
-                                                    Inclusive Regex
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Sets a single regular expression to use to identify entries to exclude (autoMemberExclusiveRegex)">
+                                                Inclusive Regex
                                             </Col>
                                             <Col sm={9}>
                                                 <Typeahead
@@ -963,12 +950,8 @@ class AutoMembership extends React.Component {
                                             key="regexTargetGroup"
                                             controlId="regexTargetGroup"
                                         >
-                                            <Col sm={3}>
-                                                <ControlLabel
-                                                    title={`Sets which group to add the entry to as a member, if it meets the regular expression conditions (autoMemberTargetGroup)`}
-                                                >
-                                                    Target Group
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Sets which group to add the entry to as a member, if it meets the regular expression conditions (autoMemberTargetGroup)">
+                                                Target Group
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
diff --git a/src/cockpit/389-console/src/lib/plugins/dna.jsx b/src/cockpit/389-console/src/lib/plugins/dna.jsx
index 4539255..f4b1e05 100644
--- a/src/cockpit/389-console/src/lib/plugins/dna.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/dna.jsx
@@ -880,8 +880,8 @@ class DNA extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup key="configName" controlId="configName">
-                                            <Col sm={4}>
-                                                <ControlLabel>Config Name</ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={4}>
+                                                Config Name
                                             </Col>
                                             <Col sm={8}>
                                                 <FormControl
@@ -921,10 +921,8 @@ class DNA extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup key="type" controlId="type">
-                                            <Col sm={4}>
-                                                <ControlLabel title="Sets which attributes have unique numbers being generated for them (dnaType)">
-                                                    Type
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={4} title="Sets which attributes have unique numbers being generated for them (dnaType)">
+                                                Type
                                             </Col>
                                             <Col sm={8}>
                                                 <Typeahead
@@ -944,10 +942,8 @@ class DNA extends React.Component {
                                         </FormGroup>
                                         {Object.entries(modalConfigFields).map(([id, content]) => (
                                             <FormGroup key={id} controlId={id}>
-                                                <Col sm={4}>
-                                                    <ControlLabel title={content.help}>
-                                                        {content.name}
-                                                    </ControlLabel>
+                                                <Col componentClass={ControlLabel} sm={4} title={content.help}>
+                                                    {content.name}
                                                 </Col>
                                                 <Col sm={8}>
                                                     <FormControl
diff --git a/src/cockpit/389-console/src/lib/plugins/linkedAttributes.jsx b/src/cockpit/389-console/src/lib/plugins/linkedAttributes.jsx
index 30900f7..accd694 100644
--- a/src/cockpit/389-console/src/lib/plugins/linkedAttributes.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/linkedAttributes.jsx
@@ -353,10 +353,8 @@ class LinkedAttributes extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup controlId="configName">
-                                            <Col sm={3}>
-                                                <ControlLabel title="The Linked Attributes configuration name">
-                                                    Config Name
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="The Linked Attributes configuration name">
+                                                Config Name
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
@@ -368,10 +366,8 @@ class LinkedAttributes extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup controlId="linkType">
-                                            <Col sm={3}>
-                                                <ControlLabel title="Sets the attribute that is managed manually by administrators (linkType)">
-                                                    Link Type
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Sets the attribute that is managed manually by administrators (linkType)">
+                                                Link Type
                                             </Col>
                                             <Col sm={9}>
                                                 <Typeahead
@@ -389,10 +385,8 @@ class LinkedAttributes extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup controlId="managedType">
-                                            <Col sm={3}>
-                                                <ControlLabel title="Sets the attribute that is created dynamically by the plugin (managedType)">
-                                                    Managed Type
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Sets the attribute that is created dynamically by the plugin (managedType)">
+                                                Managed Type
                                             </Col>
                                             <Col sm={9}>
                                                 <Typeahead
@@ -410,10 +404,8 @@ class LinkedAttributes extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup controlId="linkScope">
-                                            <Col sm={3}>
-                                                <ControlLabel title="Sets the base DN that restricts the plugin to a specific part of the directory tree (linkScope)">
-                                                    Link Scope
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Sets the base DN that restricts the plugin to a specific part of the directory tree (linkScope)">
+                                                Link Scope
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
diff --git a/src/cockpit/389-console/src/lib/plugins/managedEntries.jsx b/src/cockpit/389-console/src/lib/plugins/managedEntries.jsx
index b403fb2..679e919 100644
--- a/src/cockpit/389-console/src/lib/plugins/managedEntries.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/managedEntries.jsx
@@ -614,8 +614,8 @@ class ManagedEntries extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup key="configName" controlId="configName">
-                                            <Col sm={3}>
-                                                <ControlLabel>Config Name</ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3}>
+                                                Config Name
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
@@ -629,10 +629,8 @@ class ManagedEntries extends React.Component {
                                         </FormGroup>
                                         {Object.entries(modalConfigFields).map(([id, content]) => (
                                             <FormGroup key={id} controlId={id}>
-                                                <Col sm={3}>
-                                                    <ControlLabel title={content.help}>
-                                                        {content.name}
-                                                    </ControlLabel>
+                                                <Col componentClass={ControlLabel} sm={3} title={content.help}>
+                                                    {content.name}
                                                 </Col>
                                                 <Col sm={9}>
                                                     <FormControl
@@ -709,10 +707,8 @@ class ManagedEntries extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup controlId="templateDN">
-                                            <Col sm={4}>
-                                                <ControlLabel title="DN of the template entry">
-                                                    Template DN
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={4} title="DN of the template entry">
+                                                Template DN
                                             </Col>
                                             <Col sm={8}>
                                                 <FormControl
@@ -761,10 +757,8 @@ class ManagedEntries extends React.Component {
                                             controlId="templateStaticAttr"
                                             disabled={false}
                                         >
-                                            <Col sm={4}>
-                                                <ControlLabel title="Sets an attribute with a defined value that must be added to the automatically-generated entry (mepStaticAttr)">
-                                                    Static Attribute
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={4} title="Sets an attribute with a defined value that must be added to the automatically-generated entry (mepStaticAttr)">
+                                                Static Attribute
                                             </Col>
                                             <Col sm={8}>
                                                 <Typeahead
@@ -786,10 +780,8 @@ class ManagedEntries extends React.Component {
                                             controlId="templateMappedAttr"
                                             disabled={false}
                                         >
-                                            <Col sm={4}>
-                                                <ControlLabel title="Sets attributes in the Managed Entries template entry which must exist in the generated entry (mepMappedAttr)">
-                                                    Mapped Attributes
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={4} title="Sets attributes in the Managed Entries template entry which must exist in the generated entry (mepMappedAttr)">
+                                                Mapped Attributes
                                             </Col>
                                             <Col sm={8}>
                                                 <Typeahead
diff --git a/src/cockpit/389-console/src/lib/plugins/memberOf.jsx b/src/cockpit/389-console/src/lib/plugins/memberOf.jsx
index 9cbceff..74a74e6 100644
--- a/src/cockpit/389-console/src/lib/plugins/memberOf.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/memberOf.jsx
@@ -815,10 +815,8 @@ class MemberOf extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup controlId="configAutoAddOC" disabled={false}>
-                                            <Col sm={3}>
-                                                <ControlLabel title="If an entry does not have an object class that allows the memberOf attribute then the memberOf plugin will automatically add the object class listed in the memberOfAutoAddOC parameter">
-                                                    Auto Add OC
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="If an entry does not have an object class that allows the memberOf attribute then the memberOf plugin will automatically add the object class listed in the memberOfAutoAddOC parameter">
+                                                Auto Add OC
                                             </Col>
                                             <Col sm={9}>
                                                 <Typeahead
@@ -1042,10 +1040,11 @@ class MemberOf extends React.Component {
                             <Form horizontal>
                                 <FormGroup controlId="memberOfAutoAddOC" disabled={false}>
                                     <Col
+                                        componentClass={ControlLabel}
                                         sm={3}
                                         title="If an entry does not have an object class that allows the memberOf attribute then the memberOf plugin will automatically add the object class listed in the memberOfAutoAddOC parameter"
                                     >
-                                        <ControlLabel>Auto Add OC</ControlLabel>
+                                        Auto Add OC
                                     </Col>
                                     <Col sm={8}>
                                         <Typeahead
diff --git a/src/cockpit/389-console/src/lib/plugins/passthroughAuthentication.jsx b/src/cockpit/389-console/src/lib/plugins/passthroughAuthentication.jsx
index d0c4787..6b2d067 100644
--- a/src/cockpit/389-console/src/lib/plugins/passthroughAuthentication.jsx
+++ b/src/cockpit/389-console/src/lib/plugins/passthroughAuthentication.jsx
@@ -759,8 +759,8 @@ class PassthroughAuthentication extends React.Component {
                                 <Col sm={12}>
                                     <Form horizontal>
                                         <FormGroup key="pamConfigName" controlId="pamConfigName">
-                                            <Col sm={3}>
-                                                <ControlLabel>Config Name</ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3}>
+                                                Config Name
                                             </Col>
                                             <Col sm={9}>
                                                 <FormControl
@@ -833,10 +833,8 @@ class PassthroughAuthentication extends React.Component {
                                             controlId="pamIDAttr"
                                             disabled={false}
                                         >
-                                            <Col sm={3}>
-                                                <ControlLabel title="Contains the attribute name which is used to hold the PAM user ID (pamIDAttr)">
-                                                    ID Attribute
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={3} title="Contains the attribute name which is used to hold the PAM user ID (pamIDAttr)">
+                                                ID Attribute
                                             </Col>
                                             <Col sm={9}>
                                                 <Typeahead
@@ -904,10 +902,8 @@ class PassthroughAuthentication extends React.Component {
                                         {Object.entries(modalPAMConfigFields).map(
                                             ([id, content]) => (
                                                 <FormGroup key={id} controlId={id}>
-                                                    <Col sm={3}>
-                                                        <ControlLabel title={content.help}>
-                                                            {content.name}
-                                                        </ControlLabel>
+                                                    <Col componentClass={ControlLabel} sm={3} title={content.help}>
+                                                        {content.name}
                                                     </Col>
                                                     <Col sm={9}>
                                                         <FormControl
@@ -921,26 +917,30 @@ class PassthroughAuthentication extends React.Component {
                                         )}
 
                                         <FormGroup key="pamCheckboxes" controlId="pamCheckboxes">
-                                            <Col sm={4}>
-                                                <Checkbox
-                                                    id="pamFallback"
-                                                    checked={pamFallback}
-                                                    onChange={this.handleCheckboxChange}
-                                                    title={`Sets whether to fallback to regular LDAP authentication if PAM authentication fails (pamFallback)`}
-                                                >
-                                                    Fallback
-                                                </Checkbox>
-                                            </Col>
-                                            <Col sm={4}>
-                                                <Checkbox
-                                                    id="pamSecure"
-                                                    checked={pamSecure}
-                                                    onChange={this.handleCheckboxChange}
-                                                    title="Requires secure TLS connection for PAM authentication (pamSecure)"
-                                                >
-                                                    Secure
-                                                </Checkbox>
-                                            </Col>
+                                            <Row>
+                                                <Col smOffset={1} sm={7}>
+                                                    <Checkbox
+                                                        id="pamFallback"
+                                                        checked={pamFallback}
+                                                        onChange={this.handleCheckboxChange}
+                                                        title={`Sets whether to fallback to regular LDAP authentication if PAM authentication fails (pamFallback)`}
+                                                    >
+                                                        Fallback Enabled
+                                                    </Checkbox>
+                                                </Col>
+                                            </Row>
+                                            <Row className="ds-margin-top">
+                                                <Col smOffset={1} sm={7}>
+                                                    <Checkbox
+                                                        id="pamSecure"
+                                                        checked={pamSecure}
+                                                        onChange={this.handleCheckboxChange}
+                                                        title="Requires secure TLS connection for PAM authentication (pamSecure)"
+                                                    >
+                                                        Require Secure Connection
+                                                    </Checkbox>
+                                                </Col>
+                                            </Row>
                                         </FormGroup>
                                     </Form>
                                 </Col>
@@ -975,7 +975,7 @@ class PassthroughAuthentication extends React.Component {
                                 <Icon type="pf" name="close" />
                             </button>
                             <Modal.Title>
-                                {newPAMConfigEntry ? "Add" : "Edit"}
+                                {newPAMConfigEntry ? "Add " : "Edit "}
                                 Passthough Authentication Plugin URL
                             </Modal.Title>
                         </Modal.Header>
@@ -1022,10 +1022,8 @@ class PassthroughAuthentication extends React.Component {
                                         </FormGroup>
                                         {Object.entries(modalURLFields).map(([id, content]) => (
                                             <FormGroup key={id} controlId={id}>
-                                                <Col sm={5}>
-                                                    <ControlLabel title={content.help}>
-                                                        {content.name}
-                                                    </ControlLabel>
+                                                <Col componentClass={ControlLabel} sm={5} title={content.help}>
+                                                    {content.name}
                                                 </Col>
                                                 <Col sm={7}>
                                                     <FormControl
@@ -1075,7 +1073,7 @@ class PassthroughAuthentication extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup key="urlStartTLS" controlId="urlStartTLS">
-                                            <Col sm={4}>
+                                            <Col componentClass={ControlLabel} sm={5}>
                                                 <Checkbox
                                                     id="urlStartTLS"
                                                     checked={urlStartTLS}
@@ -1087,18 +1085,14 @@ class PassthroughAuthentication extends React.Component {
                                             </Col>
                                         </FormGroup>
                                         <FormGroup key="resultURL" controlId="resultURL">
-                                            <Col sm={5}>
-                                                <ControlLabel title="The URL that will be added or modified after you click 'Save'">
-                                                    Result URL
-                                                </ControlLabel>
+                                            <Col componentClass={ControlLabel} sm={5} title="The URL that will be added or modified after you click 'Save'">
+                                                Result URL
                                             </Col>
                                             <Col sm={7}>
-                                                <ControlLabel>
-                                                    {urlConnType}://{urlAuthDS}/{urlSubtree}{" "}
-                                                    {urlMaxConns},{urlMaxOps},{urlTimeout},
-                                                    {urlLDVer},{urlConnLifeTime},
-                                                    {urlStartTLS ? "1" : "0"}
-                                                </ControlLabel>
+                                                {urlConnType}://{urlAuthDS}/{urlSubtree}{" "}
+                                                {urlMaxConns},{urlMaxOps},{urlTimeout},
+                                                {urlLDVer},{urlConnLifeTime},
+                                                {urlStartTLS ? "1" : "0"}
                                             </Col>
                                         </FormGroup>
                                     </Form>
diff --git a/src/cockpit/389-console/src/lib/replication/replModals.jsx b/src/cockpit/389-console/src/lib/replication/replModals.jsx
index 4c15d71..0ea6f47 100644
--- a/src/cockpit/389-console/src/lib/replication/replModals.jsx
+++ b/src/cockpit/389-console/src/lib/replication/replModals.jsx
@@ -1300,7 +1300,7 @@ export class EnableReplModal extends React.Component {
                             <p className="ds-margin-top-xxlg">
                                 You can optionally define the authentication information
                                 for this replicated suffix.  Either a Manager DN and Password,
-                                a Bind Group DN, or both, can be provideed.  The Manager DN should
+                                a Bind Group DN, or both, can be provided.  The Manager DN should
                                 be an entry under "cn=config" and if it does not exist it will
                                 be created, while the Bind Group DN is usually an existing
                                 group located in the database suffix.  Typically, just the
diff --git a/src/cockpit/389-console/src/monitor.jsx b/src/cockpit/389-console/src/monitor.jsx
index a155f49..0b0c08e 100644
--- a/src/cockpit/389-console/src/monitor.jsx
+++ b/src/cockpit/389-console/src/monitor.jsx
@@ -166,11 +166,6 @@ export class Monitor extends React.Component {
     }
 
     loadSuffixTree(fullReset) {
-        if (this.state.firstLoad) {
-            this.setState({
-                firstLoad: false
-            });
-        }
         const cmd = [
             "dsconf", "-j", "ldapi://%2fvar%2frun%2fslapd-" + this.props.serverId + ".socket",
             "backend", "get-tree",
@@ -408,6 +403,11 @@ export class Monitor extends React.Component {
         //  - SNMP
         //  - Finally load the "tree"
         //
+        if (this.state.firstLoad) {
+            this.setState({
+                firstLoad: false
+            });
+        }
         let cmd = [
             "dsconf", "-j", "ldapi://%2fvar%2frun%2fslapd-" + this.props.serverId + ".socket",
             "config", "get", "nsslapd-auditlog", "nsslapd-accesslog", "nsslapd-errorlog", "nsslapd-auditfaillog"
diff --git a/src/cockpit/389-console/src/plugins.jsx b/src/cockpit/389-console/src/plugins.jsx
index ae24945..53ef514 100644
--- a/src/cockpit/389-console/src/plugins.jsx
+++ b/src/cockpit/389-console/src/plugins.jsx
@@ -162,8 +162,7 @@ export class Plugins extends React.Component {
                     var myObject = JSON.parse(content);
                     this.setState({
                         rows: myObject.items
-                    });
-                    this.toggleLoading();
+                    }, this.toggleLoading());
                 })
                 .fail(err => {
                     if (err != 0) {
diff --git a/src/lib389/lib389/cli_conf/plugins/posix_winsync.py b/src/lib389/lib389/cli_conf/plugins/posix_winsync.py
index 0512418..d4de7ae 100644
--- a/src/lib389/lib389/cli_conf/plugins/posix_winsync.py
+++ b/src/lib389/lib389/cli_conf/plugins/posix_winsync.py
@@ -41,7 +41,7 @@ def do_fixup(inst, basedn, log, args):
 
 def _add_parser_args(parser):
     parser.add_argument('--create-memberof-task', choices=['true', 'false'], type=str.lower,
-                        help='Sets whether to run the memberOf fix-up task immediately after a sync run in order '
+                        help='Sets whether to run the memberUID fix-up task immediately after a sync run in order '
                              'to update group memberships for synced users (posixWinsyncCreateMemberOfTask)')
     parser.add_argument('--lower-case-uid', choices=['true', 'false'], type=str.lower,
                         help='Sets whether to store (and, if necessary, convert) the UID value in the memberUID '