systemd: Use CheckboxSelect instead of deprecated Select variant

cockpit-project · Dec 17, 2024 · a15f745 · a15f745
1 parent 4d8abea
commit a15f745
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 34 deletions.
diff --git a/pkg/systemd/services.jsx b/pkg/systemd/services.jsx
@@ -24,14 +24,14 @@ import 'cockpit-dark-theme'; // once per page
 import React, { useState, useEffect, useCallback } from "react";
 import { createRoot } from 'react-dom/client';
 import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
-import { Select, SelectOption } from "@patternfly/react-core/dist/esm/deprecated/components/Select/index.js";
 import { Page, PageSection, PageSectionVariants } from "@patternfly/react-core/dist/esm/components/Page/index.js";
 import { Card } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { SearchInput } from "@patternfly/react-core/dist/esm/components/SearchInput/index.js";
 import { ToggleGroup, ToggleGroupItem } from "@patternfly/react-core/dist/esm/components/ToggleGroup/index.js";
 import { Toolbar, ToolbarContent, ToolbarFilter, ToolbarItem, ToolbarToggleGroup } from "@patternfly/react-core/dist/esm/components/Toolbar/index.js";
 import { ExclamationCircleIcon, FilterIcon } from '@patternfly/react-icons';
 
+import { CheckboxSelect } from "cockpit-components-checkbox-select";
 import { EmptyStatePanel } from "cockpit-components-empty-state.jsx";
 import { Service } from "./service.jsx";
 import { ServiceTabs, service_tabs_suffixes } from "./service-tabs.jsx";
@@ -732,9 +732,7 @@ const ServicesPageFilters = ({
     onOptionsChanged,
 }) => {
     const { activestate, filestate, name } = options;
-    const [activeStateFilterIsOpen, setActiveStateFilterIsOpen] = useState(false);
     const [currentTextFilter, setCurrentTextFilter] = useState(decodeURIComponent(name || ""));
-    const [fileStateFilterIsOpen, setFileStateFilterIsOpen] = useState(false);
     const [filters, setFilters] = useState({
         activeState: JSON.parse(activestate || '[]'),
         fileState: JSON.parse(filestate || '[]'),
@@ -757,18 +755,16 @@ const ServicesPageFilters = ({
         onOptionsChanged(_options);
     }, [filters, currentTextFilter, onOptionsChanged]);
 
-    const onSelect = (type, event, selection) => {
-        const checked = event.target.checked;
-
+    const onSelect = (type, checked, selection) => {
         setFilters({ ...filters, [type]: checked ? [...filters[type], selection] : filters[type].filter(value => value !== selection) });
     };
 
-    const onActiveStateSelect = (event, selection) => {
-        onSelect('activeState', event, selection);
+    const onActiveStateSelect = (selection, checked) => {
+        onSelect('activeState', checked, selection);
     };
 
-    const onFileStateSelect = (event, selection) => {
-        onSelect('fileState', event, selection);
+    const onFileStateSelect = (selection, checked) => {
+        onSelect('fileState', checked, selection);
     };
 
     const getFilterLabelKey = (typeLabel) => {
@@ -826,33 +822,39 @@ const ServicesPageFilters = ({
                            deleteChip={onDeleteChip}
                            deleteChipGroup={onDeleteChipGroup}
                            categoryName={_("Active state")}>
-                <Select aria-label={_("Active state")}
-                        toggleId="services-dropdown-active-state"
-                        variant="checkbox"
-                        onToggle={(_, isOpen) => setActiveStateFilterIsOpen(isOpen)}
-                        onSelect={onActiveStateSelect}
-                        selections={filters.activeState}
-                        isOpen={activeStateFilterIsOpen}
-                        placeholderText={_("Active state")}>
-                    {activeStateDropdownOptions.map(option => <SelectOption key={option.value}
-                                                                            value={option.label} />)}
-                </Select>
+                <CheckboxSelect
+                    toggleProps={{
+                        id: "services-dropdown-active-state",
+                        "aria-label": _("Active state")
+                    }}
+                    toggleContent={_("Active state")}
+                    onSelect={onActiveStateSelect}
+                    selected={filters.activeState}
+                    options={activeStateDropdownOptions.map(option => {
+                        return {
+                            value: option.label, // sic
+                            content: option.label,
+                        };
+                    })} />
             </ToolbarFilter>
             <ToolbarFilter chips={filters.fileState}
                            deleteChip={onDeleteChip}
                            deleteChipGroup={onDeleteChipGroup}
                            categoryName={_("File state")}>
-                <Select aria-label={_("File state")}
-                        toggleId="services-dropdown-file-state"
-                        variant="checkbox"
-                        onToggle={(_, isOpen) => setFileStateFilterIsOpen(isOpen)}
-                        onSelect={onFileStateSelect}
-                        selections={filters.fileState}
-                        isOpen={fileStateFilterIsOpen}
-                        placeholderText={_("File state")}>
-                    {fileStateDropdownOptions.map(option => <SelectOption key={option.value}
-                                                                          value={option.label} />)}
-                </Select>
+                <CheckboxSelect
+                    toggleProps={{
+                        id: "services-dropdown-file-state",
+                        "aria-label": _("File state")
+                    }}
+                    toggleContent={_("File state")}
+                    onSelect={onFileStateSelect}
+                    selected={filters.fileState}
+                    options={fileStateDropdownOptions.map(option => {
+                        return {
+                            value: option.label, // sic
+                            content: option.label,
+                        };
+                    })} />
             </ToolbarFilter>
         </ToolbarToggleGroup>;
 

diff --git a/test/verify/check-system-services b/test/verify/check-system-services
@@ -113,7 +113,7 @@ class TestServices(testlib.MachineCase):
 
         self.browser.click("#services-dropdown-file-state")
         for state in states:
-            self.browser.set_checked(f".pf-v5-c-select__menu label:contains('{state}') input", val=True)
+            self.browser.set_checked(f".pf-v5-c-menu__item:contains('{state}') input", val=True)
         self.browser.click("#services-dropdown-file-state")
         for state in states:
             self.browser.wait_visible(f".pf-v5-c-chip-group__label:contains('File state') + .pf-v5-c-chip-group__list li:contains('{state}')")
@@ -124,7 +124,7 @@ class TestServices(testlib.MachineCase):
 
         self.browser.click("#services-dropdown-active-state")
         for state in states:
-            self.browser.set_checked(f".pf-v5-c-select__menu label:contains('{state}') input", val=True)
+            self.browser.set_checked(f".pf-v5-c-menu__item:contains('{state}') input", val=True)
         self.browser.click("#services-dropdown-active-state")
         for state in states:
             self.browser.wait_visible(f".pf-v5-c-chip-group__label:contains('Active state') + .pf-v5-c-chip-group__list li:contains('{state}')")