Merge pull request #5498 from openshift-cherrypick-robot/cherry-pick-…

…5473-to-release-4.4

[release-4.4] Bug 1837784: Query Browser: Add text wrapping for table headers

frontend/public/components/monitoring/metrics.tsx

@@ -23,14 +23,14 @@ import {
   TimesIcon,
 } from '@patternfly/react-icons';
 import {
-  IDecorator,
   ISortBy,
   sortable,
   Table,
   TableBody,
   TableGridBreakpoint,
   TableHeader,
   TableVariant,
+  wrappable,
 } from '@patternfly/react-table';
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
@@ -676,7 +676,7 @@ const QueryTable_: React.FC<QueryTableProps> = ({
 
   const cellProps = {
     props: { className: 'query-browser__table-cell' },
-    transforms: [sortable as (v: unknown) => IDecorator],
+    transforms: [sortable, wrappable],
   };
 
   // TableBody's shouldComponentUpdate seems to struggle with SeriesButton, so add a unique key to help TableBody