Merge pull request #674 from sgratch/wrap-label-to-new-line

Wrap label within TableLinkCell to a new line if needed
kubev2v · Aug 9, 2023 · 0f6f4bc · 0f6f4bc
2 parents 1e82089 + d82ea62
commit 0f6f4bc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/...es/forklift-console-plugin/src/modules/Providers/utils/components/TableCell/TableCell.tsx b/...es/forklift-console-plugin/src/modules/Providers/utils/components/TableCell/TableCell.tsx
@@ -10,15 +10,15 @@ import './TableCells.style.css';
  * @param {TableCellProps} props - The props for the component.
  * @returns {ReactElement} The rendered TableCell component.
  */
-export const TableCell: React.FC<TableCellProps> = ({ children }) => {
+export const TableCell: React.FC<TableCellProps> = ({ children, isWrap = false }) => {
   const arrayChildren = Children.toArray(children);
 
   return (
     <span className="forklift-table__flex-cell" data-testid="table-cell">
       <Flex
         spaceItems={{ default: 'spaceItemsXs' }}
         display={{ default: 'inlineFlex' }}
-        flexWrap={{ default: 'nowrap' }}
+        flexWrap={!isWrap ? { default: 'nowrap' } : {}}
       >
         {Children.map(arrayChildren, (child) => (
           <FlexItem>{child}</FlexItem>
@@ -30,4 +30,5 @@ export const TableCell: React.FC<TableCellProps> = ({ children }) => {
 
 export interface TableCellProps {
   children?: ReactNode;
+  isWrap?: boolean;
 }
diff --git a/...rklift-console-plugin/src/modules/Providers/utils/components/TableCell/TableLabelCell.tsx b/...rklift-console-plugin/src/modules/Providers/utils/components/TableCell/TableLabelCell.tsx
@@ -12,12 +12,13 @@ import { TableCell, TableCellProps } from './TableCell';
  */
 export const TableLabelCell: React.FC<TableLabelCellProps> = ({
   children,
+  isWrap = false,
   hasLabel = false,
   label,
   labelColor = 'grey',
 }) => {
   return (
-    <TableCell>
+    <TableCell isWrap={isWrap}>
       {children}
       {hasLabel && (
         <Label isCompact color={labelColor} className="forklift-table__flex-cell-label">
@@ -32,4 +33,5 @@ export interface TableLabelCellProps extends TableCellProps {
   hasLabel?: boolean;
   label?: ReactNode;
   labelColor?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  isWrap?: boolean;
 }
diff --git a/...orklift-console-plugin/src/modules/Providers/utils/components/TableCell/TableLinkCell.tsx b/...orklift-console-plugin/src/modules/Providers/utils/components/TableCell/TableLinkCell.tsx
@@ -19,7 +19,7 @@ export const TableLinkCell: React.FC<TableLinkCellProps> = ({
   labelColor = 'grey',
 }) => {
   return (
-    <TableLabelCell hasLabel={hasLabel} label={label} labelColor={labelColor}>
+    <TableLabelCell hasLabel={hasLabel} label={label} labelColor={labelColor} isWrap={true}>
       <ResourceLink groupVersionKind={groupVersionKind} name={name} namespace={namespace} />
     </TableLabelCell>
   );