guacsec · carlosthe19916 · May 14, 2025 · May 12, 2025 · May 12, 2025 · May 13, 2025
diff --git a/branding/images/masthead-logo.svg b/branding/images/masthead-logo.svg
diff --git a/client/package.json b/client/package.json
@@ -21,13 +21,13 @@
   "dependencies": {
     "@hey-api/client-axios": "^0.6.1",
     "@hookform/resolvers": "^2.9.11",
-    "@patternfly/patternfly": "^5.4.0",
-    "@patternfly/react-charts": "^7.4.0",
-    "@patternfly/react-code-editor": "^5.4.0",
-    "@patternfly/react-core": "^5.4.0",
-    "@patternfly/react-log-viewer": "^5.3.0",
-    "@patternfly/react-table": "^5.4.0",
-    "@patternfly/react-tokens": "^5.4.0",
+    "@patternfly/patternfly": "^6.2.0",
+    "@patternfly/react-charts": "^8.2.0",
+    "@patternfly/react-code-editor": "^6.2.0",
+    "@patternfly/react-core": "^6.2.0",
+    "@patternfly/react-log-viewer": "^6.2.0",
+    "@patternfly/react-table": "^6.2.0",
+    "@patternfly/react-tokens": "^6.2.0",
     "@segment/analytics-next": "^1.64.0",
     "@tanstack/react-query": "^5.61.0",
     "@tanstack/react-query-devtools": "^5.61.0",
@@ -47,6 +47,7 @@
     "react-oidc-context": "^2.3.1",
     "react-router-dom": "^6.21.1",
     "usehooks-ts": "^2.14.0",
+    "victory": "^37.3.4",
     "web-vitals": "^0.2.4",
     "yup": "^0.32.11"
   },

diff --git a/client/src/app/App.css b/client/src/app/App.css
@@ -13,13 +13,10 @@ table.vertical-middle-aligned-table tr td {
   vertical-align: middle;
 }
 
