Skip to content

Commit b985f1e

Browse files
VixtirVixtir
committed
FE: Add column sizer
1 parent 351e4a9 commit b985f1e

File tree

21 files changed

+331
-106
lines changed

21 files changed

+331
-106
lines changed

‎frontend/index.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66

77
<!-- Favicons -->
8-
<link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.svg" type="image/svg+xml" />
9-
<link rel="apple-touch-icon" href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png" />
8+
<link
9+
rel="icon"
10+
href="<%= PUBLIC_PATH %>/favicon/favicon.svg"
11+
type="image/svg+xml"
12+
/>
13+
<link
14+
rel="apple-touch-icon"
15+
href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png"
16+
/>
1017
<link rel="manifest" href="<%= PUBLIC_PATH %>/manifest.json" />
1118

1219
<title>Kafbat UI</title>
1320
<script type="text/javascript">
1421
window.basePath = '<%= PUBLIC_PATH %>';
1522

1623
window.__assetsPathBuilder = function (importer) {
17-
return window.basePath+ "/" + importer;
24+
return window.basePath + '/' + importer;
1825
};
1926
</script>
2027
<style>
@@ -27,21 +34,24 @@
2734

2835
@font-face {
2936
font-family: 'Inter';
30-
src: url('<%= PUBLIC_PATH %>/fonts/Inter-Regular.ttf') format('truetype');
37+
src: url('<%= PUBLIC_PATH %>/fonts/Inter-Regular.ttf')
38+
format('truetype');
3139
font-weight: 400;
3240
font-display: swap;
3341
}
3442

3543
@font-face {
3644
font-family: 'Roboto Mono';
37-
src: url('<%= PUBLIC_PATH %>/fonts/RobotoMono-Medium.ttf') format('truetype');
45+
src: url('<%= PUBLIC_PATH %>/fonts/RobotoMono-Medium.ttf')
46+
format('truetype');
3847
font-weight: 500;
3948
font-display: swap;
4049
}
4150

4251
@font-face {
4352
font-family: 'Roboto Mono';
44-
src: url('<%= PUBLIC_PATH %>/fonts/RobotoMono-Regular.ttf') format('truetype');
53+
src: url('<%= PUBLIC_PATH %>/fonts/RobotoMono-Regular.ttf')
54+
format('truetype');
4555
font-weight: 400;
4656
font-display: swap;
4757
}
@@ -51,6 +61,7 @@
5161
<body>
5262
<noscript>You need to enable JavaScript to run this app.</noscript>
5363
<div id="root"></div>
64+
<div id="portal-root"></div>
5465
<script type="module" src="/src/index.tsx"></script>
5566
</body>
5667
</html>

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
22
import useAppParams from 'lib/hooks/useAppParams';
33
import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
4-
import Table, { TagCell } from 'components/common/NewTable';
4+
import Table, { LinkCell, TagCell } from 'components/common/NewTable';
55
import { FullConnectorInfo } from 'generated-sources';
66
import { useConnectors } from 'lib/hooks/api/kafkaConnect';
77
import { ColumnDef } from '@tanstack/react-table';
88
import { useNavigate, useSearchParams } from 'react-router-dom';
99
import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
1010
import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
11+
import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
1112

