[FE] Fix consumers topic label position (#3383)

* change Consumers Topic lable position

* changed conditional padding row with typeScript

* removed table title style from theme, changed TableHeaderConsumerCell style

* changed consumers Table Header Cell and test cases

* refactor ListItem.spec.tsx

* removed data test id

---------

Co-authored-by: davitbejanyan <[email protected]>

Author: David-DB88

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -14,7 +14,6 @@ import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import groupBy from 'lodash/groupBy';
 import { Table } from 'components/common/table/Table/Table.styled';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import {
   deleteConsumerGroup,
@@ -27,6 +26,7 @@ import { Dropdown } from 'components/common/Dropdown';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import { Action, ResourceType } from 'generated-sources';
 import { ActionDropdownItem } from 'components/common/ActionComponent';
+import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 
 import ListItem from './ListItem';
 
@@ -137,7 +137,6 @@ const Details: React.FC = () => {
       <Table isFullwidth>
         <thead>
           <tr>
-            <TableHeaderCell> </TableHeaderCell>
             <TableHeaderCell title="Topic" />
             <TableHeaderCell title="Messages behind" />
           </tr>

kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.styled.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
-export const ToggleButton = styled.td`
-  padding: 8px 8px 8px 16px !important;
-  width: 30px;
+export const FlexWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;

kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx

@@ -8,7 +8,7 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 
 import TopicContents from './TopicContents/TopicContents';
-import { ToggleButton } from './ListItem.styled';
+import { FlexWrapper } from './ListItem.styled';
 
 interface Props {
   clusterName: ClusterName;
@@ -30,14 +30,16 @@ const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
   return (
     <>
       <tr>
-        <ToggleButton>
-          <IconButtonWrapper onClick={() => setIsOpen(!isOpen)} aria-hidden>
-            <MessageToggleIcon isOpen={isOpen} />
-          </IconButtonWrapper>
-        </ToggleButton>
-        <TableKeyLink>
-          <Link to={clusterTopicPath(clusterName, name)}>{name}</Link>
-        </TableKeyLink>
+        <td>
+          <FlexWrapper>
+            <IconButtonWrapper onClick={() => setIsOpen(!isOpen)} aria-hidden>
+              <MessageToggleIcon isOpen={isOpen} />
+            </IconButtonWrapper>
+            <TableKeyLink>
+              <Link to={clusterTopicPath(clusterName, name)}>{name}</Link>
+            </TableKeyLink>
+          </FlexWrapper>
+        </td>
         <td>{getTotalMessagesBehind()}</td>
       </tr>
       {isOpen && <TopicContents consumers={consumers} />}

kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx

@@ -64,7 +64,7 @@ describe('Details component', () => {
       expect(screen.getByText(groupId)).toBeInTheDocument();
 
       expect(screen.getByRole('table')).toBeInTheDocument();
-      expect(screen.getAllByRole('columnheader').length).toEqual(3);
+      expect(screen.getAllByRole('columnheader').length).toEqual(2);
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });

kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx

@@ -40,7 +40,9 @@ describe('ListItem', () => {
   });
 
   it('should renders list item with topic content open', async () => {
-    await userEvent.click(screen.getAllByRole('cell')[0].children[0]);
+    await userEvent.click(
+      screen.getByRole('cell', { name: 'cluster1' }).children[0].children[0]
+    );
     expect(screen.getByText('Consumer ID')).toBeInTheDocument();
   });
 });

kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts

@@ -18,6 +18,6 @@ const tableLinkMixin = css(
 `
 );
 
-export const TableKeyLink = styled.td`
+export const TableKeyLink = styled.div`
   ${tableLinkMixin}
 `;