PatternFly v6 milestone

project-koku · Sep 25, 2024 · 1e378ab · 1e378ab
1 parent a0180d7
commit 1e378ab
Show file tree

Hide file tree

Showing 62 changed files with 557 additions and 503 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,15 +48,15 @@
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.4.0",
-    "@patternfly/react-charts": "7.4.2",
-    "@patternfly/react-component-groups": "^5.2.0",
-    "@patternfly/react-core": "5.4.0",
-    "@patternfly/react-icons": "5.4.0",
-    "@patternfly/react-table": "5.4.0",
-    "@patternfly/react-tokens": "5.4.0",
+    "@patternfly/patternfly": "6.0.0-prerelease.13",
+    "@patternfly/react-charts": "8.0.0-prerelease.10",
+    "@patternfly/react-component-groups": "6.0.0-prerelease.2",
+    "@patternfly/react-core": "6.0.0-prerelease.13",
+    "@patternfly/react-icons": "6.0.0-prerelease.4",
+    "@patternfly/react-table": "6.0.0-prerelease.13",
+    "@patternfly/react-tokens": "6.0.0-prerelease.4",
     "@redhat-cloud-services/frontend-components": "^4.2.15",
-    "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
+    "@ausuliv/frontend-components-notifications": "^4.1.5",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.8",
     "@redhat-cloud-services/frontend-components-utilities": "^4.0.17",
     "@redhat-cloud-services/rbac-client": "^2.2.4",
@@ -132,6 +132,9 @@
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "overrides": {
+    "@patternfly/react-core": "6.0.0-prerelease.13",
+    "@patternfly/react-icons": "6.0.0-prerelease.4",
+    "@patternfly/react-table": "6.0.0-prerelease.13",
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "eslint": "^9.11.0",
     "redux": "^5.0.1"

diff --git a/src/app.tsx b/src/app.tsx
@@ -1,8 +1,8 @@
 import './app.scss';
 
+import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal';
+import { notificationsReducer } from '@ausuliv/frontend-components-notifications/redux';
 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, useLayoutEffect } from 'react';
 import { invalidateSession } from 'utils/sessionStorage';

diff --git a/src/appEntry.tsx b/src/appEntry.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 // Todo: Uncomment for use with non-shared PatternFly packages
-// import '@patternfly/patternfly/patternfly.css';
+import '@patternfly/patternfly/patternfly.css'; // Todo: revert
 import '@patternfly/patternfly/patternfly-addons.css';
 import './styles/global.css';
 
-import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
+import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal';
 import IntlProvider from '@redhat-cloud-services/frontend-components-translations/Provider';
 import { getLocale } from 'components/i18n';
 import React from 'react';

