users to access a vulnerabilities edit page from the vuln dedicated page view (#52)

Author: gelluisaac

UI/src/features/pages/regular/vulnerabilities/vulnerability-card.tsx

@@ -4,14 +4,15 @@ import { Report } from "../../../../api/soroban-security-portal/models/report";
 import { ProtocolItem } from "../../../../api/soroban-security-portal/models/protocol";
 import { Vulnerability } from "../../../../api/soroban-security-portal/models/vulnerability";
 import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import { useNavigate } from 'react-router-dom';
 import { SeverityColors, useTheme } from "../../../../contexts/ThemeContext";
 import { MarkdownView } from "../../../../components/MarkdownView";
 import { Bookmark } from "@mui/icons-material";
 import { useBookmarks } from "../../../../contexts/BookmarkContext";
 import { BookmarkType } from "../../../../api/soroban-security-portal/models/bookmark";
-import { useAuth } from "react-oidc-context";
+import { useAppAuth } from "../../../../features/authentication/useAppAuth";
 
 interface VulnerabilityCardProps {
     selectedVulnerability: Vulnerability;
@@ -34,7 +35,7 @@ export const VulnerabilityCard: FC<VulnerabilityCardProps> = ({
 }) => {
     const { theme, themeMode } = useTheme();
     const navigate = useNavigate();
-    const auth = useAuth();
+    const { isAuthenticated, canEdit } = useAppAuth();
     const [modalOpened, setModalOpened] = useState(isModal);
     const { isBookmarked, toggleBookmark } = useBookmarks();
 
@@ -108,7 +109,7 @@ export const VulnerabilityCard: FC<VulnerabilityCardProps> = ({
                                     <Typography variant='h6' sx={{ fontWeight: 600, flexGrow: 1, textTransform: 'uppercase' }}>
                                         {selectedVulnerability.title}
                                     </Typography>
-                                    {auth.isAuthenticated && (
+                                    {isAuthenticated && (
                                     <IconButton
                                         size="large"
                                         onClick={() => toggleBookmark(selectedVulnerability.id, BookmarkType.Vulnerability)}
@@ -130,6 +131,18 @@ export const VulnerabilityCard: FC<VulnerabilityCardProps> = ({
                                     >
                                         <FullscreenIcon fontSize="inherit"/>
                                     </IconButton>
+                                    {canEdit && (
+                                        <IconButton
+                                            size="large"
+                                            title="Edit"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                navigate(`/admin/vulnerabilities/edit?vulnerabilityId=${selectedVulnerability.id}`);
+                                            }}
+                                        >
+                                            <EditIcon fontSize="inherit" />
+                                        </IconButton>
+                                    )}
                                     <IconButton
                                         onClick={handleCloseProfile}
                                         size="large"