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

Fix dropdown jump effect bug on mouse over in topics list (#1875)

Browse source 
* fix dropdown jump effect bug on mouse over in topics list

* fix isHidden condition
This commit is contained in:
Arsen Simonyan 2022-04-22 13:01:08 +04:00 • committed by GitHub
parent 4c76d07f04
commit 62f4778803
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,4 +24,5 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
export const ActionsTd = styled(Td)` export const ActionsTd = styled(Td)`
overflow: visible; overflow: visible;
width: 50px;
`; `;

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

@ -185,6 +185,8 @@ const List: React.FC<TopicsListProps> = ({
setRecreateTopicConfirmationVisible, setRecreateTopicConfirmationVisible,
] = React.useState(false); ] = React.useState(false);
const isHidden = internal || isReadOnly || !hovered;
const deleteTopicHandler = React.useCallback(() => { const deleteTopicHandler = React.useCallback(() => {
deleteTopic(clusterName, name); deleteTopic(clusterName, name);
}, [name]); }, [name]);
@ -200,8 +202,8 @@ const List: React.FC<TopicsListProps> = ({
return ( return (
<> <>
{!internal && !isReadOnly && hovered ? ( <div className="has-text-right">
<div className="has-text-right"> {!isHidden && (
<Dropdown label={<VerticalElipsisIcon />} right> <Dropdown label={<VerticalElipsisIcon />} right>
{cleanUpPolicy === CleanUpPolicy.DELETE && ( {cleanUpPolicy === CleanUpPolicy.DELETE && (
<DropdownItem onClick={clearTopicMessagesHandler} danger> <DropdownItem onClick={clearTopicMessagesHandler} danger>
@ -223,8 +225,8 @@ const List: React.FC<TopicsListProps> = ({
Recreate Topic Recreate Topic
</DropdownItem> </DropdownItem>
</Dropdown> </Dropdown>
</div> )}
) : null} </div>
<ConfirmationModal <ConfirmationModal
isOpen={isDeleteTopicConfirmationVisible} isOpen={isDeleteTopicConfirmationVisible}
onCancel={() => setDeleteTopicConfirmationVisible(false)} onCancel={() => setDeleteTopicConfirmationVisible(false)}