mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-22 11:18:20 +02:00
4dd97b97f4
Adds a paginated table to the change request overview page and integrates it with the search API hook. The current implementation still has some rough edges to work out, but it's getting closer. There's no sort buttons in this implementation. I've got it working on the side, but TS is complaining about types not matching up, so I'm spinning that out to a separate PR. <img width="1808" height="1400" alt="image" src="https://github.com/user-attachments/assets/bdee97b7-ee2a-46c0-8460-a8b8e14d3c92" />
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
|
|
import { Link, styled, Typography } from '@mui/material';
|
|
import { Link as RouterLink, type LinkProps } from 'react-router-dom';
|
|
import { useProjectOverviewNameOrId } from 'hooks/api/getters/useProjectOverview/useProjectOverview';
|
|
|
|
type IGlobalChangeRequestTitleCellProps = {
|
|
value?: any;
|
|
row: { original: any };
|
|
};
|
|
|
|
const LinkContainer = styled('div')(({ theme }) => ({
|
|
color: theme.palette.text.secondary,
|
|
}));
|
|
|
|
const BaseLink = styled(({ children, ...props }: LinkProps) => (
|
|
<Link component={RouterLink} {...props}>
|
|
{children}
|
|
</Link>
|
|
))(({ theme }) => ({
|
|
textDecoration: 'none',
|
|
color: 'inherit',
|
|
':hover': {
|
|
textDecoration: 'underline',
|
|
},
|
|
}));
|
|
|
|
const ChangeRequestLink = styled(BaseLink)(({ theme }) => ({
|
|
color: theme.palette.primary.main,
|
|
fontWeight: 'bold',
|
|
}));
|
|
|
|
const UpdateText = styled(Typography)(({ theme }) => ({
|
|
color: theme.palette.text.secondary,
|
|
fontSize: theme.typography.body2.fontSize,
|
|
}));
|
|
|
|
export const GlobalChangeRequestTitleCell = ({
|
|
value,
|
|
row: { original },
|
|
}: IGlobalChangeRequestTitleCellProps) => {
|
|
const {
|
|
id,
|
|
title,
|
|
project,
|
|
features: featureChanges,
|
|
segments: segmentChanges,
|
|
} = original;
|
|
const projectName = useProjectOverviewNameOrId(project);
|
|
const totalChanges =
|
|
featureChanges?.length ?? 0 + segmentChanges?.length ?? 0;
|
|
const projectPath = `/projects/${project}`;
|
|
const crPath = `${projectPath}/change-requests/${id}`;
|
|
|
|
if (!value) {
|
|
return <TextCell />;
|
|
}
|
|
|
|
return (
|
|
<TextCell sx={{ minWidth: '300px' }}>
|
|
<LinkContainer>
|
|
<BaseLink to={projectPath}>{projectName}</BaseLink>
|
|
<span aria-hidden='true'> / </span>
|
|
<ChangeRequestLink to={crPath}>{title}</ChangeRequestLink>
|
|
</LinkContainer>
|
|
<UpdateText>
|
|
{`${totalChanges}`} {totalChanges === 1 ? `update` : 'updates'}
|
|
</UpdateText>
|
|
</TextCell>
|
|
);
|
|
};
|