feat: show ActionsMenu on resource hover

src/components/molecules/NavigatorRowLabel/ActionsMenu.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Menu} from 'antd';
+import {K8sResource} from '@models/k8sresource';
+import {useAppDispatch} from '@redux/hooks';
+import {removeResource} from '@redux/reducers/main';
+
+const ActionsMenu = (props: {resource: K8sResource}) => {
+  const {resource} = props;
+  const dispatch = useAppDispatch();
+
+  const deleteResource = () => {
+    dispatch(removeResource(resource.id));
+  };
+
+  return (
+    <Menu>
+      <Menu.Item onClick={deleteResource} key="delete">
+        Delete
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default ActionsMenu;

src/components/molecules/NavigatorRowLabel/NavigatorRowLabel.tsx

@@ -1,8 +1,10 @@
 import React, {useState, useEffect, useContext, useCallback} from 'react';
-import {Popover, Typography, Divider} from 'antd';
+import {Popover, Typography, Divider, Dropdown} from 'antd';
 import styled from 'styled-components';
+import {useSelector} from 'react-redux';
 import Colors, {FontColors} from '@styles/Colors';
 import MonoIcon, {MonoIconTypes} from '@components/atoms/MonoIcon';
+import {MoreOutlined} from '@ant-design/icons';
 
 import AppContext from '@src/AppContext';
 import {NAVIGATOR_HEIGHT_OFFSET} from '@constants/constants';
@@ -14,6 +16,8 @@ import {ResourceMapType} from '@models/appstate';
 import {isOutgoingRef, isIncomingRef, isUnsatisfiedRef} from '@redux/services/resourceRefs';
 import {isUnsavedResource} from '@redux/services/resource';
 import ScrollIntoView from '@molecules/ScrollIntoView';
+import {isInPreviewModeSelector} from '@redux/selectors';
+import ActionsMenu from './ActionsMenu';
 
 const {Text} = Typography;
 
@@ -69,6 +73,10 @@ const StyledIconsContainer = styled.span`
   cursor: pointer;
 `;
 
+const StyledMenuToggle = styled.span`
+  margin-left: auto;
+`;
+
 const StyledSpan = styled.span<{isSelected: boolean; isHighlighted: boolean}>`
   cursor: pointer;
   ${props => {
@@ -218,6 +226,9 @@ const NavigatorRowLabel = (props: NavigatorRowLabelProps) => {
   const [resource, setResource] = useState<K8sResource>();
   const scrollContainer = React.useRef(null);
   const labelRef = React.useRef<HTMLSpanElement>(null);
+  const isInPreviewMode = useSelector(isInPreviewModeSelector);
+  const previewType = useAppSelector(state => state.main.previewType);
+  const [isHovered, setHovered] = useState<boolean>(false);
 
   const {windowSize} = useContext(AppContext);
   const navigatorHeight = windowSize.height - NAVIGATOR_HEIGHT_OFFSET;
@@ -281,7 +292,7 @@ const NavigatorRowLabel = (props: NavigatorRowLabelProps) => {
   }
 
   return (
-    <StyledLabelContainer>
+    <StyledLabelContainer onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
       {resource && resource.refs && hasIncomingRefs && (
         <Popover
           mouseEnterDelay={0.5}
@@ -350,6 +361,13 @@ const NavigatorRowLabel = (props: NavigatorRowLabelProps) => {
           </StyledIconsContainer>
         </Popover>
       )}
+      {isHovered && (!isInPreviewMode || (isInPreviewMode && previewType === 'cluster')) && (
+        <StyledMenuToggle>
+          <Dropdown overlay={<ActionsMenu resource={resource} />} trigger={['click']}>
+            <MoreOutlined />
+          </Dropdown>
+        </StyledMenuToggle>
+      )}
     </StyledLabelContainer>
   );
 };