Issue 5714 - UI - fix typo, db settings, log settings, and LDAP edito…

…r paginations Description: - DB settings "Look Through Limit" was misspelled, and the "+" increment button was not working - Configuring logs would not correctly enable/disable the save button - LDAP Browser - Pagination was not working correctly when you search for attributes/objectclasses. We were also missing some "search" inputs for attributes in some of the forms. relates: #5714 Reviewed by: spichugi(Thanks!)
389ds · Mar 31, 2023 · fc34eec · fc34eec
1 parent ad0ec0c
commit fc34eec
Show file tree

Hide file tree

Showing 15 changed files with 139 additions and 42 deletions.
diff --git a/src/cockpit/389-console/src/lib/database/databaseConfig.jsx b/src/cockpit/389-console/src/lib/database/databaseConfig.jsx
@@ -601,21 +601,21 @@ export class GlobalDatabaseConfig extends React.Component {
                     </TextContent>
 
                     <div className="ds-margin-top-lg">
-                        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleNavSelect}>
+                        <Tabs isFilled activeKey={this.state.activeTabKey} onSelect={this.handleNavSelect}>
                             <Tab eventKey={0} title={<TabTitleText>Limits</TabTitleText>}>
                                 <div className="ds-left-indent-md">
                                     <Grid
                                         title="The maximum number of entries that the Directory Server will check when examining candidate entries in response to a search request (nsslapd-lookthrough-limit)."
                                         className="ds-margin-top-xlg"
                                     >
                                         <GridItem className="ds-label" span={4}>
-                                            Database Look Though Limit
+                                            Database Look Through Limit
                                         </GridItem>
                                         <GridItem span={8}>
                                             <NumberInput
                                                 value={this.state.looklimit}
                                                 min={-1}
-                                                max={0}
+                                                max={this.maxValue}
                                                 onMinus={() => { this.onMinusConfig("looklimit") }}
                                                 onChange={(e) => { this.onConfigChange(e, "looklimit", -1, 0) }}
                                                 onPlus={() => { this.onPlusConfig("looklimit") }}

