Fe: Add ability to word wrap for text columns in table

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';
@@ -23,9 +24,13 @@ const List: React.FC = () => {
   const columns = React.useMemo<ColumnDef<FullConnectorInfo>[]>(
     () => [
       { header: 'Name', accessorKey: 'name' },
-      { header: 'Connect', accessorKey: 'connect' },
+      { 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
+            wordBreak
             value={`${getValue<string | number>()}`}
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />
@@ -51,11 +52,13 @@ const List = () => {
         id: ConsumerGroupOrdering.MEMBERS,
         header: 'Num Of Members',
         accessorKey: 'members',
+        size: 140,
       },
       {
         id: ConsumerGroupOrdering.TOPIC_NUM,
         header: 'Num Of Topics',
         accessorKey: 'topics',
+        size: 140,
       },
       {
         id: ConsumerGroupOrdering.MESSAGES_BEHIND,
@@ -64,11 +67,13 @@ const List = () => {
         cell: (args) => {
           return args.getValue() ?? 'N/A';
         },
+        size: 124,
       },
       {
         header: 'Coordinator',
         accessorKey: 'coordinator.id',
         enableSorting: false,
+        size: 104,
       },
       {
         id: ConsumerGroupOrdering.STATE,
@@ -85,6 +90,7 @@ const List = () => {
             />
           );
         },
+        size: 124,
       },
     ],
     []

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/Dashboard/Dashboard.tsx

@@ -38,19 +38,38 @@ const Dashboard: React.FC = () => {
   const columns = React.useMemo<ColumnDef<Cluster>[]>(() => {
     const initialColumns: ColumnDef<Cluster>[] = [
       { header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
-      { header: 'Version', accessorKey: 'version' },
-      { header: 'Brokers count', accessorKey: 'brokerCount' },
-      { header: 'Partitions', accessorKey: 'onlinePartitionCount' },
-      { header: 'Topics', accessorKey: 'topicCount' },
-      { header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell },
-      { header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell },
+      { header: 'Version', accessorKey: 'version', size: 100 },
+      {
+        header: 'Brokers count',
+        accessorKey: 'brokerCount',
+        size: 120,
+      },
+      {
+        header: 'Partitions',
+        accessorKey: 'onlinePartitionCount',
+        size: 100,
+      },
+      { header: 'Topics', accessorKey: 'topicCount', size: 80 },
+      {
+        header: 'Production',
+        accessorKey: 'bytesInPerSec',
+        cell: SizeCell,
+        size: 100,
+      },
+      {
+        header: 'Consumption',
+        accessorKey: 'bytesOutPerSec',
+        cell: SizeCell,
+        size: 116,
+      },
     ];
 
     if (appInfo.hasDynamicConfig) {
       initialColumns.push({
         header: '',
         id: 'actions',
         cell: ClusterTableActionsCell,
+        size: 140,
       });
     }
 

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/NavBar/NavBar.styled.ts

@@ -15,7 +15,7 @@ export const Navbar = styled.nav(
     left: 0;
     right: 0;
     z-index: 30;
-    background-color: ${theme.menu.primary.backgroundColor.normal};
+    background-color: ${theme.menu.header.backgroundColor};
     min-height: 3.25rem;
   `
 );

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

@@ -45,15 +45,20 @@ const List: React.FC = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ getValue }) => (
           <LinkCell
+            wordBreak
             value={`${getValue<string | number>()}`}
             to={encodeURIComponent(`${getValue<string | number>()}`)}
           />
         ),
       },
-      { header: 'Id', accessorKey: 'id' },
-      { header: 'Type', accessorKey: 'schemaType' },
-      { header: 'Version', accessorKey: 'version' },
-      { header: 'Compatibility', accessorKey: 'compatibilityLevel' },
+      { header: 'Id', accessorKey: 'id', size: 120 },
+      { header: 'Type', accessorKey: 'schemaType', size: 120 },
+      { header: 'Version', accessorKey: 'version', size: 120 },
+      {
+        header: 'Compatibility',
+        accessorKey: 'compatibilityLevel',
+        size: 160,
+      },
     ],
     []
   );

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

@@ -44,11 +44,13 @@ const TopicTable: React.FC = () => {
         id: TopicColumnsToSort.TOTAL_PARTITIONS,
         header: 'Partitions',
         accessorKey: 'partitionCount',
+        size: 100,
       },
       {
         id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
         header: 'Out of sync replicas',
         accessorKey: 'partitions',
+        size: 154,
         cell: ({ getValue }) => {
           const partitions = getValue<Topic['partitions']>();
           if (partitions === undefined || partitions.length === 0) {
@@ -64,11 +66,13 @@ const TopicTable: React.FC = () => {
         header: 'Replication Factor',
         accessorKey: 'replicationFactor',
         enableSorting: false,
+        size: 148,
       },
       {
         header: 'Number of messages',
         accessorKey: 'partitions',
         enableSorting: false,
+        size: 146,
         cell: ({ getValue }) => {
           const partitions = getValue<Topic['partitions']>();
           if (partitions === undefined || partitions.length === 0) {
@@ -83,12 +87,14 @@ const TopicTable: React.FC = () => {
         id: TopicColumnsToSort.SIZE,
         header: 'Size',
         accessorKey: 'segmentSize',
+        size: 100,
         cell: SizeCell,
       },
       {
         id: 'actions',
         header: '',
         cell: ActionsCell,
+        size: 60,
       },
     ],
     []