message: Query browser: Convert Kebab menu to use PatternFly components
  Use PatternFly components directly instead of using Console's `Kebab`
  component. This will make it easier to convert the monitoring pages into
  a dynamic plugin.
diff: @@ -10,10 +10,14 @@ import {
  import {
  ActionGroup,
  Button,
  + Dropdown as PFDropdown,
  + DropdownItem,
  + DropdownPosition,
  EmptyState,
  EmptyStateBody,
  EmptyStateIcon,
  EmptyStateVariant,
  + KebabToggle,
  Switch,
  Title,
  } from '@patternfly/react-core';
  @@ -65,12 +69,12 @@ import {
  AsyncComponent,
  Dropdown,
  getURLSearchParams,
  - Kebab,
  LoadingInline,
  usePoll,
  useSafeFetch,
  } from '../utils';
  import { setAllQueryArguments } from '../utils/router';
  +import { useBoolean } from './hooks/useBoolean';
  import IntervalDropdown from './poll-interval-dropdown';
  import { colors, Error, QueryBrowser } from './query-browser';
  import TablePagination from './table-pagination';
  @@ -283,6 +287,8 @@ const SeriesButton: React.FC<SeriesButtonProps> = ({ index, labels }) => {
  const QueryKebab: React.FC<{ index: number }> = ({ index }) => {
  const { t } = useTranslation();
  + const [isOpen, setIsOpen, , setClosed] = useBoolean(false);
  +
  const isDisabledSeriesEmpty = useSelector(({ observe }: RootState) =>
  _.isEmpty(observe.getIn(['queryBrowser', 'queries', index, 'disabledSeries'])),
  );
  @@ -319,20 +325,30 @@ const QueryKebab: React.FC<{ index: number }> = ({ index }) => {
  dispatch(queryBrowserDuplicateQuery(index));
  }, [dispatch, index]);
  + const dropdownItems = [
  + <DropdownItem key="toggle-query" component="button" onClick={toggleIsEnabled}>
  + {isEnabled ? t('public~Disable query') : t('public~Enable query')}
  + </DropdownItem>,
  + <DropdownItem key="toggle-all-series" component="button" onClick={toggleAllSeries}>
  + {isDisabledSeriesEmpty ? t('public~Hide all series') : t('public~Show all series')}
  + </DropdownItem>,
  + <DropdownItem key="delete" component="button" onClick={doDelete}>
  + {t('public~Delete query')}
  + </DropdownItem>,
  + <DropdownItem key="duplicate" component="button" onClick={doClone }>
  + {t('public~Duplicate query')}
  + </DropdownItem>,
  + ];
  +
  return (
  - <Kebab
  - options={[
  - {
  - label: isEnabled ? t('public~Disable query') : t('public~Enable query'),
  - callback: toggleIsEnabled,
  - },
  - {
  - label: isDisabledSeriesEmpty ? t('public~Hide all series') : t('public~Show all series'),
  - callback: toggleAllSeries,
  - },
  - { label: t('public~Delete query'), callback: doDelete },
  - { label: t('public~Duplicate query'), callback: doClone },
  - ]}
  + <PFDropdown
  + data-test-id="kebab-button"
  + dropdownItems={dropdownItems}
  + isOpen={isOpen}
  + isPlain
  + onSelect={setClosed}
  + position={DropdownPosition.right}
  + toggle={<KebabToggle id="toggle-kebab" onToggle={setIsOpen} />}
  />
  );
  };
  