feat: shared add link dialogue for 2 paths (#9920)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -1,6 +1,5 @@
 import { type FC, useState } from 'react';
 import {
-    Button,
     List,
     ListItemButton,
     ListItemIcon,
@@ -94,15 +93,60 @@ type FeatureOverviewMetaDataProps = {
     onChange: () => void;
 };
 
-const FeatureLinks: FC<{
+interface FeatureLinksProps {
     links: FeatureLink[];
     project: string;
     feature: string;
-}> = ({ links, project, feature }) => {
+}
+
+const FeatureLinks: FC<FeatureLinksProps> = ({ links, project, feature }) => {
     const [showAddLinkDialogue, setShowAddLinkDialogue] = useState(false);
 
-    return links.length === 0 ? (
+    const addLinkButton = (
-        <StyledMetaDataContainer>
+        <PermissionButton
+            size='small'
+            startIcon={<AddIcon />}
+            permission={UPDATE_FEATURE}
+            projectId={project}
+            variant='text'
+            onClick={() => setShowAddLinkDialogue(true)}
+        >
+            Add link
+        </PermissionButton>
+    );
+
+    const renderLinkItems = () => (
+        <List>
+            {links.map((link) => (
+                <ListItemButton
+                    key={link.id}
+                    component='a'
+                    href={link.url}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                >
+                    <StyledListItemIcon>
+                        <LinkIcon color='primary' />
+                    </StyledListItemIcon>
+                    <ListItemText
+                        primary={link.title}
+                        secondary={link.url}
+                        secondaryTypographyProps={{
+                            sx: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                display: 'block',
+                            },
+                        }}
+                    />
+                </ListItemButton>
+            ))}
+        </List>
+    );
+
+    const emptyStateContent = (
+        <>
             <StyledTitle>
                 You can now add links{' '}
                 <Badge color='success' sx={{ ml: 1 }}>
@@ -113,76 +157,31 @@ const FeatureLinks: FC<{
                 Gather relevant links for external resources such as issue
                 trackers, code repositories or analytics tooling
             </StyledMetaDataItem>
-            <div>
+            <div>{addLinkButton}</div>
-                <PermissionButton
+        </>
-                    size='small'
+    );
-                    startIcon={<AddIcon />}
+
-                    permission={UPDATE_FEATURE}
+    const linksContent = (
-                    projectId={project}
+        <>
-                    variant='text'
+            <StyledTitle>Resources</StyledTitle>
-                    onClick={() => {
+            {renderLinkItems()}
-                        setShowAddLinkDialogue(true);
+            <div>{addLinkButton}</div>
-                    }}
+        </>
-                >
+    );
-                    Add parent flag
+
-                </PermissionButton>
+    return (
-                <Button
+        <>
-                    size='small'
+            <StyledMetaDataContainer>
-                    variant='text'
+                {links.length === 0 ? emptyStateContent : linksContent}
-                    startIcon={<AddIcon />}
+            </StyledMetaDataContainer>
-                    onClick={() => {}}
-                >
-                    Add link
-                </Button>
-            </div>
-        </StyledMetaDataContainer>
-    ) : (
-        <StyledMetaDataContainer>
-            <StyledTitle>Resources</StyledTitle>
-            <List>
-                {links.map((link) => (
-                    <ListItemButton
-                        component='a'
-                        href={link.url}
-                        target='_blank'
-                        rel='noopener noreferrer'
-                    >
-                        <StyledListItemIcon>
-                            <LinkIcon color='primary' />
-                        </StyledListItemIcon>
-                        <ListItemText
-                            primary={link.title}
-                            secondary={link.url}
-                            secondaryTypographyProps={{
-                                sx: {
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    display: 'block',
-                                },
-                            }}
-                        />
-                    </ListItemButton>
-                ))}
-            </List>
 
-            <div>
-                <Button
-                    size='small'
-                    variant='text'
-                    startIcon={<AddIcon />}
-                    onClick={() => setShowAddLinkDialogue(true)}
-                >
-                    Add link
-                </Button>
-            </div>
             <AddLinkDialogue
                 project={project}
                 featureId={feature}
                 showAddLinkDialogue={showAddLinkDialogue}
                 onClose={() => setShowAddLinkDialogue(false)}
             />
-        </StyledMetaDataContainer>
+        </>
     );
 };