Skip to content

Commit c076d82

Browse files
jpuzz0jpuzz0
committed
Resolves: MTV-4628 | Fix plan table cell spacing
Signed-off-by: Jeff Puzzo <jpuzzo@redhat.com>
1 parent 553b73a commit c076d82

File tree

17 files changed

+125
-94
lines changed

17 files changed

+125
-94
lines changed

‎src/components/ConsoleTimestamp/ConsoleTimestamp.style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.forklift-table__console-timestamp {
22
text-decoration-line: none !important;
33
color: var(--pf-v6-c-content--Color);
4+
white-space: nowrap;
45
}

‎src/components/ConsoleTimestamp/ConsoleTimestamp.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import './ConsoleTimestamp.style.css';
1515

1616
type TimestampProps = {
1717
timestamp: string | number | Date | null | undefined;
18-
className?: string;
1918
showGlobalIcon?: boolean;
2019
};
2120

@@ -27,11 +26,7 @@ type TimestampProps = {
2726
* glob icon
2827
* custom format
2928
*/
30-
export const ConsoleTimestamp: FC<TimestampProps> = ({
31-
className,
32-
showGlobalIcon = true,
33-
timestamp,
34-
}) => {
29+
export const ConsoleTimestamp: FC<TimestampProps> = ({ showGlobalIcon = true, timestamp }) => {
3530
// Check for null. If props.timestamp is null, it returns incorrect date and time of Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
3631
if (!timestamp) {
3732
return <div className="co-timestamp">-</div>;
@@ -40,7 +35,7 @@ export const ConsoleTimestamp: FC<TimestampProps> = ({
4035
const currentDate = new Date(timestamp);
4136

4237
return (
43-
<div className={className}>
38+
<div className="forklift-table__console-timestamp">
4439
{showGlobalIcon && <GlobeAmericasIcon className="co-icon-and-text__icon" />}
4540
<Timestamp
4641
className="forklift-table__console-timestamp"

‎src/components/ProviderIconLink.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,9 @@
77
justify-content: center;
88
flex-shrink: 0;
99
}
10+
11+
.forklift-provider-icon-link__name {
12+
max-width: 30ch;
13+
overflow: hidden;
14+
text-overflow: ellipsis;
15+
}

‎src/components/ProviderIconLink.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { FC, ReactNode } from 'react';
22
import { useNavigate } from 'react-router-dom-v5-compat';
33

4-
import { Button, ButtonVariant, Split, SplitItem } from '@patternfly/react-core';
4+
import { Button, ButtonVariant, Split, SplitItem, Truncate } from '@patternfly/react-core';
55

66
import './ProviderIconLink.scss';
77

@@ -22,7 +22,7 @@ const ProviderIconLink: FC<ProviderIconLinkProps> = ({
2222
return (
2323
<Split className={className}>
2424
<SplitItem className="forklift-provider-icon-link">{providerIcon}</SplitItem>
25-
<SplitItem>
25+
<SplitItem className="forklift-provider-icon-link__name">
2626
<Button
2727
type="button"
2828
isInline
@@ -31,7 +31,7 @@ const ProviderIconLink: FC<ProviderIconLinkProps> = ({
3131
navigate(href);
3232
}}
3333
>
34-
{providerName}
34+
<Truncate content={providerName ?? ''} />
3535
</Button>
3636
</SplitItem>
3737
</Split>

‎src/components/TableCell/TableCell.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,20 @@ import './TableCells.style.css';
1010
* @param {TableCellProps} props - The props for the component.
1111
* @returns {ReactElement} The rendered TableCell component.
1212
*/
13-
export const TableCell: FC<TableCellProps> = ({ children, isWrap = false }) => {
13+
export const TableCell: FC<TableCellProps> = ({ children, className, isWrap = false }) => {
1414
const arrayChildren = Children.toArray(children);
1515

16+
const cellClass = [isWrap ? undefined : 'forklift-table__cell', className]
17+
.filter(Boolean)
18+
.join(' ');
19+
1620
return (
1721
<Flex
1822
spaceItems={{ default: 'spaceItemsXs' }}
1923
display={{ default: 'inlineFlex' }}
2024
flexWrap={isWrap ? {} : { default: 'nowrap' }}
2125
alignItems={{ default: 'alignItemsCenter' }}
22-
className={isWrap ? undefined : 'forklift-table__cell'}
26+
className={cellClass || undefined}
2327
>
2428
{Children.map(arrayChildren, (child, index) => (
2529
<FlexItem key={index} flex={{ default: 'flexNone' }}>
@@ -32,5 +36,6 @@ export const TableCell: FC<TableCellProps> = ({ children, isWrap = false }) => {
3236

3337
export type TableCellProps = {
3438
children?: ReactNode;
39+
className?: string;
3540
isWrap?: boolean;
3641
};

‎src/components/TableCell/TableCells.style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@
55
.forklift-table__cell {
66
white-space: nowrap;
77
}
8+
9+
.forklift-table-link-cell--truncate {
10+
max-width: 30ch;
11+
}

‎src/components/TableCell/TableLabelCell.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { TableCell, type TableCellProps } from './TableCell';
1212
*/
1313
export const TableLabelCell: FC<TableLabelCellProps> = ({
1414
children,
15+
className,
1516
hasLabel = false,
1617
isWrap = false,
1718
label,
@@ -21,7 +22,7 @@ export const TableLabelCell: FC<TableLabelCellProps> = ({
2122
const labelColors = Array.isArray(labelColor) ? labelColor : labels.map(() => labelColor);
2223

2324
return (
24-
<TableCell isWrap={isWrap}>
25+
<TableCell className={className} isWrap={isWrap}>
2526
{children}
2627
{hasLabel &&
2728
labels.map((_, i) => (

‎src/components/TableCell/TableLinkCell.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,28 @@ import { type K8sGroupVersionKind, ResourceLink } from '@openshift-console/dynam
44

55
import { TableLabelCell, type TableLabelCellProps } from './TableLabelCell';
66

7-
/**
8-
* A component that displays a resource link, with an optional label.
9-
*
10-
* @param {TableLinkCellProps} props - The props for the component.
11-
* @returns {ReactElement} The rendered TableLinkCell component.
12-
*/
137
export const TableLinkCell: FC<TableLinkCellProps> = ({
148
groupVersionKind,
159
hasLabel = false,
1610
label,
1711
labelColor = 'grey',
1812
name,
1913
namespace,
14+
truncate,
2015
}) => {
2116
return (
22-
<TableLabelCell hasLabel={hasLabel} label={label} labelColor={labelColor}>
23-
<ResourceLink groupVersionKind={groupVersionKind} name={name} namespace={namespace} />
17+
<TableLabelCell
18+
className={truncate ? 'forklift-table-link-cell--truncate' : undefined}
19+
hasLabel={hasLabel}
20+
label={label}
21+
labelColor={labelColor}
22+
>
23+
<ResourceLink
24+
groupVersionKind={groupVersionKind}
25+
name={name}
26+
namespace={namespace}
27+
truncate={truncate}
28+
/>
2429
</TableLabelCell>
2530
);
2631
};
@@ -29,4 +34,5 @@ type TableLinkCellProps = {
2934
groupVersionKind: K8sGroupVersionKind;
3035
name: string | undefined;
3136
namespace: string | undefined;
37+
truncate?: boolean;
3238
} & TableLabelCellProps;

‎src/components/common/TableView/DefaultHeader.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,28 @@ export const DefaultHeader = <T,>({
1616
}: TableViewHeaderProps<T>) => {
1717
return (
1818
<>
19-
{visibleColumns.map(({ info, label, resourceFieldId, sortable, testId }, columnIndex) => (
20-
<Th
21-
width={10}
22-
key={resourceFieldId}
23-
sort={
24-
sortable
25-
? buildSort({
26-
activeSort,
27-
columnIndex,
28-
resourceFields: visibleColumns,
29-
setActiveSort,
30-
})
31-
: undefined
32-
}
33-
info={info}
34-
data-testid={testId}
35-
>
36-
{label}
37-
</Th>
38-
))}
19+
{visibleColumns.map(
20+
({ info, label, resourceFieldId, sortable, testId, width }, columnIndex) => (
21+
<Th
22+
width={width}
23+
key={resourceFieldId}
24+
sort={
25+
sortable
26+
? buildSort({
27+
activeSort,
28+
columnIndex,
29+
resourceFields: visibleColumns,
30+
setActiveSort,
31+
})
32+
: undefined
33+
}
34+
info={info}
35+
data-testid={testId}
36+
>
37+
{label}
38+
</Th>
39+
),
40+
)}
3941
</>
4042
);
4143
};

‎src/components/common/TableView/TableView.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { FC, ReactNode } from 'react';
22

33
import { Bullseye } from '@patternfly/react-core';
4-
import { Table, Tbody, Td, Thead, Tr } from '@patternfly/react-table';
4+
import { InnerScrollContainer, Table, Tbody, Td, Thead, Tr } from '@patternfly/react-table';
55
import { isEmpty } from '@utils/helpers';
66

77
import { UID } from '../utils/constants';
@@ -43,34 +43,36 @@ export const TableView = <T,>({
4343
const columnSignature = visibleColumns.map(({ resourceFieldId: id }) => id).join();
4444

4545
return (
46-
<Table aria-label={ariaLabel} variant="compact" isStickyHeader className="table-view">
47-
<Thead>
48-
<Tr>
49-
<Header {...{ activeSort, dataOnScreen: entities, setActiveSort, visibleColumns }} />
50-
</Tr>
51-
</Thead>
52-
<Tbody>
53-
{hasChildren && (
46+
<InnerScrollContainer>
47+
<Table aria-label={ariaLabel} variant="compact" isStickyHeader className="table-view">
48+
<Thead>
5449
<Tr>
55-
<Td colSpan={emptyStateColSpan as number}>
56-
<Bullseye>{children}</Bullseye>
57-
</Td>
50+
<Header {...{ activeSort, dataOnScreen: entities, setActiveSort, visibleColumns }} />
5851
</Tr>
59-
)}
60-
{!hasChildren &&
61-
entities.map((resourceData: T, index) => (
62-
<Row
63-
key={`${columnSignature}_${String(resourceData?.[uidFieldId as keyof T] ?? index)}`}
64-
resourceData={resourceData}
65-
resourceFields={visibleColumns}
66-
namespace={currentNamespace}
67-
resourceIndex={index}
68-
length={visibleColumns.length}
69-
isExpanded={expandedIds?.includes(toId ? toId(resourceData) : '')}
70-
/>
71-
))}
72-
</Tbody>
73-
</Table>
52+
</Thead>
53+
<Tbody>
54+
{hasChildren && (
55+
<Tr>
56+
<Td colSpan={emptyStateColSpan as number}>
57+
<Bullseye>{children}</Bullseye>
58+
</Td>
59+
</Tr>
60+
)}
61+
{!hasChildren &&
62+
entities.map((resourceData: T, index) => (
63+
<Row
64+
key={`${columnSignature}_${String(resourceData?.[uidFieldId as keyof T] ?? index)}`}
65+
resourceData={resourceData}
66+
resourceFields={visibleColumns}
67+
namespace={currentNamespace}
68+
resourceIndex={index}
69+
length={visibleColumns.length}
70+
isExpanded={expandedIds?.includes(toId ? toId(resourceData) : '')}
71+
/>
72+
))}
73+
</Tbody>
74+
</Table>
75+
</InnerScrollContainer>
7476
);
7577
};
7678

0 commit comments

Comments
 (0)