From b406d1bba38ee002474df981002d0d2657f108cf Mon Sep 17 00:00:00 2001
From: Arsen Simonyan <103444767+simonyandev@users.noreply.github.com>
Date: Thu, 21 Apr 2022 02:09:40 +0400
Subject: [PATCH] Fix broken topics' sandwich menu (#1829)

* fix topic list invisible actions menu

* use styled component instead of inline styles

* remove unnecessary prop type

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
---
 .../src/components/Topics/List/List.styled.ts |  5 ++++
 .../src/components/Topics/List/List.tsx       |  3 +-
 .../common/SmartTable/TableColumn.tsx         |  3 +-
 .../components/common/SmartTable/TableRow.tsx | 29 ++++++++++---------
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
index a7c5bb328a..c8d4a14533 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts
@@ -1,3 +1,4 @@
+import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
@@ -20,3 +21,7 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
     }
   `
 );
+
+export const ActionsTd = styled(Td)`
+  overflow: visible;
+`;
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index dc22ac8104..6c4ec05b57 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -39,6 +39,7 @@ import {
   TitleCell,
   TopicSizeCell,
 } from './TopicsTableCells';
+import { ActionsTd } from './List.styled';
 
 export interface TopicsListProps {
   areTopicsFetching: boolean;
@@ -350,8 +351,8 @@ const List: React.FC<TopicsListProps> = ({
             />
             <TableColumn
               maxWidth="4%"
-              className="topic-action-block"
               cell={ActionsCell}
+              customTd={ActionsTd}
             />
           </SmartTable>
         </div>
diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
index c58c7d67b0..27f0339860 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
+++ b/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
@@ -36,11 +36,12 @@ interface TableColumnProps<T, TId extends IdType, OT = never> {
   maxWidth?: string;
   className?: string;
   orderValue?: OT;
+  customTd?: typeof S.Td;
 }
 
 export const TableColumn = <T, TId extends IdType, OT = never>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: React.PropsWithChildren<TableColumnProps<T, TId, OT>>
+  _props: React.PropsWithChildren<TableColumnProps<T, TId, OT>>
 ): React.ReactElement => {
   return <td />;
 };
diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
index 1a2785b170..446d52e46c 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
+++ b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
@@ -62,23 +62,24 @@ export const TableRow = <T, TId extends IdType, OT = never>({
         if (!isColumnElement<T, TId>(child)) {
           return child;
         }
-        const { cell, field, maxWidth, className } = child.props;
+        const { cell, field, maxWidth, customTd } = child.props;
 
         const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
+        const TdComponent = customTd || Td;
 
-        return Cell ? (
-          <Td className={className} maxWidth={maxWidth}>
-            <Cell
-              tableState={tableState}
-              hovered={hovered}
-              rowIndex={index}
-              dataItem={dataItem}
-            />
-          </Td>
-        ) : (
-          <Td className={className} maxWidth={maxWidth}>
-            {field && propertyLookup(field, dataItem)}
-          </Td>
+        return (
+          <TdComponent maxWidth={maxWidth}>
+            {Cell ? (
+              <Cell
+                tableState={tableState}
+                hovered={hovered}
+                rowIndex={index}
+                dataItem={dataItem}
+              />
+            ) : (
+              field && propertyLookup(field, dataItem)
+            )}
+          </TdComponent>
         );
       })}
     </tr>