Added Resizer, MultilineTag

Author: Vixtir

frontend/src/components/Connect/List/List.styled.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 export const TagsWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
+  word-break: break-word;
+  white-space: pre-wrap;
   span {
     color: rgb(76, 76, 255) !important;
     &:hover {

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

@@ -17,13 +17,18 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
   {
     header: 'Name',
     accessorKey: 'name',
+    cell: BreakableTextCell,
+    enableResizing: true,
   },
   {
     header: 'Connect',
     accessorKey: 'connect',
     cell: BreakableTextCell,
-    meta: { filterVariant: 'multi-select' },
     filterFn: 'arrIncludesSome',
+    meta: {
+      filterVariant: 'multi-select',
+    },
+    enableResizing: true,
   },
   {
     header: 'Type',
@@ -37,6 +42,7 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
     cell: BreakableTextCell,
     meta: { filterVariant: 'multi-select' },
     filterFn: 'arrIncludesSome',
+    enableResizing: true,
   },
   {
     header: 'Topics',
@@ -45,7 +51,7 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
     enableColumnFilter: true,
     meta: { filterVariant: 'multi-select' },
     filterFn: 'arrIncludesSome',
-    enableSorting: false,
+    enableResizing: true,
   },
   {
     header: 'Status',
@@ -54,8 +60,18 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
     meta: { filterVariant: 'multi-select' },
     filterFn: 'arrIncludesSome',
   },
-  { header: 'Running Tasks', cell: RunningTasksCell },
-  { header: '', id: 'action', cell: ActionsCell },
+  {
+    id: 'running_task',
+    header: 'Running Tasks',
+    cell: RunningTasksCell,
+    size: 120,
+  },
+  {
+    header: '',
+    id: 'action',
+    cell: ActionsCell,
+    size: 60,
+  },
 ];
 
 const List: React.FC = () => {
@@ -67,19 +83,21 @@ const List: React.FC = () => {
     searchParams.get('q') || ''
   );
 
-  const persister = useQueryPersister(kafkaConnectColumns);
+  const filterPersister = useQueryPersister(kafkaConnectColumns);
 
   return (
     <Table
       data={connectors || []}
       columns={kafkaConnectColumns}
       enableSorting
+      enableColumnResizing
+      tableName="KafkaConnect"
       onRowClick={({ original: { connect, name } }) =>
         navigate(clusterConnectConnectorPath(clusterName, connect, name))
       }
       emptyMessage="No connectors found"
       setRowId={(originalRow) => `${originalRow.name}-${originalRow.connect}`}
-      filterPersister={persister}
+      filterPersister={filterPersister}
     />
   );
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { FullConnectorInfo } from 'generated-sources';
 import { CellContext } from '@tanstack/react-table';
 import { useNavigate } from 'react-router-dom';
-import { Tag } from 'components/common/Tag/Tag.styled';
+import { MultiLineTag, Tag } from 'components/common/Tag/Tag.styled';
 import { ClusterNameRoute, clusterTopicPath } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 
@@ -27,7 +27,7 @@ const TopicsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   return (
     <S.TagsWrapper>
       {topics?.map((t) => (
-        <Tag key={t} color="green">
+        <MultiLineTag key={t} color="green">
           <span
             role="link"
             onClick={(e) => navigateToTopic(e, t)}
@@ -36,7 +36,7 @@ const TopicsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
           >
             {t}
           </span>
-        </Tag>
+        </MultiLineTag>
       ))}
     </S.TagsWrapper>
   );

frontend/src/components/common/NewTable/ColumnFilter/Filter.tsx

@@ -6,7 +6,7 @@ import * as FilterVariant from './variants';
 interface FilterProps<T> {
   column: Column<T, unknown>;
 }
-export const Filter = <T,>(props: FilterProps<T>) => {
+export const ColumnFilter = <T,>(props: FilterProps<T>) => {
   const { column } = props;
 
   switch (column.columnDef.meta?.filterVariant) {

frontend/src/components/common/NewTable/ColumnFilter/index.ts

@@ -1,6 +1,6 @@
-import { Filter } from './Filter';
+import { ColumnFilter } from './Filter';
 
 export { type FilterableColumnDef, type KafbatFilterVariant } from './types';
 export { type Persister, useQueryPersister } from './lib';
 export { getFilterableColumns } from './lib/getFilterableColumns';
-export default Filter;
+export default ColumnFilter;

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

@@ -0,0 +1,33 @@
+import { Header, RowData } from '@tanstack/react-table';
+import React from 'react';
+import styled from 'styled-components';
+
+const ColumnResizerStyled = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 5px;
+  background: white;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+`;
+
+const ColumnResizer = <TData extends RowData>({
+  header,
+}: {
+  header: Header<TData, unknown>;
+}) => {
+  return (
+    <ColumnResizerStyled
+      {...{
+        onDoubleClick: () => header.column.resetSize(),
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+      }}
+    />
+  );
+};
+
+export default styled(ColumnResizer)``;

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

@@ -0,0 +1,14 @@
+import { CellContext } from '@tanstack/react-table';
+import React from 'react';
+import getTagColor from 'components/common/Tag/getTagColor';
+import { MultiLineTag } from 'components/common/Tag/Tag.styled';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const MultiLineTagCell: React.FC<CellContext<any, unknown>> = ({
+  getValue,
+}) => {
+  const value = getValue<string>();
+  return <MultiLineTag color={getTagColor(value)}>{value}</MultiLineTag>;
+};
+
+export default MultiLineTagCell;

frontend/src/components/common/NewTable/Table.styled.ts

@@ -72,6 +72,39 @@ const DESCMixin = (color: string) => `
   }
 `;
 
+export const TableHeaderContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const ColumnResizer = styled.div<{ $isResizing?: boolean }>`
+  ${({
+    $isResizing,
+    theme: {
+      table: { resizer },
+    },
+  }) => {
+    return css`
+      opacity: ${$isResizing ? 1 : 0};
+      position: absolute;
+      top: 8px;
+      right: 0;
+      height: calc(100% - 16px);
+      width: 4px;
+      border-radius: 2px;
+      background-color: ${resizer.background.normal};
+
+      cursor: col-resize;
+      user-select: none;
+      touch-action: none;
+      &:hover {
+        background-color: ${resizer.background.hover};
+      }
+    `;
+  }};
+`;
+
 export const Th = styled.th<ThProps>(
   ({
     theme: {
@@ -97,22 +130,20 @@ export const Th = styled.th<ThProps>(
   white-space: nowrap;
   position: relative;
 
-  & > div {
+  & > ${TableHeaderContent} {
     cursor: default;
     color: ${th.color.normal};
     ${sortable ? sortableMixin(th.color.sortable, th.color.hover) : ''}
     ${sortable && sortOrder === 'asc' && ASCMixin(th.color.active)}
     ${sortable && sortOrder === 'desc' && DESCMixin(th.color.active)}
   }
+
+  &:hover > ${ColumnResizer} {
+    opacity: 1;
+  }
 `
 );
 
-export const TableHeaderContent = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 export const TableHeaderFilter = styled.div`
   padding: 4px;
   position: absolute;
@@ -241,7 +272,9 @@ export const Ellipsis = styled.div`
 
 export const TableWrapper = styled.div<{ $disabled: boolean }>(
   ({ $disabled }) => css`
+    overflow: clip;
     overflow-x: auto;
+    overflow-y: visible;
     ${$disabled &&
     css`
       pointer-events: none;