Upgrade to PatternFly v5

web/locales/en/plugin__distributed-tracing-console-plugin.json

@@ -16,6 +16,7 @@
   "tempoinstance_helptext": "TempoStack and TempoMonolithic instances with multi-tenancy are supported. Instances without multi-tenancy are not supported.",
   "Tenant": "Tenant",
   "Select a tenant": "Select a tenant",
+  "No results found for {{value}}": "No results found for {{value}}",
   "Trace": "Trace",
   "Tracing": "Tracing",
   "Traces": "Traces",

web/package.json

@@ -21,9 +21,8 @@
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.15.5",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.12",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.7",
-    "@patternfly/react-core": "4.221.3",
+    "@openshift-console/dynamic-plugin-sdk": "^4.19.0-prerelease.1",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.0-prerelease.1",
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",
     "@types/react-router-dom": "^5.3.2",
@@ -47,8 +46,8 @@
     "react-dom": "^17.0.1",
     "react-helmet-async": "^1.0.0",
     "react-i18next": "^11.8.11",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "5.3.x",
+    "react-router-dom": "5.3.x",
     "style-loader": "^3.3.1",
     "stylelint": "^15.3.0",
     "stylelint-config-standard": "^31.0.0",
@@ -76,8 +75,8 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/material": "^5.15.14",
+    "@patternfly/react-core": "^5.4.13",
     "@patternfly/react-charts": "6.92.0",
-    "@patternfly/react-table": "^5.2.4",
     "@perses-dev/components": "0.49.0-rc.1",
     "@perses-dev/dashboards": "0.49.0-rc.1",
     "@perses-dev/panels-plugin": "0.49.0-rc.1",

web/src/components/BasicSelect.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  MenuToggleElement,
+  SelectOptionProps,
+} from '@patternfly/react-core';
+
+interface BasicSelectProps {
+  id: string;
+  width: number;
+  placeholder: string;
+  options: SelectOptionProps[];
+  selected?: string;
+  setSelected: (value?: string) => void;
+}
+
+export function BasicSelect({
+  id,
+  width,
+  placeholder,
+  options,
+  selected,
+  setSelected,
+}: BasicSelectProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ width }}>
+      {selected ? options.find((o) => o.value === selected)?.children ?? placeholder : placeholder}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id={id}
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      shouldFocusToggleOnSelect
+    >
+      <SelectList>
+        {options.map((option) => (
+          <SelectOption key={option.value} value={option.value}>
+            {option.children}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+}

web/src/components/DurationDropdown.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import {
-  Select,
-  SelectVariant,
-  SelectOption,
-  SelectOptionObject,
-  Stack,
-} from '@patternfly/react-core';
+import { Stack } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { DurationString } from '@perses-dev/prometheus-plugin';
+import { BasicSelect } from './BasicSelect';
 
 type TimeRangeSelectOption = {
-  display: string;
+  children: string;
   value: DurationString;
 };
 
@@ -25,77 +20,55 @@ export const DurationValues = ['5m', '15m', '30m', '1h', '6h', '12h', '1d', '7d'
 
 export const DurationDropdown = ({ duration, setDuration }: DurationDropDownProps) => {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
-  const [isOpen, setIsOpen] = React.useState(false);
 
   // The time range selection mirrors the options on the Metrics Page
   // Keep this list in sync with DurationValues above
   const timeRangeSelectOptions: TimeRangeSelectOption[] = [
     {
-      display: t('Last 5 minutes'),
+      children: t('Last 5 minutes'),
       value: '5m',
     },
     {
-      display: t('Last 15 minutes'),
+      children: t('Last 15 minutes'),
       value: '15m',
     },
     {
-      display: t('Last 30 minutes'),
+      children: t('Last 30 minutes'),
       value: '30m',
     },
     {
-      display: t('Last 1 hour'),
+      children: t('Last 1 hour'),
       value: '1h',
     },
     {
-      display: t('Last 6 hours'),
+      children: t('Last 6 hours'),
       value: '6h',
     },
     {
-      display: t('Last 12 hours'),
+      children: t('Last 12 hours'),
       value: '12h',
     },
     {
-      display: t('Last 1 day'),
+      children: t('Last 1 day'),
       value: '1d',
     },
     {
-      display: t('Last 7 days'),
+      children: t('Last 7 days'),
       value: '7d',
     },
   ];
 
-  const onToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (
-    _event: React.MouseEvent | React.ChangeEvent,
-    value: string | SelectOptionObject,
-  ) => {
-    setDuration(value.toString() as DurationString);
-    setIsOpen(false);
-  };
-
   return (
     <Stack>
       <label htmlFor="duration-dropdown">{t('Time Range')}</label>
-      <Select
+      <BasicSelect
         id="duration-dropdown"
-        variant={SelectVariant.typeahead}
-        typeAheadAriaLabel={t('Select a Time Range')}
-        onToggle={onToggle}
-        onSelect={onSelect}
-        selections={duration}
-        isOpen={isOpen}
-        placeholderText={t('Select a Time Range')}
         width={200}
-      >
-        {timeRangeSelectOptions.map((option: TimeRangeSelectOption) => (
-          <SelectOption key={option.display} value={option.value}>
-            {option.display}
-          </SelectOption>
-        ))}
-      </Select>
+        placeholder={t('Select a Time Range')}
+        options={timeRangeSelectOptions}
+        selected={duration}
+        setSelected={(value) => setDuration(value as DurationString)}
+      />
     </Stack>
   );
 };

web/src/components/NoTempoInstanceSelectedState.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import {
-  Title,
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  Bullseye,
+  EmptyStateHeader,
 } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
@@ -14,16 +13,15 @@ export const NoTempoInstanceSelectedState: React.FunctionComponent = () => {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
 
   return (
-    <Bullseye>
-      <EmptyState>
-        <EmptyStateIcon icon={CubesIcon} />
-        <Title headingLevel="h2" size="lg">
-          {t('No Tempo instance selected')}
-        </Title>
-        <EmptyStateBody>
-          {t('To explore data, select a Tempo instance and run a query.')}
-        </EmptyStateBody>
-      </EmptyState>
-    </Bullseye>
+    <EmptyState>
+      <EmptyStateHeader
+        titleText={t('No Tempo instance selected')}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={CubesIcon} />}
+      />
+      <EmptyStateBody>
+        {t('To explore data, select a Tempo instance and run a query.')}
+      </EmptyStateBody>
+    </EmptyState>
   );
 };