1213
import ActionsCell from './ActionsCell';
1314
import TopicsCell from './TopicsCell';
@@ -17,7 +18,13 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
1718
{
1819
header: 'Name',
1920
accessorKey: 'name',
20-
cell: BreakableTextCell,
21+
cell: ({ getValue }) => (
22+
<LinkCell
23+
wordBreak
24+
value={`${getValue<string | number>()}`}
25+
to={encodeURIComponent(`${getValue<string | number>()}`)}
26+
/>
27+
),
2128
enableResizing: true,
2229
},
2330
{
@@ -35,6 +42,7 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
3542
accessorKey: 'type',
3643
meta: { filterVariant: 'multi-select' },
3744
filterFn: 'arrIncludesSome',
45+
size: 120,
3846
},
3947
{
4048
header: 'Plugin',
@@ -84,14 +92,15 @@ const List: React.FC = () => {
8492
);
8593

8694
const filterPersister = useQueryPersister(kafkaConnectColumns);
95+
const columnSizingPersister = useLocalStoragePersister('KafkaConnect');
8796

8897
return (
8998
<Table
9099
data={connectors || []}
91100
columns={kafkaConnectColumns}
92101
enableSorting
93102
enableColumnResizing
94-
tableName="KafkaConnect"
103+
columnSizingPersister={columnSizingPersister}
95104
onRowClick={({ original: { connect, name } }) =>
96105
navigate(clusterConnectConnectorPath(clusterName, connect, name))
97106
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { FullConnectorInfo } from 'generated-sources';
33
import { CellContext } from '@tanstack/react-table';
44
import { useNavigate } from 'react-router-dom';
5-
import { MultiLineTag, Tag } from 'components/common/Tag/Tag.styled';
5+
import { MultiLineTag } from 'components/common/Tag/Tag.styled';
66
import { ClusterNameRoute, clusterTopicPath } from 'lib/paths';
77
import useAppParams from 'lib/hooks/useAppParams';
88

‎frontend/src/components/Dashboard/Dashboard.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { clusterNewConfigPath } from 'lib/paths';
1212
import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
1313
import { ActionCanButton } from 'components/common/ActionComponent';
1414
import { useGetUserInfo } from 'lib/hooks/api/roles';
15+
import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
1516

1617
import * as S from './Dashboard.styled';
1718
import ClusterName from './ClusterName';
@@ -37,7 +38,13 @@ const Dashboard: React.FC = () => {
3738

3839
const columns = React.useMemo<ColumnDef<Cluster>[]>(() => {
3940
const initialColumns: ColumnDef<Cluster>[] = [
40-
{ header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
41+
{
42+
header: 'Cluster name',
43+
accessorKey: 'name',
44+
cell: ClusterName,
45+
meta: { width: '100%' },
46+
enableResizing: true,
47+
},
4148
{ header: 'Version', accessorKey: 'version', size: 100 },
4249
{
4350
header: 'Brokers count',
@@ -82,6 +89,9 @@ const Dashboard: React.FC = () => {
8289
(permission) => permission.resource === ResourceType.APPLICATIONCONFIG
8390
);
8491
}, [data]);
92+
93+
const columnSizingPersister = useLocalStoragePersister('KafkaConnect');
94+
8595
return (
8696
<>
8797
<PageHeading text="Dashboard" />
@@ -121,6 +131,8 @@ const Dashboard: React.FC = () => {
121131
columns={columns}
122132
data={config?.list}
123133
enableSorting
134+
enableColumnResizing
135+
columnSizingPersister={columnSizingPersister}
124136
emptyMessage={clusters.isFetched ? 'No clusters found' : 'Loading...'}
125137
/>
126138
</>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ const TopicTable: React.FC = () => {
3939
header: 'Topic Name',
4040
accessorKey: 'name',
4141
cell: TopicTitleCell,
42+
meta: {
43+
width: '100%',
44+
},
4245
},
4346
{
4447
id: TopicColumnsToSort.TOTAL_PARTITIONS,

‎frontend/src/components/common/Icons/FilterIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import styled from 'styled-components';
33

4-
const FilterIcon: React.FC<{ isOpen: boolean }> = () => {
4+
const FilterIcon = () => {
55
return (
66
<svg
77
width="12"

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React from 'react';
22
import { Column } from '@tanstack/react-table';
33

4-
import * as FilterVariant from './variants';
4+
import * as Variant from './variants';
55

66
interface FilterProps<T> {
77
column: Column<T, unknown>;
88
}
9+
910
export const ColumnFilter = <T,>(props: FilterProps<T>) => {
1011
const { column } = props;
1112

1213
switch (column.columnDef.meta?.filterVariant) {
1314
case 'multi-select': {
14-
return <FilterVariant.MultiSelect column={column} />;
15+
return <Variant.MultiSelect column={column} />;
1516
}
1617
default: {
1718
throw Error('Not implemented filter');

‎frontend/src/components/common/NewTable/ColumnFilter/variants/MultiSelect/MultiSelect.styled.tsx‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import styled from 'styled-components';
22
import { MultiSelect as ReactMultiSelect } from 'react-multi-select-component';
33

4-
export const MultiSelect = styled(ReactMultiSelect)<{
4+
export const SelectPanel = styled(ReactMultiSelect)<{
55
minWidth?: string;
66
height?: string;
77
}>`
88
font-size: 14px;
99
padding-right: 12px;
10+
.dropdown-container:focus-within {
11+
box-shadow: none !important;
12+
border-color: none !important;
13+
}
1014
.search input {
1115
color: ${({ theme }) => theme.input.color.normal};
1216
background-color: ${(props) =>
@@ -40,7 +44,6 @@ export const MultiSelect = styled(ReactMultiSelect)<{
4044
border-color: ${({ theme }) => theme.select.borderColor.hover} !important;
4145
}
4246
43-
height: ${({ height }) => height ?? '32px'};
4447
* {
4548
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
4649
}
@@ -49,17 +52,12 @@ export const MultiSelect = styled(ReactMultiSelect)<{
4952
width: fit-content;
5053
min-width: 120px;
5154
right: 0px;
55+
top: 0;
56+
padding-top: 0;
5257
}
5358
5459
& > .dropdown-heading {
55-
height: ${({ height }) => height ?? '32px'};
56-
color: ${({ disabled, theme }) =>
57-
disabled
58-
? theme.select.color.disabled
59-
: theme.select.color.active} !important;
60-
& > .dropdown-heading-value {
61-
color: ${({ theme }) => theme.table.filter.multiSelect.value.color};
62-
}
60+
display: none;
6361
}
6462
}
6563
@@ -68,3 +66,30 @@ export const MultiSelect = styled(ReactMultiSelect)<{
6866
theme.table.filter.multiSelect.filterIcon.fill.active};
6967
}
7068
`;
69+
70+
export const Container = styled.div`
71+
display: flex;
72+
height: 24px;
73+
align-items: center;
74+
position: relative;
75+
padding-right: 8px;
76+
`;
77+
78+
export const Positioner = styled.div`
79+
position: absolute;
80+
z-index: 30;
81+
`;
82+
83+
export const Count = styled.span`
84+
padding-left: 4px;
85+
color: ${({ theme }) => theme.table.filter.multiSelect.value.color};
86+
`;
87+
88+
export const FilterIcon = styled.div`
89+
height: 12px;
90+
margin: 2px;
91+
`;
92+
93+
export const ResetIcon = styled.div`
94+
margin: 3px;
95+
`;

0 commit comments

Comments
 (0)