Skip to content

[WIP][ST] Remove fixed css selectors, utilize components from PW and OUIA ids #2805

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

Draft
jankalinic wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[WIP][ST] Remove fixed css selectors, utilize components from PW and OUIA ids #2805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cf04e0
[WIP] remove fixed css selectors, utilize as much from PW as possible
jankalinic Jul 27, 2026
4be4b35
fixed locators
jankalinic Jul 28, 2026
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 api/src/main/webui/src/components/kafka/ClusterSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export function ClusterSwitcher({
>
<FlexItem>{t('kafka.selectCluster')}</FlexItem>
<FlexItem>
<Badge isRead key="badge">
<Badge isRead key="badge" data-ouia-component-id="total-available-kafka-count">
{clusters.length}
</Badge>
</FlexItem>
Expand Down
2 changes: 1 addition & 1 deletion api/src/main/webui/src/components/kafka/groups/ResetOffset/CliCommandDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function CliCommandDisplay({
</Fragment>
}
>
<CodeBlockCode>{command}</CodeBlockCode>
<CodeBlockCode data-ouia-component-id="dry-run-command-text">{command}</CodeBlockCode>
</CodeBlock>
</ExpandableSection>
);
Expand Down
1 change: 1 addition & 0 deletions api/src/main/webui/src/components/kafka/groups/ResetOffset/OffsetValueSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export function OffsetValueSelector({

const offsetToggle = (
<MenuToggle
id="offset-select"
ref={offsetToggleRef}
onClick={() => setIsOffsetSelectOpen(!isOffsetSelectOpen)}
isExpanded={isOffsetSelectOpen}
Expand Down
2 changes: 2 additions & 0 deletions api/src/main/webui/src/components/kafka/groups/ResetOffset/TopicPartitionSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export function TopicPartitionSelector({

const topicToggle = (
<MenuToggle
id="topic-select"
ref={topicToggleRef}
onClick={() => setIsTopicSelectOpen(!isTopicSelectOpen)}
isExpanded={isTopicSelectOpen}
Expand Down Expand Up @@ -130,6 +131,7 @@ export function TopicPartitionSelector({

const partitionToggle = (
<MenuToggle
id="partition-select"
ref={partitionToggleRef}
onClick={() => setIsPartitionSelectOpen(!isPartitionSelectOpen)}
isExpanded={isPartitionSelectOpen}
Expand Down
10 changes: 5 additions & 5 deletions api/src/main/webui/src/components/kafka/nodes/RebalanceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function RebalanceModal({ rebalance, isOpen, onClose }: RebalanceModalPro
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-data-to-move-mb">
{optimizationResult?.dataToMoveMB || 0} MB
</DescriptionListDescription>
</DescriptionListGroup>
Expand Down Expand Up @@ -128,7 +128,7 @@ export function RebalanceModal({ rebalance, isOpen, onClose }: RebalanceModalPro
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-monitored-partitions-percentage">
{optimizationResult?.monitoredPartitionsPercentage || 0}
</DescriptionListDescription>
</DescriptionListGroup>
Expand Down Expand Up @@ -164,7 +164,7 @@ export function RebalanceModal({ rebalance, isOpen, onClose }: RebalanceModalPro
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-num-replica-movements">
{optimizationResult?.numReplicaMovements || 0}
</DescriptionListDescription>
</DescriptionListGroup>
Expand All @@ -176,7 +176,7 @@ export function RebalanceModal({ rebalance, isOpen, onClose }: RebalanceModalPro
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-balancedness-after">
{optimizationResult?.onDemandBalancednessScoreAfter || 0}
</DescriptionListDescription>
</DescriptionListGroup>
Expand All @@ -188,7 +188,7 @@ export function RebalanceModal({ rebalance, isOpen, onClose }: RebalanceModalPro
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-balancedness-before">
{optimizationResult?.onDemandBalancednessScoreBefore || 0}
</DescriptionListDescription>
</DescriptionListGroup>
Expand Down
4 changes: 2 additions & 2 deletions api/src/main/webui/src/components/kafka/nodes/RebalancesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export function RebalancesTable({
<FlexItem style={{ width: '25%' }}>
<DescriptionListGroup>
<DescriptionListTerm>{t('rebalancing.autoApprovalEnabled')}</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-auto-approval-value">
{rebalance.meta?.autoApproval === true ? 'true' : 'false'}
</DescriptionListDescription>
</DescriptionListGroup>
Expand Down Expand Up @@ -224,7 +224,7 @@ export function RebalancesTable({
<HelpIcon />
</Popover>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="rebalance-mode-value">
{rebalance.attributes.mode === 'full' ? (
t('rebalancing.fullMode')
) : (
Expand Down
3 changes: 2 additions & 1 deletion api/src/main/webui/src/components/kafka/overview/ClusterCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ export function ClusterCard({

{/* Kafka Version */}
<GridItem span={12} xl={4}>
<div className="pf-v6-u-font-size-xl">
<div className="pf-v6-u-font-size-xl" data-ouia-component-id="cluster-kafka-version">
{isLoading ? (
<Skeleton />
) : (
Expand Down Expand Up @@ -280,6 +280,7 @@ export function ClusterCard({
<DataList
aria-label={t('ClusterCard.cluster_errors_and_warnings')}
isCompact
data-ouia-component-id="cluster-warnings-list"
>
{isLoading ? (
Array.from({ length: 5 }).map((_, i) => (
Expand Down
1 change: 1 addition & 0 deletions api/src/main/webui/src/components/kafka/overview/ErrorsAndWarnings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export function ErrorsAndWarnings({
<ExpandableSection
isExpanded={isExpanded}
onToggle={(_event, isOpen) => setIsExpanded(isOpen)}
toggleId="cluster-warnings-toggle"
toggleContent={
<Title headingLevel="h3" className="pf-v6-u-font-size-sm">
{t('ClusterCard.cluster_errors_and_warnings')}{' '}
Expand Down
2 changes: 1 addition & 1 deletion api/src/main/webui/src/components/kafka/overview/RecentTopicsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function RecentTopicsCard({
) : (
<>
<Divider />
<List isPlain style={{ paddingTop: '1rem' }}>
<List isPlain style={{ paddingTop: '1rem' }} data-ouia-component-id="recent-topics-list">
{viewedTopics.map((topic) => (
<ListItem key={topic.topicId}>
<Link
Expand Down
2 changes: 1 addition & 1 deletion api/src/main/webui/src/components/kafka/overview/ReconciliationControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function ReconciliationControls({
return (
<>
{isReconciliationPaused && (
<Banner color="yellow">
<Banner color="yellow" data-ouia-component-id="reconciliation-paused-banner">
<Bullseye>
<Flex spaceItems={{ default: 'spaceItemsMd' }}>
<FlexItem spacer={{ default: 'spacerNone' }}>
Expand Down
6 changes: 3 additions & 3 deletions api/src/main/webui/src/components/kafka/overview/TopicsPartitionsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function TopicsPartitionsCard({
>
{/* Fully Replicated */}
<FlexItem>
<Link to="../topics?status=FullyReplicated" style={{ textDecoration: 'none' }}>
<Link to="../topics?status=FullyReplicated" style={{ textDecoration: 'none' }} data-ouia-component-id="fully-replicated-status-link">
{isLoading ? (
<Skeleton shape="circle" width="1rem" style={{ display: 'inline-block' }} />
) : (
Expand All @@ -130,7 +130,7 @@ export function TopicsPartitionsCard({

{/* Under-replicated */}
<FlexItem>
<Link to="../topics?status=UnderReplicated" style={{ textDecoration: 'none' }}>
<Link to="../topics?status=UnderReplicated" style={{ textDecoration: 'none' }} data-ouia-component-id="under-replicated-status-link">
{isLoading ? (
<Skeleton shape="circle" width="1rem" style={{ display: 'inline-block' }} />
) : (
Expand All @@ -152,7 +152,7 @@ export function TopicsPartitionsCard({

{/* Offline */}
<FlexItem>
<Link to="../topics?status=Offline" style={{ textDecoration: 'none' }}>
<Link to="../topics?status=Offline" style={{ textDecoration: 'none' }} data-ouia-component-id="offline-status-link">
{isLoading ? (
<Skeleton shape="circle" width="1rem" style={{ display: 'inline-block' }} />
) : (
Expand Down
6 changes: 6 additions & 0 deletions api/src/main/webui/src/components/kafka/topics/AdvancedSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ export function AdvancedSearch({
value={query}
onChange={(_, value) => setQuery(value)}
placeholder={t('topics.messages.advancedSearch.queryHelper')}
ouiaId="has-words-input"
/>
<FormHelperText>
<HelperText>
Expand All @@ -267,6 +268,7 @@ export function AdvancedSearch({
onClick={() => setIsWhereOpen(!isWhereOpen)}
isExpanded={isWhereOpen}
style={{ width: '100%' }}
ouiaId="where-dropdown-button"
>
{where === 'value' ? t('topics.messages.advancedSearch.whereValue') :
where === 'key' ? t('topics.messages.advancedSearch.whereKey') :
Expand Down Expand Up @@ -320,6 +322,7 @@ export function AdvancedSearch({
onClick={() => setIsFromOpen(!isFromOpen)}
isExpanded={isFromOpen}
style={{ width: '100%' }}
ouiaId="messages-from-dropdown-button"
>
{fromCategory === 'offset' ? t('topics.messages.filter.offset') :
fromCategory === 'timestamp' ? t('topics.messages.filter.timestamp') :
Expand Down Expand Up @@ -391,6 +394,7 @@ export function AdvancedSearch({
onClick={() => setIsRetrieveOpen(!isRetrieveOpen)}
isExpanded={isRetrieveOpen}
style={{ width: '100%' }}
ouiaId="retrieve-type-dropdown-button"
>
{retrieveCategory === 'limit' ? 'Number of messages' : t('topics.messages.advancedSearch.continuously')}
</MenuToggle>
Expand Down Expand Up @@ -418,6 +422,7 @@ export function AdvancedSearch({
onClick={() => setIsLimitOpen(!isLimitOpen)}
isExpanded={isLimitOpen}
style={{ width: '100%' }}
ouiaId="retrieve-limit-dropdown-button"
>
{limit}
</MenuToggle>
Expand Down Expand Up @@ -464,6 +469,7 @@ export function AdvancedSearch({
onClick={() => setIsPartitionOpen(!isPartitionOpen)}
isExpanded={isPartitionOpen}
style={{ width: '100%' }}
ouiaId="partition-dropdown-button"
>
{partition !== undefined
? t('topics.messages.partitionOption', { value: partition })
Expand Down
2 changes: 1 addition & 1 deletion api/src/main/webui/src/pages/kafka/KafkaLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ export function KafkaLayout() {
</BreadcrumbItem>
)}
{isGroupDetailPage && (
<BreadcrumbItem>
<BreadcrumbItem data-ouia-component-id="breadcrumb-group-name">
{groupData?.attributes?.groupId}
</BreadcrumbItem>
)}
Expand Down
8 changes: 4 additions & 4 deletions api/src/main/webui/src/pages/kafka/nodes/NodesOverviewTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,15 +310,15 @@ export function NodesOverviewTab() {
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="overview-total-nodes">
{formatNumber(totalNodes)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
{t('nodes.distribution.controllerRole')}
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="overview-controller-role">
{controllersWarning ? (
<Icon status="warning">
<ExclamationTriangleIcon />
Expand All @@ -335,7 +335,7 @@ export function NodesOverviewTab() {
<DescriptionListTerm>
{t('nodes.distribution.brokerRole')}
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="overview-broker-role">
{brokersWarning ? (
<Icon status="warning">
<ExclamationTriangleIcon />
Expand All @@ -355,7 +355,7 @@ export function NodesOverviewTab() {
<HelpIcon />
</Tooltip>
</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="overview-lead-controller">
{t('nodes.distribution.leadControllerValue', {
leadController: leadControllerId,
})}
Expand Down
4 changes: 3 additions & 1 deletion api/src/main/webui/src/pages/kafka/nodes/NodesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function NodesPage() {
<Split hasGutter style={{ alignItems: 'center', display: 'flex' }}>
<SplitItem style={{ display: 'flex', alignItems: 'center' }}>{t('nodes.title')}</SplitItem>
<SplitItem style={{ display: 'flex', alignItems: 'center' }}>
<Label icon={isLoading ? <Spinner size="sm" /> : undefined}>
<Label icon={isLoading ? <Spinner size="sm" /> : undefined} data-ouia-component-id="nodes-total-badge">
{totalNodes}&nbsp;total
</Label>
</SplitItem>
Expand All @@ -64,6 +64,7 @@ export function NodesPage() {
<Label
icon={isLoading ? <Spinner size="sm" /> : <CheckCircleIcon />}
color="green"
data-ouia-component-id="nodes-healthy-badge"
>
{healthyNodes}
</Label>
Expand All @@ -74,6 +75,7 @@ export function NodesPage() {
<Label
icon={isLoading ? <Spinner size="sm" /> : <ExclamationTriangleIcon />}
color="orange"
data-ouia-component-id="nodes-unhealthy-badge"
>
{unhealthyNodes}
</Label>
Expand Down
5 changes: 4 additions & 1 deletion api/src/main/webui/src/pages/kafka/topics/TopicsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export function TopicsPage() {
<Split hasGutter style={{ alignItems: 'center', display: 'flex' }}>
<SplitItem style={{ display: 'flex', alignItems: 'center' }}>{t('topics.title')}</SplitItem>
<SplitItem style={{ display: 'flex', alignItems: 'center' }}>
<Label icon={isLoading ? <Spinner size="sm" /> : undefined}>
<Label icon={isLoading ? <Spinner size="sm" /> : undefined} data-ouia-component-id="topics-total-badge">
{totalItems}&nbsp;total
</Label>
</SplitItem>
Expand All @@ -61,6 +61,7 @@ export function TopicsPage() {
<Label
icon={isLoading ? <Spinner size="sm" /> : <CheckCircleIcon />}
color="green"
data-ouia-component-id="topics-fully-replicated-badge"
>
{statusSummary?.FullyReplicated ?? 0}
</Label>
Expand All @@ -71,6 +72,7 @@ export function TopicsPage() {
<Label
icon={isLoading ? <Spinner size="sm" /> : <ExclamationTriangleIcon />}
color="orange"
data-ouia-component-id="topics-under-replicated-badge"
>
{(statusSummary?.UnderReplicated ?? 0) + (statusSummary?.PartiallyOffline ?? 0) + (statusSummary?.Unknown ?? 0)}
</Label>
Expand All @@ -81,6 +83,7 @@ export function TopicsPage() {
<Label
icon={isLoading ? <Spinner size="sm" /> : <ExclamationCircleIcon />}
color="red"
data-ouia-component-id="topics-offline-badge"
>
{statusSummary?.Offline ?? 0}
</Label>
Expand Down
8 changes: 4 additions & 4 deletions api/src/main/webui/src/pages/kafka/users/detail/UserDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,15 +119,15 @@ export function UserDetailPage() {
<DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
<DescriptionListGroup>
<DescriptionListTerm>{t('users.details.name')}</DescriptionListTerm>
<DescriptionListDescription>{name}</DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="user-detail-name">{name}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t('users.details.username')}</DescriptionListTerm>
<DescriptionListDescription>{username}</DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="user-detail-username">{username}</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t('users.details.authentication')}</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="user-detail-authentication">
{authenticationType}
</DescriptionListDescription>
</DescriptionListGroup>
Expand All @@ -139,7 +139,7 @@ export function UserDetailPage() {
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t('users.details.creationTime')}</DescriptionListTerm>
<DescriptionListDescription>
<DescriptionListDescription data-ouia-component-id="user-detail-creation-time">
{creationTimestamp ? formatDateTime({ value: creationTimestamp }) : '-'}
</DescriptionListDescription>
</DescriptionListGroup>
Expand Down
Loading
Loading