Repository: provectus/kafka-ui
Issue: Make topic bulk actions buttons always visible
Labels: type/enhancement
good first issue
scope/frontend
status/accepted
hacktoberfest

<img width="747" alt="image" src="https://user-images.githubusercontent.com/1494347/195046352-d2b27d74-bbef-46a2-982c-c2aece1cb7df.png">


1. Make these buttons visible even if no topics are selected
2. Make the buttons disabled if no topics are selected

Issue comments:
hey @Haarolean  assign me this issue
@yogesh-9999 any luck?
@Haarolean can I take that issue?
@vitalymatyushik yeah it seems

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/List/BatchActionsBar.tsx b/kafka-ui-react-app/src/components/Topics/List/BatchActionsBar.tsx
index a5acec28f5b..3ff45cfed78 100644
--- a/kafka-ui-react-app/src/components/Topics/List/BatchActionsBar.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/BatchActionsBar.tsx
@@ -63,6 +63,12 @@ const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
   type Tuple = [string, string];
 
   const getCopyTopicPath = () => {
+    if (!rows.length) {
+      return {
+        pathname: '',
+        search: '',
+      };
+    }
     const topic = rows[0].original;
 
     const search = Object.keys(topic).reduce((acc: Tuple[], key) => {
@@ -86,13 +92,14 @@ const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
         buttonSize="M"
         buttonType="secondary"
         onClick={deleteTopicsHandler}
+        disabled={!selectedTopics.length}
       >
         Delete selected topics
       </Button>
       <Button
         buttonSize="M"
         buttonType="secondary"
-        disabled={selectedTopics.length > 1}
+        disabled={selectedTopics.length !== 1}
         to={getCopyTopicPath()}
       >
         Copy selected topic
@@ -101,6 +108,7 @@ const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
         buttonSize="M"
         buttonType="secondary"
         onClick={purgeTopicsHandler}
+        disabled={!selectedTopics.length}
       >
         Purge messages of selected topics
       </Button>
diff --git a/kafka-ui-react-app/src/components/common/NewTable/Table.tsx b/kafka-ui-react-app/src/components/common/NewTable/Table.tsx
index 7e3b571c375..2c80ac18b27 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/Table.tsx
+++ b/kafka-ui-react-app/src/components/common/NewTable/Table.tsx
@@ -101,7 +101,7 @@ const getSortingFromSearchParams = (searchParams: URLSearchParams) => {
  *    - 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.
  *    - 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:
  *    - set `serverSideProcessing` to true
@@ -190,7 +190,7 @@ const Table: React.FC<TableProps<any>> = ({
 
   return (
     <>
-      {table.getSelectedRowModel().flatRows.length > 0 && BatchActionsBar && (
+      {BatchActionsBar && (
         <S.TableActionsBar>
           <BatchActionsBar
             rows={table.getSelectedRowModel().flatRows}
diff --git a/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx b/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
index 227dc552059..dbfdddab662 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
@@ -318,7 +318,7 @@ describe('Table', () => {
 
     it('renders action bar', async () => {
       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');
       expect(checkboxes.length).toEqual(data.length + 1);
       await userEvent.click(checkboxes[2]);


Test patch: