Skip to content

ROX-31785: Fix clusters page styles #18902

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

Merged
dvail merged 1 commit into from
Feb 6, 2026
Merged

ROX-31785: Fix clusters page styles #18902

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
2 changes: 1 addition & 1 deletion ...s/platform/cypress/integration/clusters/discovered-clusters/DiscoveredClusters.helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function assertSortByColumn(text, direction, search) {

export function sortByColumn(text) {
return interactAndWaitForResponses(() => {
cy.get(`th:contains("${text}")`).click();
cy.get(`th button:contains("${text}")`).click();
}, routeMatcherMapForTable);
}

Expand Down
1 change: 0 additions & 1 deletion ui/apps/platform/src/Components/CodeViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ export default function CodeViewer({
<CodeBlockAction>
<ClipboardCopyButton
id="copy-code-button"
textId="copy-code-button"
aria-label="Copy code to clipboard"
onClick={() => copyToClipboard(code)}
exitDelay={wasCopied ? 1500 : 600}
Expand Down
3 changes: 0 additions & 3 deletions ui/apps/platform/src/Components/PatternFly/ErrorBoundary/ErrorBoundaryCodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@ import useClipboardCopy from 'hooks/useClipboardCopy';
export type ErrorBoundaryCodeBlockProps = {
code: string;
idForButton: string;
idForContent: string;
phraseForCopied: string;
phraseForCopy: string;
};

function ErrorBoundaryCodeBlock({
code,
idForButton,
idForContent,
phraseForCopied,
phraseForCopy,
}: ErrorBoundaryCodeBlockProps): ReactElement {
Expand All @@ -30,7 +28,6 @@ function ErrorBoundaryCodeBlock({
aria-label={phraseForCopy}
id={idForButton}
onClick={() => copyToClipboard(code)}
textId={idForContent}
variant="plain"
>
{wasCopied ? phraseForCopied : phraseForCopy}
Expand Down
3 changes: 0 additions & 3 deletions ui/apps/platform/src/Components/PatternFly/ErrorBoundary/ErrorBoundaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ function ErrorBoundaryPage({ error, errorInfo }: ErrorBoundaryPageProps): ReactE
<ErrorBoundaryCodeBlock
code={error.message}
idForButton="error-boundary-button-error-message"
idForContent="error-boundary-content-error-message"
phraseForCopied="Copied to clipboard: Error message"
phraseForCopy="Copy to clipboard: Error message"
/>
Expand All @@ -82,7 +81,6 @@ function ErrorBoundaryPage({ error, errorInfo }: ErrorBoundaryPageProps): ReactE
<ErrorBoundaryCodeBlock
code={error.stack ?? ''}
idForButton="error-boundary-button-error-stack"
idForContent="error-boundary-content-error-stack"
phraseForCopied="Copied to clipboard: Error stack"
phraseForCopy="Copy to clipboard: Error stack"
/>
Expand All @@ -104,7 +102,6 @@ function ErrorBoundaryPage({ error, errorInfo }: ErrorBoundaryPageProps): ReactE
<ErrorBoundaryCodeBlock
code={errorInfo.componentStack ?? ''}
idForButton="error-boundary-button-component-stack"
idForContent="error-boundary-content-component-stack"
phraseForCopied="Copied to clipboard: Component stack"
phraseForCopy="Copy to clipboard: Component stack"
/>
Expand Down
6 changes: 2 additions & 4 deletions ui/apps/platform/src/Containers/Clusters/ClusterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
BreadcrumbItem,
Bullseye,
Button,
Divider,
Flex,
FlexItem,
PageSection,
Expand Down Expand Up @@ -294,14 +293,13 @@ function ClusterPage({ clusterId }: ClusterPageProps): ReactElement {
return (
<>
<PageTitle title="Cluster" />
<PageSection hasBodyWrapper={false}>
<PageSection type="breadcrumb">
<Breadcrumb>
<BreadcrumbItemLink to={clustersBasePath}>Clusters</BreadcrumbItemLink>
<BreadcrumbItem isActive>{selectedClusterName}</BreadcrumbItem>
</Breadcrumb>
</PageSection>
<Divider component="div" />
<PageSection hasBodyWrapper={false}>
<PageSection>
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
<Flex
direction={{ default: 'row' }}
Expand Down
4 changes: 1 addition & 3 deletions ...form/src/Containers/Clusters/ClusterRegistrationSecrets/ClusterRegistrationSecretForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
ActionGroup,
Alert,
Button,
Divider,
Flex,
Form,
PageSection,
Expand Down Expand Up @@ -90,8 +89,7 @@ function ClusterRegistrationSecretForm(): ReactElement {
return (
<>
<ClusterRegistrationSecretsHeader title="Create cluster registration secret" />
<Divider component="div" />
<PageSection hasBodyWrapper={false}>
<PageSection>
<Flex direction={{ default: 'column' }}>
<Form>
<FormLabelGroup
Expand Down
2 changes: 1 addition & 1 deletion ...form/src/Containers/Clusters/ClusterRegistrationSecrets/ClusterRegistrationSecretPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function ClusterRegistrationSecretPage({
headerActions={headerActions}
title="Cluster registration secret"
/>
<PageSection hasBodyWrapper={false} component="div">
<PageSection component="div">
{isFetching ? (
<Bullseye>
<Spinner />
Expand Down
10 changes: 6 additions & 4 deletions ...m/src/Containers/Clusters/ClusterRegistrationSecrets/ClusterRegistrationSecretsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ function ClusterRegistrationSecretsHeader({
title,
}: ClusterRegistrationSecretsHeaderProps): ReactElement {
return (
<PageSection hasBodyWrapper={false} component="div">
<>
<PageTitle title={title} />
<Flex direction={{ default: 'column' }}>
<PageSection type="breadcrumb">
<Breadcrumb>
<BreadcrumbItemLink to={clustersBasePath}>Clusters</BreadcrumbItemLink>
{title !== titleClusterRegistrationSecrets && (
Expand All @@ -37,6 +37,8 @@ function ClusterRegistrationSecretsHeader({
)}
<BreadcrumbItem isActive>{title}</BreadcrumbItem>
</Breadcrumb>
</PageSection>
<PageSection component="div">
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<Flex
direction={{ default: 'column' }}
Expand All @@ -52,8 +54,8 @@ function ClusterRegistrationSecretsHeader({
<FlexItem align={{ default: 'alignRight' }}>{headerActions}</FlexItem>
)}
</Flex>
</Flex>
</PageSection>
</PageSection>
</>
);
}

Expand Down
2 changes: 1 addition & 1 deletion ...orm/src/Containers/Clusters/ClusterRegistrationSecrets/ClusterRegistrationSecretsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function ClusterRegistrationSecretsPage({
headerActions={headerActions}
title={titleClusterRegistrationSecrets}
/>
<PageSection component="div" hasBodyWrapper={false}>
<PageSection component="div">
{isFetching ? (
<Bullseye>
<Spinner />
Expand Down
118 changes: 55 additions & 63 deletions ui/apps/platform/src/Containers/Clusters/ClusterRegistrationSecrets/SecureClusterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,82 @@
import type { ReactElement } from 'react';
import { useLocation } from 'react-router-dom-v5-compat';
import qs from 'qs';
import {
Alert,
Breadcrumb,
BreadcrumbItem,
Divider,
Flex,
FlexItem,
PageSection,
Tab,
TabTitleText,
Tabs,
Title,
} from '@patternfly/react-core';

import BreadcrumbItemLink from 'Components/BreadcrumbItemLink';
import PageTitle from 'Components/PageTitle';
import TabNav from 'Components/TabNav/TabNav';
import {
clustersBasePath,
clustersClusterRegistrationSecretsPath,
clustersSecureClusterCrsPath,
} from 'routePaths';
import useURLStringUnion from 'hooks/useURLStringUnion';
import { clustersBasePath, clustersClusterRegistrationSecretsPath } from 'routePaths';

import SecureClusterUsingHelmChart from './SecureClusterUsingHelmChart';
import SecureClusterUsingOperator from './SecureClusterUsingOperator';

const title = 'Secure a cluster with a cluster registration secret';
const headingLevel = 'h2';

const tabHelmChart = 'Helm-chart';
const titleOperator = 'Operator';
const titleHelmChart = 'Helm chart';
const tabLinks = [
{
href: `${clustersSecureClusterCrsPath}?tab=Operator`,
title: titleOperator,
},
{
href: `${clustersSecureClusterCrsPath}?tab=${tabHelmChart}`,
title: titleHelmChart,
},
];
const operatorTab = 'Operator';
const helmChartTab = 'Helm chart';

function SecureClusterPage(): ReactElement {
const { search } = useLocation();
const { tab } = qs.parse(search, { ignoreQueryPrefix: true });
const isOperator = tab !== tabHelmChart;
const [activeTabKey, setActiveTabKey] = useURLStringUnion('tab', [operatorTab, helmChartTab]);

return (
<>
<PageSection hasBodyWrapper={false} component="div">
<PageTitle title="Secure a cluster" />
<Flex direction={{ default: 'column' }}>
<Flex
direction={{ default: 'column' }}
spaceItems={{ default: 'spaceItemsMd' }}
<PageTitle title="Secure a cluster" />
<PageSection type="breadcrumb">
<Breadcrumb>
<BreadcrumbItemLink to={clustersBasePath}>Clusters</BreadcrumbItemLink>
<BreadcrumbItemLink to={clustersClusterRegistrationSecretsPath}>
Cluster registration secrets
</BreadcrumbItemLink>
<BreadcrumbItem isActive>{title}</BreadcrumbItem>
</Breadcrumb>
</PageSection>
<PageSection>
<Title headingLevel="h1">Secure a cluster with a cluster registration secret</Title>
</PageSection>
<PageSection type="tabs">
<Tabs
activeKey={activeTabKey}
onSelect={(_event, tabKey) => setActiveTabKey(tabKey)}
usePageInsets
mountOnEnter
unmountOnExit
>
<Tab
eventKey={operatorTab}
title={<TabTitleText>{operatorTab}</TabTitleText>}
tabContentId={operatorTab}
>
<Breadcrumb>
<BreadcrumbItemLink to={clustersBasePath}>Clusters</BreadcrumbItemLink>
<BreadcrumbItemLink to={clustersClusterRegistrationSecretsPath}>
Cluster registration secrets
</BreadcrumbItemLink>
<BreadcrumbItem isActive>{title}</BreadcrumbItem>
</Breadcrumb>
<Title headingLevel="h1">
Secure a cluster with a cluster registration secret
</Title>
</Flex>
<FlexItem>
<TabNav
currentTabTitle={isOperator ? titleOperator : titleHelmChart}
tabLinks={tabLinks}
/>
<Divider component="div" />
</FlexItem>
{isOperator ? (
<SecureClusterUsingOperator headingLevel={headingLevel} />
) : (
<SecureClusterUsingHelmChart headingLevel={headingLevel} />
)}
<Alert
variant="info"
isInline
title="You can use one cluster registration secret to secure at most one cluster."
component="p"
/>
</Flex>
<PageSection>
<SecureClusterUsingOperator headingLevel={headingLevel} />
</PageSection>
</Tab>
<Tab
eventKey={helmChartTab}
title={<TabTitleText>{helmChartTab}</TabTitleText>}
tabContentId={helmChartTab}
>
<PageSection>
<SecureClusterUsingHelmChart headingLevel={headingLevel} />
</PageSection>
</Tab>
</Tabs>
</PageSection>
<PageSection>
<Alert
variant="info"
isInline
title="You can use one cluster registration secret to secure at most one cluster."
component="p"
/>
</PageSection>
</>
);
Expand Down
3 changes: 1 addition & 2 deletions ...atform/src/Containers/Clusters/ClusterRegistrationSecrets/SecureClusterUsingHelmChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,9 @@ function SecureClusterUsingHelmChart({
const actions = (
<CodeBlockAction>
<ClipboardCopyButton
aria-label="Copy to clipboard"
aria-label="Copy command to clipboard"
id="ClipboardCopyButton"
onClick={() => copyToClipboard(codeBlock)}
textId="CodeBlockCode"
variant="plain"
>
{wasCopied ? 'Copied to clipboard' : 'Copy to clipboard'}
Expand Down
8 changes: 3 additions & 5 deletions ui/apps/platform/src/Containers/Clusters/ClustersTablePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ function ClustersTablePanel({ selectedClusterId }: ClustersTablePanelProps) {
// Conditionally render a subsequent error in addition to most recent successful respnse.
return (
<>
<PageSection variant="light" component="div" hasBodyWrapper={false}>
<PageSection>
<Flex
direction={{ default: 'row' }}
alignItems={{ default: 'alignItemsCenter' }}
Expand Down Expand Up @@ -365,11 +365,9 @@ function ClustersTablePanel({ selectedClusterId }: ClustersTablePanelProps) {
)}
</Flex>
</Flex>
<Content component="p" className="pf-v6-u-font-size-md">
View the status of secured cluster services
</Content>
<Content component="p">View the status of secured cluster services</Content>
</PageSection>
<PageSection hasBodyWrapper={false}>
<PageSection>
<Toolbar>
<ToolbarContent>
<CompoundSearchFilter
Expand Down
16 changes: 8 additions & 8 deletions ui/apps/platform/src/Containers/Clusters/DelegateScanning/DelegateScanningPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,14 @@ function DelegateScanningPage() {
return (
<>
<PageTitle title={displayedPageTitle} />
<PageSection hasBodyWrapper={false}>
<PageSection type="breadcrumb">
<Breadcrumb>
<BreadcrumbItemLink to={clustersBasePath}>Clusters</BreadcrumbItemLink>
<BreadcrumbItem isActive>{displayedPageTitle}</BreadcrumbItem>
</Breadcrumb>
</PageSection>
<PageSection>
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Breadcrumb>
<BreadcrumbItemLink to={clustersBasePath}>Clusters</BreadcrumbItemLink>
<BreadcrumbItem isActive>{displayedPageTitle}</BreadcrumbItem>
</Breadcrumb>
</FlexItem>
<Flex>
<FlexItem flex={{ default: 'flex_1' }}>
<Title headingLevel="h1">{displayedPageTitle}</Title>
Expand All @@ -106,7 +106,7 @@ function DelegateScanningPage() {
</Flex>
</PageSection>
<Divider component="div" />
<PageSection hasBodyWrapper={false}>
<PageSection>
{isLoading ? (
<Bullseye>
<Spinner />
Expand Down
Loading
Loading