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

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,
  },
  ],
  []

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,17 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+
+const BreakableTextCell = <T,>({ getValue }: CellContext<T, unknown>) => {
+ return (
+ <div
+ style={{
+ wordBreak: 'break-word',
+ whiteSpace: 'pre-wrap',
+ }}
+ >
+ {getValue<string>()}
+ </div>
+ );
+};
+
+export default BreakableTextCell;

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

@@ -1,13 +1,40 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+interface LinkCellProps {
+ value: string;
+ to?: string;
+ wordBreak?: boolean;
+}
+
+const NavLinkStyled = styled(NavLink)<{ $wordBreak?: boolean }>`
+ && {
+ ${({ $wordBreak }) =>
+ $wordBreak &&
+ css`
+ word-break: break-word;
+ white-space: pre-wrap;
+ `}
+ }
+`;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LinkCell = ({ value, to = '' }: any) => {
+const LinkCell: React.FC<LinkCellProps> = ({
+ value,
+ to = '',
+ wordBreak = false,
+}) => {
  const handleClick: React.MouseEventHandler = (e) => e.stopPropagation();
  return (
- <NavLink to={to} title={value} onClick={handleClick}>
+ <NavLinkStyled
+ to={to}
+ title={value}
+ onClick={handleClick}
+ $wordBreak={wordBreak}
+ >
  {value}
- </NavLink>
+ </NavLinkStyled>
  );
 };
 

frontend/src/theme/theme.ts

@@ -566,6 +566,9 @@ export const theme = {
  },
  },
  menu: {
+ header: {
+ backgroundColor: Colors.brand[0],
+ },
  primary: {
  backgroundColor: {
  normal: 'transparent',
@@ -1098,6 +1101,9 @@ export const darkTheme: ThemeType = {
  },
  },
  menu: {
+ header: {
+ backgroundColor: Colors.brand[90],
+ },
  primary: {
  backgroundColor: {
  normal: 'transparent',