Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

lib: Support headers with TypeaheadSelect #21183

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

lib: Support headers with TypeaheadSelect #21183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
45713dd
lib: Copy TypeaheadSelect into our code
mvollmer Oct 28, 2024
78f27b1
lib: Make c-c-typeahead-select.tsx lint-free
mvollmer Oct 28, 2024
60082fc
lib: Make TypeaheadSelect scrollable
mvollmer Oct 29, 2024
9bac2a8
lib: Keep keys unique with TypeaheadSelect
mvollmer Oct 28, 2024
e9185ac
lib: Don't hide current value in TypeaheadSelect
mvollmer Oct 28, 2024
cfa1ec9
lib: Support dividers with TypeaheadSelect
mvollmer Oct 28, 2024
32032bf
lib: Hide clear button in TypeaheadSelect when it would do nothing
mvollmer Oct 29, 2024
71ca93c
networking: Use TypeaheadSelect instead of deprecated Select
mvollmer Oct 28, 2024
1133b5b
storage: Use TypeaheadSelect instead of deprecated Select
mvollmer Oct 28, 2024
aa6cc08
lib: Use TypeaheadSelect instead of deprecated Select for timezones
mvollmer Oct 28, 2024
fe91cc2
systemd: Use TypeaheadSelect instead of deprecated Select
mvollmer Oct 28, 2024
5e6acf0
lib: Use TypeaheadSelect instead of deprecated Select for FileAutoCom…
mvollmer Oct 28, 2024
71bca23
lib: Don't hide current value in TypeaheadSelect
mvollmer Oct 28, 2024
5f5a440
lib: Support headers with TypeaheadSelect
mvollmer Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 27 additions & 49 deletions pkg/lib/cockpit-components-file-autocomplete.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@

import cockpit from "cockpit";
import React from "react";
import { Select, SelectOption } from "@patternfly/react-core/dist/esm/deprecated/components/Select/index.js";
import PropTypes from "prop-types";
import { debounce } from 'throttle-debounce';
import { TypeaheadSelect } from "cockpit-components-typeahead-select";

const _ = cockpit.gettext;

Expand All @@ -31,26 +31,18 @@ export class FileAutoComplete extends React.Component {
this.state = {
directory: '', // The current directory we list files/dirs from
displayFiles: [],
isOpen: false,
value: this.props.value || null,
};

this.typeaheadInputValue = "";
this.allowFilesUpdate = true;
this.updateFiles = this.updateFiles.bind(this);
this.finishUpdate = this.finishUpdate.bind(this);
this.onToggle = this.onToggle.bind(this);
this.clearSelection = this.clearSelection.bind(this);
this.onCreateOption = this.onCreateOption.bind(this);

this.onPathChange = (value) => {
if (!value) {
this.clearSelection();
return;
}

this.typeaheadInputValue = value;

const cb = (dirPath) => this.updateFiles(dirPath == '' ? '/' : dirPath);

let path = value;
Expand Down Expand Up @@ -89,12 +81,6 @@ export class FileAutoComplete extends React.Component {
this.allowFilesUpdate = false;
}

onCreateOption(newValue) {
this.setState(prevState => ({
displayFiles: [...prevState.displayFiles, { type: "file", path: newValue }]
}));
}

updateFiles(path) {
if (this.state.directory == path)
return;
Expand Down Expand Up @@ -152,50 +138,42 @@ export class FileAutoComplete extends React.Component {
});
}

onToggle(_, isOpen) {
this.setState({ isOpen });
}

clearSelection() {
this.typeaheadInputValue = "";
this.updateFiles("/");
this.setState({
value: null,
isOpen: false
});
this.setState({ value: null });
this.props.onChange('', null);
}

render() {
const placeholder = this.props.placeholder || _("Path to file");

const selectOptions = this.state.displayFiles
.map(option => <SelectOption key={option.path}
className={option.type}
value={option.path} />);
.map(option => ({ value: option.path, content: option.path, className: option.type }));

return (
<Select
variant="typeahead"
id={this.props.id}
isInputValuePersisted
onTypeaheadInputChanged={this.debouncedChange}
placeholderText={placeholder}
noResultsFoundText={this.state.error || _("No such file or directory")}
selections={this.state.value}
onSelect={(_, value) => {
this.setState({ value, isOpen: false });
this.debouncedChange(value);
this.props.onChange(value || '', null);
}}
onToggle={this.onToggle}
onClear={this.clearSelection}
isOpen={this.state.isOpen}
isCreatable={this.props.isOptionCreatable}
createText={_("Create")}
onCreateOption={this.onCreateOption}
menuAppendTo="parent">
{selectOptions}
</Select>
<TypeaheadSelect toggleProps={ { id: this.props.id } }
onInputChange={this.debouncedChange}
placeholder={placeholder}
noOptionsAvailableMessage={this.state.error || _("No such file or directory")}
noOptionsFoundMessage={this.state.error || _("No such file or directory")}
onToggle={isOpen => {
// Try to list again when
// opening. Calling onPathChange here
// usually does nothing, except when
// there was an error earlier.
if (isOpen)
this.onPathChange(this.state.value);
}}
selected={this.state.value}
onSelect={(_, value) => {
this.setState({ value });
this.onPathChange(value);
this.props.onChange(value || '', null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

}}
onClearSelection={this.clearSelection}
isCreatable={this.props.isOptionCreatable}
createOptionMessage={val => cockpit.format(_("Create $0"), val)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

selectOptions={selectOptions} />
);
}
}
Expand Down
4 changes: 4 additions & 0 deletions pkg/lib/cockpit-components-typeahead-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.ct-typeahead-header .pf-v5-c-menu__item-main {
color: var(--pf-v5-global--primary-color--100);
font-size: var(--pf-v5-global--FontSize--sm);
}
Loading
Loading