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:
parent
193c6274fc
commit
206d5ed121
@ -1,6 +1,5 @@
|
||||
import { type FC, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
@ -94,54 +93,33 @@ 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>
|
||||
<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>
|
||||
const addLinkButton = (
|
||||
<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={() => {}}
|
||||
onClick={() => setShowAddLinkDialogue(true)}
|
||||
>
|
||||
Add link
|
||||
</Button>
|
||||
</div>
|
||||
</StyledMetaDataContainer>
|
||||
) : (
|
||||
<StyledMetaDataContainer>
|
||||
<StyledTitle>Resources</StyledTitle>
|
||||
</PermissionButton>
|
||||
);
|
||||
|
||||
const renderLinkItems = () => (
|
||||
<List>
|
||||
{links.map((link) => (
|
||||
<ListItemButton
|
||||
key={link.id}
|
||||
component='a'
|
||||
href={link.url}
|
||||
target='_blank'
|
||||
@ -165,24 +143,45 @@ const FeatureLinks: FC<{
|
||||
</ListItemButton>
|
||||
))}
|
||||
</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
|
||||
project={project}
|
||||
featureId={feature}
|
||||
showAddLinkDialogue={showAddLinkDialogue}
|
||||
onClose={() => setShowAddLinkDialogue(false)}
|
||||
/>
|
||||
</StyledMetaDataContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user