Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-05-07 14:07:58 +02:00 committed by GitHub
parent 193c6274fc
commit 206d5ed121
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 67 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

@ -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 ? (
<StyledMetaDataContainer>
const addLinkButton = (
<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>
<PermissionButton
size='small'
startIcon={<AddIcon />}
permission={UPDATE_FEATURE}
projectId={project}
variant='text'
onClick={() => {
setShowAddLinkDialogue(true);
}}
>
Add parent flag
</PermissionButton>
<Button
size='small'
variant='text'
startIcon={<AddIcon />}
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>{addLinkButton}</div>
</>
);
const linksContent = (
<>
<StyledTitle>Resources</StyledTitle>
{renderLinkItems()}
<div>{addLinkButton}</div>
</>
);
return (
<>
<StyledMetaDataContainer>
{links.length === 0 ? emptyStateContent : linksContent}
</StyledMetaDataContainer>
<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>
</>
);
};