Revert "chore: Remove Select next and old Select"

This reverts commit 3fd4dc9.
cockpit-project · May 24, 2023 · d4844cf · d4844cf
1 parent 3fd4dc9
commit d4844cf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/ContainerHeader.jsx b/src/ContainerHeader.jsx
@@ -1,25 +1,21 @@
 import React from 'react';
 import cockpit from 'cockpit';
+import { FormSelect, FormSelectOption } from "@patternfly/react-core/dist/esm/components/FormSelect";
 import { SearchInput } from "@patternfly/react-core/dist/esm/components/SearchInput";
 import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core/dist/esm/components/Toolbar";
-import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist/esm/deprecated/components/Select";
+import { Select, SelectOption } from '@patternfly/react-core';
 const _ = cockpit.gettext;
 
 const ContainerHeader = ({ user, twoOwners, ownerFilter, handleOwnerChanged, textFilter, handleFilterChanged }) => {
     const [isOpenOwnersFilter, setIsOpenOwnersFilter] = React.useState(false);
-    const selectOptions = {
-        system: _("System"),
-        all: _("All"),
-        user
-
-    };
+    // const toggleRef = React.useRef();
     const onSelect = (event, selection) => {
-        handleOwnerChanged(event.target.dataset.payload);
+        handleOwnerChanged(selection);
         setIsOpenOwnersFilter(false);
     };
 
     const clearSelection = () => {
-        handleOwnerChanged("all");
+        handleOwnerChanged("All");
         setIsOpenOwnersFilter(false);
     };
     return (
@@ -31,16 +27,22 @@ const ContainerHeader = ({ user, twoOwners, ownerFilter, handleOwnerChanged, tex
                             {_("Owner")}
                         </ToolbarItem>
                         <ToolbarItem>
+                            {/* <FormSelect id="containers-containers-owner" value={ownerFilter} onChange={handleOwnerChanged}>
+                                <FormSelectOption value='user' label={user} />
+                                <FormSelectOption value='system' label={_("System")} />
+                                <FormSelectOption value='all' label={_("All")} />
+                            </FormSelect> */}
+                            {/* Select bug: toggle is not a function? */}
                             <Select
-                                variant={SelectVariant.typeahead}
+                                variant="typeahead"
                                 onToggle={(_, isOpen) => setIsOpenOwnersFilter(isOpen)}
                                 onSelect={onSelect}
                                 isOpen={isOpenOwnersFilter}
                                 onClear={clearSelection}
-                                selections={selectOptions[ownerFilter]}>
-                                <SelectOption data-payload="user" value={user} />
-                                <SelectOption data-payload="system" value={_("System")} />
-                                <SelectOption data-payload="all" value={_("All")} />
+                                selections={ownerFilter}>
+                                <SelectOption key="user" value={user} />
+                                <SelectOption key="system" value={_("System")} />
+                                <SelectOption key="all" value={_("All")} />
                             </Select>
                         </ToolbarItem>
                     </>

diff --git a/src/app.jsx b/src/app.jsx
@@ -802,7 +802,7 @@ class Application extends React.Component {
                                  variant={PageSectionVariants.light}>
                         <ContainerHeader
                             handleFilterChanged={this.onFilterChanged}
-                            handleOwnerChanged={(value) => this.onOwnerChanged(value)}
+                            handleOwnerChanged={(_event, value) => this.onOwnerChanged(value)}
                             ownerFilter={this.state.ownerFilter}
                             textFilter={this.state.textFilter}
                             twoOwners={this.state.systemServiceAvailable && this.state.userServiceAvailable}