-.multiple-file-upload-status-item-force-blue .pf-v5-c-progress.pf-m-success {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(
-    --pf-v5-global--primary-color--100
-  ) !important;
-  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
+.multiple-file-upload-status-item-force-blue .pf-v6-c-progress__indicator {
+  background-color: #0066cc !important;
 }
 
-.multiple-file-upload-status-item-force-blue .pf-v5-c-progress__indicator {
-  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor) !important;
+.multiple-file-upload-status-item-force-blue .pf-v6-c-progress__status-icon {
+  color: #0066cc !important;
 }
diff --git a/client/src/app/api/model-utils.ts b/client/src/app/api/model-utils.ts
@@ -1,11 +1,11 @@
 import type { ProgressProps } from "@patternfly/react-core";
 import {
-  global_palette_purple_400 as criticalColor,
-  global_danger_color_100 as importantColor,
-  global_info_color_100 as lowColor,
-  global_warning_color_100 as moderateColor,
-  global_palette_black_400 as noneColor,
-  global_palette_black_300 as unknownColor,
+  t_global_icon_color_severity_critical_default as criticalColor,
+  t_global_icon_color_severity_important_default as importantColor,
+  t_global_icon_color_severity_minor_default as lowColor,
+  t_global_icon_color_severity_moderate_default as moderateColor,
+  t_global_icon_color_severity_none_default as noneColor,
+  t_global_icon_color_severity_undefined_default as unknownColor,
 } from "@patternfly/react-tokens";
 
 import type { ExtendedSeverity } from "./models";

diff --git a/client/src/app/components/AppPlaceholder.tsx b/client/src/app/components/AppPlaceholder.tsx
@@ -5,11 +5,11 @@ import { Bullseye, Spinner } from "@patternfly/react-core";
 export const AppPlaceholder: React.FC = () => {
   return (
     <Bullseye>
-      <div className="pf-v5-u-display-flex pf-v5-u-flex-direction-column">
+      <div className="pf-v6-u-display-flex pf-v6-u-flex-direction-column">
         <div>
           <Spinner />
         </div>
-        <div className="pf-v5-c-content">
+        <div className="pf-v6-c-content">
           <h3>Loading...</h3>
         </div>
       </div>

diff --git a/client/src/app/components/ConfirmDialog.tsx b/client/src/app/components/ConfirmDialog.tsx
@@ -4,7 +4,9 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalVariant,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from "@patternfly/react-core";
 
 export interface ConfirmDialogProps {
@@ -73,15 +75,23 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   return (
     <Modal
       id="confirm-dialog"
-      variant={ModalVariant.small}
-      title={title}
-      titleIconVariant={titleIconVariant}
+      variant="small"
       isOpen={isOpen}
       onClose={onClose}
       aria-label="Confirm dialog"
-      actions={onCancel ? [confirmBtn, cancelBtn] : [confirmBtn]}
     >
-      {message}
+      <ModalHeader title={title} titleIconVariant={titleIconVariant} />
+      <ModalBody>{message}</ModalBody>
+      <ModalFooter>
+        {onCancel ? (
+          <>
+            {confirmBtn}
+            {cancelBtn}
+          </>
+        ) : (
+          <>{confirmBtn}</>
+        )}
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/client/src/app/components/ErrorFallback.tsx b/client/src/app/components/ErrorFallback.tsx
@@ -6,9 +6,7 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateVariant,
-  Title,
 } from "@patternfly/react-core";
 import UserNinjaIcon from "@patternfly/react-icons/dist/esm/icons/user-ninja-icon";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
@@ -45,11 +43,12 @@ export const ErrorFallback = ({
 
   return (
     <Bullseye>
-      <EmptyState variant={EmptyStateVariant.sm}>
-        <EmptyStateIcon icon={UserNinjaIcon} />
-        <Title headingLevel="h2" size="lg">
-          Oops! Something went wrong.
-        </Title>
+      <EmptyState
+        titleText="Oops! Something went wrong."
+        headingLevel="h4"
+        icon={UserNinjaIcon}
+        variant={EmptyStateVariant.sm}
+      >
         <EmptyStateBody>
           Try to refresh your page or contact your admin.
           <Button

diff --git a/client/src/app/components/FilterPanel/FilterPanel.tsx b/client/src/app/components/FilterPanel/FilterPanel.tsx
@@ -1,12 +1,6 @@
 import type * as React from "react";
 
-import {
-  Button,
-  Stack,
-  StackItem,
-  Text,
-  TextContent,
-} from "@patternfly/react-core";
+import { Button, Content, Stack, StackItem } from "@patternfly/react-core";
 
 import type {
   FilterCategory,
@@ -73,9 +67,7 @@ export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
               <StackItem key={category.categoryKey}>
                 <Stack hasGutter>
                   <StackItem>
-                    <TextContent>
-                      <Text component="h4">{category.title}</Text>
-                    </TextContent>
+                    <Content component="h4">{category.title}</Content>
                   </StackItem>
                   <StackItem>
                     <FilterControl<TItem, TFilterCategoryKey>

diff --git a/client/src/app/components/FilterPanel/SearchFilterControl.tsx b/client/src/app/components/FilterPanel/SearchFilterControl.tsx
@@ -1,11 +1,13 @@
+import * as React from "react";
+
 import {
   Button,
   ButtonVariant,
   InputGroup,
   TextInput,
 } from "@patternfly/react-core";
 import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
-import * as React from "react";
+
 import type { ISearchFilterCategory } from "../FilterToolbar";
 import type { IFilterControlProps } from "./FilterControl";
 
@@ -57,14 +59,13 @@ export const SearchFilterControl = <TItem, TFilterCategoryKey extends string>({
         isDisabled={isDisabled}
       />
       <Button
+        icon={<SearchIcon />}
         variant={ButtonVariant.control}
         id="search-button"
         aria-label="search button for search input"
         onClick={onFilterSubmit}
         isDisabled={isDisabled}
-      >
-        <SearchIcon />
-      </Button>
+      />
     </InputGroup>
   );
 };
diff --git a/client/src/app/components/FilterToolbar/DateRangeFilter.tsx b/client/src/app/components/FilterToolbar/DateRangeFilter.tsx
@@ -3,9 +3,9 @@ import React, { type FormEvent, useState } from "react";
 import {
   DatePicker,
   InputGroup,
-  type ToolbarChip,
-  type ToolbarChipGroup,
   ToolbarFilter,
+  type ToolbarLabel,
+  type ToolbarLabelGroup,
   Tooltip,
   isValidDate as isValidJSDate,
 } from "@patternfly/react-core";
@@ -85,8 +85,8 @@ export const DateRangeFilter = <TItem,>({
   };
 
   const clearSingleRange = (
-    _category: string | ToolbarChipGroup,
-    _option: string | ToolbarChip,
+    _category: string | ToolbarLabelGroup,
+    _option: string | ToolbarLabel,
   ) => {
     setFilterValue([]);
   };
@@ -118,9 +118,9 @@ export const DateRangeFilter = <TItem,>({
   return (
     <ToolbarFilter
       key={category.categoryKey}
-      chips={validFilters.flatMap(rangeToOption)}
-      deleteChip={clearSingleRange}
-      deleteChipGroup={() => setFilterValue([])}
+      labels={validFilters.flatMap(rangeToOption)}
+      deleteLabel={clearSingleRange}
+      deleteLabelGroup={() => setFilterValue([])}
       categoryName={category.title}
       showToolbarItem={showToolbarItem}
     >

diff --git a/client/src/app/components/FilterToolbar/FilterToolbar.tsx b/client/src/app/components/FilterToolbar/FilterToolbar.tsx
@@ -195,9 +195,7 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
         variant="filter-group"
         toggleIcon={<FilterIcon />}
         breakpoint="2xl"
-        spaceItems={
-          showFiltersSideBySide ? { default: "spaceItemsMd" } : undefined
-        }
+        gap={showFiltersSideBySide ? { default: "gapMd" } : undefined}
       >
         {!showFiltersSideBySide && (
           <ToolbarItem>

diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -12,8 +12,8 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  type ToolbarChip,
   ToolbarFilter,
+  type ToolbarLabel,
   Tooltip,
 } from "@patternfly/react-core";
 import { TimesIcon } from "@patternfly/react-icons";
@@ -73,7 +73,7 @@ export const MultiselectFilterControl = <TItem,>({
   const [inputValue, setInputValue] = React.useState<string>("");
 
   const onFilterClearAll = () => setFilterValue([]);
-  const onFilterClear = (chip: string | ToolbarChip) => {
+  const onFilterClear = (chip: string | ToolbarLabel) => {
     const value = typeof chip === "string" ? chip : chip.key;
 
     if (value) {
@@ -117,7 +117,7 @@ export const MultiselectFilterControl = <TItem,>({
         }
         return prev;
       },
-      [] as (string | ToolbarChip)[],
+      [] as (string | ToolbarLabel)[],
     );
 
   const renderSelectOptions = (
@@ -325,16 +325,15 @@ export const MultiselectFilterControl = <TItem,>({
         <TextInputGroupUtilities>
           {!!inputValue && (
             <Button
+              icon={<TimesIcon aria-hidden />}
               variant="plain"
               onClick={() => {
                 setInputValue("");
                 setFilterValue(null);
                 textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
+            />
           )}
           {filterValue?.length ? (
             <Badge isRead>{filterValue.length}</Badge>
@@ -347,9 +346,9 @@ export const MultiselectFilterControl = <TItem,>({
   return (
     <ToolbarFilter
       id={`filter-control-${category.categoryKey}`}
-      chips={chips}
-      deleteChip={(_, chip) => onFilterClear(chip)}
-      deleteChipGroup={onFilterClearAll}
+      labels={chips}
+      deleteLabel={(_, chip) => onFilterClear(chip)}
+      deleteLabelGroup={onFilterClearAll}
       categoryName={category.title}
       showToolbarItem={showToolbarItem}
     >

diff --git a/client/src/app/components/FilterToolbar/SearchFilterControl.tsx b/client/src/app/components/FilterToolbar/SearchFilterControl.tsx
@@ -45,8 +45,8 @@ export const SearchFilterControl = <TItem, TFilterCategoryKey extends string>({
   const id = `${category.categoryKey}-input`;
   return (
     <ToolbarFilter
-      chips={filterValue || []}
-      deleteChip={() => setFilterValue([])}
+      labels={filterValue || []}
+      deleteLabel={() => setFilterValue([])}
       categoryName={category.title}
       showToolbarItem={showToolbarItem}
     >
@@ -66,14 +66,13 @@ export const SearchFilterControl = <TItem, TFilterCategoryKey extends string>({
           isDisabled={isDisabled}
         />
         <Button
+          icon={<SearchIcon />}
           variant={ButtonVariant.control}
           id="search-button"
           aria-label="search button for search input"
           onClick={onFilterSubmit}
           isDisabled={isDisabled}
-        >
-          <SearchIcon />
-        </Button>
+        />
       </InputGroup>
     </ToolbarFilter>
   );

diff --git a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
@@ -6,8 +6,8 @@ import {
   Select,
   SelectList,
   SelectOption,
-  type ToolbarChip,
   ToolbarFilter,
+  type ToolbarLabel,
 } from "@patternfly/react-core";
 import { css } from "@patternfly/react-styles";
 
@@ -56,7 +56,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
         prev.push(current);
       }
       return prev;
-    }, new Array<string | ToolbarChip>());
+    }, new Array<string | ToolbarLabel>());
 
   const onFilterSelect = (value: string) => {
     const option = getOptionFromOptionValue(value);
@@ -97,8 +97,8 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
   return (
     <ToolbarFilter
       id={`filter-control-${category.categoryKey}`}
-      chips={chips}
-      deleteChip={(_, chip) => onFilterClear(chip as string)}
+      labels={chips}
+      deleteLabel={(_, chip) => onFilterClear(chip as string)}
       categoryName={category.title}
       showToolbarItem={showToolbarItem}
     >

diff --git a/client/src/app/components/FilterToolbar/select-overrides.css b/client/src/app/components/FilterToolbar/select-overrides.css
@@ -1,4 +1,4 @@
-.pf-v5-c-select.isScrollable .pf-v5-c-select__menu {
+.pf-v6-c-select.isScrollable .pf-v6-c-select__menu {
   max-height: 60vh;
   overflow-y: auto;
 }
diff --git a/client/src/app/components/HookFormPFFields/HookFormPFGroupController.tsx b/client/src/app/components/HookFormPFFields/HookFormPFGroupController.tsx
@@ -65,7 +65,7 @@ export const HookFormPFGroupController = <
         error?.message && (isDirty || isTouched) && !errorsSuppressed;
       return (
         <FormGroup
-          labelIcon={labelIcon}
+          labelHelp={labelIcon}
           label={label}
           fieldId={fieldId}
           className={className}