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 { 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>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user