ODC-7756, CONSOLE-4464: Bump PF6 to latest prereleases

dynamic-demo-plugin/package.json

@@ -17,9 +17,9 @@
     "@openshift-console/dynamic-plugin-sdk": "file:../frontend/packages/console-dynamic-plugin-sdk/dist/core",
     "@openshift-console/dynamic-plugin-sdk-webpack": "file:../frontend/packages/console-dynamic-plugin-sdk/dist/webpack",
     "@openshift-console/plugin-shared": "file:../frontend/packages/console-plugin-shared/dist",
-    "@patternfly/react-core": "^6.2.0-prerelease.15",
-    "@patternfly/react-icons": "^6.2.0-prerelease.2",
-    "@patternfly/react-table": "^6.2.0-prerelease.16",
+    "@patternfly/react-core": "^6.2.0-prerelease.34",
+    "@patternfly/react-icons": "^6.2.0-prerelease.12",
+    "@patternfly/react-table": "^6.2.0-prerelease.35",
     "@types/react": "16.8.13",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "5.3.x",
@@ -42,9 +42,6 @@
     "webpack": "^5.75.0",
     "webpack-cli": "5.0.x"
   },
-  "resolutions": {
-    "@patternfly/react-core": "^6.2.0-prerelease.15"
-  },
   "consolePlugin": {
     "name": "console-demo-plugin",
     "version": "0.0.0",

frontend/package.json

@@ -135,22 +135,22 @@
   },
   "dependencies": {
     "@patternfly-5/patternfly": "npm:@patternfly/patternfly@5.4.2",
-    "@patternfly/patternfly": "^6.2.0-prerelease.3",
-    "@patternfly/quickstarts": "^6.2.0-prerelease.4",
-    "@patternfly/react-catalog-view-extension": "^6.1.0-prerelease.3",
-    "@patternfly/react-charts": "^8.2.0-prerelease.13",
-    "@patternfly/react-code-editor": "^6.2.0-prerelease.21",
-    "@patternfly/react-component-groups": "^6.2.0-prerelease.4",
+    "@patternfly/patternfly": "^6.2.0-prerelease.26",
+    "@patternfly/quickstarts": "^6.2.0-prerelease.7",
+    "@patternfly/react-catalog-view-extension": "^6.1.0-prerelease.4",
+    "@patternfly/react-charts": "^8.2.0-prerelease.26",
+    "@patternfly/react-code-editor": "^6.2.0-prerelease.36",
+    "@patternfly/react-component-groups": "^6.2.0-prerelease.7",
     "@patternfly/react-console": "^6.0.0",
-    "@patternfly/react-core": "^6.2.0-prerelease.15",
-    "@patternfly/react-icons": "^6.2.0-prerelease.2",
-    "@patternfly/react-log-viewer": "^6.1.0",
-    "@patternfly/react-styles": "^6.2.0-prerelease.2",
-    "@patternfly/react-table": "^6.2.0-prerelease.16",
-    "@patternfly/react-templates": "^6.2.0-prerelease.16",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.2",
-    "@patternfly/react-topology": "^6.1.0",
-    "@patternfly/react-user-feedback": "^6.1.0-prerelease.1",
+    "@patternfly/react-core": "^6.2.0-prerelease.34",
+    "@patternfly/react-icons": "^6.2.0-prerelease.12",
+    "@patternfly/react-log-viewer": "^6.1.0-prerelease.2",
+    "@patternfly/react-styles": "^6.2.0-prerelease.11",
+    "@patternfly/react-table": "^6.2.0-prerelease.35",
+    "@patternfly/react-templates": "^6.2.0-prerelease.35",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.11",
+    "@patternfly/react-topology": "^6.2.0-prerelease.6",
+    "@patternfly/react-user-feedback": "^6.1.0-prerelease.2",
     "@patternfly/react-virtualized-extension": "^6.0.0",
     "@rjsf/core": "^2.5.1",
     "ajv": "^6.12.3",
@@ -181,6 +181,7 @@
     "js-yaml": "^3.13.1",
     "json-schema": "^0.3.0",
     "lodash-es": "^4.17.21",
+    "marked": "^15.0.6",
     "monaco-yaml": "^5.3.1",
     "murmurhash-js": "1.0.x",
     "node-polyfill-webpack-plugin": "^4.0.0",
@@ -330,11 +331,11 @@
     "jest": "21.x",
     "glob-parent": "^5.1.2",
     "postcss": "^8.2.13",
-    "@patternfly/react-core": "^6.2.0-prerelease.15",
-    "@patternfly/react-icons": "^6.2.0-prerelease.2",
-    "@patternfly/react-styles": "^6.2.0-prerelease.2",
-    "@patternfly/react-table": "^6.2.0-prerelease.16",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.2",
+    "@patternfly/react-core": "^6.2.0-prerelease.34",
+    "@patternfly/react-icons": "^6.2.0-prerelease.12",
+    "@patternfly/react-styles": "^6.2.0-prerelease.11",
+    "@patternfly/react-table": "^6.2.0-prerelease.35",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.11",
     "async": "^3.2.5"
   },
   "lint-staged": {

frontend/packages/console-app/locales/en/console-app.json

@@ -611,7 +611,6 @@
   "Projects failed to load. Check your connection and reload the page.": "Projects failed to load. Check your connection and reload the page.",
   "Namespaces failed to load. Check your connection and reload the page.": "Namespaces failed to load. Check your connection and reload the page.",
   "Unable to load": "Unable to load",
-  "Select a perspective": "Select a perspective",
   "Select an option": "Select an option",
   "User Preferences {{activeTab}}": "User Preferences {{activeTab}}",
   "Set your individual preferences for the console experience. Any changes will be autosaved.": "Set your individual preferences for the console experience. Any changes will be autosaved.",

frontend/packages/console-app/src/components/access-modes/access-mode.tsx

@@ -137,6 +137,7 @@ export const AccessModeSelector: React.FC<AccessModeSelectorProps> = (props) =>
         <Select
           isOpen={isOpen}
           selected={selected}
+          // @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
           onSelect={onSelect}
           onOpenChange={(open) => setIsOpen(open)}
           toggle={toggle}

frontend/packages/console-app/src/components/nav/NavSection.tsx

@@ -61,8 +61,12 @@ export const NavSection: React.FC<NavSectionProps> = ({ id, name, dataAttributes
 
   const children = navExtensions.map((extension) => {
     if (isSeparator(extension)) {
+      // changed role due to accessibility violation
+      // [role=separator] is not allowed under a role=list
+      // https://github.com/patternfly/patternfly-react/issues/11717
       return (
         <NavItemSeparator
+          role="presentation"
           key={extension.uid}
           className="oc-perspective-nav__divider"
           {...extension.properties.dataAttributes}

frontend/packages/console-app/src/components/nav/PluginNavItem.tsx

@@ -32,7 +32,16 @@ export const PluginNavItem: React.FC<PluginNavItemProps> = ({ extension }) => {
     );
   }
   if (isSeparator(extension)) {
-    return <NavItemSeparator key={extension.uid} {...extension.properties.dataAttributes} />;
+    // changed role due to accessibility violation
+    // [role=separator] is not allowed under a role=list
+    // https://github.com/patternfly/patternfly-react/issues/11717
+    return (
+      <NavItemSeparator
+        role="presentation"
+        key={extension.uid}
+        {...extension.properties.dataAttributes}
+      />
+    );
   }
   if (isHrefNavItem(extension)) {
     return (

frontend/packages/console-app/src/components/nodes/NodeLogs.tsx

@@ -39,7 +39,7 @@ type NodeLogsProps = {
 
 type LogControlsProps = {
   onTogglePath: () => void;
-  onChangePath: (event: React.ChangeEvent<HTMLInputElement>, newAPI: string) => void;
+  onChangePath: (event: React.MouseEvent<Element, MouseEvent>, newAPI: string) => void;
   path: string;
   isPathOpen: boolean;
   setPathOpen: (value: boolean) => void;
@@ -50,7 +50,7 @@ type LogControlsProps = {
   isLoadingFilenames: boolean;
   logFilenamesExist: boolean;
   onToggleFilename: () => void;
-  onChangeFilename: (event: React.ChangeEvent<HTMLInputElement>, newFilename: string) => void;
+  onChangeFilename: (event: React.MouseEvent<Element, MouseEvent>, newFilename: string) => void;
   setFilenameOpen: (value: boolean) => void;
   logFilename: string;
   isFilenameOpen: boolean;
@@ -287,7 +287,7 @@ const NodeLogs: React.FC<NodeLogsProps> = ({ obj: node }) => {
     trimmedContent = content.substr(index + 1);
   }
 
-  const onChangePath = (event: React.ChangeEvent<HTMLInputElement>, newAPI: string) => {
+  const onChangePath = (event: React.MouseEvent<Element, MouseEvent>, newAPI: string) => {
     event.preventDefault();
     setPathOpen(false);
     setPath(newAPI);
@@ -308,7 +308,7 @@ const NodeLogs: React.FC<NodeLogsProps> = ({ obj: node }) => {
       ? removeQueryArgument(unitQueryArgument)
       : setQueryArgument(unitQueryArgument, value);
   };
-  const onChangeFilename = (event: React.ChangeEvent<HTMLInputElement>, newFilename: string) => {
+  const onChangeFilename = (event: React.MouseEvent<Element, MouseEvent>, newFilename: string) => {
     event.preventDefault();
     setFilenameOpen(false);
     setLogFilename(newFilename);

frontend/packages/console-app/src/components/pdb/PDBForm.tsx

@@ -229,7 +229,7 @@ const PDBForm: React.FC<PodDisruptionBudgetFormProps> = ({
                   isOpen={isOpen}
                   onOpenChange={(open) => setIsOpen(open)}
                   selected={selectedRequirement}
-                  onSelect={(value: string) => handleAvailabilityRequirementKeyChange(value)}
+                  onSelect={(_e, value: string) => handleAvailabilityRequirementKeyChange(value)}
                   toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                     <MenuToggle
                       ref={toggleRef}

frontend/packages/console-app/src/components/user-preferences/perspective/PreferredPerspectiveSelect.tsx

@@ -85,10 +85,8 @@ const PreferrredPerspectiveSelect: React.FC = () => {
     <Select
       data-test="select console.preferredPerspective"
       isOpen={isOpen}
-      maxHeight={300}
       onSelect={onSelect}
       onOpenChange={setIsOpen}
-      placeholderText={t('console-app~Select a perspective')}
       toggle={menuToggle}
     >
       <SelectOption name={lastViewed} value={lastViewed}>

frontend/packages/console-shared/src/components/formik-fields/SingleDropdownField.tsx

@@ -54,12 +54,13 @@ const SingleDropdownField: React.FC<SingleDropdownFieldProps> = ({
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-label={ariaLabel}
       id={fieldId}
-      onClick={onToggle}
-      ref={toggleRef}
+      isDisabled={isDisabled}
       isExpanded={isOpen}
-      aria-label={ariaLabel}
       isFullWidth
+      onClick={onToggle}
+      ref={toggleRef}
       status={isValid ? undefined : 'danger'}
     >
       {getLabelFromValue
@@ -76,7 +77,6 @@ const SingleDropdownField: React.FC<SingleDropdownFieldProps> = ({
         aria-label={ariaLabel}
         onSelect={onSelect}
         isOpen={isOpen}
-        isDisabled={isDisabled}
         onOpenChange={setIsOpen}
         popperProps={{ maxWidth: 'trigger' }} // prevents dropdown from going off screen
       >

frontend/packages/console-shared/src/utils/multiselectdropdown.tsx

@@ -28,6 +28,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
       initialOptions={initialOptions}
       placeholder={placeholder || t('console-shared~Select options')}
       noOptionsFoundMessage={t('console-shared~No results found')}
+      // @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
       onSelectionChange={onSelect}
       aria-label={t('console-shared~Select input')}
       aria-labelledby={id}

frontend/packages/console-telemetry-plugin/src/components/TelemetryConfiguration.tsx

@@ -90,6 +90,7 @@ const TelemetryAnalyticsSelect: React.FC<{
       <Select
         toggle={toggle}
         isOpen={isOpen}
+        // @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
         onSelect={(_, selectedValue: TelemetryAnalyticsSelectOptions) => {
           if (selectedValue && !disabled) {
             onChange(selectedValue);

frontend/packages/console-telemetry-plugin/src/components/TelemetryUserPreferenceDropdown.tsx

@@ -67,6 +67,7 @@ const TelemetryAnalyticsSelect: React.FC<{
       toggle={toggle}
       isOpen={isOpen}
       toggleId="telemetry"
+      // @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
       onSelect={(_, selectedValue?: TelemetryAnalyticsSelectOptions) => {
         if (selectedValue) {
           onChange(selectedValue);

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-channel-version-select.tsx

@@ -85,7 +85,6 @@ export const OperatorChannelSelect: React.FC<OperatorChannelSelectProps> = ({
         selected={selectedUpdateChannel || '-'}
         onOpenChange={(isOpen) => setIsChannelSelectOpen(isOpen)}
         isOpen={isChannelSelectOpen}
-        maxMenuHeight
         isScrollable
       >
         <SelectList>{channelSelectOptions}</SelectList>
@@ -187,7 +186,6 @@ export const OperatorVersionSelect: React.FC<OperatorVersionSelectProps> = ({
         selected={selectedUpdateVersion}
         onOpenChange={(isOpen) => setIsVersionSelectOpen(isOpen)}
         isOpen={isVersionSelectOpen}
-        maxMenuHeight
         isScrollable
       >
         <SelectList>{versionSelectOptions}</SelectList>

frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.tsx

@@ -176,7 +176,10 @@ class PipelineRunLogsWithTranslation extends React.Component<
                           </span>
                         </Link>
                       </NavItem>
-                      <NavItemSeparator />
+                      {/* changed role due to accessibility violation
+                          [role=separator] is not allowed under a role=list
+                          https://github.com/patternfly/patternfly-react/issues/11717 */}
+                      <NavItemSeparator role="presentation" />
                     </>
                   );
                 })}

frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx

@@ -96,6 +96,7 @@ const MoveConnectionForm: React.FC<
             <Select
               id="target-node-dropdown"
               className="dropdown--full-width"
+              // @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
               onSelect={(_, value: Node) => {
                 if (value) {
                   values.target = value;

frontend/packages/topology/src/filters/FilterDropdown.tsx

@@ -38,7 +38,6 @@ const FilterDropdown: React.FC<FilterDropdownProps> = ({
   const [isOpen, setIsOpen] = React.useState(opened);
   const groupsExpanded = filters?.find((f) => f.id === EXPAND_GROUPS_FILTER_ID)?.value ?? true;
 
-  const onToggle = (_event, open: boolean): void => setIsOpen(open);
   const onSelect = (e: React.MouseEvent, key: string) => {
     const index = filters.findIndex((f) => f.id === key);
     const filter = { ...filters[index], value: (e.target as HTMLInputElement).checked };
@@ -96,7 +95,7 @@ const FilterDropdown: React.FC<FilterDropdownProps> = ({
               onChange={onGroupsExpandedChange}
             />
           </span>
-          <SelectGroup className="odc-topology-filter-dropdown__expand-groups-label" label={<></>}>
+          <SelectGroup className="odc-topology-filter-dropdown__expand-groups-label">
             {expandFilters.map((filter) => (
               <SelectOption
                 key={filter.id}
@@ -141,11 +140,8 @@ const FilterDropdown: React.FC<FilterDropdownProps> = ({
     <Select
       toggle={toggle}
       className="odc-topology-filter-dropdown__select"
-      onToggle={onToggle}
       isOpen={isOpen}
       onSelect={onSelect}
-      isGrouped
-      isCheckboxSelectionBadgeHidden
       onOpenChange={(open) => setIsOpen(open)}
     >
       <SelectList>{selectContent}</SelectList>

frontend/packages/topology/src/filters/KindFilterDropdown.tsx

@@ -30,7 +30,6 @@ const KindFilterDropdown: React.FC<KindFilterDropdownProps> = ({
 }) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = React.useState(opened);
-  const onToggle = (_event, open: boolean): void => setIsOpen(open);
   let kindFilters = filters.filter(
     (f) => f.type === TopologyDisplayFilterType.kind && supportedKinds[f.id],
   );
@@ -110,7 +109,6 @@ const KindFilterDropdown: React.FC<KindFilterDropdownProps> = ({
   return (
     <Select
       toggle={toggle}
-      onToggle={onToggle}
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={(open) => setIsOpen(open)}

frontend/public/components/QuickCreate.tsx

@@ -72,11 +72,6 @@ const QuickCreate: React.FC<QuickCreateProps> = ({ namespace }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const importYAMLURL = formatNamespacedRouteForResource('import', namespace);
 
-  // TODO: remove these three refs when upstream fix is merged (see https://github.com/patternfly/patternfly-react/issues/11358)
-  const importYAMLTooltipRef = React.useRef(null);
-  const importGitTooltipRef = React.useRef(null);
-  const containerImgTooltipRef = React.useRef(null);
-
   const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
@@ -117,12 +112,9 @@ const QuickCreate: React.FC<QuickCreateProps> = ({ namespace }) => {
             ev.preventDefault();
             history.push(importYAMLURL);
           }}
-          // TODO: remove ref & triggerRef when upstream fix is merged (see https://github.com/patternfly/patternfly-react/issues/11358)
-          ref={importYAMLTooltipRef}
           tooltipProps={{
             content: t('public~Create resources from their YAML or JSON definitions'),
             position: 'left',
-            triggerRef: importYAMLTooltipRef,
           }}
           data-test="qc-import-yaml"
         >
@@ -138,12 +130,9 @@ const QuickCreate: React.FC<QuickCreateProps> = ({ namespace }) => {
                 ev.preventDefault();
                 history.push(getImportFromGitURL(namespace));
               }}
-              // TODO: remove ref & triggerRef when upstream fix is merged (see https://github.com/patternfly/patternfly-react/issues/11358)
-              ref={importGitTooltipRef}
               tooltipProps={{
                 content: t('public~Import code from your Git repository to be built and deployed'),
                 position: 'left',
-                triggerRef: importGitTooltipRef,
               }}
               data-test="qc-import-from-git"
             >
@@ -157,14 +146,11 @@ const QuickCreate: React.FC<QuickCreateProps> = ({ namespace }) => {
                 ev.preventDefault();
                 history.push(getContainerImageURL(namespace));
               }}
-              // TODO: remove ref & triggerRef when upstream fix is merged (see https://github.com/patternfly/patternfly-react/issues/11358)
-              ref={containerImgTooltipRef}
               tooltipProps={{
                 content: t(
                   'public~Deploy an existing Image from an Image registry or Image stream tag',
                 ),
                 position: 'left',
-                triggerRef: containerImgTooltipRef,
               }}
               data-test="qc-container-images"
             >

frontend/public/components/utils/single-typeahead-dropdown.tsx

@@ -57,7 +57,7 @@ export type SingleTypeaheadDropdownProps = {
  */
 const getTextWidth = (text: string, font: string): number => {
   const canvas: HTMLCanvasElement =
-    // @ts-ignore: re-use canvas object for better performance
+    // @ts-expect-error: re-use canvas object for better performance
     getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
   const context = canvas.getContext('2d');
   context.font = font;
@@ -88,7 +88,7 @@ export const SingleTypeaheadDropdown: React.FC<SingleTypeaheadDropdownProps> = (
     selectOptions,
     selectedKey,
   ]);
-  const [inputValue, setInputValue] = React.useState<string>(selectedValue?.children || '');
+  const [inputValue, setInputValue] = React.useState<string>(String(selectedValue?.children) || '');
   const [filterValue, setFilterValue] = React.useState<string>('');
   const [filteredSelectOptions, setFilteredSelectOptions] = React.useState<SelectOptionProps[]>(
     items,