{t('The operation phase.')}
}
@@ -134,8 +139,8 @@ const ApplicationSyncStatusTab: React.FC{t('The message from the operation.')}
}
@@ -152,8 +157,8 @@ const ApplicationSyncStatusTab: React.FC{t('Who initiated the operation.')}
}
@@ -174,9 +179,9 @@ const ApplicationSyncStatusTab: React.FC{t('When the operation was started.')}
}
@@ -191,8 +196,8 @@ const ApplicationSyncStatusTab: React.FC{t('How long the operation took to complete.')}
}
@@ -217,8 +222,8 @@ const ApplicationSyncStatusTab: React.FC{t('When the operation was finished.')}
}
@@ -344,7 +349,7 @@ export const useResourceColumnsDV = (getSortParams: (columnIndex: number) => ThP
cell: '',
props: {
'aria-label': 'actions',
- className: 'dropdown-kebab-pf pf-v6-c-table__action',
+ className: 'dropdown-kebab-pf pf-v5-c-table__action',
},
},
];
@@ -410,7 +415,7 @@ const useResourceRowsDV = (
),
props: {
style: { paddingTop: 8, paddingRight: 0, paddingLeft: 0, width: 10 },
- className: 'dropdown-kebab-pf pf-v6-c-table__action',
+ className: 'dropdown-kebab-pf pf-v5-c-table__action',
},
},
]);
diff --git a/src/gitops/components/application/Conditions/ConditionsPopover.tsx b/src/gitops/components/application/Conditions/ConditionsPopover.tsx
index a9dc423b0..582c02705 100644
--- a/src/gitops/components/application/Conditions/ConditionsPopover.tsx
+++ b/src/gitops/components/application/Conditions/ConditionsPopover.tsx
@@ -24,7 +24,7 @@ export const ConditionsPopover: React.FCApplication Conditions
}
bodyContent={
-
+ = ({ conditions
>
{conditions.map((condition) => (
- {condition.message}
+ {condition.message}
))}
@@ -49,23 +49,23 @@ export const ConditionsPopover: React.FC = ({ conditions
{summary.error > 0 && (
A list of currently observed application conditions
@@ -38,7 +38,7 @@ export const ConditionsPopover: React.FC 0 ? 'pf-v6-u-pl-sm' : ''}>
+
0 ? 'pf-v5-u-pl-sm' : ''}>
)}
{summary.info > 0 && (
- 0 || summary.warning > 0 ? 'pf-v6u-pl-sm' : ''}>
+ = ({ history, obj }) => {
-
+
+
{t('There is no history associated with the application.')}
diff --git a/src/gitops/components/application/application-details-title.scss b/src/gitops/components/application/application-details-title.scss
index 39bd1bb7f..85520246c 100644
--- a/src/gitops/components/application/application-details-title.scss
+++ b/src/gitops/components/application/application-details-title.scss
@@ -1,21 +1,21 @@
// Application Details Title Styles
.co-resource-item__resource-name {
- font-size: var(--pf-v6-global--font-size--2xl);
- font-weight: var(--pf-v6-global--font-weight--bold);
- color: var(--pf-v6-global--Color--100);
+ font-size: var(--pf-v5-global--font-size--2xl);
+ font-weight: var(--pf-v5-global--font-weight--bold);
+ color: var(--pf-v5-global--Color--100);
}
.co-actions {
display: flex;
align-items: center;
- gap: var(--pf-v6-global--spacer--sm);
+ gap: var(--pf-v5-global--spacer--sm);
}
// Breadcrumb styles
-.pf-v6-c-breadcrumb.co-breadcrumb {
- padding: var(--pf-v6-global--spacer--md) var(--pf-v6-global--spacer--lg);
- background-color: var(--pf-v6-global--BackgroundColor--100);
- border-bottom: 1px solid var(--pf-v6-global--BorderColor--100);
+.pf-v5-c-breadcrumb.co-breadcrumb {
+ padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
+ background-color: var(--pf-v5-global--BackgroundColor--100);
+ border-bottom: 1px solid var(--pf-v5-global--BorderColor--100);
}
// Ensure AS icon matches ApplicationSet list page color
@@ -28,46 +28,46 @@
}
// Ensure NS badge is green
-.pf-v6-c-badge {
+.pf-v5-c-badge {
&.pf-m-green {
- background-color: var(--pf-v6-global--success-color--100) !important;
- color: var(--pf-v6-global--Color--100) !important;
+ background-color: var(--pf-v5-global--success-color--100) !important;
+ color: var(--pf-v5-global--Color--100) !important;
}
}
// Labels container styling - ensure it's visible and vertical
.labels-container {
- background-color: var(--pf-v6-global--BackgroundColor--200) !important;
- border: 1px solid var(--pf-v6-global--BorderColor--200) !important;
- border-radius: var(--pf-v6-global--BorderRadius--sm) !important;
- padding: var(--pf-v6-global--spacer--md) !important;
+ background-color: var(--pf-v5-global--BackgroundColor--200) !important;
+ border: 1px solid var(--pf-v5-global--BorderColor--200) !important;
+ border-radius: var(--pf-v5-global--BorderRadius--sm) !important;
+ padding: var(--pf-v5-global--spacer--md) !important;
min-height: 60px !important;
display: flex !important;
flex-direction: column !important;
- gap: var(--pf-v6-global--spacer--sm) !important;
- margin-top: var(--pf-v6-global--spacer--sm) !important;
+ gap: var(--pf-v5-global--spacer--sm) !important;
+ margin-top: var(--pf-v5-global--spacer--sm) !important;
}
// Labels styling - force vertical layout
-.labels-container .pf-v6-c-label-group {
+.labels-container .pf-v5-c-label-group {
display: flex !important;
flex-direction: column !important;
- gap: var(--pf-v6-global--spacer--sm) !important;
+ gap: var(--pf-v5-global--spacer--sm) !important;
margin: 0 !important;
width: 100% !important;
}
-.labels-container .pf-v6-c-label-group .pf-v6-c-label {
+.labels-container .pf-v5-c-label-group .pf-v5-c-label {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
- font-size: var(--pf-v6-global--font-size--sm) !important;
- font-weight: var(--pf-v6-global--font-weight--normal) !important;
+ font-size: var(--pf-v5-global--font-size--sm) !important;
+ font-weight: var(--pf-v5-global--font-weight--normal) !important;
line-height: 1.2 !important;
- padding: var(--pf-v6-global--spacer--xs) var(--pf-v6-global--spacer--sm) !important;
- border-radius: var(--pf-v6-global--BorderRadius--sm) !important;
- background-color: var(--pf-v6-global--BackgroundColor--300) !important;
- color: var(--pf-v6-global--Color--100) !important;
- border: 1px solid var(--pf-v6-global--BorderColor--300) !important;
+ padding: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm) !important;
+ border-radius: var(--pf-v5-global--BorderRadius--sm) !important;
+ background-color: var(--pf-v5-global--BackgroundColor--300) !important;
+ color: var(--pf-v5-global--Color--100) !important;
+ border: 1px solid var(--pf-v5-global--BorderColor--300) !important;
width: fit-content !important;
}
diff --git a/src/gitops/components/application/graph/ApplicationGraphView.scss b/src/gitops/components/application/graph/ApplicationGraphView.scss
index 3714cb848..a26472934 100644
--- a/src/gitops/components/application/graph/ApplicationGraphView.scss
+++ b/src/gitops/components/application/graph/ApplicationGraphView.scss
@@ -6,7 +6,7 @@
// Background grid
.pf-topology-content
{
- background-image: radial-gradient( var(--pf-t--global--text--color--regular) 0.5px, transparent 0.5px) !important;
+ background-image: radial-gradient( var(--pf-v5-global--Color--100) 0.5px, transparent 0.5px) !important;
background-size: 24px 24px !important;
}
@@ -30,20 +30,20 @@
}
}
// .pf-topology__edge__background {
- // stroke: var(--pf-t--global--dark--background--color--100);
+ // stroke: var(--pf-v5-global--BackgroundColor--dark-100);
// }
.pf-topology__node.pf-m-selected {
.pf-topology__node__label__badge > rect {
stroke-width: 1;
}
- .pf-topology__node__action-icon__icon .pf-v6-svg{
+ .pf-topology__node__action-icon__icon .pf-v5-svg{
stroke: var(--pf-topology__node--Color);
fill: var(--pf-topology__node__label__background--Stroke);
}
.gitops-node-layout {
- .pf-topology__node__action-icon__icon .pf-v6-svg{
- stroke: var(--pf-t--global--border--color--default);
+ .pf-topology__node__action-icon__icon .pf-v5-svg{
+ stroke: var(--pf-v5-global--BorderColor--100);
fill: var(--pf-topology__node__action-icon__icon--Color);
}
}
@@ -81,10 +81,10 @@
.step-edge {
&.step-edge-healthy {
- stroke: var(--pf-t--global--icon--color--status--success--default);
+ stroke: var(--pf-v5-global--success-color--100);
}
&.step-edge-warning {
- stroke: var(--pf-t--global--icon--color--status--warning--default);
+ stroke: var(--pf-v5-global--warning-color--100);
}
&.step-edge-progressing {
stroke: lightblue;
@@ -93,12 +93,12 @@
.step-edge-terminal.pf-topology-connector-arrow {
&.step-edge-terminal-healthy {
- stroke: var(--pf-t--global--icon--color--status--success--default);
- fill: var(--pf-t--global--icon--color--status--success--default);
+ stroke: var(--pf-v5-global--success-color--100);
+ fill: var(--pf-v5-global--success-color--100);
}
&.step-edge-terminal-warning {
- stroke: var(--pf-t--global--icon--color--status--warning--default);
- fill: var(--pf-t--global--icon--color--status--warning--default);
+ stroke: var(--pf-v5-global--warning-color--100);
+ fill: var(--pf-v5-global--warning-color--100);
}
&.step-edge-terminal-progressing {
stroke: lightblue;
@@ -111,32 +111,32 @@
.pf-topology-control-bar {
position: absolute;
top: 0;
- left: var(--pf-t--global--spacer--lg);
+ left: var(--pf-v5-global--spacer--lg);
height: 40px !important;
border-radius: 4px;
padding: 8px;
- .pf-v6-c-toolbar__item:has(button#reset-view) {
+ .pf-v5-c-toolbar__item:has(button#reset-view) {
padding-right: 6px;
}
- .pf-v6-c-toolbar__item:has(button#toggle-node-layout) {
+ .pf-v5-c-toolbar__item:has(button#toggle-node-layout) {
padding-left: 8px;
- border-left: 2px solid var(--pf-t--global--border--color--default);
+ border-left: 2px solid var(--pf-v5-global--BorderColor--100);
}
}
// Not the same as in the Topology view, but seems like a border is better for more visibility,
// especially when in dark mode. Remove this if we want to be consistent with the Topology view.
- .pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary {
+ .pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary {
border: 1px solid darkgray;
}
// Step group customization - thicker border
.gitops-step-group {
.pf-topology__group__background {
- stroke: var(--pf-t--global--border--color--default);
- fill: var(--pf-t--global--background--color--floating--default);
+ stroke: var(--pf-v5-global--BorderColor--100);
+ fill: var(--pf-v5-global--BackgroundColor--100);
stroke-width: 1;
transform: translateY(10px);
}
@@ -146,7 +146,7 @@
}
&.pf-m-hover .pf-topology__group__background {
- stroke: var(--pf-t--global--border--color--default);
+ stroke: var(--pf-v5-global--BorderColor--100);
}
}
@@ -159,42 +159,42 @@
}
.gitops-step-group-collapsed-text {
- fill: var(--pf-t--global--text--color--regular);
+ fill: var(--pf-v5-global--Color--100);
}
.gitops-step-group-label {
text {
- fill: var(--pf-t--global--text--color--regular);
+ fill: var(--pf-v5-global--Color--100);
}
.pf-topology__node__label__background {
- fill: var(--pf-t--global--background--color--floating--default);
- stroke: var(--pf-t--global--border--color--default);
+ fill: var(--pf-v5-global--BackgroundColor--100);
+ stroke: var(--pf-v5-global--BorderColor--100);
stroke-width: 1;
}
.pf-topology__node__action-icon:hover svg{
- fill: var(--pf-t--global--border--color--default) !important;
+ fill: var(--pf-v5-global--BorderColor--100) !important;
}
.pf-topology__node__action-icon__icon svg {
- fill: var(--pf-t--global--text--color--regular);
+ fill: var(--pf-v5-global--Color--100);
}
&.pf-m-selected > .pf-topology__node__label__background {
- fill: var(--pf-t--global--background--color--floating--default);
- stroke: var(--pf-t--global--border--color--default);
+ fill: var(--pf-v5-global--BackgroundColor--100);
+ stroke: var(--pf-v5-global--BorderColor--100);
stroke-width: 2;
}
}
.pf-topology__node.pf-m-selected.pf-m-warning {
.pf-topology__node__label >text {
- fill: var(--pf-t--global--background--color--floating--default);
+ fill: var(--pf-v5-global--BackgroundColor--100);
}
}
.topology-example-sidebar.pf-topology-side-bar {
- background-color: var(--pf-t--global--background--color--floating--default);
+ background-color: var(--pf-v5-global--BackgroundColor--100);
}
}
diff --git a/src/gitops/components/application/graph/nodes/ApplicationNode.tsx b/src/gitops/components/application/graph/nodes/ApplicationNode.tsx
index ce152fb6e..2e8a32575 100644
--- a/src/gitops/components/application/graph/nodes/ApplicationNode.tsx
+++ b/src/gitops/components/application/graph/nodes/ApplicationNode.tsx
@@ -144,7 +144,7 @@ const ApplicationShape: React.FunctionComponent = ({ obj, match }) => {
-
+
= ({ generator }) => {
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
padding: '8px',
- backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',
- border: '1px solid var(--pf-t--global--border--color--default)',
+ backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
+ border: '1px solid var(--pf-v5-global--BorderColor--100)',
borderRadius: '4px',
}}
>
diff --git a/src/gitops/components/appset/generators/GenericGenerator.tsx b/src/gitops/components/appset/generators/GenericGenerator.tsx
index ae6e9b4c1..b8ca5739b 100644
--- a/src/gitops/components/appset/generators/GenericGenerator.tsx
+++ b/src/gitops/components/appset/generators/GenericGenerator.tsx
@@ -29,8 +29,8 @@ const GenericGenerator: React.FC = ({ gentype, generator
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
padding: '8px',
- backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',
- border: '1px solid var(--pf-t--global--border--color--default)',
+ backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
+ border: '1px solid var(--pf-v5-global--BorderColor--100)',
borderRadius: '4px',
}}
>
diff --git a/src/gitops/components/appset/graph/ApplicationSetGraphView.tsx b/src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
index cc4099281..0e504469f 100644
--- a/src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
+++ b/src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
@@ -128,7 +128,7 @@ const DataEdge: React.FC = observer(({ element, ...rest }) => {
edgeStyle={EdgeStyle.dashedMd}
endTerminalType={EdgeTerminalType.directional}
animationDuration={0.8}
- canDrop={false}
+ // canDrop={false}
tagStatus={
// eslint-disable-next-line no-nested-ternary
overallState === 'healthy'
@@ -356,14 +356,6 @@ type TopologySideBarParams = {
applicationSet: ApplicationSetKind;
};
-const PAGES = [
- {
- href: '',
- name: t('Match Expressions'),
- component: AppSetMatchExpressionsTab,
- },
-];
-
const getTopologySideBar = ({
show,
onClose,
@@ -381,13 +373,19 @@ const getTopologySideBar = ({
const renderSidebarContent = () => {
if (selectedNode === undefined) return ;
if (isStepGroup) {
+ const selectedStep = selectedNode?.getData().step;
+ const pages = [
+ {
+ href: '',
+ name: t('Match Expressions'),
+ component: (props) => (
+
-
-
-
+
+
+
{t('Name')}}
bodyContent={ = observer(
DummyShape}
- labelClassName={css('gitops-step-group-label', selected && 'pf-m-selected')}
+ // labelClassName={css('gitops-step-group-label', selected && 'pf-m-selected')}
onCollapseChange={handleCollapseChange}
onContextMenu={handleContextMenu}
contextMenuOpen={contextMenuOpen}
diff --git a/src/gitops/components/imageupdater/ImageUpdaterDetailsTab.tsx b/src/gitops/components/imageupdater/ImageUpdaterDetailsTab.tsx
index 5a4fe406f..5fb0df2e1 100644
--- a/src/gitops/components/imageupdater/ImageUpdaterDetailsTab.tsx
+++ b/src/gitops/components/imageupdater/ImageUpdaterDetailsTab.tsx
@@ -56,7 +56,7 @@ const ImageUpdaterDetailsTab: React.FC = ({ obj })
-
+
= ({
-
+
+ {getEmptyStateBody()}
@@ -155,8 +161,8 @@ const ImageUpdaterList: React.FC = ({
= ({
{t('Create ImageUpdater')}
diff --git a/src/gitops/components/imageupdater/ImageUpdaterNavPage.tsx b/src/gitops/components/imageupdater/ImageUpdaterNavPage.tsx
index ab2a6f395..caa89318d 100644
--- a/src/gitops/components/imageupdater/ImageUpdaterNavPage.tsx
+++ b/src/gitops/components/imageupdater/ImageUpdaterNavPage.tsx
@@ -70,8 +70,8 @@ const ImageUpdaterNavPage: React.FC = ({ name, namespace,
) : loadError ? (
-
+
+
{t('No image updates have been recorded in the most recent reconciliation cycle.')}
diff --git a/src/gitops/components/imageupdater/imageupdater-list.scss b/src/gitops/components/imageupdater/imageupdater-list.scss
index d380d857f..a7a7ff1b6 100644
--- a/src/gitops/components/imageupdater/imageupdater-list.scss
+++ b/src/gitops/components/imageupdater/imageupdater-list.scss
@@ -1,6 +1,6 @@
// Prevent vertical text wrapping in Name and Namespace columns
-.gitops-imageupdater-list .pf-v6-c-table tbody td[data-label='Name'],
-.gitops-imageupdater-list .pf-v6-c-table tbody td[data-label='Namespace'] {
+.gitops-imageupdater-list .pf-v5-c-table tbody td[data-label='Name'],
+.gitops-imageupdater-list .pf-v5-c-table tbody td[data-label='Namespace'] {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
@@ -15,7 +15,7 @@
}
// Description column text truncation
-.gitops-imageupdater-list .pf-v6-c-table tbody td[data-label='Description'] {
+.gitops-imageupdater-list .pf-v5-c-table tbody td[data-label='Description'] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/src/gitops/components/project/DestinationsList.tsx b/src/gitops/components/project/DestinationsList.tsx
index f30713d54..66b9030a9 100644
--- a/src/gitops/components/project/DestinationsList.tsx
+++ b/src/gitops/components/project/DestinationsList.tsx
@@ -1,6 +1,13 @@
import * as React from 'react';
-import { Badge, EmptyState, EmptyStateBody, PageSection } from '@patternfly/react-core';
+import {
+ Badge,
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateHeader,
+ EmptyStateIcon,
+ PageSection,
+} from '@patternfly/react-core';
import { CubesIcon } from '@patternfly/react-icons';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -63,7 +70,12 @@ const DestinationsList: React.FC = ({ destinations }) =>
) : (
-
+
+
{t('This AppProject does not have any destinations configured.')}
diff --git a/src/gitops/components/project/ProjectAllowDenyTab.tsx b/src/gitops/components/project/ProjectAllowDenyTab.tsx
index 5acabf5c1..dc9ecee41 100644
--- a/src/gitops/components/project/ProjectAllowDenyTab.tsx
+++ b/src/gitops/components/project/ProjectAllowDenyTab.tsx
@@ -30,7 +30,7 @@ import ResourceAllowDenyList from './ResourceAllowDenyList';
const renderStringArray = (items: string[] | undefined, t: (key: string) => string) => {
if (items && items.length > 0) {
return (
-
0 || summary.warning > 0 ? 'pf-v5-u-pl-sm' : ''}>
diff --git a/src/gitops/components/application/History/History.scss b/src/gitops/components/application/History/History.scss
index 7aea2958d..90ff3f4e9 100644
--- a/src/gitops/components/application/History/History.scss
+++ b/src/gitops/components/application/History/History.scss
@@ -1,5 +1,5 @@
.gitops-plugin__history-id-column {
- --pf-v6-c-table--cell--Width: 140px;
- --pf-v6-c-table--cell--MinWidth: 140px;
- --pf-v6-c-table--cell--MaxWidth: 300px
+ --pf-v5-c-table--cell--Width: 140px;
+ --pf-v5-c-table--cell--MinWidth: 140px;
+ --pf-v5-c-table--cell--MaxWidth: 300px
}
\ No newline at end of file
diff --git a/src/gitops/components/application/History/History.tsx b/src/gitops/components/application/History/History.tsx
index bb7619043..d52a32fa5 100644
--- a/src/gitops/components/application/History/History.tsx
+++ b/src/gitops/components/application/History/History.tsx
@@ -9,7 +9,12 @@ import { getApplicationArgoUrl } from '@gitops/utils/gitops';
import { repoUrl } from '@gitops/utils/urls';
import { ApplicationHistory, ApplicationKind } from '@gitops-models/ApplicationModel';
import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateHeader,
+ EmptyStateIcon,
+} from '@patternfly/react-core';
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
import { CubesIcon } from '@patternfly/react-icons';
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
@@ -46,7 +51,12 @@ const HistoryList: React.FC
-
);
}
@@ -403,9 +401,9 @@ const getTopologySideBar = ({
>
{t('Name must be unique within a namespace.')}
}
diff --git a/src/gitops/components/appset/graph/nodes/ApplicationSetNode.tsx b/src/gitops/components/appset/graph/nodes/ApplicationSetNode.tsx
index 00e6b88cd..cdf193dd1 100644
--- a/src/gitops/components/appset/graph/nodes/ApplicationSetNode.tsx
+++ b/src/gitops/components/appset/graph/nodes/ApplicationSetNode.tsx
@@ -98,7 +98,7 @@ const ApplicationSetShape: React.FunctionComponent-
+
-
{items.map((el, idx) => {
const denyRule = isDenyRule(el);
const displayValue = getDisplayValue(el);
@@ -38,14 +38,14 @@ const renderStringArray = (items: string[] | undefined, t: (key: string) => stri
{displayValue}
{displayValue}
@@ -57,7 +57,7 @@ const renderStringArray = (items: string[] | undefined, t: (key: string) => stri
{'-'}
;
+ return {'-'}
;
}
};
@@ -106,10 +106,10 @@ const ProjectAllowDenyTab: React.FC
{role.groups.map((group, idx) => (
-
+
{group}
))}
@@ -287,7 +294,7 @@ const useRolesRowsDV = (roles: Role[], t: (key: string) => string): DataViewTr[]
const formattedDescription = formatPolicyDescription(policy, t);
return (
-
+
{policy}
diff --git a/src/gitops/components/project/ProjectSyncWindowsTab.tsx b/src/gitops/components/project/ProjectSyncWindowsTab.tsx
index 997a9ffa6..c029bcb0d 100644
--- a/src/gitops/components/project/ProjectSyncWindowsTab.tsx
+++ b/src/gitops/components/project/ProjectSyncWindowsTab.tsx
@@ -2,7 +2,15 @@ import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { useK8sModel } from '@openshift-console/dynamic-plugin-sdk';
-import { Badge, EmptyState, EmptyStateBody, PageSection, Title } from '@patternfly/react-core';
+import {
+ Badge,
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateHeader,
+ EmptyStateIcon,
+ PageSection,
+ Title,
+} from '@patternfly/react-core';
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
import { CubesIcon } from '@patternfly/react-icons';
import { ThProps } from '@patternfly/react-table';
@@ -66,11 +74,12 @@ const ProjectSyncWindowsTab: React.FC = ({ obj }) =>
-
+
+
{t('This AppProject does not have any sync windows configured.')}
@@ -327,13 +336,13 @@ const useSyncWindowsRowsDV = (
window.applications && window.applications.length > 0 ? (
= ({ list }) =
) : (
-
+
+ {t('This list does not have any resources configured.')}
)}
diff --git a/src/gitops/components/project/project-list.scss b/src/gitops/components/project/project-list.scss
index 776c58c0d..1e0bb4973 100644
--- a/src/gitops/components/project/project-list.scss
+++ b/src/gitops/components/project/project-list.scss
@@ -1,19 +1,19 @@
// PF6 DataViewTh applies modifier="truncate" on headers. With table-layout: fixed, truncation
// must happen on the sort-button label text so TableText can detect overflow and show tooltips.
@mixin gitops-project-list-sortable-header-tooltip {
- .pf-v6-c-table__button {
+ .pf-v5-c-table__button {
width: 100%;
max-width: 100%;
min-width: 0;
}
- .pf-v6-c-table__button-content {
+ .pf-v5-c-table__button-content {
width: 100%;
max-width: 100%;
min-width: 0;
}
- .pf-v6-c-table__text {
+ .pf-v5-c-table__text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
@@ -24,17 +24,18 @@
}
@mixin gitops-project-list-full-header {
- --pf-v6-c-table--cell--MaxWidth: none;
- --pf-v6-c-table--m-truncate--cell--MaxWidth: none;
- --pf-v6-c-table--cell--Overflow: visible;
- --pf-v6-c-table--cell--TextOverflow: clip;
- --pf-v6-c-table--cell--WhiteSpace: nowrap;
+ --pf-v5-c-table--cell--MaxWidth: none;
+ --pf-v5-c-table--m-truncate--cell--MaxWidth: none;
+ --pf-v5-c-table--cell--Overflow: visible;
+ --pf-v5-c-table--cell--TextOverflow: clip;
+ --pf-v5-c-table--cell--WhiteSpace: nowrap;
+
max-width: none !important;
overflow: visible !important;
- .pf-v6-c-table__button,
- .pf-v6-c-table__button-content,
- .pf-v6-c-table__text {
+ .pf-v5-c-table__button,
+ .pf-v5-c-table__button-content,
+ .pf-v5-c-table__text {
overflow: visible;
text-overflow: clip;
max-width: none;
@@ -43,7 +44,7 @@
}
.gitops-project-list {
- .pf-v6-c-table {
+ .pf-v5-c-table {
table-layout: fixed;
width: 100%;
}
diff --git a/src/gitops/components/rollout/RolloutDetailsTab.tsx b/src/gitops/components/rollout/RolloutDetailsTab.tsx
index 3888d578b..7a53aa8c0 100644
--- a/src/gitops/components/rollout/RolloutDetailsTab.tsx
+++ b/src/gitops/components/rollout/RolloutDetailsTab.tsx
@@ -92,7 +92,7 @@ const RolloutDetailsTab: React.FC = ({ obj }) => {
-
+
= ({
-
+
+
{namespace
? t('There are no Argo Rollouts in this project.')
@@ -154,8 +165,8 @@ const RolloutList: React.FC = ({
= ({ obj: rollout
const error = (
= ({ rollout, namespace, selector }
-
+
+ {t('There are no pods associated with the rollout.')}
@@ -472,11 +482,7 @@ export const PodList: React.FC = ({ rollout, namespace, selector }
return (
{window.applications.map((app, idx) => (
-
+
{app}
))}
) : (
- {t('All')}
+ {t('All')}
),
id: `applications-${index}`,
dataLabel: t('Applications'),
@@ -343,13 +352,13 @@ const useSyncWindowsRowsDV = (
window.clusters && window.clusters.length > 0 ? (
{window.clusters.map((cluster, idx) => (
-
+
{cluster}
))}
) : (
- {t('All')}
+ {t('All')}
),
id: `clusters-${index}`,
dataLabel: t('Clusters'),
@@ -359,13 +368,13 @@ const useSyncWindowsRowsDV = (
window.namespaces && window.namespaces.length > 0 ? (
{window.namespaces.map((ns, idx) => (
-
+
{ns}
))}
) : (
- {t('All')}
+ {t('All')}
),
id: `namespaces-${index}`,
dataLabel: t('Namespaces'),
diff --git a/src/gitops/components/project/ResourceAllowDenyList.tsx b/src/gitops/components/project/ResourceAllowDenyList.tsx
index c1a40748c..2ee6cf7dc 100644
--- a/src/gitops/components/project/ResourceAllowDenyList.tsx
+++ b/src/gitops/components/project/ResourceAllowDenyList.tsx
@@ -1,6 +1,11 @@
import * as React from 'react';
-import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateHeader,
+ EmptyStateIcon,
+} from '@patternfly/react-core';
import { CubesIcon } from '@patternfly/react-icons';
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -44,7 +49,12 @@ const ResourceAllowDenyList: React.FC
-
= ({ alerts,
const { t } = useGitOpsTranslation();
return (
-
+
{alerts.map(({ key, title, message, details, variant }) => (
onRemove(key)}
actionClose={
onRemove(key)} />
diff --git a/src/gitops/components/rollout/revisions/Revisions.scss b/src/gitops/components/rollout/revisions/Revisions.scss
index 1c06ccdf1..e40d40601 100644
--- a/src/gitops/components/rollout/revisions/Revisions.scss
+++ b/src/gitops/components/rollout/revisions/Revisions.scss
@@ -1,6 +1,6 @@
.gitops-revisions-table {
tbody > tr:first-child {
- --pf-v6-c-table__tr--BorderBlockEndWidth: 1px;
+ --pf-v5-c-table__tr--BorderBlockEndWidth: 1px;
border-top: 1px solid;
}
diff --git a/src/gitops/components/rollout/revisions/Revisions.tsx b/src/gitops/components/rollout/revisions/Revisions.tsx
index ae1577e33..4f3ec2971 100644
--- a/src/gitops/components/rollout/revisions/Revisions.tsx
+++ b/src/gitops/components/rollout/revisions/Revisions.tsx
@@ -177,7 +177,7 @@ const getRowsDV = (
namespace={obj.metadata?.namespace}
inline={true}
>
-
+
{isApplicationRefreshing(obj) &&
= ({
-
+
+
{(() => {
if (!loaded) {
@@ -194,8 +208,8 @@ const ApplicationList: React.FC = ({
= ({
Create Application
@@ -378,7 +391,7 @@ const useApplicationRowsDV = (applicationsList, namespace): DataViewTr[] => {
namespace={app.metadata.namespace}
inline={true}
>
-
+
{isApplicationRefreshing(app) && = ({
-
+
+ {getEmptyStateBody()}
@@ -234,8 +240,8 @@ const ApplicationSetList: React.FC = ({
= ({
{t('Create ApplicationSet')}
diff --git a/src/gitops/components/shared/ArgoCDLink/ArgoCDLink.tsx b/src/gitops/components/shared/ArgoCDLink/ArgoCDLink.tsx
index f232c0118..6350f1f22 100644
--- a/src/gitops/components/shared/ArgoCDLink/ArgoCDLink.tsx
+++ b/src/gitops/components/shared/ArgoCDLink/ArgoCDLink.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
import ExternalLink from '@gitops/utils/components/ExternalLink/ExternalLink';
import { t } from '@gitops/utils/hooks/useGitOpsTranslation';
-import argoImage from '@images/argo.png';
import { Tooltip } from '@patternfly/react-core';
type ArgoCDLinkProps = {
@@ -12,14 +11,7 @@ type ArgoCDLinkProps = {
export const ArgoCDLink: React.FC = ({ href }) => {
return (
- 
+
Argo CD
diff --git a/src/gitops/components/shared/BaseDetailsSummary/BaseDetailsSummary.tsx b/src/gitops/components/shared/BaseDetailsSummary/BaseDetailsSummary.tsx
index fad3acb36..30c6815b0 100644
--- a/src/gitops/components/shared/BaseDetailsSummary/BaseDetailsSummary.tsx
+++ b/src/gitops/components/shared/BaseDetailsSummary/BaseDetailsSummary.tsx
@@ -43,8 +43,8 @@ export const DetailsDescriptionGroup = (
props: React.PropsWithChildren,
) => {
return (
-
-
+
+
{props.title}} bodyContent={{props.title}
@@ -114,9 +114,9 @@ export const BaseDetailsSummary: React.FC = ({
return (
<>
-
-
-
+
+
+
{t('Name')}}
bodyContent={ = ({
>
+
-
+
{t('Labels')}}
bodyContent={
@@ -182,8 +182,8 @@ export const BaseDetailsSummary: React.FC = ({
-
-
+
+
{t('Annotations')}}
bodyContent={
diff --git a/src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx b/src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx
index e6fab9dde..a145b5e16 100644
--- a/src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx
+++ b/src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx
@@ -41,9 +41,7 @@ const DetailsPageTitle: React.FC = ({ breadcrumb, childre
{breadcrumb}
-
- {children}
-
+ {children}
);
@@ -73,7 +71,7 @@ const DetailsPageHeader: React.FC = ({
+
.pf-v6-c-action-list__group {
+ > .pf-v5-c-action-list__group {
// remove extra spacing when a component is rendered but has no children
> div:empty {
display: none;
@@ -29,5 +28,5 @@ $co-button-height: calc(
}
}
.details-page-title {
- padding-block-start: var(--pf-t--global--spacer--sm);
+ padding-block-start: var(--pf-v5-global--spacer--sm);
}
\ No newline at end of file
diff --git a/src/gitops/components/shared/FavoriteButton/FavoriteButton.tsx b/src/gitops/components/shared/FavoriteButton/FavoriteButton.tsx
index ae92b45e4..95fa694fb 100644
--- a/src/gitops/components/shared/FavoriteButton/FavoriteButton.tsx
+++ b/src/gitops/components/shared/FavoriteButton/FavoriteButton.tsx
@@ -13,8 +13,8 @@ import {
TextInput,
Tooltip,
} from '@patternfly/react-core';
-import { ModalVariant } from '@patternfly/react-core/deprecated';
-import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
+import { ModalVariant } from '@patternfly/react-core';
+import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core';
import { OutlinedStarIcon, StarIcon } from '@patternfly/react-icons';
import { useUserSettingsCompatibility } from './useUserSettingsCompatibility';
diff --git a/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.scss b/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.scss
index db6433a85..df2944744 100644
--- a/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.scss
+++ b/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.scss
@@ -3,17 +3,17 @@
border: none !important;
padding: 0 !important;
min-width: auto !important;
- color: var(--pf-t--global--text--color--regular) !important;
+ color: var(--pf-v5-global--Color--100) !important;
&:hover,
&:focus,
&:active {
background-color: transparent !important;
border: none !important;
- color: var(--pf-t--global--text--color--regular) !important;
+ color: var(--pf-v5-global--Color--100) !important;
}
- .pf-v6-c-button__icon {
+ .pf-v5-c-button__icon {
margin: 0 !important;
}
diff --git a/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.tsx b/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.tsx
index 15d61da88..2826546a7 100644
--- a/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.tsx
+++ b/src/gitops/components/shared/FieldLevelHelp/FieldLevelHelp.tsx
@@ -42,7 +42,7 @@ export const FieldLevelHelp: React.FC = ({
}}
>
= ({
data-test-selector={`details-item-label__${label}`}
className={labelClassName}
>
-
+
{popoverContent || path ? (
= ({
};
const Toggle = isKebabToggle
- ? KebabToggle({ isExpanded: isOpen, onClick: onToggle })
+ ? KebabToggle({ onClick: onToggle, isExpanded: isOpen })
: DropdownToggle({
children: t('Actions'),
isExpanded: isOpen,
diff --git a/src/gitops/utils/components/ActionDropDownItem/action-dropdown-item.scss b/src/gitops/utils/components/ActionDropDownItem/action-dropdown-item.scss
index 800ceb83a..02588e4e6 100644
--- a/src/gitops/utils/components/ActionDropDownItem/action-dropdown-item.scss
+++ b/src/gitops/utils/components/ActionDropDownItem/action-dropdown-item.scss
@@ -1,6 +1,6 @@
.ActionDropdownItem {
&__disabled {
cursor: unset;
- color: var(--pf-t--global--text--color--disabled);
+ color: var(--pf-v5-global--disabled-color--100);
}
}
diff --git a/src/gitops/utils/components/Conditions/Conditions.tsx b/src/gitops/utils/components/Conditions/Conditions.tsx
index edfadbfd3..1dbc29bab 100644
--- a/src/gitops/utils/components/Conditions/Conditions.tsx
+++ b/src/gitops/utils/components/Conditions/Conditions.tsx
@@ -67,7 +67,7 @@ export const Conditions: React.FC = ({ conditions }) => {
) : (
{props.help}
}>
{t('Name must be unique within a namespace.')}
}
@@ -137,10 +137,10 @@ export const BaseDetailsSummary: React.FC
- = ({ resource }) =>
return owners.length ? (
<>{owners}
) : (
- {t('plugin__gitops-public~No owner')}
+ {t('plugin__gitops-public~No owner')}
);
};
@@ -74,7 +74,7 @@ const OwnerReferenceLink: React.FC = ({ owner, model, n
content={
-
-
diff --git a/src/images/argo.png b/src/images/argo.png
deleted file mode 100644
index b9cb18e63..000000000
Binary files a/src/images/argo.png and /dev/null differ
diff --git a/src/images/argo.svg b/src/images/argo.svg
deleted file mode 100644
index 5de0423e0..000000000
--- a/src/images/argo.svg
+++ /dev/null
@@ -1,140 +0,0 @@
-
-
-
diff --git a/src/index.d.ts b/src/index.d.ts
index 01afb7895..432433191 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -3,6 +3,11 @@ declare module '*.png' {
export = value;
}
+declare module '*.scss' {
+ const content: Record;
+ export default content;
+}
+
declare module '*.svg' {
import * as React from 'react';
const ReactComponent: React.FunctionComponent & { title?: string }>;
diff --git a/src/plugin/import/badges/Badge.scss b/src/plugin/import/badges/Badge.scss
index b53c09ba9..93f1d8cbe 100644
--- a/src/plugin/import/badges/Badge.scss
+++ b/src/plugin/import/badges/Badge.scss
@@ -1,7 +1,7 @@
.gitops-plugin__preview-badge {
- &.pf-v6-c-label {
- --pf-v6-c-label--BackgroundColor: #d93f00;
- --pf-v6-c-label--Color: var(--pf-t--color--white);
+ &.pf-v5-c-label {
+ --pf-v5-c-label--BackgroundColor: #d93f00;
+ --pf-v5-c-label--Color: var(--pf-v5-global--palette--white);
margin-top: 3px;
padding-bottom: 7px;
}
diff --git a/src/plugin/status/icons.tsx b/src/plugin/status/icons.tsx
index b8fe74a29..a8e21ea71 100644
--- a/src/plugin/status/icons.tsx
+++ b/src/plugin/status/icons.tsx
@@ -8,11 +8,11 @@ import {
SyncAltIcon,
UnknownIcon,
} from '@patternfly/react-icons';
-import disabledColor from '@patternfly/react-tokens/dist/esm/t_global_color_disabled_100';
-import blueInfoColor from '@patternfly/react-tokens/dist/esm/t_global_color_nonstatus_blue_300';
-import dangerColor from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
-import warningColor from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';
-import blueDefaultColor from '@patternfly/react-tokens/dist/esm/t_global_icon_color_nonstatus_on_blue_default';
+import dangerColor from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import disabledColor from '@patternfly/react-tokens/dist/esm/global_disabled_color_100';
+import blueInfoColor from '@patternfly/react-tokens/dist/esm/global_palette_blue_300';
+import blueDefaultColor from '@patternfly/react-tokens/dist/esm/global_primary_color_100';
+import warningColor from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
export {
BlueInfoCircleIcon,
diff --git a/start-console.sh b/start-console.sh
index fd7b129b2..d8973524f 100755
--- a/start-console.sh
+++ b/start-console.sh
@@ -4,7 +4,7 @@ set -euo pipefail
npm_package_consolePlugin_name="gitops-plugin"
-CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:latest"}
+CONSOLE_IMAGE=${CONSOLE_IMAGE:="quay.io/openshift/origin-console:4.18"}
CONSOLE_PORT=${CONSOLE_PORT:=9000}
echo "Starting local OpenShift console..."
+
diff --git a/src/gitops/utils/components/Icons/Icons.tsx b/src/gitops/utils/components/Icons/Icons.tsx
index 9117a67da..a81f78cce 100644
--- a/src/gitops/utils/components/Icons/Icons.tsx
+++ b/src/gitops/utils/components/Icons/Icons.tsx
@@ -26,13 +26,13 @@ import {
// import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
// import { global_success_color_100 as successColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-// PatternFly 6 design tokens
-export const dangerColor = 'var(--pf-t--global--icon--color--status--danger--default)';
-export const blueDefaultColor = 'var(--pf-t--global--icon--color--brand--default)';
-export const disabledColor = 'var(--pf-t--global--icon--color--disabled)';
-export const blueInfoColor = 'var(--pf-t--global--icon--color--status--info--default)';
-export const warningColor = 'var(--pf-t--global--icon--color--status--warning--default)';
-export const successColor = 'var(--pf-t--global--icon--color--status--success--default)';
+// PatternFly 5 CSS variables
+export const dangerColor = 'var(--pf-v5-global--danger-color--100)';
+export const blueDefaultColor = 'var(--pf-v5-global--primary-color--200)';
+export const disabledColor = 'var(--pf-v5-global--disabled-color--100)';
+export const blueInfoColor = 'var(--pf-v5-global--palette--blue-300)';
+export const warningColor = 'var(--pf-v5-global--warning-color--100)';
+export const successColor = 'var(--pf-v5-global--success-color--100)';
export {
BlueInfoCircleIcon,
diff --git a/src/gitops/utils/components/OwnerReferences/OwnerReferences.test.tsx b/src/gitops/utils/components/OwnerReferences/OwnerReferences.test.tsx
index 26e926158..0b1c481c6 100644
--- a/src/gitops/utils/components/OwnerReferences/OwnerReferences.test.tsx
+++ b/src/gitops/utils/components/OwnerReferences/OwnerReferences.test.tsx
@@ -8,7 +8,7 @@ describe('OwnerReferences', () => {
{t('plugin__gitops-public~No conditions found')}
{t('plugin__gitops-public~View {{kind}}', { kind: model.kind })}
}
position="top"
>
-
+