Skip to content

Commit

Permalink
Migrate Table to DataTable, migrates Pagination as well
Browse files Browse the repository at this point in the history
  • Loading branch information
jvorcak committed Nov 12, 2023
1 parent 0d32871 commit 46e5a6e
Show file tree
Hide file tree
Showing 19 changed files with 1,009 additions and 1,210 deletions.
620 changes: 319 additions & 301 deletions frontend/package-lock.json

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@
"dependencies": {
"@ant-design/icons": "^4.7",
"@chakra-ui/icons": "^2.1",
"@chakra-ui/react": "^2.8.1",
"@chakra-ui/react-use-disclosure": "^2.1",
"@heroicons/react": "^1.0.6",
"@monaco-editor/react": "^4.6",
"@primer/octicons-react": "^17",
"@redpanda-data/ui": "^3.30.1",
"@redpanda-data/ui": "file:.yalc/@redpanda-data/ui",
"@tanstack/react-table": "^8.10.7",
"@textea/json-viewer": "^1.24.4",
"antd": "^4.21",
"array-move": "^4",
Expand Down
46 changes: 25 additions & 21 deletions frontend/src/components/misc/KowlTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
*/

import React, { Component } from 'react';
import { Pagination, Table } from 'antd';
import { Pagination, Table as AntdTable } from 'antd';
import { ColumnType } from 'antd/lib/table';
import styles from './KowlTable.module.scss';
import { ColumnTitleProps, ExpandableConfig, FilterDropdownProps, FilterValue, SorterResult, TableCurrentDataSource, TablePaginationConfig } from 'antd/lib/table/interface';
Expand Down Expand Up @@ -218,7 +218,7 @@ export class KowlTable<T extends object = any> extends Component<{
@action updateCustomColumns(cols: KowlColumnType<T>[]) {
// console.count('table update columns');
this.customColumns = cols.map(col => {
if (Object.is(col, Table.EXPAND_COLUMN) || Object.is(col, Table.SELECTION_COLUMN))
if (Object.is(col, AntdTable.EXPAND_COLUMN) || Object.is(col, AntdTable.SELECTION_COLUMN))
return col;
return Object.assign({}, col);
}) as KowlColumnTypeInternal<T>[];
Expand Down Expand Up @@ -381,32 +381,36 @@ export class KowlTable<T extends object = any> extends Component<{
const unused3 = this.currentDataSource?.length;
const unused4 = this.displayData?.length;
/* eslint-enable @typescript-eslint/no-unused-vars*/
return <Table<T>
style={{ margin: '0', padding: '0' }}
size="middle"
showSorterTooltip={false}
className={styles.kowlTable + ' ' + (p.className ?? '')}

dataSource={this.displayData}
columns={this.customColumns}
// return <div>{JSON.stringify(this.customColumns)}</div>

rowKey={p.rowKey}
rowClassName={p.rowClassName}
onRow={p.onRow}
return (
<AntdTable<T>
style={{margin: '0', padding: '0'}}
size="middle"
showSorterTooltip={false}
className={styles.kowlTable + ' ' + (p.className ?? '')}

pagination={pagination}
dataSource={this.displayData}
columns={this.customColumns}

rowKey={p.rowKey}
rowClassName={p.rowClassName}
onRow={p.onRow}

pagination={pagination}

getPopupContainer={findPopupContainer}
expandable={p.expandable}
footer={this.renderFooter}
onChange={(_pagination: TablePaginationConfig, _filters: Record<string, FilterValue | null>, _sorter: SorterResult<T> | SorterResult<T>[], _extra: TableCurrentDataSource<T>) => {
//
}}

locale={p.emptyText ? { emptyText: p.emptyText } : undefined}
/>
getPopupContainer={findPopupContainer}
expandable={p.expandable}
footer={this.renderFooter}
onChange={(_pagination: TablePaginationConfig, _filters: Record<string, FilterValue | null>, _sorter: SorterResult<T> | SorterResult<T>[], _extra: TableCurrentDataSource<T>) => {
//
}}

locale={p.emptyText ? {emptyText: p.emptyText} : undefined}
/>
)
}

@computed get filterIcon() {
Expand Down
35 changes: 14 additions & 21 deletions frontend/src/components/pages/admin/Admin.Roles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,13 @@
/* eslint-disable react/jsx-key */

import React, { Component, ReactNode } from 'react';
import { Role, RoleBinding, Permission } from '../../../state/restInterfaces';
import { Table } from 'antd';
import { Permission, Role, RoleBinding } from '../../../state/restInterfaces';
import { observer } from 'mobx-react';
import { api, } from '../../../state/backendApi';
import { sortField } from '../../misc/common';
import '../../../utils/arrayExtensions';
import { QuickTable, DefaultSkeleton } from '../../../utils/tsxUtils';
import { DefaultSkeleton, QuickTable } from '../../../utils/tsxUtils';
import { RoleBindingComponent } from './Admin.RoleBindings';



import { DataTable } from '@redpanda-data/ui';


@observer
Expand All @@ -32,22 +28,19 @@ export class AdminRoles extends Component<{}> {
if (!api.adminInfo) return DefaultSkeleton;
const roles = api.adminInfo.roles;

return <Table
size={'middle'} style={{ margin: '0', padding: '0', whiteSpace: 'nowrap' }} bordered={false}
showSorterTooltip={false}
dataSource={roles}
rowClassName={() => 'hoverLink'}
rowKey={x => x.name}
return <DataTable<Role>
enableSorting
data={roles}
size="md"
expandRowByClick
subComponent={({row: {original: role}}) => <RoleComponent role={role}/>}
columns={[
{ width: 1, title: 'Role Name', dataIndex: 'name', sorter: sortField('name') },
{ title: '', render: _r => (<span></span>) },
{
accessorKey: 'name',
header: 'Role Name',
size: Infinity,
},
]}
// expandIconAsCell={false} broken after upgrade to antd4
expandable={{
expandIconColumnIndex: 0,
expandRowByClick: true,
expandedRowRender: (r: Role) => <RoleComponent key={r.name} role={r} />
}}
/>
}
}
Expand Down
69 changes: 30 additions & 39 deletions frontend/src/components/pages/admin/Admin.Users.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,15 @@

import { Component } from 'react';
import { UserDetails } from '../../../state/restInterfaces';
import { Table } from 'antd';
import { observer } from 'mobx-react';
import { api, } from '../../../state/backendApi';
import { sortField } from '../../misc/common';
import { MotionDiv } from '../../../utils/animationProps';
import '../../../utils/arrayExtensions';
import { RoleComponent } from './Admin.Roles';
import { UserOutlined } from '@ant-design/icons';
import { makeObservable, observable } from 'mobx';
import { DefaultSkeleton } from '../../../utils/tsxUtils';
import { Accordion, SearchField, Tooltip } from '@redpanda-data/ui';
import { Accordion, DataTable, SearchField, Tooltip } from '@redpanda-data/ui';

@observer
export class AdminUsers extends Component<{}> {
Expand All @@ -37,54 +35,47 @@ export class AdminUsers extends Component<{}> {
const users = this.quickSearch.length > 0 ? api.adminInfo.users.filter(u => u.internalIdentifier.includes(this.quickSearch) || u.oauthUserId.includes(this.quickSearch)) : api.adminInfo.users;

const table = (
<Table
size={'middle'}
style={{ margin: '0', padding: '0', whiteSpace: 'nowrap' }}
bordered={false}
showSorterTooltip={false}
dataSource={users}
rowKey={x => x.internalIdentifier + x.oauthUserId + x.loginProvider}
rowClassName={user => 'hoverLink' + (user.internalIdentifier == api.userData?.user.internalIdentifier ? ' tableRowHighlightSpecial' : null)}
<DataTable<UserDetails>
data={users}
enableSorting
expandRowByClick
size="md"
columns={[
{
width: 1,
title: 'Identifier',
dataIndex: 'internalIdentifier',
sorter: sortField('internalIdentifier'),
render: (t, r) => {
if (r.internalIdentifier == api.userData?.user.internalIdentifier)
size: 1,
header: 'Identifier',
accessorKey: 'internalIdentifier',
cell: ({row}) => {
if (row.original.internalIdentifier == api.userData?.user.internalIdentifier) {
return (
<span>
<>
<Tooltip label="You are currently logged in as this user" placement="top" hasArrow>
<UserOutlined style={{ fontSize: '16px', padding: '2px', color: '#ff9e3a' }} />
<UserOutlined style={{fontSize: '16px', padding: '2px', color: '#ff9e3a'}}/>
</Tooltip>{' '}
{t}
{row.original.internalIdentifier}
</>
</span>
);
return t;
}
return row.original.internalIdentifier;
}
},
{ width: 1, title: 'OAuthUserID', dataIndex: 'oauthUserId', sorter: sortField('oauthUserId') },
{ width: 1, title: 'Roles', dataIndex: 'roles', render: (_text, user) => user.grantedRoles.map(r => r.role.name).join(', ') }, // can't sort
{ width: 1, title: 'Login', dataIndex: 'loginProvider', sorter: sortField('loginProvider') },
{ title: '', render: _r => <span></span> }
{ size: 1, header: 'OAuthUserID', accessorKey: 'oauthUserId' },
{ size: 1, header: 'Roles', accessorKey: 'roles', cell: ({row: {original: user}}) => user.grantedRoles.map(r => r.role.name).join(', ') }, // can't sort
{ size: Infinity, header: 'Login', accessorKey: 'loginProvider' },
]}
// expandIconAsCell={false}
// expandIconColumnIndex={0}
expandRowByClick={true}
expandedRowRender={(user: UserDetails) => (
<Accordion
defaultIndex={0}
items={
user.grantedRoles.map(r => ({
heading: r.role.name,
description: <RoleComponent role={r.role} grantedBy={r.grantedBy}/>
}))
}
/>
)}
subComponent={({row: {original: user}}) => <Accordion
defaultIndex={0}
items={
user.grantedRoles.map(r => ({
heading: r.role.name,
description: <RoleComponent role={r.role} grantedBy={r.grantedBy}/>
}))
}
/>}
/>
);
)

return <MotionDiv>
<div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: '12px' }}>
Expand Down
25 changes: 10 additions & 15 deletions frontend/src/components/pages/connect/CreateConnector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { api } from '../../../state/backendApi';
import { uiState } from '../../../state/uiState';
import { appGlobal } from '../../../state/appGlobal';
import { ClusterConnectors, ConnectorValidationResult } from '../../../state/restInterfaces';
import { Table } from 'antd';
import { HiddenRadioList } from '../../misc/HiddenRadioList';
import { ConnectorBoxCard, ConnectorPlugin, getConnectorFriendlyName } from './ConnectorBoxCard';
import { ConfigPage } from './dynamic-ui/components';
Expand All @@ -31,6 +30,7 @@ import {
AlertDescription,
AlertIcon,
Box,
DataTable,
Flex,
Heading,
Link,
Expand Down Expand Up @@ -625,32 +625,27 @@ function ValidationDisplay({ validationResult }: { validationResult: ConnectorVa
status="warning"
variant="left-accent"
my={4}
overflow="auto"
>
<AlertDescription>
<Box>
<Text as="h3" mb={4}>Submitted configuration is invalid</Text>
<Table
pagination={false}
size={'small'}
dataSource={getDataSource(validationResult)}
<DataTable<{name: string, value: string | null, recommended_values: string[], errors: string[], visible: boolean}>
data={getDataSource(validationResult)}
columns={[
{
title: 'Property Name',
dataIndex: 'name',
key: 'name',
header: 'Property Name',
accessorKey: 'name',
},
{
title: 'Current Value',
dataIndex: 'value',
key: 'value',
header: 'Current Value',
accessorKey: 'value',
},
{
title: 'Validation Errors',
dataIndex: 'errors',
key: 'errors',
header: 'Validation Errors',
accessorKey: 'errors',
},
]}
rowKey={(record) => record.name}
/>
</Box>
</AlertDescription>
Expand Down
Loading

0 comments on commit 46e5a6e

Please sign in to comment.