;
} else if (this.props.idle_message) {
wait_element =
@@ -167,8 +166,9 @@ class DialogFooter extends React.Component {
key={ caption }
className="apply"
variant={ variant }
+ isLoading={ this.state.action_in_progress && this.state.action_caption_in_progress == caption }
isDanger={ action.danger }
- onClick={ this.action_click.bind(this, action.clicked) }
+ onClick={ this.action_click.bind(this, action.clicked, caption) }
isDisabled={ actions_disabled || action.disabled }
>{ caption }
);
@@ -209,14 +209,24 @@ DialogFooter.propTypes = {
* - id optional, id that is assigned to the top level dialog node, but not the backdrop
* - variant: See PF4 Modal component's 'variant' property
* - titleIconVariant: See PF4 Modal component's 'titleIconVariant' property
+ * - showClose optional, specifies if 'X' button for closing the dialog is present
*/
class Dialog extends React.Component {
componentDidMount() {
+ // For the scenario that cockpit-storage is used inside anaconda Web UI
+ // We need to know if there is an open dialog in order to create the backdrop effect
+ // on the parent window
+ window.sessionStorage.setItem("cockpit_has_modal", true);
+
// if we used a button to open this, make sure it's not focused anymore
if (document.activeElement)
document.activeElement.blur();
}
+ componentWillUnmount() {
+ window.sessionStorage.setItem("cockpit_has_modal", false);
+ }
+
render() {
let help = null;
let footer = null;
@@ -234,14 +244,13 @@ class Dialog extends React.Component {
;
const error = this.props.error || this.props.static_error;
- const error_alert = error &&
- {error.details};
+ const error_alert = error && ;
return (
undefined}
- showClose={false}
+ showClose={!!this.props.showClose}
id={this.props.id}
isOpen
help={help}
@@ -261,9 +270,10 @@ Dialog.propTypes = {
title: PropTypes.string, // is effectively required, but show_modal_dialog() provides initially no props and resets them later.
body: PropTypes.element, // is effectively required, see above
static_error: PropTypes.string,
+ error: PropTypes.string,
footer: PropTypes.element, // is effectively required, see above
id: PropTypes.string,
- error: PropTypes.object,
+ showClose: PropTypes.bool,
};
/* Create and show a dialog
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-dropdown.tsx b/src/cockpit/389-console/pkg/lib/cockpit-components-dropdown.tsx
new file mode 100644
index 0000000000..4f12a3fbba
--- /dev/null
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-dropdown.tsx
@@ -0,0 +1,83 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+import React, { useState } from 'react';
+import PropTypes from "prop-types";
+
+import { MenuToggle } from "@patternfly/react-core/dist/esm/components/MenuToggle";
+import { Dropdown, DropdownList, DropdownPopperProps } from "@patternfly/react-core/dist/esm/components/Dropdown";
+
+import { EllipsisVIcon } from '@patternfly/react-icons';
+
+/*
+ * A dropdown with a Kebab button, commonly used in Cockpit pages provided as
+ * component so not all pages have to re-invent the wheel.
+ *
+ * isOpen/setIsOpen are optional -- you need to handle the state externally if you render the KebabDropdown in an
+ * "unstable" environment such as a dynamic list. When not given, the dropdown will manage its own state.
+ *
+ * This component expects a list of (non-deprecated!) DropdownItem's, if you
+ * require a separator between DropdownItem's use PatternFly's Divivder
+ * component.
+ */
+export const KebabDropdown = ({ dropdownItems, position = "end", isDisabled = false, toggleButtonId, isOpen, setIsOpen } : {
+ dropdownItems: React.ReactNode,
+ position?: DropdownPopperProps['position'],
+ isDisabled?: boolean,
+ toggleButtonId?: string;
+ isOpen?: boolean, setIsOpen?: React.Dispatch>,
+}) => {
+ const [isKebabOpenInternal, setKebabOpenInternal] = useState(false);
+ const isKebabOpen = isOpen ?? isKebabOpenInternal;
+ const setKebabOpen = setIsOpen ?? setKebabOpenInternal;
+
+ return (
+ setKebabOpen(isOpen)}
+ onSelect={() => setKebabOpen(false)}
+ toggle={(toggleRef) => (
+ setKebabOpen(!isKebabOpen)}
+ isExpanded={isKebabOpen}
+ >
+
+
+ )}
+ isOpen={isKebabOpen}
+ popperProps={{ position }}
+ >
+
+ {dropdownItems}
+
+
+ );
+};
+
+KebabDropdown.propTypes = {
+ dropdownItems: PropTypes.array.isRequired,
+ isDisabled: PropTypes.bool,
+ toggleButtonId: PropTypes.string,
+ position: PropTypes.oneOf(['right', 'left', 'center', 'start', 'end']),
+ isOpen: PropTypes.bool,
+ setIsOpen: PropTypes.func,
+};
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-dynamic-list.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-dynamic-list.jsx
new file mode 100644
index 0000000000..4cad793d66
--- /dev/null
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-dynamic-list.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { EmptyState, EmptyStateBody } from "@patternfly/react-core/dist/esm/components/EmptyState";
+import { FormFieldGroup, FormFieldGroupHeader } from "@patternfly/react-core/dist/esm/components/Form";
+import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/components/HelperText";
+
+import './cockpit-components-dynamic-list.scss';
+
+/* Dynamic list with a variable number of rows. Each row is a custom component, usually an input field(s).
+ *
+ * Props:
+ * - emptyStateString
+ * - onChange
+ * - id
+ * - itemcomponent
+ * - formclass (optional)
+ * - options (optional)
+ * - onValidationChange: A handler function which updates the parent's component's validation object.
+ * Its parameter is an array the same structure as 'validationFailed'.
+ * - validationFailed: An array where each item represents a validation error of the corresponding row component index.
+ * A row is strictly mapped to an item of the array by its index.
+ * Example: Let's have a dynamic form, where each row consists of 2 fields: name and email. Then a validation array of
+ * these rows would look like this:
+ * [
+ * { name: "Name must not be empty }, // first row
+ * { }, // second row
+ * { name: "Name cannot contain a number", email: "Email must contain '@'" } // third row
+ * ]
+ */
+export class DynamicListForm extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ list: [],
+ };
+ this.keyCounter = 0;
+ this.removeItem = this.removeItem.bind(this);
+ this.addItem = this.addItem.bind(this);
+ this.onItemChange = this.onItemChange.bind(this);
+ }
+
+ removeItem(idx) {
+ const validationFailedDelta = this.props.validationFailed ? [...this.props.validationFailed] : [];
+ // We also need to remove any error messages which the item (row) may have contained
+ delete validationFailedDelta[idx];
+ this.props.onValidationChange?.(validationFailedDelta);
+
+ this.setState(state => {
+ const items = [...state.list];
+ // keep the list structure, otherwise all the indexes shift and the ID/key mapping gets broken
+ delete items[idx];
+
+ return { list: items };
+ }, () => this.props.onChange(this.state.list));
+ }
+
+ addItem() {
+ this.setState(state => {
+ return { list: [...state.list, { key: this.keyCounter++, ...this.props.default }] };
+ }, () => this.props.onChange(this.state.list));
+ }
+
+ onItemChange(idx, field, value) {
+ this.setState(state => {
+ const items = [...state.list];
+ items[idx][field] = value || null;
+ return { list: items };
+ }, () => this.props.onChange(this.state.list));
+ }
+
+ render () {
+ const { id, label, actionLabel, formclass, emptyStateString, helperText, validationFailed, onValidationChange } = this.props;
+ const dialogValues = this.state;
+ return (
+ {actionLabel}}
+ />
+ } className={"dynamic-form-group " + formclass}>
+ {
+ dialogValues.list.some(item => item !== undefined)
+ ? <>
+ {dialogValues.list.map((item, idx) => {
+ if (item === undefined)
+ return null;
+
+ return React.cloneElement(this.props.itemcomponent, {
+ idx,
+ item,
+ id: id + "-" + idx,
+ key: idx,
+ onChange: this.onItemChange,
+ removeitem: this.removeItem,
+ additem: this.addItem,
+ options: this.props.options,
+ validationFailed: validationFailed && validationFailed[idx],
+ onValidationChange: value => {
+ // Dynamic list consists of multiple rows. Therefore validationFailed object is presented as an array where each item represents a row
+ // Each row/item then consists of key-value pairs, which represent a field name and it's validation error
+ const delta = validationFailed ? [...validationFailed] : [];
+ // Update validation of only a single row
+ delta[idx] = value;
+
+ // If a row doesn't contain any fields with errors anymore, we delete the item of the array
+ // Deleting an item of an array replaces an item with an "empty item".
+ // This guarantees that an array of validation errors maps to the correct rows
+ if (Object.keys(delta[idx]).length == 0)
+ delete delta[idx];
+
+ onValidationChange?.(delta);
+ },
+ });
+ })
+ }
+ {helperText &&
+
+ {helperText}
+
+ }
+
+ :
+
+ {emptyStateString}
+
+
+ }
+
+ );
+ }
+}
+
+DynamicListForm.propTypes = {
+ emptyStateString: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ id: PropTypes.string.isRequired,
+ itemcomponent: PropTypes.object.isRequired,
+ formclass: PropTypes.string,
+ options: PropTypes.object,
+ validationFailed: PropTypes.array,
+ onValidationChange: PropTypes.func,
+};
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-dynamic-list.scss b/src/cockpit/389-console/pkg/lib/cockpit-components-dynamic-list.scss
new file mode 100644
index 0000000000..2016fdaaae
--- /dev/null
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-dynamic-list.scss
@@ -0,0 +1,39 @@
+@import "global-variables";
+
+.dynamic-form-group {
+ .pf-v5-c-empty-state {
+ padding: 0;
+ }
+
+ .pf-v5-c-form__label {
+ // Don't allow labels to wrap
+ white-space: nowrap;
+ }
+
+ .remove-button-group {
+ // Move 'Remove' button the the end of the row
+ grid-column: -1;
+ // Move 'Remove' button to the bottom of the line so as to align with the other form fields
+ display: flex;
+ align-items: flex-end;
+ }
+
+ // Set check to the same height as input widgets and vertically align
+ .pf-v5-c-form__group-control > .pf-v5-c-check {
+ // Set height to the same as inputs
+ // Font height is font size * line height (1rem * 1.5)
+ // Widgets have 5px padding, 1px border (top & bottom): (5 + 1) * 2 = 12
+ // This all equals to 36px
+ block-size: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md) + 12px);
+ align-content: center;
+ }
+
+ // We use FormFieldGroup PF component for the nested look and for ability to add buttons to the header
+ // However we want to save space and not add indent to the left so we need to override it
+ .pf-v5-c-form__field-group-body {
+ // Stretch content fully
+ --pf-v5-c-form__field-group-body--GridColumn: 1 / -1;
+ // Reduce padding at the top
+ --pf-v5-c-form__field-group-body--PaddingTop: var(--pf-v5-global--spacer--xs);
+ }
+}
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-empty-state.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-empty-state.jsx
index 0a78d0530f..82d7b97eb9 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-empty-state.jsx
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-empty-state.jsx
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
+ * along with Cockpit; If not, see .
*/
import React from "react";
@@ -24,7 +24,7 @@ import { EmptyStateActions, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyS
import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner/index.js";
import "./cockpit-components-empty-state.css";
-export const EmptyStatePanel = ({ title, paragraph, loading, icon, action, isActionInProgress, onAction, secondary, headingLevel, titleSize }) => {
+export const EmptyStatePanel = ({ title, paragraph, loading = false, icon, action, isActionInProgress = false, onAction, actionVariant = "primary", secondary, headingLevel = "h1" }) => {
const slimType = title || paragraph ? "" : "slim";
return (
@@ -34,7 +34,7 @@ export const EmptyStatePanel = ({ title, paragraph, loading, icon, action, isAct
{(action || secondary) &&
{ action && (typeof action == "string"
- ?
@@ -47,17 +47,12 @@ export const EmptyStatePanel = ({ title, paragraph, loading, icon, action, isAct
EmptyStatePanel.propTypes = {
loading: PropTypes.bool,
- icon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
title: PropTypes.string,
paragraph: PropTypes.node,
action: PropTypes.node,
+ actionVariant: PropTypes.string,
isActionInProgress: PropTypes.bool,
onAction: PropTypes.func,
secondary: PropTypes.node,
};
-
-EmptyStatePanel.defaultProps = {
- headingLevel: "h1",
- titleSize: "lg",
- isActionInProgress: false,
-};
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-file-autocomplete.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-file-autocomplete.jsx
index 134fea19af..f09002ba05 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-file-autocomplete.jsx
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-file-autocomplete.jsx
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
+ * along with Cockpit; If not, see .
*/
import cockpit from "cockpit";
@@ -34,7 +34,7 @@ export class FileAutoComplete extends React.Component {
isOpen: false,
value: this.props.value || null,
};
- this.updateFiles(props.value || '/');
+
this.typeaheadInputValue = "";
this.allowFilesUpdate = true;
this.updateFiles = this.updateFiles.bind(this);
@@ -43,7 +43,7 @@ export class FileAutoComplete extends React.Component {
this.clearSelection = this.clearSelection.bind(this);
this.onCreateOption = this.onCreateOption.bind(this);
- this.debouncedChange = debounce(300, (value) => {
+ this.onPathChange = (value) => {
if (!value) {
this.clearSelection();
return;
@@ -80,7 +80,9 @@ export class FileAutoComplete extends React.Component {
return this.updateFiles(parentDir + '/');
}
}
- });
+ };
+ this.debouncedChange = debounce(300, this.onPathChange);
+ this.onPathChange(this.state.value);
}
componentWillUnmount() {
@@ -115,7 +117,8 @@ export class FileAutoComplete extends React.Component {
channel.addEventListener("message", (ev, data) => {
const item = JSON.parse(data);
- if (item && item.path && item.event == 'present') {
+ if (item && item.path && item.event == 'present' &&
+ (!this.props.onlyDirectories || item.type == 'directory')) {
item.path = item.path + (item.type == 'directory' ? '/' : '');
results.push(item);
}
@@ -140,7 +143,7 @@ export class FileAutoComplete extends React.Component {
}
if (error || !this.state.value)
- this.props.onChange('');
+ this.props.onChange('', error);
if (!error)
this.setState({ displayFiles: listItems, directory });
@@ -160,7 +163,7 @@ export class FileAutoComplete extends React.Component {
value: null,
isOpen: false
});
- this.props.onChange('');
+ this.props.onChange('', null);
}
render() {
@@ -182,7 +185,7 @@ export class FileAutoComplete extends React.Component {
onSelect={(_, value) => {
this.setState({ value, isOpen: false });
this.debouncedChange(value);
- this.props.onChange(value || '');
+ this.props.onChange(value || '', null);
}}
onToggle={this.onToggle}
onClear={this.clearSelection}
@@ -201,10 +204,12 @@ FileAutoComplete.propTypes = {
placeholder: PropTypes.string,
superuser: PropTypes.string,
isOptionCreatable: PropTypes.bool,
+ onlyDirectories: PropTypes.bool,
onChange: PropTypes.func,
value: PropTypes.string,
};
FileAutoComplete.defaultProps = {
isOptionCreatable: false,
+ onlyDirectories: false,
onChange: () => '',
};
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-firewalld-request.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-firewalld-request.jsx
index 517b8bb9db..41530b55d2 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-firewalld-request.jsx
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-firewalld-request.jsx
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
+ * along with Cockpit; If not, see .
*/
import React, { useState } from 'react';
import { Alert, AlertActionCloseButton, AlertActionLink } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-form-helper.tsx b/src/cockpit/389-console/pkg/lib/cockpit-components-form-helper.tsx
new file mode 100644
index 0000000000..a5a286bb46
--- /dev/null
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-form-helper.tsx
@@ -0,0 +1,51 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+import React from "react";
+
+import { FormHelperText } from "@patternfly/react-core/dist/esm/components/Form/index.js";
+import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/components/HelperText";
+
+export const FormHelper = ({ helperText, helperTextInvalid, variant, icon, fieldId } :
+ {
+ helperText?: string | null | undefined,
+ helperTextInvalid?: string | null | undefined,
+ variant?: "error" | "default" | "indeterminate" | "warning" | "success",
+ icon?: string,
+ fieldId?: string,
+ }
+) => {
+ const formHelperVariant = variant || (helperTextInvalid ? "error" : "default");
+
+ if (!(helperText || helperTextInvalid))
+ return null;
+
+ return (
+
+
+
+ {formHelperVariant === "error" ? helperTextInvalid : helperText}
+
+
+
+ );
+};
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-inline-notification.tsx b/src/cockpit/389-console/pkg/lib/cockpit-components-inline-notification.tsx
new file mode 100644
index 0000000000..1503f52bdb
--- /dev/null
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-inline-notification.tsx
@@ -0,0 +1,83 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2016 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import cockpit from 'cockpit';
+
+import { Alert, AlertActionCloseButton, AlertProps } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
+import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
+import './cockpit-components-inline-notification.css';
+
+const _ = cockpit.gettext;
+
+export const InlineNotification = ({ text, detail, type = "danger", onDismiss, isInline = true, isLiveRegion = false }: {
+ text: string;
+ detail?: string;
+ type?: AlertProps["variant"];
+ onDismiss?: (ev?: Event) => void;
+ isInline?: boolean;
+ isLiveRegion?: boolean;
+}) => {
+ const [isDetail, setIsDetail] = useState(false);
+
+ const detailButton = (detail &&
+
+ );
+
+ return (
+ {text} {detailButton} }
+ { ...onDismiss && { actionClose: } }>
+ {isDetail && (
: dialogErrorDetail }
+
+ );
+};
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-install-dialog.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-install-dialog.jsx
index 0d933ae5f5..921247d44e 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-install-dialog.jsx
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-install-dialog.jsx
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
+ * along with Cockpit; If not, see .
*/
import cockpit from "cockpit";
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.jsx
index 3f2b784b81..4e0a836884 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.jsx
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.jsx
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
+ * along with Cockpit; If not, see .
*/
import PropTypes from 'prop-types';
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.scss b/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.scss
index bd53cd986d..c258ae6975 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.scss
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-listing-panel.scss
@@ -18,8 +18,7 @@
order: 1;
}
- // FIXME: https://github.com/patternfly/patternfly-react/pull/9135
- .pf-c-tab-content {
+ .pf-v5-c-tab-content {
order: 3;
flex-basis: 100%;
}
diff --git a/src/cockpit/389-console/pkg/lib/cockpit-components-logs-panel.jsx b/src/cockpit/389-console/pkg/lib/cockpit-components-logs-panel.jsx
index c960d6da31..4fe66ba50a 100644
--- a/src/cockpit/389-console/pkg/lib/cockpit-components-logs-panel.jsx
+++ b/src/cockpit/389-console/pkg/lib/cockpit-components-logs-panel.jsx
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
+ * along with Cockpit; If not, see .
*/
import cockpit from "cockpit";
@@ -55,7 +55,7 @@ export class JournalOutput {
}
// only consider enter button for keyboard events
- if (ev.type === 'keypress' && ev.key !== "Enter")
+ if (ev.type === 'KeyDown' && ev.key !== "Enter")
return;
cockpit.jump("system/logs#/" + cursor + "?parent_options=" + JSON.stringify(this.search_options));
@@ -78,7 +78,7 @@ export class JournalOutput {