Skip to content

Commit

Permalink
Migrate Role, User, Entry, CoS tables
Browse files Browse the repository at this point in the history
  • Loading branch information
droideck committed Nov 15, 2024
1 parent afb2c71 commit ad17528
Show file tree
Hide file tree
Showing 5 changed files with 402 additions and 183 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -974,7 +974,6 @@ class AddCosTemplate extends React.Component {
</div>
);

// Transform the ObjectClass table section
const objectClassStep = (
<>
<div className="ds-container">
Expand Down Expand Up @@ -1077,7 +1076,6 @@ class AddCosTemplate extends React.Component {
</>
);

// Transform the Attribute table section
const attributeStep = (
<>
<div className="ds-container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ import {
Wizard
} from '@patternfly/react-core/deprecated';
import {
TableVariant,
breakWord,
headerCol
headerCol,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
} from '@patternfly/react-table';
import {
Table,
TableHeader,
TableBody
} from '@patternfly/react-table/deprecated';
import {
createLdapEntry,
generateUniqueId,
Expand Down Expand Up @@ -727,52 +727,75 @@ class AddLdapEntry extends React.Component {
</TextContent>
{this.buildOCDropdown()}
</div>
{ loading &&
{ loading ? (
<div>
<Bullseye className="ds-margin-top-xlg" key="add-entry-bulleye">
<Title headingLevel="h3" size="lg" key="loading-title">
<Bullseye className="ds-margin-top-xlg">
<Title headingLevel="h3" size="lg">
{_("Loading ObjectClasses ...")}
</Title>
<Spinner className="ds-center" size="lg" />
</Bullseye>
<Spinner className="ds-center" size="lg" key="loading-spinner" />
</div>}
<div className={loading ? "ds-hidden" : ""}>
<Grid className="ds-margin-top-lg">
<GridItem span={5}>
<SearchInput
className="ds-font-size-md"
placeholder={_("Search Objectclasses")}
value={this.state.searchOCValue}
onChange={this.handleOCSearchChange}
onClear={(evt, val) => this.handleOCSearchChange(evt, '')}
/>
</GridItem>
<GridItem span={7}>
<Pagination
value="ObjectClassTable"
itemCount={itemCountOc}
page={pageOc}
perPage={perPageOc}
onSetPage={this.handleSetPageOc}
widgetId="pagination-step-objectclass"
onPerPageSelect={this.handlePerPageSelectOc}
variant="top"
isCompact
/>
</GridItem>
</Grid>
<Table
cells={columnsOc}
rows={pagedRowsOc}
canSelectAll={false}
onSelect={this.handleSelectOc}
variant={TableVariant.compact}
aria-label="Pagination All ObjectClasses"
>
<TableHeader />
<TableBody />
</Table>
</div>
</div>
) : (
<div>
<Grid className="ds-margin-top-lg">
<GridItem span={5}>
<SearchInput
className="ds-font-size-md"
placeholder={_("Search Objectclasses")}
value={this.state.searchOCValue}
onChange={this.handleOCSearchChange}
onClear={(evt) => this.handleOCSearchChange(evt, '')}
/>
</GridItem>
<GridItem span={7}>
<Pagination
itemCount={itemCountOc}
page={pageOc}
perPage={perPageOc}
onSetPage={this.handleSetPageOc}
widgetId="pagination-step-objectclass"
onPerPageSelect={this.handlePerPageSelectOc}
variant="top"
isCompact
/>
</GridItem>
</Grid>
<Table aria-label="Pagination All ObjectClasses" variant="compact">
<Thead>
<Tr>
<Th />
{columnsOc.map((column, columnIndex) => (
<Th key={columnIndex}>
{typeof column === 'object' ? column.title : column}
</Th>
))}
</Tr>
</Thead>
<Tbody>
{pagedRowsOc.map((row, rowIndex) => (
<Tr key={rowIndex}>
<Td
select={{
rowIndex,
onSelect: this.handleSelectOc,
isSelected: row.selected
}}
/>
{row.cells.map((cell, cellIndex) => (
<Td
key={`${rowIndex}_${cellIndex}`}
dataLabel={columnsOc[cellIndex]?.title || columnsOc[cellIndex]}
>
{typeof cell === 'object' ? cell.title : cell}
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</div>
)}
</>
);

Expand All @@ -793,7 +816,7 @@ class AddLdapEntry extends React.Component {
placeholder={_("Search Attributes")}
value={this.state.searchAttrValue}
onChange={this.handleAttrSearchChange}
onClear={(evt, val) => this.handleAttrSearchChange(evt, '')}
onClear={(evt) => this.handleAttrSearchChange(evt, '')}
/>
</GridItem>
<GridItem span={7}>
Expand All @@ -808,17 +831,38 @@ class AddLdapEntry extends React.Component {
/>
</GridItem>
</Grid>
<Table
className="ds-margin-top"
cells={columnsAttr}
rows={pagedRowsAttr}
onSelect={this.handleSelectAttr}
variant={TableVariant.compact}
aria-label="Pagination Attributes"
canSelectAll={false}
>
<TableHeader />
<TableBody />
<Table aria-label="Pagination Attributes" variant="compact">
<Thead>
<Tr>
<Th />
{columnsAttr.map((column, columnIndex) => (
<Th key={columnIndex}>
{typeof column === 'object' ? column.title : column}
</Th>
))}
</Tr>
</Thead>
<Tbody>
{pagedRowsAttr.map((row, rowIndex) => (
<Tr key={rowIndex}>
<Td
select={{
rowIndex,
onSelect: this.handleSelectAttr,
isSelected: row.selected
}}
/>
{row.cells.map((cell, cellIndex) => (
<Td
key={`${rowIndex}_${cellIndex}`}
dataLabel={columnsAttr[cellIndex]?.title || columnsAttr[cellIndex]}
>
{typeof cell === 'object' ? cell.title : cell}
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ import {
Wizard
} from '@patternfly/react-core/deprecated';
import {
TableVariant,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
headerCol
} from '@patternfly/react-table';
import {
Table,
TableHeader,
TableBody
} from '@patternfly/react-table/deprecated';
import EditableTable from '../../lib/editableTable.jsx';
import LdapNavigator from '../../lib/ldapNavigator.jsx';
import {
Expand Down Expand Up @@ -677,7 +677,8 @@ class AddRole extends React.Component {
pagedRowsRole, ldifArray, noEmptyValue, namingAttrVal, namingAttr,
resultVariant, editableTableData, stepIdReached, namingVal,
rolesSearchBaseDn, rolesAvailableOptions, rolesChosenOptions,
showLDAPNavModal, commandOutput, roleType
showLDAPNavModal, commandOutput, roleType, isAttrDropDownOpen,
selectedAttributes
} = this.state;

const rdnValue = namingVal;
Expand Down Expand Up @@ -838,7 +839,29 @@ class AddRole extends React.Component {
{_("Select Entry Attributes")}
</Text>
</TextContent>
{this.buildAttrDropdown()}
<Dropdown
className="ds-dropdown-padding"
position="left"
onSelect={this.handleAttrDropDownSelect}
toggle={
<BadgeToggle
id="toggle-attr-select"
badgeProps={{
className: selectedAttributes.length > 0 ? "ds-badge-bgcolor" : undefined,
isRead: selectedAttributes.length === 0
}}
onToggle={(_event, isOpen) => this.handleAttrDropDownToggle(isOpen)}
>
{selectedAttributes.length > 0 ?
`${selectedAttributes.length} ${_("selected")}` :
`0 ${_("selected")}`}
</BadgeToggle>
}
isOpen={isAttrDropDownOpen}
dropdownItems={selectedAttributes.map((attr) =>
<DropdownItem key={attr}>{attr}</DropdownItem>
)}
/>
</div>
<Pagination
itemCount={itemCountAddRole}
Expand All @@ -849,15 +872,42 @@ class AddRole extends React.Component {
onPerPageSelect={this.handlePerPageSelectAddRole}
isCompact
/>
<Table
cells={columnsRole}
rows={pagedRowsRole}
onSelect={this.handleSelect}
variant={TableVariant.compact}
aria-label="Pagination Role Attributes"
>
<TableHeader />
<TableBody />
<Table aria-label="Role Attributes Table" variant="compact">
<Thead>
<Tr>
<Th select={{
onSelect: (_event, isSelected) => this.handleSelect(_event, isSelected, -1),
isSelected: this.state.allAttributesSelected
}} />
{columnsRole.map((column, columnIndex) => (
<Th key={columnIndex}>
{typeof column === 'object' ? column.title : column}
</Th>
))}
</Tr>
</Thead>
<Tbody>
{pagedRowsRole.map((row, rowIndex) => (
<Tr key={rowIndex}>
<Td
select={{
rowIndex,
onSelect: this.handleSelect,
isSelected: row.selected,
isDisabled: row.disableCheckbox
}}
/>
{row.cells.map((cell, cellIndex) => (
<Td
key={`${rowIndex}_${cellIndex}`}
dataLabel={columnsRole[cellIndex]?.title || columnsRole[cellIndex]}
>
{cell}
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</>
);
Expand Down
Loading

0 comments on commit ad17528

Please sign in to comment.