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

Place schedule information first and change color

Browse Source
This commit is contained in:
Thomas Heartman 2025-07-28 14:14:40 +02:00
parent 8258ffcabe
commit 6bb1982ee7
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.test.tsx
View File

@ -117,12 +117,12 @@ describe('changeRequestScheduleProps', () => {
status: 'pending' as const,
};
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
expect(title).toBe('Scheduled');
expect(color).toBe('warning');
expect(reason).toBeNull();
render(subtitle);
render(timeInfo);
screen.getByText('for');
const timeElement = screen.getByRole('time');
const datetime = timeElement.getAttribute('datetime');
@ -138,12 +138,12 @@ describe('changeRequestScheduleProps', () => {
failureReason: 'failure reason',
};
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
expect(title).toBe('Schedule failed');
expect(color).toBe('error');
expect(reason).toBeTruthy();
render(subtitle);
render(timeInfo);
screen.getByText('at');
const timeElement = screen.getByRole('time');
const datetime = timeElement.getAttribute('datetime');
@ -158,12 +158,12 @@ describe('changeRequestScheduleProps', () => {
reason: 'reason',
};
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
expect(title).toBe('Schedule suspended');
expect(color).toBe('grey');
expect(reason).toBeTruthy();
render(subtitle);
render(timeInfo);
screen.getByText('was');
const timeElement = screen.getByRole('time');
const datetime = timeElement.getAttribute('datetime');

35
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx
View File

@ -48,6 +48,7 @@ const StyledSubtitle = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
columnGap: '1ch',
}));
const StyledTimeline = styled(Timeline)(() => ({
@ -117,7 +118,12 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
{data.map((title, index) => {
const timestampComponent =
index <= activeIndex && timestamps?.[title] ? (
<Time dateTime={timestamps?.[title]} />
<Typography
component='span'
color='textSecondary'
>
<Time dateTime={timestamps?.[title]} />
</Typography>
) : undefined;
if (schedule && title === 'Scheduled') {
@ -165,7 +171,7 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
);
};
const Time = styled(({ dateTime, ...props }: { dateTime: string }) => {
const Time = ({ dateTime, ...props }: { dateTime: string }) => {
const { locationSettings } = useLocationSettings();
const displayTime = formatDateYMDHM(
new Date(dateTime || ''),
@ -176,10 +182,7 @@ const Time = styled(({ dateTime, ...props }: { dateTime: string }) => {
{displayTime}
</time>
);
})(({ theme }) => ({
color: theme.palette.text.secondary,
fontSize: theme.typography.body2.fontSize,
}));
};
const TimelineItem = ({
color,
@ -209,17 +212,17 @@ const TimelineItem = ({
};
export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
const Subtitle = ({ prefix }: { prefix: string }) => (
<>
const TimeInfo = ({ prefix }: { prefix: string }) => (
<Typography component='span'>
{prefix} <Time dateTime={schedule.scheduledAt} />
</>
</Typography>
);
switch (schedule.status) {
case 'suspended':
return {
title: 'Schedule suspended',
subtitle: <Subtitle prefix='was' />,
timeInfo: <TimeInfo prefix='was' />,
color: 'grey' as const,
reason: (
<HtmlTooltip title={schedule.reason} arrow>
@ -230,7 +233,7 @@ export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
case 'failed':
return {
title: 'Schedule failed',
subtitle: <Subtitle prefix='at' />,
timeInfo: <TimeInfo prefix='at' />,
color: 'error' as const,
reason: (
<HtmlTooltip
@ -246,7 +249,7 @@ export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
default:
return {
title: 'Scheduled',
subtitle: <Subtitle prefix='for' />,
timeInfo: <TimeInfo prefix='for' />,
color: 'warning' as const,
reason: null,
};
@ -260,7 +263,7 @@ const TimelineScheduleItem = ({
schedule: ChangeRequestSchedule;
timestamp: ReactNode;
}) => {
const { title, subtitle, color, reason } = getScheduleProps(schedule);
const { title, timeInfo, color, reason } = getScheduleProps(schedule);
return (
<MuiTimelineItem key={title}>
@ -270,13 +273,11 @@ const TimelineScheduleItem = ({
</TimelineSeparator>
<StyledTimelineContent>
{title}
{timestamp}
<StyledSubtitle>
<Typography color={'text.secondary'} sx={{ mr: 1 }}>
({subtitle})
</Typography>
{timeInfo}
{reason}
</StyledSubtitle>
{timestamp}
</StyledTimelineContent>
</MuiTimelineItem>
);