Repository: provectus/kafka-ui
Issue: UI: Invalid button title on Connector Tasks page
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
(A clear and concise description of what the bug is.)

Go to Connectors -> Select any connector -> Tasks ->  Click ... -> Button should be called 'Restart' not Clear messages

**Set up**
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)


**Steps to Reproduce**
Steps to reproduce the behavior:

1. 

**Expected behavior**
(A clear and concise description of what you expected to happen)

**Screenshots**
(If applicable, add screenshots to help explain your problem)


**Additional context**
(Add any other context about the problem here)


Issue comments:
<img width="1457" alt="Screenshot 2022-01-19 at 12 17 09" src="https://user-images.githubusercontent.com/702205/150102216-7a1370d8-4798-4071-bf1b-a6bf8017b0cf.png">

Btw team, I’ve noticed that the button in the screenshot seem to bring no effect when a task is failed, however, “clear messages” which is restart - does restart particular task. Can you check it please?
You can wait for reddit connector to fail someday (it sometimes fails) and try to click it.
![image](https://user-images.githubusercontent.com/94184844/150106690-d731af8a-4a52-402c-8e6d-374c2aede023.png)

@5hin0bi please create ticket for it
OK. I will test it once again first and if my proposal is correct I'll create a ticket.
@Motherships this is only rename Clear Messages button ticket. No need to do anything else. 

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx
index aa7f33bd690..1c48d16a0d9 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx
@@ -42,7 +42,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
         <div>
           <Dropdown label={<VerticalElipsisIcon />} right>
             <DropdownItem onClick={restartTaskHandler} danger>
-              <span>Clear Messages</span>
+              <span>Restart task</span>
             </DropdownItem>
           </Dropdown>
         </div>
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx
index 856e769b752..457d11b543f 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/ListItem.spec.tsx
@@ -1,73 +1,73 @@
 import React from 'react';
-import { create } from 'react-test-renderer';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { containerRendersView, TestRouterWrapper } from 'lib/testHelpers';
+import { render } from 'lib/testHelpers';
 import { clusterConnectConnectorTasksPath } from 'lib/paths';
-import ListItemContainer from 'components/Connect/Details/Tasks/ListItem/ListItemContainer';
 import ListItem, {
   ListItemProps,
 } from 'components/Connect/Details/Tasks/ListItem/ListItem';
 import { tasks } from 'redux/reducers/connect/__test__/fixtures';
-import { ThemeProvider } from 'styled-components';
-import theme from 'theme/theme';
+import { Route } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-describe('ListItem', () => {
-  containerRendersView(
-    <table>
-      <tbody>
-        <ListItemContainer task={tasks[0]} />
-      </tbody>
-    </table>,
-    ListItem
+const pathname = clusterConnectConnectorTasksPath(
+  ':clusterName',
+  ':connectName',
+  ':connectorName'
+);
+const clusterName = 'my-cluster';
+const connectName = 'my-connect';
+const connectorName = 'my-connector';
+const restartTask = jest.fn();
+const task = tasks[0];
+
+const renderComponent = (props: ListItemProps = { task, restartTask }) => {
+  return render(
+    <Route path={pathname}>
+      <table>
+        <tbody>
+          <ListItem {...props} />
+        </tbody>
+      </table>
+    </Route>,
+    {
+      pathname: clusterConnectConnectorTasksPath(
+        clusterName,
+        connectName,
+        connectorName
+      ),
+    }
   );
+};
 
-  describe('view', () => {
-    const pathname = clusterConnectConnectorTasksPath(
-      ':clusterName',
-      ':connectName',
-      ':connectorName'
-    );
-    const clusterName = 'my-cluster';
-    const connectName = 'my-connect';
-    const connectorName = 'my-connector';
+describe('ListItem', () => {
+  it('renders', () => {
+    renderComponent();
+    expect(screen.getByRole('row')).toBeInTheDocument();
+    expect(
+      screen.getByRole('cell', { name: task.status.id.toString() })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('cell', { name: task.status.workerId })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('cell', { name: task.status.state })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    expect(screen.getByRole('menuitem')).toBeInTheDocument();
+  });
+  it('calls restartTask on button click', () => {
+    renderComponent();
 
-    const setupWrapper = (props: Partial<ListItemProps> = {}) => (
-      <ThemeProvider theme={theme}>
-        <TestRouterWrapper
-          pathname={pathname}
-          urlParams={{ clusterName, connectName, connectorName }}
-        >
-          <table>
-            <tbody>
-              <ListItem task={tasks[0]} restartTask={jest.fn()} {...props} />
-            </tbody>
-          </table>
-        </TestRouterWrapper>
-      </ThemeProvider>
+    expect(restartTask).not.toBeCalled();
+    userEvent.click(screen.getByRole('button'));
+    userEvent.click(screen.getByRole('menuitem'));
+    expect(restartTask).toBeCalledTimes(1);
+    expect(restartTask).toHaveBeenCalledWith(
+      clusterName,
+      connectName,
+      connectorName,
+      task.id?.task
     );
-
-    it('matches snapshot', () => {
-      const wrapper = create(setupWrapper());
-      expect(wrapper.toJSON()).toMatchSnapshot();
-    });
-
-    it('calls restartTask on button click', async () => {
-      const restartTask = jest.fn();
-      const wrapper = mount(setupWrapper({ restartTask }));
-      await act(async () => {
-        wrapper.find('svg').simulate('click');
-      });
-      await act(async () => {
-        wrapper.find('span').simulate('click');
-      });
-      expect(restartTask).toHaveBeenCalledTimes(1);
-      expect(restartTask).toHaveBeenCalledWith(
-        clusterName,
-        connectName,
-        connectorName,
-        tasks[0].id?.task
-      );
-    });
   });
 });
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap
deleted file mode 100644
index 753ad3c7e2a..00000000000
--- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap
+++ /dev/null
@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListItem view matches snapshot 1`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c2 {
-  background: transparent;
-  border: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: 'center';
-  -webkit-box-align: 'center';
-  -ms-flex-align: 'center';
-  align-items: 'center';
-  -webkit-box-pack: 'center';
-  -webkit-justify-content: 'center';
-  -ms-flex-pack: 'center';
-  justify-content: 'center';
-}
-
-.c2:hover {
-  cursor: pointer;
-}
-
-.c3 {
-  color: #E51A1A;
-}
-
-.c0 {
-  border: none;
-  border-radius: 16px;
-  height: 20px;
-  line-height: 20px;
-  background-color: #FFEECC;
-  color: #171A1C;
-  font-size: 12px;
-  display: inline-block;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  text-align: center;
-}
-
-<table>
-  <tbody>
-    <tr>
-      <td>
-        1
-      </td>
-      <td>
-        kafka-connect0:8083
-      </td>
-      <td>
-        <p
-          className="c0"
-          color="yellow"
-        >
-          RUNNING
-        </p>
-      </td>
-      <td>
-        null
-      </td>
-      <td
-        style={
-          Object {
-            "width": "5%",
-          }
-        }
-      >
-        <div>
-          <div
-            className="dropdown is-right"
-          >
-            <div
-              className="c1"
-            >
-              <button
-                className="c2"
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  fill="none"
-                  height="16"
-                  viewBox="0 0 4 16"
-                  width="4"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-                    fill="#73848C"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              className="dropdown-menu"
-              id="dropdown-menu"
-              role="menu"
-            >
-              <div
-                className="dropdown-content has-text-left"
-              >
-                <a
-                  className="c3 dropdown-item is-link"
-                  href="#end"
-                  onClick={[Function]}
-                  role="menuitem"
-                  type="button"
-                >
-                  <span>
-                    Clear Messages
-                  </span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;


Test patch: