Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PatternFly v6 #422

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

PatternFly v6 #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,620 changes: 469 additions & 3,151 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 11 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,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.0.3",
"@redhat-cloud-services/frontend-components-notifications": "^4.1.3",
"@redhat-cloud-services/frontend-components-translations": "^3.2.11",
Expand Down Expand Up @@ -131,6 +132,9 @@
"typescript": "^5.7.2"
},
"overrides": {
"@patternfly/react-core": "6.1.0",
"@patternfly/react-icons": "6.1.0",
"@patternfly/react-table": "6.1.0",
"@typescript-eslint/eslint-plugin": "^8.19.1",
"eslint": "^9.17.0",
"react-intl": "^7.1.0",
Expand Down
4 changes: 2 additions & 2 deletions src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/appEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
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';
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/charts/common/chartUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/charts/theme/theme-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-koku-mfe';

Expand Down
12 changes: 6 additions & 6 deletions src/routes/components/dataTable/dataTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
}
24 changes: 12 additions & 12 deletions src/routes/components/dataTable/dataTable.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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',
Expand All @@ -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 };
12 changes: 2 additions & 10 deletions src/routes/components/dataTable/dataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down
12 changes: 2 additions & 10 deletions src/routes/components/dataTable/selectableTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down
5 changes: 2 additions & 3 deletions src/routes/components/dataToolbar/basicToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/routes/components/dataToolbar/dataToolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
14 changes: 0 additions & 14 deletions src/routes/components/dataToolbar/dataToolbar.styles.ts
View file
Open in desktop

This file was deleted.

12 changes: 6 additions & 6 deletions src/routes/components/dataToolbar/utils/category.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ToolbarChipGroup } from '@patternfly/react-core';
import type { ToolbarLabelGroup } from '@patternfly/react-core';
import { SearchInput, ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import type { ResourcePathsType, ResourceType } from 'api/resources/resource';
Expand Down Expand Up @@ -49,8 +49,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}
>
Expand Down Expand Up @@ -79,7 +79,7 @@ export const getCategoryInput = ({
);
};

export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => {
export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => {
return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }];
};

Expand Down Expand Up @@ -170,7 +170,7 @@ export const getCategorySelect = ({
isDisabled,
onCategorySelect,
}: {
categoryOptions?: ToolbarChipGroup[]; // Options for category menu
categoryOptions?: ToolbarLabelGroup[]; // Options for category menu
currentCategory?: string;
filters?: Filters;
isDisabled?: boolean;
Expand All @@ -197,7 +197,7 @@ export const getCategorySelect = ({
);
};

export const getCategorySelectOptions = (categoryOptions: ToolbarChipGroup[]): SelectWrapperOption[] => {
export const getCategorySelectOptions = (categoryOptions: ToolbarLabelGroup[]): SelectWrapperOption[] => {
const options: SelectWrapperOption[] = [];

categoryOptions.map(option => {
Expand Down
8 changes: 4 additions & 4 deletions src/routes/components/dataToolbar/utils/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = {
Expand Down Expand Up @@ -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';
}
Expand Down
4 changes: 2 additions & 2 deletions src/routes/components/dataToolbar/utils/custom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/page/loading/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Loading = ({ body, heading, title }: LoadingProps) => {
<PageHeaderTitle title={title} />
</PageHeader>
)}
<PageSection>
<PageSection hasBodyWrapper={false}>
<LoadingState body={body} heading={heading} />
</PageSection>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/page/noOptimizations/noOptimizations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const NoOptimizations = ({ title }: NoOptimizationsProps) => {
<PageHeaderTitle title={title} />
</PageHeader>
)}
<PageSection>
<PageSection hasBodyWrapper={false}>
<NoOptimizationsState />
</PageSection>
</>
Expand Down
21 changes: 8 additions & 13 deletions src/routes/components/page/noOptimizations/noOptimizationsState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import {
EmptyState,
EmptyStateBody,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant,
} from '@patternfly/react-core';
import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
import messages from 'locales/messages';
import React from 'react';
import type { WrappedComponentProps } from 'react-intl';
Expand All @@ -22,12 +16,13 @@ class NoOptimizationsStateBase extends React.Component<NoOptimizationsStateProps
const { intl } = this.props;

return (
<EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
<EmptyStateHeader
titleText={intl.formatMessage(messages.noOptimizationsTitle)}
icon={<EmptyStateIcon icon={OptimizationIcon as any} />}
headingLevel="h1"
/>
<EmptyState
headingLevel="h1"
icon={OptimizationIcon as any}
titleText={intl.formatMessage(messages.noOptimizationsTitle)}
variant={EmptyStateVariant.lg}
className="pf-m-redhat-font"
>
<EmptyStateBody>{intl.formatMessage(messages.noOptimizationsDesc)}</EmptyStateBody>
</EmptyState>
);
Expand Down
Loading
Loading