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

Fix broken topics' sandwich menu (#1829)

Browse source 
* 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>
This commit is contained in:
Arsen Simonyan 2022-04-21 02:09:40 +04:00 • committed by GitHub
parent c5234ce470
commit b406d1bba3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
kafka-ui-react-app/src/components/Topics/List/List.styled.ts
View file

@ -1,3 +1,4 @@
import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import styled, { css } from 'styled-components'; 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;
`;

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

@ -39,6 +39,7 @@ import {
TitleCell, TitleCell,
TopicSizeCell, TopicSizeCell,
} from './TopicsTableCells'; } from './TopicsTableCells';
import { ActionsTd } from './List.styled';
export interface TopicsListProps { export interface TopicsListProps {
areTopicsFetching: boolean; areTopicsFetching: boolean;
@ -350,8 +351,8 @@ const List: React.FC<TopicsListProps> = ({
/> />
<TableColumn <TableColumn
maxWidth="4%" maxWidth="4%"
className="topic-action-block"
cell={ActionsCell} cell={ActionsCell}
customTd={ActionsTd}
/> />
</SmartTable> </SmartTable>
</div> </div>

3
kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
View file

@ -36,11 +36,12 @@ interface TableColumnProps<T, TId extends IdType, OT = never> {
maxWidth?: string; maxWidth?: string;
className?: string; className?: string;
orderValue?: OT; orderValue?: OT;
customTd?: typeof S.Td;
} }
export const TableColumn = <T, TId extends IdType, OT = never>( export const TableColumn = <T, TId extends IdType, OT = never>(
// eslint-disable-next-line @typescript-eslint/no-unused-vars // 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 => { ): React.ReactElement => {
return <td />; return <td />;
}; };

29
kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
View file

@ -62,23 +62,24 @@ export const TableRow = <T, TId extends IdType, OT = never>({
if (!isColumnElement<T, TId>(child)) { if (!isColumnElement<T, TId>(child)) {
return 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 Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
const TdComponent = customTd || Td;
return Cell ? ( return (
<Td className={className} maxWidth={maxWidth}> <TdComponent maxWidth={maxWidth}>
<Cell {Cell ? (
tableState={tableState} <Cell
hovered={hovered} tableState={tableState}
rowIndex={index} hovered={hovered}
dataItem={dataItem} rowIndex={index}
/> dataItem={dataItem}
</Td> />
) : ( ) : (
<Td className={className} maxWidth={maxWidth}> field && propertyLookup(field, dataItem)
{field && propertyLookup(field, dataItem)} )}
</Td> </TdComponent>
); );
})} })}
</tr> </tr>