Skip to content

Commit

Permalink
Update 389 DS UI components to PF5
Browse files Browse the repository at this point in the history
  • Loading branch information
@droideck
droideck committed Nov 22, 2024
1 parent b719618 commit c9090a5
Show file tree
Hide file tree
Showing 94 changed files with 6,994 additions and 5,034 deletions.
2 changes: 1 addition & 1 deletion src/cockpit/389-console/buildAndRun.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ if [ $? != 0 ]; then
fi

printf "\nBuilding and watching ...\n"
ESBUILD_WATCH=true ./build.js
./build.js --watch
# npm run watch
7 changes: 6 additions & 1 deletion src/cockpit/389-console/pkg/lib/cockpit-po-plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ function get_po_files() {
}

function get_plural_expr(statement) {
if (statement === undefined) {
console.error("Plural-Forms header is missing in the PO file");
return "'(n) => n != 1'"; // Default plural expression for English
}

try {
/* Check that the plural forms isn't being sneaky since we build a function here */
Jed.PF.parse(statement);
Expand Down Expand Up @@ -62,7 +67,7 @@ function buildFile(po_file, subdir, filename, filter) {
const chunks = [
'{\n',
' "": {\n',
` "plural-forms": ${get_plural_expr(parsed.headers['Plural-Forms'])},\n`,
` "plural-forms": ${get_plural_expr(parsed.headers['plural-forms'])},\n`,
` "language": "${parsed.headers.Language}",\n`,
` "language-direction": "${dir}"\n`,
' }'
Expand Down
20 changes: 9 additions & 11 deletions src/cockpit/389-console/src/LDAPEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
Breadcrumb,
BreadcrumbItem,
Button,
Icon ,
Modal,
ModalVariant,
Spinner,
Expand Down Expand Up @@ -43,10 +44,7 @@ import EditorTableView from './lib/ldap_editor/tableView.jsx';
import EditorTreeView from './lib/ldap_editor/treeView.jsx';
import { SearchDatabase } from './lib/ldap_editor/search.jsx';
import GenericWizard from './lib/ldap_editor/wizards/genericWizard.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faSyncAlt
} from '@fortawesome/free-solid-svg-icons';
import { SyncAltIcon } from '@patternfly/react-icons';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { log_cmd } from "./lib/tools.jsx";

Expand Down Expand Up @@ -127,7 +125,7 @@ export class LDAPEditor extends React.Component {
};

// Actions when user clicks on the Entry Details menu
this.onToggleEntryMenu = isOpen => {
this.onToggleEntryMenu = (_event, isOpen) => {
this.setState({
entryMenuIsOpen: isOpen
});
Expand Down Expand Up @@ -1188,12 +1186,12 @@ export class LDAPEditor extends React.Component {
</BreadcrumbItem>
))}
</Breadcrumb>
<FontAwesomeIcon
className="ds-left-margin ds-refresh"
icon={faSyncAlt}
title={_("Refresh")}
onClick={this.handleReload}
/>
<Icon>
<SyncAltIcon
className="ds-left-margin ds-refresh"
onClick={this.handleReload}
/>
</Icon>
</div>
<div className={this.state.searching ? "ds-margin-top-xlg ds-center" : "ds-hidden"}>
<TextContent>
Expand Down
30 changes: 17 additions & 13 deletions src/cockpit/389-console/src/database.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
FormSelect,
FormSelectOption,
FormHelperText,
HelperText,
HelperTextItem,
Modal,
ModalVariant,
Spinner,
Expand Down Expand Up @@ -718,7 +720,7 @@ export class Database extends React.Component {
});
}

onHandleSelectChange(value, event) {
onHandleSelectChange(_event, value) {
let noInit = false;
let addSuffix = false;
let addSample = false;
Expand All @@ -738,7 +740,7 @@ export class Database extends React.Component {
});
}

onHandleChange(str, e) {
onHandleChange(e, str) {
// Handle the Create Suffix modal changes
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
let valueErr = false;
Expand Down Expand Up @@ -1488,9 +1490,6 @@ class CreateSuffixModal extends React.Component {
label={_("Suffix DN")}
fieldId="createSuffix"
title={_("Database suffix, like 'dc=example,dc=com'. The suffix must be a valid LDAP Distiguished Name (DN).")}
helperTextInvalid={_("The DN of the suffix is invalid")}
helperTextInvalidIcon={<ExclamationCircleIcon />}
validated={error.createSuffix ? "error" : "noval"}
>
<TextInput
isRequired
Expand All @@ -1501,29 +1500,34 @@ class CreateSuffixModal extends React.Component {
onChange={handleChange}
validated={error.createSuffix ? "error" : "noval"}
/>
<FormHelperText isError isHidden={!error.createSuffix}>
{_("Required field")}
<FormHelperText>
<HelperText>
<HelperTextItem icon={<ExclamationCircleIcon />} variant={error.createSuffix ? "error" : "default"}>
{error.createBeName ? 'The DN of the suffix is invalid' : 'Required field'}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup
label={_("Database Name")}
fieldId="suffixName"
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.")}
helperTextInvalid={_("You must enter a name for the database")}
helperTextInvalidIcon={<ExclamationCircleIcon />}
validated={error.createBeName ? "error" : "noval"}
>
<TextInput
isRequired
type="text"
id="createBeName"
aria-describedby="createSuffix"
aria-describedby="createBeName"
name="suffixName"
onChange={handleChange}
validated={error.createBeName ? "error" : "noval"}
/>
<FormHelperText isError isHidden={!error.createBeName}>
{_("Required field")}
<FormHelperText>
<HelperText>
<HelperTextItem icon={<ExclamationCircleIcon />} variant={error.createBeName ? "error" : "default"}>
{error.createBeName ? 'You must enter a name for the database' : 'Required field'}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup
Expand Down
69 changes: 41 additions & 28 deletions src/cockpit/389-console/src/ds.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,33 @@ import { ManageBackupsModal, SchemaReloadModal, CreateInstanceModal } from "./ds
import { LDAPEditor } from "./LDAPEditor.jsx";
import { log_cmd } from "./lib/tools.jsx";
import {
Alert,
AlertGroup,
AlertActionCloseButton,
AlertVariant,
Button,
Dropdown,
DropdownToggle,
DropdownItem,
DropdownPosition,
DropdownSeparator,
Grid, GridItem,
FormSelect,
FormSelectOption,
PageSectionVariants,
Progress,
ProgressMeasureLocation,
Spinner,
Tab,
Tabs,
TabTitleText,
Text,
TextContent,
TextVariants
} from "@patternfly/react-core";
Alert,
AlertGroup,
AlertActionCloseButton,
AlertVariant,
Button,
Grid,
GridItem,
FormSelect,
FormSelectOption,
PageSectionVariants,
Progress,
ProgressMeasureLocation,
Spinner,
Tab,
Tabs,
TabTitleText,
Text,
TextContent,
TextVariants
} from '@patternfly/react-core';
import {
Dropdown,
DropdownToggle,
DropdownItem,
DropdownPosition,
DropdownSeparator
} from '@patternfly/react-core/deprecated';
import { CaretDownIcon } from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';

const _ = cockpit.gettext;
Expand Down Expand Up @@ -109,7 +112,7 @@ export class DSInstance extends React.Component {
};

// Dropdown tasks
this.handleToggle = dropdownIsOpen => {
this.handleToggle = (_event, dropdownIsOpen) => {
this.setState({
dropdownIsOpen
});
Expand Down Expand Up @@ -483,7 +486,7 @@ export class DSInstance extends React.Component {
});
}

handleServerIdChange(e) {
handleServerIdChange(_event, e) {
this.setState({
pageLoadingState: { state: "loading", jsx: "" },
progressValue: 25
Expand Down Expand Up @@ -691,7 +694,12 @@ export class DSInstance extends React.Component {
<span className="spinner spinner-lg spinner-inline" />
</p>
<div className="ds-margin-top-lg">
<Progress value={progressValue} label={`${progressValue}%`} measureLocation={ProgressMeasureLocation.inside} />
<Progress
value={progressValue}
label={`${progressValue}%`}
measureLocation={ProgressMeasureLocation.inside}
aria-label="Directory Server Configuration loading progress"
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -764,7 +772,12 @@ export class DSInstance extends React.Component {
position={DropdownPosition.right}
onSelect={this.handleDropdown}
toggle={
<DropdownToggle onToggle={this.handleToggle} toggleIndicator={CaretDownIcon} isPrimary id="ds-dropdown">
<DropdownToggle
onToggle={(event, isOpen) => this.handleToggle(event, isOpen)}
toggleIndicator={CaretDownIcon}
variant="primary"
id="ds-dropdown"
>
{_("Actions")}
</DropdownToggle>
}
Expand Down
34 changes: 17 additions & 17 deletions src/cockpit/389-console/src/dsModals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,12 +414,12 @@ export class CreateInstanceModal extends React.Component {
id="createServerId"
aria-describedby="horizontal-form-name-helper"
name="createServerId"
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
validated={errObj.createServerId ? ValidatedOptions.error : ValidatedOptions.default}
/>
<FormHelperText isError isHidden={!errObj.createServerId}>
<FormHelperText >
{this.state.createServerIdMsg}
</FormHelperText>
</GridItem>
Expand All @@ -442,7 +442,7 @@ export class CreateInstanceModal extends React.Component {
plusBtnAriaLabel="plus"
widthChars={8}
/>
<FormHelperText className="ds-info-color" isHidden={createPort !== 0}>
<FormHelperText className="ds-info-color" >
{_("Port 0 will disable non-TLS connections")}
</FormHelperText>
</GridItem>
Expand Down Expand Up @@ -475,7 +475,7 @@ export class CreateInstanceModal extends React.Component {
<Checkbox
id="createTLSCert"
isChecked={createTLSCert}
onChange={(checked, e) => {
onChange={(e, checked) => {
this.handleFieldChange(e);
}}
/>
Expand All @@ -492,12 +492,12 @@ export class CreateInstanceModal extends React.Component {
id="createDM"
aria-describedby="horizontal-form-name-helper"
name="createDM"
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
validated={errObj.createDM ? ValidatedOptions.error : ValidatedOptions.default}
/>
<FormHelperText isError isHidden={!errObj.createDM}>
<FormHelperText >
{_("Enter a valid DN")}
</FormHelperText>
</GridItem>
Expand All @@ -513,12 +513,12 @@ export class CreateInstanceModal extends React.Component {
id="createDMPassword"
aria-describedby="horizontal-form-name-helper"
name="createDMPassword"
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
validated={errObj.createDMPassword ? ValidatedOptions.error : ValidatedOptions.default}
/>
<FormHelperText isError isHidden={!errObj.createDMPassword}>
<FormHelperText >
{_("Password must be set and it must match the confirmation password.")}
</FormHelperText>
</GridItem>
Expand All @@ -534,12 +534,12 @@ export class CreateInstanceModal extends React.Component {
id="createDMPasswordConfirm"
aria-describedby="horizontal-form-name-helper"
name="createDMPasswordConfirm"
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
validated={errObj.createDMPasswordConfirm ? ValidatedOptions.error : ValidatedOptions.default}
/>
<FormHelperText isError isHidden={!errObj.createDMPasswordConfirm}>
<FormHelperText >
{_("Confirmation password must be set and it must match the first password.")}
</FormHelperText>
</GridItem>
Expand All @@ -549,7 +549,7 @@ export class CreateInstanceModal extends React.Component {
id="createDBCheckbox"
label={_("Create Database")}
isChecked={createDBCheckbox}
onChange={(checked, e) => {
onChange={(e, checked) => {
this.handleFieldChange(e);
}}
/>
Expand All @@ -568,12 +568,12 @@ export class CreateInstanceModal extends React.Component {
aria-describedby="horizontal-form-name-helper"
name="createDBSuffix"
isDisabled={!createDBCheckbox}
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
validated={errObj.createDBSuffix ? ValidatedOptions.error : ValidatedOptions.default}
/>
<FormHelperText isError isHidden={!errObj.createDBSuffix}>
<FormHelperText >
{_("Value must be a valid DN")}
</FormHelperText>
</GridItem>
Expand All @@ -591,12 +591,12 @@ export class CreateInstanceModal extends React.Component {
aria-describedby="horizontal-form-name-helper"
name="createDBName"
isDisabled={!createDBCheckbox}
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
validated={errObj.createDBName ? ValidatedOptions.error : ValidatedOptions.default}
/>
<FormHelperText isError isHidden={!errObj.createDBName}>
<FormHelperText >
{_("Name is required")}
</FormHelperText>
</GridItem>
Expand All @@ -609,7 +609,7 @@ export class CreateInstanceModal extends React.Component {
<FormSelect
id="createInitDB"
value={createInitDB}
onChange={(value, event) => {
onChange={(event, value) => {
this.handleFieldChange(event);
}}
aria-label="FormSelect Input"
Expand Down Expand Up @@ -721,7 +721,7 @@ export class SchemaReloadModal extends React.Component {
id="reloadSchemaDir"
aria-describedby="horizontal-form-name-helper"
name="reloadSchemaDir"
onChange={(str, e) => {
onChange={(e, str) => {
this.handleFieldChange(e);
}}
/>
Expand Down
Loading

0 comments on commit c9090a5

Please sign in to comment.