PatternFly v6

package.json

@@ -32,6 +32,7 @@
     "start": "HMR=true fec dev",
     "start:csb": "CLOUD_SERVICES_BACKEND_PORT=8000 npm start",
     "start:hmr": "HMR=true npm start",
+    "start:static": "fec static --port=8005",
     "stats": "npm run build:prod --profile --json > stats.json",
     "test": "jest --no-cache",
     "test:clean": "jest --clearCache",
@@ -47,13 +48,14 @@
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.4.2",
-    "@patternfly/react-charts": "7.4.8",
-    "@patternfly/react-component-groups": "5.5.5",
-    "@patternfly/react-core": "5.4.12",
-    "@patternfly/react-icons": "5.4.2",
-    "@patternfly/react-table": "5.4.13",
-    "@patternfly/react-tokens": "5.4.1",
+    "@patternfly/patternfly": "6.1.0",
+    "@patternfly/react-charts": "8.1.0",
+    "@patternfly/react-component-groups": "6.1.0",
+    "@patternfly/react-core": "6.1.0",
+    "@patternfly/react-icons": "6.1.0",
+    "@patternfly/react-table": "6.1.0",
+    "@patternfly/react-tokens": "6.1.0",
+    "@ausuliv/frontend-components-notifications": "^4.1.6",
     "@redhat-cloud-services/frontend-components": "^5.1.3",
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.10",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.14",
@@ -128,6 +130,9 @@
     "typescript": "^5.7.3"
   },
   "overrides": {
+    "@patternfly/react-core": "6.1.0",
+    "@patternfly/react-icons": "6.1.0",
+    "@patternfly/react-table": "6.1.0",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "eslint": "^9.18.0",
     "react-intl": "^7.1.4",

src/App.tsx

@@ -1,9 +1,9 @@
 import './App.scss';
 
+import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal';
+import { notificationsReducer } from '@ausuliv/frontend-components-notifications/redux';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
-import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
-import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';

src/components/feature-toggle/FeatureToggle.tsx

@@ -7,6 +7,7 @@ import { featureToggleActions } from 'store/feature-toggle';
 export const enum FeatureToggle {
   billingStage = 'hybrid-committed-spend.ui.billing-stage', // Toggle to enable billing.stage APIs for demos
   debug = 'hybrid-committed-spend.ui.debug',
+  overridePermissions = 'hybrid-committed-spend.ui.override-permissions', // Toggle to override permissions for testing
 }
 
 const useIsToggleEnabled = (toggle: FeatureToggle) => {
@@ -22,13 +23,18 @@ export const useIsDebugToggleEnabled = () => {
   return useIsToggleEnabled(FeatureToggle.debug);
 };
 
+export const useIsOverridePermissionsToggleEnabled = () => {
+  return useIsToggleEnabled(FeatureToggle.overridePermissions);
+};
+
 // The FeatureToggle component saves feature toggles in store for places where Unleash hooks not available
 const useFeatureToggle = () => {
   const dispatch = useDispatch();
   const { auth } = useChrome();
 
   const isBillingStageToggleEnabled = useIsBillingStageToggleEnabled();
   const isDebugToggleEnabled = useIsDebugToggleEnabled();
+  const isOverridePermissionsToggleEnabled = useIsOverridePermissionsToggleEnabled();
 
   const fetchUser = callback => {
     auth.getUser().then(user => {
@@ -42,13 +48,14 @@ const useFeatureToggle = () => {
       featureToggleActions.setFeatureToggle({
         isBillingStageToggleEnabled,
         isDebugToggleEnabled,
+        isOverridePermissionsToggleEnabled,
       })
     );
     if (isDebugToggleEnabled) {
       // eslint-disable-next-line no-console
       fetchUser(identity => console.log('User identity:', identity));
     }
-  }, [isBillingStageToggleEnabled, isDebugToggleEnabled]);
+  }, [isBillingStageToggleEnabled, isDebugToggleEnabled, isOverridePermissionsToggleEnabled]);
 };
 
 export default useFeatureToggle;

src/components/permissions/Permissions.tsx

@@ -4,6 +4,8 @@ import { Loading, NotAuthorized, NotAvailable, NotDeal, NotViewer, NotVisible }
 import { FetchStatus } from 'store/common';
 import { useFormatPath, usePathname } from 'utils/paths';
 import { hasHcsDataVisibility, hasHcsDeal, hasHcsViewer, useUserAccessMapToProps } from 'utils/userAccess';
+
+import { useIsOverridePermissionsToggleEnabled } from '../feature-toggle';
 interface PermissionsOwnProps {
   children?: React.ReactNode;
 }
@@ -19,15 +21,10 @@ const Permissions: React.FC<PermissionsProps> = ({ children = null }) => {
     if (userAccessFetchStatus !== FetchStatus.complete) {
       return false;
     }
-    const hasDeal = hasHcsDeal(userAccess);
-    const hasViewer = hasHcsViewer(userAccess);
-    const hasDataVisibility = hasHcsDataVisibility(userAccess);
-
     switch (pathname) {
       case formatPath(routes.details.path):
-        return hasDeal && hasDataVisibility && hasViewer;
       case formatPath(routes.overview.path):
-        return hasDeal && hasDataVisibility && hasViewer;
+        return true;
       default:
         return false;
     }
@@ -36,17 +33,31 @@ const Permissions: React.FC<PermissionsProps> = ({ children = null }) => {
   // Page access denied because user doesn't have RBAC permissions and is not an org admin
   let result = <NotAuthorized pathname={pathname} />;
 
+  const isOverridePermissionsToggleEnabled = useIsOverridePermissionsToggleEnabled();
+
   if (userAccessFetchStatus === FetchStatus.inProgress) {
     result = <Loading />;
-  } else if (userAccessError?.response?.request?.status === 401) {
+  } else if (userAccessError?.response?.request?.status === 401 && !isOverridePermissionsToggleEnabled) {
     result = <NotAuthorized pathname={pathname} />;
   } else if (userAccessError) {
     result = <NotAvailable />;
-  } else if (userAccessFetchStatus === FetchStatus.complete && !hasHcsDeal(userAccess)) {
+  } else if (
+    userAccessFetchStatus === FetchStatus.complete &&
+    !hasHcsDeal(userAccess) &&
+    !isOverridePermissionsToggleEnabled
+  ) {
     result = <NotDeal pathname={pathname} />;
-  } else if (userAccessFetchStatus === FetchStatus.complete && !hasHcsDataVisibility(userAccess)) {
+  } else if (
+    userAccessFetchStatus === FetchStatus.complete &&
+    !hasHcsDataVisibility(userAccess) &&
+    !isOverridePermissionsToggleEnabled
+  ) {
     result = <NotVisible pathname={pathname} />;
-  } else if (userAccessFetchStatus === FetchStatus.complete && !hasHcsViewer(userAccess)) {
+  } else if (
+    userAccessFetchStatus === FetchStatus.complete &&
+    !hasHcsViewer(userAccess) &&
+    !isOverridePermissionsToggleEnabled
+  ) {
     result = <NotViewer pathname={pathname} />;
   } else if (hasPermissions()) {
     result = <>{children}</>;

src/routes/components/charts/breakdown/BreakdownChart.tsx

@@ -10,7 +10,7 @@ import {
   ChartThemeColor,
   createContainer,
   getInteractiveLegendEvents,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import messages from 'locales/messages';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';

src/routes/components/charts/common/chart-utils.ts

@@ -1,4 +1,4 @@
-import { getInteractiveLegendItemStyles } from '@patternfly/react-charts';
+import { getInteractiveLegendItemStyles } from '@patternfly/react-charts/victory';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
 import type { FormatOptions, Formatter } from 'utils/format';

src/routes/components/charts/theme/theme-utils.ts

@@ -1,4 +1,4 @@
-import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';
+import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts/victory';
 
 import { default as ChartTheme } from './theme-hcs';
 

src/routes/components/charts/trend/TrendChart.tsx

@@ -8,7 +8,7 @@ import {
   ChartLegendTooltip,
   createContainer,
   getInteractiveLegendEvents,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import { Title } from '@patternfly/react-core';
 import messages from 'locales/messages';
 import React, { useEffect, useMemo, useState } from 'react';

src/routes/components/data-toolbar/DataToolbar.scss

@@ -3,14 +3,14 @@
 // Workaround for https://github.com/patternfly/patternfly-react/issues/4477
 // and https://github.com/patternfly/patternfly-react/issues/6371
 .selectOverride {
-  .pf-v5-c-menu-toggle {
+  .pf-v6-c-menu-toggle {
     min-width: 250px;
   }
 }
 
-.pf-v5-c-toolbar {
+.pf-v6-c-toolbar {
   &.dataToolbarOverride {
     // Alternative workaround to overriding table sticky style
-    // --pf-v5-c-toolbar--ZIndex: auto; z-index: 301;
+    // --pf-v6-c-toolbar--ZIndex: auto; z-index: 301;
   }
 }

src/routes/components/data-toolbar/DataToolbar.tsx

@@ -1,6 +1,6 @@
 import './DataToolbar.scss';
 
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import {
   Button,
   ButtonVariant,
@@ -36,7 +36,7 @@ interface Filters {
 
 interface DataToolbarOwnProps {
   endDate?: Date;
-  categoryOptions?: ToolbarChipGroup[]; // Options for category menu
+  categoryOptions?: ToolbarLabelGroup[]; // Options for category menu
   filterPathsType?: FilterPathsType;
   groupBy?: string; // Sync category selection with groupBy value
   isDisabled?: boolean;
@@ -155,14 +155,14 @@ const DataToolbar: React.FC<DataToolbarProps> = ({
   };
 
   // Category input
-  const getCategoryInput = (categoryOption: ToolbarChipGroup) => {
+  const getCategoryInput = (categoryOption: ToolbarLabelGroup) => {
     const disabled = isDisabled && !hasFilters();
 
     return (
       <ToolbarFilter
         categoryName={categoryOption}
-        chips={getChips(filters[categoryOption.key] as Filter[])}
-        deleteChip={onDelete}
+        labels={getChips(filters[categoryOption.key] as Filter[])}
+        deleteLabel={onDelete}
         key={categoryOption.key}
         showToolbarItem={currentCategory === categoryOption.key}
       >
@@ -194,13 +194,12 @@ const DataToolbar: React.FC<DataToolbarProps> = ({
                   value={categoryInput}
                 />
                 <Button
+                  icon={<SearchIcon />}
                   isDisabled={disabled}
                   variant={ButtonVariant.control}
                   aria-label={intl.formatMessage(messages.filterByButtonAriaLabel, { value: categoryOption.key })}
                   onClick={evt => onCategoryInput(evt, categoryOption.key)}
-                >
-                  <SearchIcon />
-                </Button>
+                ></Button>
               </>
             )}
           </InputGroupItem>
@@ -209,11 +208,11 @@ const DataToolbar: React.FC<DataToolbarProps> = ({
     );
   };
 
-  const getDefaultCategoryOptions = (): ToolbarChipGroup[] => {
+  const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => {
     return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }];
   };
 
-  const getCategoryOptions = (): ToolbarChipGroup[] => {
+  const getCategoryOptions = (): ToolbarLabelGroup[] => {
     return categoryOptions ? categoryOptions : getDefaultCategoryOptions();
   };
 
@@ -279,18 +278,17 @@ const DataToolbar: React.FC<DataToolbarProps> = ({
   const getExportButton = () => {
     return (
       <ToolbarItem
-        spacer={{
-          default: 'spacerNone',
+        gap={{
+          default: 'gapNone',
         }}
       >
         <Button
+          icon={<ExportIcon />}
           aria-label="Export data"
           isDisabled={isDisabled || isExportDisabled}
           onClick={handleOnExportClicked}
           variant={ButtonVariant.plain}
-        >
-          <ExportIcon />
-        </Button>
+        />
       </ToolbarItem>
     );
   };
@@ -320,7 +318,7 @@ const DataToolbar: React.FC<DataToolbarProps> = ({
           </ToolbarGroup>
         </ToolbarToggleGroup>
         <ToolbarGroup>{getExportButton()}</ToolbarGroup>
-        <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
+        <ToolbarItem align={{ default: 'alignEnd' }} variant="pagination">
           {pagination}
         </ToolbarItem>
       </ToolbarContent>

src/routes/components/export/ExportModal.styles.ts

@@ -1,24 +1,24 @@
-import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
-import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm';
-import global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs';
+import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md';
+import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm';
+import t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs';
 import type React from 'react';
 
 export const styles = {
   alert: {
-    marginBottom: global_spacer_md.var,
+    marginBottom: t_global_spacer_md.var,
   },
   form: {
-    marginLeft: global_spacer_sm.var,
+    marginLeft: t_global_spacer_sm.var,
   },
   modal: {
     input: {
-      marginRight: global_spacer_xs.var,
+      marginRight: t_global_spacer_xs.var,
     },
     ul: {
-      marginLeft: global_spacer_sm.var,
+      marginLeft: t_global_spacer_sm.var,
     },
   },
   title: {
-    marginBottom: global_spacer_md.var,
+    marginBottom: t_global_spacer_md.var,
   },
 } as { [className: string]: React.CSSProperties };

src/routes/components/export/ExportModal.tsx

@@ -1,5 +1,6 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import { Alert, Button, ButtonVariant, Form, FormGroup, Grid, GridItem, Modal, Radio } from '@patternfly/react-core';
+import { Alert, Button, ButtonVariant, Form, FormGroup, Grid, GridItem, Radio } from '@patternfly/react-core';
+import { Modal } from '@patternfly/react-core/deprecated';
 import type { ReportPathsType } from 'api/reports/report';
 import type { AxiosError } from 'axios';
 import messages from 'locales/messages';

src/routes/components/filterTypeahead/FilterInput.tsx

@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import {
   Button,
   Divider,
@@ -109,9 +109,12 @@ const FilterInput: React.FC<FilterInputProps> = ({
             />
             {search?.length && (
               <TextInputGroupUtilities>
-                <Button variant="plain" onClick={handleOnClear} aria-label="Clear button and input">
-                  <TimesIcon />
-                </Button>
+                <Button
+                  icon={<TimesIcon />}
+                  variant="plain"
+                  onClick={handleOnClear}
+                  aria-label="Clear button and input"
+                />
               </TextInputGroupUtilities>
             )}
           </TextInputGroup>
@@ -154,7 +157,7 @@ const FilterInput: React.FC<FilterInputProps> = ({
     return menuItems;
   };
 
-  const getOptions = (): ToolbarChipGroup[] => {
+  const getOptions = (): ToolbarLabelGroup[] => {
     const options = [];
     if (filter?.data?.length > 0 && filterFetchStatus !== FetchStatus.inProgress) {
       filter.data.map(item => {

src/routes/components/page-heading/PageHeading.styles.ts

@@ -1,9 +1,9 @@
-import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
+import t_global_font_size_xs from '@patternfly/react-tokens/dist/js/t_global_font_size_xs';
 import type React from 'react';
 
 export const styles = {
   emptyValue: {
-    marginLeft: global_FontSize_xs.var,
+    marginLeft: t_global_font_size_xs.var,
   },
   headingContent: {
     display: 'flex',