feat: release plan hover buttons (#9703)

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx

@@ -20,7 +20,20 @@ const StyledName = styled(StringTruncator)(({ theme }) => ({
     marginBottom: theme.spacing(0.5),
 }));
 
-const StyledCard = styled(Button)(({ theme }) => ({
+const CardContent = styled('div')(({ theme }) => ({
+    width: '100%',
+    transition: 'opacity 0.2s ease-in-out',
+}));
+
+const HoverButtonsContainer = styled('div')(({ theme }) => ({
+    position: 'absolute',
+    right: theme.spacing(2),
+    display: 'flex',
+    gap: theme.spacing(1),
+    opacity: 0,
+}));
+
+const StyledCard = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
@@ -35,8 +48,13 @@ const StyledCard = styled(Button)(({ theme }) => ({
     borderRadius: theme.spacing(1),
     textAlign: 'left',
     overflow: 'hidden',
-    '&:hover, &:focus': {
+    position: 'relative',
-        borderColor: theme.palette.primary.main,
+    [`&:hover ${CardContent}, &:focus-within ${CardContent}`]: {
+        opacity: 0.5,
+    },
+    [`&:hover ${HoverButtonsContainer}, &:focus-within ${HoverButtonsContainer}`]:
+        {
+            opacity: 1,
         },
 }));
 
@@ -50,16 +68,31 @@ const StyledTopRow = styled('div')(({ theme }) => ({
 interface IFeatureReleasePlanCardProps {
     template: IReleasePlanTemplate;
     onClick: () => void;
+    onPreviewClick?: (e: React.MouseEvent) => void;
 }
 
 export const FeatureReleasePlanCard = ({
     template: { name, description },
     onClick,
+    onPreviewClick,
 }: IFeatureReleasePlanCardProps) => {
     const Icon = getFeatureStrategyIcon('releasePlanTemplate');
 
+    const handleUseClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onClick();
+    };
+
+    const handlePreviewClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (onPreviewClick) {
+            onPreviewClick(e);
+        }
+    };
+
     return (
-        <StyledCard onClick={onClick}>
+        <StyledCard>
+            <CardContent>
                 <StyledTopRow>
                     <StyledIcon>
                         <Icon />
@@ -72,12 +105,32 @@ export const FeatureReleasePlanCard = ({
                     arrow
                     sx={{
                         fontSize: (theme) => theme.typography.caption.fontSize,
-                    fontWeight: (theme) => theme.typography.fontWeightRegular,
+                        fontWeight: (theme) =>
+                            theme.typography.fontWeightRegular,
                         width: '100%',
                     }}
                 >
                     {description}
                 </Truncator>
+            </CardContent>
+
+            <HoverButtonsContainer>
+                <Button
+                    variant='contained'
+                    size='small'
+                    onClick={handleUseClick}
+                    tabIndex={0}
+                >
+                    Use
+                </Button>
+                <Button
+                    variant='outlined'
+                    size='small'
+                    onClick={handlePreviewClick}
+                >
+                    Preview
+                </Button>
+            </HoverButtonsContainer>
         </StyledCard>
     );
 };