From dac5a5e59659a2a99151c367904f236dc8f3ca98 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 7 May 2025 15:58:51 +0200
Subject: [PATCH] feat: delete link UI (#9923)

---
 .../FeatureOverviewMetaData/DependencyRow.tsx |  5 +-
 ...DependencyActions.tsx => ExtraActions.tsx} |  6 +-
 .../FeatureOverviewMetaData.tsx               | 76 ++++++++++++++-----
 .../useFeatureLinkApi/useFeatureLinkApi.ts    | 11 +++
 4 files changed, 73 insertions(+), 25 deletions(-)
 rename frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/{DependencyActions.tsx => ExtraActions.tsx} (96%)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx
index 596e70ebcc..cc3d4b0b88 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx
@@ -2,7 +2,7 @@ import { AddDependencyDialogue } from 'component/feature/Dependencies/AddDepende
 import type { IFeatureToggle } from 'interfaces/featureToggle';
 import { useState } from 'react';
 import { StyledLink } from '../FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/StyledRow';
-import { DependencyActions } from './DependencyActions';
+import { ExtraActions } from './ExtraActions';
 import { useDependentFeaturesApi } from 'hooks/api/actions/useDependentFeaturesApi/useDependentFeaturesApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { ChildrenTooltip } from './ChildrenTooltip';
@@ -143,7 +143,8 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
                             </Truncator>
                         </StyledLink>
                         {checkAccess(UPDATE_FEATURE_DEPENDENCY, environment) ? (
-                            <DependencyActions
+                            <ExtraActions
+                                capabilityId='dependency'
                                 feature={feature.name}
                                 onEdit={() => setShowDependencyDialogue(true)}
                                 onDelete={deleteDependency}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/ExtraActions.tsx
similarity index 96%
rename from frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx
rename to frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/ExtraActions.tsx
index b3742cac02..39b37b551a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/ExtraActions.tsx
@@ -27,17 +27,19 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
 }));
 
 interface IDependencyActionsProps {
+    capabilityId: string;
     feature: string;
     onEdit: () => void;
     onDelete: () => void;
 }
 
-export const DependencyActions = ({
+export const ExtraActions = ({
+    capabilityId,
     feature,
     onEdit,
     onDelete,
 }: IDependencyActionsProps) => {
-    const id = `dependency-${feature}-actions`;
+    const id = `${capabilityId}-${feature}-actions`;
     const menuId = `${id}-menu`;
 
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 0b6edd9403..eb58a8cae6 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -1,6 +1,7 @@
 import { type FC, useState } from 'react';
 import {
     List,
+    ListItem,
     ListItemButton,
     ListItemIcon,
     ListItemText,
@@ -32,6 +33,11 @@ import LinkIcon from '@mui/icons-material/Link';
 import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { AddLinkDialogue } from './AddLinkDialogue';
+import { useFeatureLinkApi } from 'hooks/api/actions/useFeatureLinkApi/useFeatureLinkApi';
+import useToast from 'hooks/useToast';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import { formatUnknownError } from 'utils/formatUnknownError';
+import { ExtraActions } from './ExtraActions';
 
 const StyledMetaDataContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
@@ -101,6 +107,9 @@ interface FeatureLinksProps {
 
 const FeatureLinks: FC<FeatureLinksProps> = ({ links, project, feature }) => {
     const [showAddLinkDialogue, setShowAddLinkDialogue] = useState(false);
+    const { deleteLink, loading } = useFeatureLinkApi(project, feature);
+    const { setToastData, setToastApiError } = useToast();
+    const { refetchFeature } = useFeature(project, feature);
 
     const addLinkButton = (
         <PermissionButton
@@ -118,29 +127,54 @@ const FeatureLinks: FC<FeatureLinksProps> = ({ links, project, feature }) => {
     const renderLinkItems = () => (
         <List>
             {links.map((link) => (
-                <ListItemButton
+                <ListItem
+                    secondaryAction={
+                        <ExtraActions
+                            capabilityId='link'
+                            feature={feature}
+                            onEdit={() => {}}
+                            onDelete={async () => {
+                                try {
+                                    await deleteLink(link.id);
+                                    setToastData({
+                                        text: 'Link removed',
+                                        type: 'success',
+                                    });
+                                    refetchFeature();
+                                } catch (error) {
+                                    setToastApiError(formatUnknownError(error));
+                                }
+                            }}
+                        />
+                    }
                     key={link.id}
-                    component='a'
-                    href={link.url}
-                    target='_blank'
-                    rel='noopener noreferrer'
+                    disablePadding
+                    dense
                 >
-                    <StyledListItemIcon>
-                        <LinkIcon color='primary' />
-                    </StyledListItemIcon>
-                    <ListItemText
-                        primary={link.title}
-                        secondary={link.url}
-                        secondaryTypographyProps={{
-                            sx: {
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                display: 'block',
-                            },
-                        }}
-                    />
-                </ListItemButton>
+                    <ListItemButton
+                        component='a'
+                        href={link.url}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        disableGutters
+                    >
+                        <StyledListItemIcon>
+                            <LinkIcon color='primary' />
+                        </StyledListItemIcon>
+                        <ListItemText
+                            primary={link.title}
+                            secondary={link.url}
+                            secondaryTypographyProps={{
+                                sx: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    display: 'block',
+                                },
+                            }}
+                        />
+                    </ListItemButton>
+                </ListItem>
             ))}
         </List>
     );
diff --git a/frontend/src/hooks/api/actions/useFeatureLinkApi/useFeatureLinkApi.ts b/frontend/src/hooks/api/actions/useFeatureLinkApi/useFeatureLinkApi.ts
index ff65a090d7..94e5cfd8c5 100644
--- a/frontend/src/hooks/api/actions/useFeatureLinkApi/useFeatureLinkApi.ts
+++ b/frontend/src/hooks/api/actions/useFeatureLinkApi/useFeatureLinkApi.ts
@@ -19,6 +19,16 @@ export const useFeatureLinkApi = (project: string, feature: string) => {
         await makeRequest(req.caller, req.id);
     };
 
+    const deleteLink = async (linkId: string) => {
+        const req = createRequest(
+            `/api/admin/projects/${project}/features/${feature}/link/${linkId}`,
+            {
+                method: 'DELETE',
+            },
+        );
+        await makeRequest(req.caller, req.id);
+    };
+
     const callbackDeps = [
         createRequest,
         makeRequest,
@@ -27,6 +37,7 @@ export const useFeatureLinkApi = (project: string, feature: string) => {
     ];
     return {
         addLink: useCallback(addLink, callbackDeps),
+        deleteLink: useCallback(deleteLink, callbackDeps),
         errors,
         loading,
     };