diff --git a/src/cockpit/389-console/src/lib/database/globalPwp.jsx b/src/cockpit/389-console/src/lib/database/globalPwp.jsx
@@ -1238,7 +1238,7 @@ export class GlobalPwPolicy extends React.Component {
         } else {
             pwp_element =
                 <div className={this.state.loading ? 'ds-fadeout ds-margin-bottom-md' : 'ds-fadein ds-left-margin ds-margin-bottom-md'}>
-                    <Tabs className="ds-margin-top-lg" activeKey={this.state.activeTabKey} onSelect={this.handleNavSelect}>
+                    <Tabs isFilled className="ds-margin-top-lg" activeKey={this.state.activeTabKey} onSelect={this.handleNavSelect}>
                         <Tab eventKey={0} title={<TabTitleText>General Settings</TabTitleText>}>
                             <Form className="ds-margin-left-sm" isHorizontal autoComplete="off">
                                 <Grid className="ds-margin-top-xlg" title="Allow subtree/user defined local password policies (nsslapd-pwpolicy-local).">

diff --git a/src/cockpit/389-console/src/lib/database/suffix.jsx b/src/cockpit/389-console/src/lib/database/suffix.jsx
@@ -904,7 +904,7 @@ export class Suffix extends React.Component {
                 </Grid>
 
                 <div className="ds-sub-header">
-                    <Tabs activeKey={activeTabKey} onSelect={this.handleNavSelect}>
+                    <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleNavSelect}>
                         <Tab eventKey={0} title={<TabTitleText>Settings</TabTitleText>}>
                             <SuffixConfig
                                 cachememsize={this.state.cachememsize}

diff --git a/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/addCosTemplate.jsx b/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/addCosTemplate.jsx
@@ -95,6 +95,7 @@ class AddCosTemplate extends React.Component {
             ],
             rowsOc: [],
             rowsAttr: [],
+            rowsAttrOrig: [],
             rowsValues: [],
             pagedRowsOc: [],
             pagedRowsAttr: [],
@@ -105,7 +106,9 @@ class AddCosTemplate extends React.Component {
             goBackToCoSDefinition: false,
             createdTemplate: "",
             isConfirmModalOpen: false,
-            createTemplateEnd: false
+            createTemplateEnd: false,
+            searchValue: "",
+            searchAttrValue: "",
         };
 
         this.handleConfirmModalToggle = () => {
@@ -279,8 +282,36 @@ class AddCosTemplate extends React.Component {
             this.setState({
                 rowsOc: ocRows,
                 pagedRowsOc: ocRows.slice(0, this.state.perPageOc),
+                itemCountOc: ocRows.length,
+                searchValue: value
             })
         }
+
+        this.onAttrSearchChange = (value, event) => {
+            let attrRows = [];
+            let allAttrs = this.state.rowsAttrOrig;
+            const val = value.toLowerCase();
+
+            // Process search filter on the entire list
+            if (val !== "") {
+                for (const row of allAttrs) {
+                    const name = row.attributeName.toLowerCase();
+                    if (name.includes(val)) {
+                        attrRows.push(row);
+                    }
+                }
+            } else {
+                // Restore entire row list
+                attrRows = allAttrs;
+            }
+
+            this.setState({
+                rowsAttr: attrRows,
+                pagedRowsAttr: attrRows.slice(0, this.state.perPageAttr),
+                itemCountAttr: attrRows.length,
+                searchAttrValue: value
+            });
+        }
         // End constructor().
     }
 
@@ -625,6 +656,7 @@ class AddCosTemplate extends React.Component {
         rowsAttr.sort((a, b) => (a.attributeName > b.attributeName) ? 1 : -1)
         this.setState({
             rowsAttr,
+            rowsAttrOrig: [...rowsAttr],
             selectedAttributes: rowsAttr.filter(item => item.isAttributeSelected)
                 .map(attrObj => [attrObj.attributeName, attrObj.cells[1]]),
             itemCountAttr: rowsAttr.length,
@@ -999,6 +1031,30 @@ class AddCosTemplate extends React.Component {
                     </TextContent>
                     {this.buildAttrDropdown()}
                 </div>
+                <Grid className="ds-margin-top-lg">
+                    <GridItem span={5}>
+                        <SearchInput
+                            className="ds-font-size-md"
+                            placeholder='Search Attributes'
+                            value={this.state.searchAttrValue}
+                            onChange={this.onAttrSearchChange}
+                            onClear={(evt) => this.onAttrSearchChange('', evt)}
+                        />
+                    </GridItem>
+                    <GridItem span={7}>
+                        <Pagination
+                            itemCount={itemCountAttr}
+                            page={pageAttr}
+                            perPage={perPageAttr}
+                            onSetPage={this.onSetPageAttr}
+                            widgetId="pagination-step-attributes"
+                            onPerPageSelect={this.onPerPageSelectAttr}
+                            dropDirection="up"
+                            isCompact
+                        />
+                    </GridItem>
+                </Grid>
+
                 <Table
                     className="ds-margin-top"
                     cells={columnsAttr}
@@ -1011,16 +1067,7 @@ class AddCosTemplate extends React.Component {
                     <TableHeader />
                     <TableBody />
                 </Table>
-                <Pagination
-                    itemCount={itemCountAttr}
-                    page={pageAttr}
-                    perPage={perPageAttr}
-                    onSetPage={this.onSetPageAttr}
-                    widgetId="pagination-step-attributes"
-                    onPerPageSelect={this.onPerPageSelectAttr}
-                    dropDirection="up"
-                    isCompact
-                />
+
             </>
         );
 

diff --git a/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/addLdapEntry.jsx b/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/addLdapEntry.jsx
@@ -83,6 +83,7 @@ class AddLdapEntry extends React.Component {
             ],
             rowsOc: [],
             rowsAttr: [],
+            rowsAttrOrig: [],
             rowsValues: [],
             pagedRowsOc: [],
             pagedRowsAttr: [],
@@ -91,6 +92,8 @@ class AddLdapEntry extends React.Component {
             attrsToRemove: [],
             namingAttr: "",
             adding: true,
+            searchOCValue: "",
+            searchAttrValue: "",
         };
 
         this.onNext = ({ id }) => {
@@ -203,7 +206,35 @@ class AddLdapEntry extends React.Component {
             this.setState({
                 rowsOc: ocRows,
                 pagedRowsOc: ocRows.slice(0, this.state.perPageOc),
-            })
+                searchOCValue: value,
+                itemCountOc: ocRows.length,
+            });
+        }
+
+        this.onAttrSearchChange = (value, event) => {
+            let attrRows = [];
+            let allAttrs = this.state.rowsAttrOrig;
+            const val = value.toLowerCase();
+
+            // Process search filter on the entire list
+            if (val !== "") {
+                for (const row of allAttrs) {
+                    const name = row.attributeName.toLowerCase();
+                    if (name.includes(val)) {
+                        attrRows.push(row);
+                    }
+                }
+            } else {
+                // Restore entire row list
+                attrRows = allAttrs;
+            }
+
+            this.setState({
+                rowsAttr: attrRows,
+                pagedRowsAttr: attrRows.slice(0, this.state.perPageAttr),
+                itemCountAttr: attrRows.length,
+                searchAttrValue: value
+            });
         }
         // End constructor().
     }
@@ -387,7 +418,7 @@ class AddLdapEntry extends React.Component {
         // The property 'isAttributeSelected' is used to build the LDAP entry to add.
         // The row ID cannot be used since it changes with the pagination.
         const attrName = this.state.pagedRowsAttr[rowId].cells[0];
-        let allItems = [...this.state.rowsAttr];
+        let allItems = [...this.state.rowsAttrOrig];
         const index = allItems.findIndex(item => item.cells[0] === attrName);
         allItems[index].isAttributeSelected = isSelected;
         const selectedAttributes = allItems
@@ -522,6 +553,7 @@ class AddLdapEntry extends React.Component {
         rowsAttr.sort((a, b) => (a.attributeName > b.attributeName) ? 1 : -1)
         this.setState({
             rowsAttr,
+            rowsAttrOrig: [...rowsAttr],
             selectedAttributes: rowsAttr.filter(item => item.isAttributeSelected)
                 .map(attrObj => [attrObj.attributeName, attrObj.cells[1]]),
             itemCountAttr: rowsAttr.length,
@@ -724,7 +756,7 @@ class AddLdapEntry extends React.Component {
                             <SearchInput
                                 className="ds-font-size-md"
                                 placeholder='Search Objectclasses'
-                                value={this.state.searchValue}
+                                value={this.state.searchOCValue}
                                 onChange={this.onOCSearchChange}
                                 onClear={(evt) => this.onOCSearchChange('', evt)}
                             />
@@ -768,6 +800,28 @@ class AddLdapEntry extends React.Component {
                     </TextContent>
                     {this.buildAttrDropdown()}
                 </div>
+                <Grid className="ds-margin-top-lg">
+                    <GridItem span={5}>
+                        <SearchInput
+                            className="ds-font-size-md"
+                            placeholder='Search Attributes'
+                            value={this.state.searchAttrValue}
+                            onChange={this.onAttrSearchChange}
+                            onClear={(evt) => this.onAttrSearchChange('', evt)}
+                        />
+                    </GridItem>
+                    <GridItem span={7}>
+                        <Pagination
+                            itemCount={itemCountAttr}
+                            page={pageAttr}
+                            perPage={perPageAttr}
+                            onSetPage={this.onSetPageAttr}
+                            widgetId="pagination-step-attributes"
+                            onPerPageSelect={this.onPerPageSelectAttr}
+                            isCompact
+                        />
+                    </GridItem>
+                </Grid>
                 <Table
                     className="ds-margin-top"
                     cells={columnsAttr}
@@ -780,16 +834,6 @@ class AddLdapEntry extends React.Component {
                     <TableHeader />
                     <TableBody />
                 </Table>
-                <Pagination
-                    itemCount={itemCountAttr}
-                    page={pageAttr}
-                    perPage={perPageAttr}
-                    onSetPage={this.onSetPageAttr}
-                    widgetId="pagination-step-attributes"
-                    onPerPageSelect={this.onPerPageSelectAttr}
-                    dropDirection="up"
-                    isCompact
-                />
             </>
         );
 

diff --git a/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/addUser.jsx b/src/cockpit/389-console/src/lib/ldap_editor/wizards/operations/addUser.jsx
@@ -274,6 +274,7 @@ class AddUser extends React.Component {
                 rowsUser: attrRows,
                 pagedRowsUser: attrRows.slice(0, this.state.perPageAttr),
                 itemCountAddUser: attrRows.length,
+                searchValue: value
             })
         }
 

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
@@ -98,6 +98,8 @@ class EditLdapEntry extends React.Component {
             groupMembers: [],
             groupGenericEditor: false,
             localProps: {...this.props},
+            searchOCValue: "",
+            searchValue: "",
         };
 
         this.onNext = ({ id }) => {
@@ -206,6 +208,8 @@ class EditLdapEntry extends React.Component {
             this.setState({
                 rowsOc: ocRows,
                 pagedRowsOc: ocRows.slice(0, this.state.perPageOc),
+                itemCountOc: ocRows.length,
+                searchOCValue: value
             })
         }
 
@@ -234,6 +238,7 @@ class EditLdapEntry extends React.Component {
                 rowsAttr: attrRows,
                 pagedRowsAttr: attrRows.slice(0, this.state.perPageAttr),
                 itemCountAttr: attrRows.length,
+                searchValue: value,
             })
         }
 
@@ -1226,7 +1231,7 @@ class EditLdapEntry extends React.Component {
                             <SearchInput
                                 className="ds-font-size-md"
                                 placeholder='Search Objectclasses'
-                                value={this.state.searchValue}
+                                value={this.state.searchOCValue}
                                 onChange={this.onOCSearchChange}
                                 onClear={(evt) => this.onOCSearchChange('', evt)}
                             />

diff --git a/src/cockpit/389-console/src/lib/monitor/replMonitor.jsx b/src/cockpit/389-console/src/lib/monitor/replMonitor.jsx
@@ -1505,7 +1505,7 @@ export class ReplMonitor extends React.Component {
         return (
             <div>
                 <div id="monitor-suffix-page" className="ds-tab-table">
-                    <Tabs activeKey={this.state.activeTabReplKey} onSelect={this.handleNavReplSelect}>
+                    <Tabs isFilled activeKey={this.state.activeTabReplKey} onSelect={this.handleNavReplSelect}>
                         <Tab eventKey={0} title={<TabTitleText>Synchronization Report</TabTitleText>}>
                             {reportContent}
                         </Tab>

diff --git a/src/cockpit/389-console/src/lib/monitor/serverMonitor.jsx b/src/cockpit/389-console/src/lib/monitor/serverMonitor.jsx
@@ -333,7 +333,7 @@ export class ServerMonitor extends React.Component {
                         </TextContent>
                     </GridItem>
                 </Grid>
-                <Tabs className="ds-margin-top-lg" activeKey={this.state.activeKey} onSelect={this.handleNavSelect}>
+                <Tabs isFilled className="ds-margin-top-lg" activeKey={this.state.activeKey} onSelect={this.handleNavSelect}>
                     <Tab eventKey={0} title={<TabTitleText>Resource Charts</TabTitleText>}>
                         <Card className="ds-margin-top-lg" isSelectable>
                             <CardBody>

diff --git a/src/cockpit/389-console/src/lib/replication/replSuffix.jsx b/src/cockpit/389-console/src/lib/replication/replSuffix.jsx
@@ -316,7 +316,7 @@ export class ReplSuffix extends React.Component {
 
         let enabledContent =
             <div className={suffixClass}>
-                <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleNavSelect}>
+                <Tabs isFilled activeKey={this.state.activeTabKey} onSelect={this.handleNavSelect}>
                     <Tab eventKey={0} title={<TabTitleText>Configuration</TabTitleText>}>
                         <ReplConfig
                             suffix={this.props.suffix}

diff --git a/src/cockpit/389-console/src/lib/server/accessLog.jsx b/src/cockpit/389-console/src/lib/server/accessLog.jsx
@@ -179,15 +179,15 @@ export class ServerAccessLog extends React.Component {
 
         // Check if a setting was changed, if so enable the save button
         for (const config_attr of config_attrs) {
-            if (attr === config_attr && this.state['_' + config_attr] !== value) {
+            if (attr === config_attr && this.state['_' + config_attr].toString() !== value.toString()) {
                 disableSaveBtn = false;
                 break;
             }
         }
 
         // Now check for differences in values that we did not touch
         for (const config_attr of config_attrs) {
-            if (attr !== config_attr && this.state['_' + config_attr] !== this.state[config_attr]) {
+            if (attr !== config_attr && this.state['_' + config_attr].toString() !== this.state[config_attr].toString()) {
                 disableSaveBtn = false;
                 break;
             }

diff --git a/src/cockpit/389-console/src/lib/server/auditLog.jsx b/src/cockpit/389-console/src/lib/server/auditLog.jsx
@@ -197,15 +197,15 @@ export class ServerAuditLog extends React.Component {
 
         // Check if a setting was changed, if so enable the save button
         for (const config_attr of config_attrs) {
-            if (attr === config_attr && this.state['_' + config_attr] !== value) {
+            if (attr === config_attr && this.state['_' + config_attr].toString() !== value.toString()) {
                 disableSaveBtn = false;
                 break;
             }
         }
 
         // Now check for differences in values that we did not touch
         for (const config_attr of config_attrs) {
-            if (attr !== config_attr && this.state['_' + config_attr] !== this.state[config_attr]) {
+            if (attr !== config_attr && this.state['_' + config_attr].toString() !== this.state[config_attr].toString()) {
                 disableSaveBtn = false;
                 break;
             }