diff --git a/src/routes/components/dataTable/dataTable.scss b/src/routes/components/dataTable/dataTable.scss
@@ -4,13 +4,13 @@
   div {
     display: block;
     margin-right: 0;
-    margin-bottom: var(--pf-v5-global--spacer--xs);
+    margin-bottom: var(--pf-t--global--spacer--xs);
     &.iconOverride {
       &.decrease {
-        color: var(--pf-v5-global--success-color--100);
+        color: var(--pf-t--global--color--status--success--default);
       }
       &.increase {
-        color: var(--pf-v5-global--danger-color--100);
+        color: var(--pf-t--global--color--status--danger--default);
       }
       .fa-sort-up {
         margin-left: 10px;
@@ -19,10 +19,10 @@
         margin-left: 10px;
       }
       .fa-sort-up::before {
-        color: var(--pf-v5-global--danger-color--100);
+        color: var(--pf-t--global--color--status--danger--default);
       }
       .fa-sort-down::before {
-        color: var(--pf-v5-global--success-color--100);
+        color: var(--pf-t--global--color--status--success--default);
       }
       span {
         margin-right: -17px !important;
@@ -32,7 +32,7 @@
 }
 
 .tableOverride {
-  &.pf-v5-c-table tbody .pf-v5-c-table__check input {
+  &.pf-v6-c-table tbody .pf-v6-c-table__check input {
     margin-top: .40rem;
   }
 }
diff --git a/src/routes/components/dataTable/dataTable.styles.ts b/src/routes/components/dataTable/dataTable.styles.ts
@@ -1,9 +1,9 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_disabled_color_100 from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
-import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
-import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl';
-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_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100';
+import t_global_color_disabled_100 from '@patternfly/react-tokens/dist/js/t_global_color_disabled_100';
+import t_global_font_size_xs from '@patternfly/react-tokens/dist/js/t_global_font_size_xs';
+import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl';
+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 = {
@@ -17,22 +17,22 @@ export const styles = {
     minWidth: '50px',
   },
   emptyState: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: t_global_BackgroundColor_light_100.value,
     display: 'flex',
     justifyContent: 'center',
-    paddingTop: global_spacer_3xl.value,
+    paddingTop: t_global_spacer_3xl.value,
     height: '35vh',
     width: '100%',
   },
   infoArrow: {
     position: 'relative',
   },
   infoArrowDesc: {
-    bottom: global_spacer_xs.value,
+    bottom: t_global_spacer_xs.value,
   },
   infoDescription: {
-    color: global_disabled_color_100.value,
-    fontSize: global_FontSize_xs.value,
+    color: t_global_color_disabled_100.value,
+    fontSize: t_global_font_size_xs.value,
   },
   lastItem: {
     textAlign: 'right',
@@ -50,6 +50,6 @@ export const styles = {
     width: '1%',
   },
   warningIcon: {
-    paddingLeft: global_spacer_sm.var,
+    paddingLeft: t_global_spacer_sm.var,
   },
 } as { [className: string]: React.CSSProperties };
diff --git a/src/routes/components/dataTable/dataTable.tsx b/src/routes/components/dataTable/dataTable.tsx
@@ -1,13 +1,6 @@
 import './dataTable.scss';
 
-import {
-  Bullseye,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Spinner,
-} from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
 import { SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -58,8 +51,7 @@ class DataTable extends React.Component<DataTableProps, any> {
     return emptyState ? (
       emptyState
     ) : (
-      <EmptyState>
-        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
+      <EmptyState icon={CalculatorIcon} titleText="">
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );

diff --git a/src/routes/components/dataTable/selectableTable.tsx b/src/routes/components/dataTable/selectableTable.tsx
@@ -1,11 +1,4 @@
-import {
-  Bullseye,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Spinner,
-} from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
 import { SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -53,8 +46,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
       return emptyState;
     }
     return (
-      <EmptyState>
-        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
+      <EmptyState icon={CalculatorIcon} titleText="">
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );

diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx
@@ -14,7 +14,6 @@ import { isEqual } from 'routes/utils/equal';
 import type { Filter } from 'routes/utils/filter';
 import { createMapStateToProps } from 'store/common';
 
-import { styles } from './dataToolbar.styles';
 import {
   getCategoryInput,
   getCategorySelect,
@@ -278,7 +277,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
 
     // Todo: clearAllFilters workaround https://github.com/patternfly/patternfly-react/issues/4222
     return (
-      <div style={style ? style : styles.toolbarContainer}>
+      <div style={style}>
         <Toolbar
           className="toolbarOverride"
           clearAllFilters={this.handleOnDelete as any}
@@ -295,7 +294,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
               </ToolbarToggleGroup>
             )}{' '}
             {actions && <ToolbarGroup>{actions}</ToolbarGroup>}
-            <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
+            <ToolbarItem align={{ default: 'alignEnd' }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>

diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss
@@ -3,15 +3,15 @@
 // 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;
   }
 }
 
 .toolbarOverride {
-  .pf-v5-c-button.pf-m-control::after {
+  .pf-v6-c-button.pf-m-control::after {
     border-left: none;
   }
   // 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;
 }
diff --git a/src/routes/components/dataToolbar/dataToolbar.styles.ts b/src/routes/components/dataToolbar/dataToolbar.styles.ts
diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx
@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import {
   Button,
   ButtonVariant,
@@ -58,8 +58,8 @@ export const getCategoryInput = ({
   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}
     >
@@ -89,13 +89,12 @@ export const getCategoryInput = ({
                 size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length}
               />
               <Button
+                icon={<SearchIcon />}
                 isDisabled={isDisabled && !_hasFilters}
                 variant={ButtonVariant.control}
                 aria-label={intl.formatMessage(messages.filterByButtonAriaLabel, { value: placeholderKey })}
                 onClick={evt => onCategoryInput(evt, categoryOption.key)}
-              >
-                <SearchIcon />
-              </Button>
+              ></Button>
             </>
           )}
         </InputGroupItem>
@@ -104,7 +103,7 @@ export const getCategoryInput = ({
   );
 };
 
-export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => {
+export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => {
   return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }];
 };
 
@@ -195,7 +194,7 @@ export const getCategorySelect = ({
   isDisabled,
   onCategorySelect,
 }: {
-  categoryOptions?: ToolbarChipGroup[]; // Options for category menu
+  categoryOptions?: ToolbarLabelGroup[]; // Options for category menu
   currentCategory?: string;
   filters?: Filters;
   isDisabled?: boolean;
@@ -222,7 +221,7 @@ export const getCategorySelect = ({
   );
 };
 
-export const getCategorySelectOptions = (categoryOptions: ToolbarChipGroup[]): SelectWrapperOption[] => {
+export const getCategorySelectOptions = (categoryOptions: ToolbarLabelGroup[]): SelectWrapperOption[] => {
   const options: SelectWrapperOption[] = [];
 
   categoryOptions.map(option => {

diff --git a/src/routes/components/dataToolbar/utils/common.ts b/src/routes/components/dataToolbar/utils/common.ts
@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import type { Query } from 'api/queries/query';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -10,11 +10,11 @@ export interface Filters {
   [key: string]: Filter[] | { [key: string]: Filter[] };
 }
 
-export interface ToolbarChipGroupExt extends ToolbarChipGroup {
+export interface ToolbarChipGroupExt extends ToolbarLabelGroup {
   ariaLabelKey?: string;
   placeholderKey?: string;
   selectClassName?: string; // A selector from routes/components/dataToolbar/dataToolbar.scss
-  selectOptions?: ToolbarChipGroup[];
+  selectOptions?: ToolbarLabelGroup[];
 }
 
 export const defaultFilters = {
@@ -90,7 +90,7 @@ export const getChips = (filters: Filter[]): string[] => {
   return chips;
 };
 
-export const getDefaultCategory = (categoryOptions: ToolbarChipGroup[], groupBy: string, query: Query) => {
+export const getDefaultCategory = (categoryOptions: ToolbarLabelGroup[], groupBy: string, query: Query) => {
   if (!categoryOptions) {
     return 'name';
   }

diff --git a/src/routes/components/dataToolbar/utils/custom.tsx b/src/routes/components/dataToolbar/utils/custom.tsx
@@ -39,8 +39,8 @@ export const getCustomSelect = ({
   return (
     <ToolbarFilter
       categoryName={categoryName}
-      chips={getChips(filters[categoryOption.key] as Filter[])}
-      deleteChip={onDelete}
+      labels={getChips(filters[categoryOption.key] as Filter[])}
+      deleteLabel={onDelete}
       key={`custom-select-${categoryOption.key}`}
       showToolbarItem={currentCategory === categoryOption.key}
     >

diff --git a/src/routes/components/page/loading/loading.tsx b/src/routes/components/page/loading/loading.tsx
@@ -19,7 +19,7 @@ const Loading = ({ body, heading, title }: LoadingProps) => {
           <PageHeaderTitle title={title} />
         </PageHeader>
       )}
-      <PageSection>
+      <PageSection hasBodyWrapper={false}>
         <LoadingState body={body} heading={heading} />
       </PageSection>
     </>

diff --git a/src/routes/components/page/noOptimizations/noOptimizations.tsx b/src/routes/components/page/noOptimizations/noOptimizations.tsx
@@ -18,7 +18,7 @@ const NoOptimizations = ({ title }: NoOptimizationsProps) => {
           <PageHeaderTitle title={title} />
         </PageHeader>
       )}
-      <PageSection>
+      <PageSection hasBodyWrapper={false}>
         <NoOptimizationsState />
       </PageSection>
     </>