chore(pf5): migrate events, login, modal and recording components

src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx

@@ -82,7 +82,7 @@ export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysi
 
   return (
     <Popover
-      aria-label={t('ClickableAutomatedAnalysisresult.ARIA_LABELS.POPOVER')}
+      aria-label={t('ClickableAutomatedAnalysisLabel.ARIA_LABELS.POPOVER')}
       isVisible={isDescriptionVisible}
       headerContent={<div className={`${clickableAutomatedAnalysisKey}-popover-header`}>{result.name}</div>}
       alertSeverityVariant={alertPopoverVariant}

src/app/Events/EventTemplates.tsx

@@ -357,7 +357,7 @@ export const EventTemplates: React.FC<EventTemplatesProps> = (_) => {
                   type="search"
                   placeholder="Filter..."
                   aria-label="Event template filter"
-                  onChange={setFilterText}
+                  onChange={(_, value: string) => setFilterText(value)}
                   value={filterText}
                   isDisabled={errorMessage != ''}
                 />

src/app/Events/EventTypes.tsx

@@ -213,7 +213,7 @@ export const EventTypes: React.FC<EventTypesProps> = (_) => {
   );
 
   const onFilterTextChange = React.useCallback(
-    (filterText: string) => {
+    (_, filterText: string) => {
       setFilterText(filterText);
       setCurrentPage(1);
     },

src/app/Login/BasicAuthForm.tsx

@@ -16,7 +16,19 @@
 
 import { AuthMethod } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { ActionGroup, Button, Checkbox, Form, FormGroup, Text, TextInput, TextVariants } from '@patternfly/react-core';
+import {
+  ActionGroup,
+  Button,
+  Checkbox,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Text,
+  TextInput,
+  TextVariants,
+} from '@patternfly/react-core';
 import { Base64 } from 'js-base64';
 import * as React from 'react';
 import { map } from 'rxjs/operators';
@@ -85,7 +97,12 @@ export const BasicAuthForm: React.FC<FormProps> = ({ onSubmit }) => {
 
   return (
     <Form onSubmit={handleSubmit}>
-      <FormGroup label="Username" isRequired fieldId="username" helperText="Please provide your username">
+      <FormGroup label="Username" isRequired fieldId="username">
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Please provide your username</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
         <TextInput
           isRequired
           type="text"
@@ -97,7 +114,12 @@ export const BasicAuthForm: React.FC<FormProps> = ({ onSubmit }) => {
           onKeyDown={handleKeyDown}
         />
       </FormGroup>
-      <FormGroup label="Password" isRequired fieldId="password" helperText="Please provide your password">
+      <FormGroup label="Password" isRequired fieldId="password">
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Please provide your password</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
         <TextInput
           isRequired
           type="password"

src/app/Modal/DeleteWarningModal.tsx

@@ -54,7 +54,7 @@ export const DeleteWarningModal: React.FC<DeleteWarningProps> = ({
   );
 
   const onInnerClose = React.useCallback(
-    (ev?: React.MouseEvent) => {
+    (ev?: KeyboardEvent | React.MouseEvent<Element, MouseEvent>) => {
       ev && ev.stopPropagation();
       onClose();
     },

src/app/RecordingMetadata/BulkEditLabels.tsx

@@ -28,7 +28,17 @@ import {
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { hashCode, portalRoot } from '@app/utils/utils';
-import { Button, Split, SplitItem, Stack, StackItem, Text, Tooltip, ValidatedOptions } from '@patternfly/react-core';
+import {
+  Button,
+  Icon,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Text,
+  Tooltip,
+  ValidatedOptions,
+} from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { combineLatest, concatMap, filter, first, forkJoin, map, Observable, of } from 'rxjs';
@@ -291,7 +301,9 @@ export const BulkEditLabels: React.FC<BulkEditLabelsProps> = ({
                 }
                 appendTo={portalRoot}
               >
-                <HelpIcon noVerticalAlign />
+                <Icon>
+                  <HelpIcon />
+                </Icon>
               </Tooltip>
             </SplitItem>
           </Split>

src/app/RecordingMetadata/RecordingLabelFields.tsx

@@ -21,6 +21,7 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
+  Icon,
   List,
   ListItem,
   Popover,
@@ -261,7 +262,11 @@ export const RecordingLabelFields: React.FC<RecordingLabelFieldsProps> = ({
               variant="link"
               aria-label="Remove Label"
               isDisabled={isDisabled}
-              icon={<CloseIcon color="gray" size="sm" />}
+              icon={
+                <Icon size="sm">
+                  <CloseIcon color="gray" />{' '}
+                </Icon>
+              }
             />
           </SplitItem>
         </Split>

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -867,7 +867,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
   const handleToggle = React.useCallback(() => toggleExpanded(expandedRowId), [expandedRowId, toggleExpanded]);
 
   const handleCheck = React.useCallback(
-    (checked: boolean) => {
+    (_, checked: boolean) => {
       handleRowCheck(checked, index);
     },
     [index, handleRowCheck],

src/app/Recordings/ArchivedRecordingsTable.tsx

@@ -786,7 +786,7 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
   }, [expandedRowId, expandedRows]);
 
   const handleCheck = React.useCallback(
-    (checked: boolean) => {
+    (_, checked: boolean) => {
       handleRowCheck(checked, index);
     },
     [index, handleRowCheck],

src/app/Recordings/Filters/DatetimeFilter.tsx

@@ -82,7 +82,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({ onSubmit }) => {
   );
 
   const handleTextInput = React.useCallback(
-    (value: string) => {
+    (_, value: string) => {
       setDatetimeInput((_) => {
         if (value === '') {
           return _emptyDatetimeInput;

src/app/Recordings/Filters/DurationFilter.tsx

@@ -32,7 +32,7 @@ export const DurationFilter: React.FC<DurationFilterProps> = ({
   const isContinuous = React.useMemo(() => durations && durations.includes('continuous'), [durations]);
 
   const handleContinuousCheckBoxChange = React.useCallback(
-    (checked) => {
+    (_, checked: boolean) => {
       onContinuousDurationSelect(checked);
     },
     [onContinuousDurationSelect],
@@ -56,7 +56,7 @@ export const DurationFilter: React.FC<DurationFilterProps> = ({
           value={duration}
           id="duration-input"
           aria-label="duration filter"
-          onChange={(e) => setDuration(Number(e))}
+          onChange={(e, value) => setDuration(Number(value))}
           min="0"
           onKeyDown={handleEnterKey}
         />

src/app/Recordings/Filters/LabelFilter.tsx

@@ -16,8 +16,20 @@
 
 import { parseLabels, getLabelDisplay } from '@app/RecordingMetadata/utils';
 import { Recording } from '@app/Shared/Services/api.types';
-import { Label } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  Label,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 
 export interface LabelFilterProps {
@@ -28,18 +40,23 @@ export interface LabelFilterProps {
 
 export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLabels, onSubmit }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const [filterValue, setFilterValue] = React.useState('');
 
   const onSelect = React.useCallback(
-    (_, selection, isPlaceholder) => {
-      if (!isPlaceholder) {
+    (_, selection: string) => {
+      if (selection) {
         setIsExpanded(false);
         onSubmit(selection);
       }
     },
     [onSubmit, setIsExpanded],
   );
 
-  const labels = React.useMemo(() => {
+  const onToggle = React.useCallback(() => setIsExpanded((isExpanded) => !isExpanded), [setIsExpanded]);
+
+  const onInputChange = React.useCallback((_, inputVal: string) => setFilterValue(inputVal), [setFilterValue]);
+
+  const labelOptions = React.useMemo(() => {
     const labels = new Set<string>();
     recordings.forEach((r) => {
       if (!r || !r.metadata || !r.metadata.labels) return;
@@ -50,24 +67,62 @@ export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLa
       .sort();
   }, [recordings, filteredLabels]);
 
+  const filteredLabelOptions = React.useMemo(() => {
+    return !filterValue ? labelOptions : labelOptions.filter((l) => l.includes(filterValue.toLowerCase()));
+  }, [filterValue, labelOptions]);
+
+  const selectOptionProps: SelectOptionProps[] = React.useMemo(() => {
+    if (!filteredLabelOptions.length) {
+      return [{ isDisabled: true, children: `No results found for "${filterValue}"`, value: undefined }];
+    }
+    return filteredLabelOptions.map((l) => ({ children: l, value: l }));
+  }, [filteredLabelOptions]);
+
+  const toggle = React.useCallback(
+    (toggleRef: React.Ref<MenuToggleElement>) => (
+      <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggle} isExpanded={isExpanded} isFullWidth>
+        <TextInputGroup isPlain>
+          <TextInputGroupMain
+            value={filterValue}
+            onClick={onToggle}
+            onChange={onInputChange}
+            autoComplete="off"
+            placeholder="Filter by label..."
+            isExpanded={isExpanded}
+            role="combobox"
+            id="typeahead-label-filter"
+            aria-controls="typeahead-label-select"
+          />
+          <TextInputGroupUtilities>
+            {filterValue ? (
+              <Button
+                variant="plain"
+                onClick={() => {
+                  setFilterValue('');
+                }}
+                aria-label="Clear input value"
+              >
+                <TimesIcon aria-hidden />
+              </Button>
+            ) : null}
+          </TextInputGroupUtilities>
+        </TextInputGroup>
+      </MenuToggle>
+    ),
+    [onToggle, isExpanded, filterValue, onInputChange, setFilterValue],
+  );
+
   return (
-    <Select
-      variant={SelectVariant.typeahead}
-      onToggle={setIsExpanded}
-      onSelect={onSelect}
-      isOpen={isExpanded}
-      aria-label="Filter by label"
-      typeAheadAriaLabel="Filter by label..."
-      placeholderText="Filter by label..."
-      maxHeight="16em"
-    >
-      {labels.map((option, index) => (
-        <SelectOption key={index} value={option}>
-          <Label key={option} color="grey">
-            {option}
-          </Label>
-        </SelectOption>
-      ))}
+    <Select toggle={toggle} onSelect={onSelect} isOpen={isExpanded} aria-label="Filter by label">
+      <SelectList id="typeahead-label-select">
+        {selectOptionProps.map(({ value, children }, index) => (
+          <SelectOption key={index} value={value}>
+            <Label key={value} color="grey">
+              {children}
+            </Label>
+          </SelectOption>
+        ))}
+      </SelectList>
     </Select>
   );
 };