0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make topic bulk actions buttons always visible (#2835)

Browse source
This commit is contained in:
vitalymatyushik 2022-10-28 17:55:35 +02:00 • committed by GitHub
parent 972d02b836
commit d2a62e2762
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
kafka-ui-react-app/src/components/Topics/List/BatchActionsBar.tsx
View file

@ -63,6 +63,12 @@ const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
type Tuple = [string, string]; type Tuple = [string, string];
const getCopyTopicPath = () => { const getCopyTopicPath = () => {
if (!rows.length) {
return {
pathname: '',
search: '',
};
}
const topic = rows[0].original; const topic = rows[0].original;
const search = Object.keys(topic).reduce((acc: Tuple[], key) => { const search = Object.keys(topic).reduce((acc: Tuple[], key) => {
@ -86,13 +92,14 @@ const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
buttonSize="M" buttonSize="M"
buttonType="secondary" buttonType="secondary"
onClick={deleteTopicsHandler} onClick={deleteTopicsHandler}
disabled={!selectedTopics.length}
> >
Delete selected topics Delete selected topics
</Button> </Button>
<Button <Button
buttonSize="M" buttonSize="M"
buttonType="secondary" buttonType="secondary"
disabled={selectedTopics.length > 1} disabled={selectedTopics.length !== 1}
to={getCopyTopicPath()} to={getCopyTopicPath()}
> >
Copy selected topic Copy selected topic
@ -101,6 +108,7 @@ const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
buttonSize="M" buttonSize="M"
buttonType="secondary" buttonType="secondary"
onClick={purgeTopicsHandler} onClick={purgeTopicsHandler}
disabled={!selectedTopics.length}
> >
Purge messages of selected topics Purge messages of selected topics
</Button> </Button>

4
kafka-ui-react-app/src/components/common/NewTable/Table.tsx
View file

@ -101,7 +101,7 @@ const getSortingFromSearchParams = (searchParams: URLSearchParams) => {
* - use `enableRowSelection` prop to enable row selection. This prop can be a boolean or * - use `enableRowSelection` prop to enable row selection. This prop can be a boolean or
* a function that returns true if the particular row can be selected. * a function that returns true if the particular row can be selected.
* - use `batchActionsBar` prop to provide a component that will be rendered at the top of the table * - use `batchActionsBar` prop to provide a component that will be rendered at the top of the table
* when row selection is enabled and there are selected rows. * when row selection is enabled.
* *
* 5. Server side processing: * 5. Server side processing:
* - set `serverSideProcessing` to true * - set `serverSideProcessing` to true
@ -190,7 +190,7 @@ const Table: React.FC<TableProps<any>> = ({
return ( return (
<> <>
{table.getSelectedRowModel().flatRows.length > 0 && BatchActionsBar && ( {BatchActionsBar && (
<S.TableActionsBar> <S.TableActionsBar>
<BatchActionsBar <BatchActionsBar
rows={table.getSelectedRowModel().flatRows} rows={table.getSelectedRowModel().flatRows}

2
kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
View file

@ -318,7 +318,7 @@ describe('Table', () => {
it('renders action bar', async () => { it('renders action bar', async () => {
expect(screen.getAllByRole('row').length).toEqual(data.length + 1); expect(screen.getAllByRole('row').length).toEqual(data.length + 1);
expect(screen.queryByText('I am Action Bar')).not.toBeInTheDocument(); expect(screen.queryByText('I am Action Bar')).toBeInTheDocument();
const checkboxes = screen.getAllByRole('checkbox'); const checkboxes = screen.getAllByRole('checkbox');
expect(checkboxes.length).toEqual(data.length + 1); expect(checkboxes.length).toEqual(data.length + 1);
await userEvent.click(checkboxes[2]); await userEvent.click(checkboxes[2]);