1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +02:00

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

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

View File

@ -1,6 +1,5 @@
import { type FC, useState } from 'react'; import { type FC, useState } from 'react';
import { import {
Button,
List, List,
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
@ -94,54 +93,33 @@ type FeatureOverviewMetaDataProps = {
onChange: () => void; onChange: () => void;
}; };
const FeatureLinks: FC<{ interface FeatureLinksProps {
links: FeatureLink[]; links: FeatureLink[];
project: string; project: string;
feature: string; feature: string;
}> = ({ links, project, feature }) => { }
const FeatureLinks: FC<FeatureLinksProps> = ({ links, project, feature }) => {
const [showAddLinkDialogue, setShowAddLinkDialogue] = useState(false); const [showAddLinkDialogue, setShowAddLinkDialogue] = useState(false);
return links.length === 0 ? ( const addLinkButton = (
<StyledMetaDataContainer>
<StyledTitle>
You can now add links{' '}
<Badge color='success' sx={{ ml: 1 }}>
New
</Badge>
</StyledTitle>
<StyledMetaDataItem>
Gather relevant links for external resources such as issue
trackers, code repositories or analytics tooling
</StyledMetaDataItem>
<div>
<PermissionButton <PermissionButton
size='small' size='small'
startIcon={<AddIcon />} startIcon={<AddIcon />}
permission={UPDATE_FEATURE} permission={UPDATE_FEATURE}
projectId={project} projectId={project}
variant='text' variant='text'
onClick={() => { onClick={() => setShowAddLinkDialogue(true)}
setShowAddLinkDialogue(true);
}}
>
Add parent flag
</PermissionButton>
<Button
size='small'
variant='text'
startIcon={<AddIcon />}
onClick={() => {}}
> >
Add link Add link
</Button> </PermissionButton>
</div> );
</StyledMetaDataContainer>
) : ( const renderLinkItems = () => (
<StyledMetaDataContainer>
<StyledTitle>Resources</StyledTitle>
<List> <List>
{links.map((link) => ( {links.map((link) => (
<ListItemButton <ListItemButton
key={link.id}
component='a' component='a'
href={link.url} href={link.url}
target='_blank' target='_blank'
@ -165,24 +143,45 @@ const FeatureLinks: FC<{
</ListItemButton> </ListItemButton>
))} ))}
</List> </List>
);
const emptyStateContent = (
<>
<StyledTitle>
You can now add links{' '}
<Badge color='success' sx={{ ml: 1 }}>
New
</Badge>
</StyledTitle>
<StyledMetaDataItem>
Gather relevant links for external resources such as issue
trackers, code repositories or analytics tooling
</StyledMetaDataItem>
<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 <AddLinkDialogue
project={project} project={project}
featureId={feature} featureId={feature}
showAddLinkDialogue={showAddLinkDialogue} showAddLinkDialogue={showAddLinkDialogue}
onClose={() => setShowAddLinkDialogue(false)} onClose={() => setShowAddLinkDialogue(false)}
/> />
</StyledMetaDataContainer> </>
); );
}; };