feat: Add BreakableTextCell

Author: Vixtir

frontend/src/components/ACLPage/List/List.tsx

@@ -20,6 +20,7 @@ import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import * as S from './List.styled';
 
@@ -56,6 +57,7 @@ const ACList: React.FC = () => {
         header: 'Principal',
         accessorKey: 'principal',
         size: 257,
+        cell: BreakableTextCell,
       },
       {
         header: 'Resource',

frontend/src/components/Brokers/BrokersList/lib/utils.ts

@@ -3,6 +3,7 @@ import * as Cell from 'components/Brokers/BrokersList/TableCells/TableCells';
 import { createColumnHelper } from '@tanstack/react-table';
 import { keyBy } from 'lib/functions/keyBy';
 import SkewHeader from 'components/Brokers/BrokersList/SkewHeader/SkewHeader';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import { BrokersTableRow } from './types';
 import { NA_DISK_USAGE } from './constants';
@@ -75,6 +76,6 @@ export const getBrokersTableColumns = () => {
       cell: Cell.Skew,
     }),
     columnHelper.accessor('port', { header: 'Port' }),
-    columnHelper.accessor('host', { header: 'Host' }),
+    columnHelper.accessor('host', { header: 'Host', cell: BreakableTextCell }),
   ];
 };

frontend/src/components/Connect/List/List.tsx

@@ -6,6 +6,7 @@ import { FullConnectorInfo } from 'generated-sources';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
@@ -22,10 +23,14 @@ const List: React.FC = () => {
 
   const columns = React.useMemo<ColumnDef<FullConnectorInfo>[]>(
     () => [
-      { header: 'Name', accessorKey: 'name' },
-      { header: 'Connect', accessorKey: 'connect' },
+      { header: 'Name', accessorKey: 'name', cell: BreakableTextCell },
+      { header: 'Connect', accessorKey: 'connect', cell: BreakableTextCell },
       { header: 'Type', accessorKey: 'type' },
-      { header: 'Plugin', accessorKey: 'connectorClass' },
+      {
+        header: 'Plugin',
+        accessorKey: 'connectorClass',
+        cell: BreakableTextCell,
+      },
       { header: 'Topics', cell: TopicsCell },
       { header: 'Status', accessorKey: 'status.state', cell: TagCell },
       { header: 'Running Tasks', cell: RunningTasksCell },

frontend/src/components/ConsumerGroups/List.tsx

@@ -42,6 +42,7 @@ const List = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ getValue }) => (
           <LinkCell
+            style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
             value={`${getValue<string | number>()}`}
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />

frontend/src/components/Dashboard/ClusterName.tsx

@@ -8,10 +8,10 @@ type ClusterNameProps = CellContext<Cluster, unknown>;
 const ClusterName: React.FC<ClusterNameProps> = ({ row }) => {
   const { readOnly, name } = row.original;
   return (
-    <>
+    <div style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}>
       {readOnly && <Tag color="blue">readonly</Tag>}
       {name}
-    </>
+    </div>
   );
 };
 

frontend/src/components/KsqlDb/TableView.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { KsqlStreamDescription, KsqlTableDescription } from 'generated-sources';
 import Table from 'components/common/NewTable';
 import { ColumnDef } from '@tanstack/react-table';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 interface TableViewProps {
   fetching: boolean;
@@ -13,8 +14,8 @@ const TableView: React.FC<TableViewProps> = ({ fetching, rows }) => {
     ColumnDef<KsqlTableDescription | KsqlStreamDescription>[]
   >(
     () => [
-      { header: 'Name', accessorKey: 'name' },
-      { header: 'Topic', accessorKey: 'topic' },
+      { header: 'Name', accessorKey: 'name', cell: BreakableTextCell },
+      { header: 'Topic', accessorKey: 'topic', cell: BreakableTextCell },
       { header: 'Key Format', accessorKey: 'keyFormat' },
       { header: 'Value Format', accessorKey: 'valueFormat' },
       {

frontend/src/components/Schemas/List/List.tsx

@@ -45,6 +45,7 @@ const List: React.FC = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ getValue }) => (
           <LinkCell
+            style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
             value={`${getValue<string | number>()}`}
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />

frontend/src/components/Topics/List/TopicTitleCell.tsx

@@ -9,7 +9,11 @@ export const TopicTitleCell: React.FC<CellContext<Topic, unknown>> = ({
 }) => {
   const { internal, name } = original;
   return (
-    <NavLink to={name} title={name}>
+    <NavLink
+      to={name}
+      title={name}
+      style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
+    >
       {internal && (
         <>
           <Tag color="gray">IN</Tag>

frontend/src/components/common/NewTable/BreakableTextCell.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+
+import * as S from './Table.styled';
+
+const BreakableTextCell = <T,>({ getValue }: CellContext<T, unknown>) => {
+  return <S.BreakableText>{getValue<string>()}</S.BreakableText>;
+};
+
+export default BreakableTextCell;

frontend/src/components/common/NewTable/LinkCell.tsx

@@ -2,10 +2,18 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LinkCell = ({ value, to = '' }: any) => {
+const LinkCell = ({
+  value,
+  to = '',
+  style = {},
+}: {
+  value: string;
+  to?: string;
+  style?: React.CSSProperties;
+}) => {
   const handleClick: React.MouseEventHandler = (e) => e.stopPropagation();
   return (
-    <NavLink to={to} title={value} onClick={handleClick}>
+    <NavLink to={to} title={value} onClick={handleClick} style={style}>
       {value}
     </NavLink>
   );