mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
Fix/scheduled request UI (#5318)
Change timezone format Fixes a bug where the Edit button on hover being elongated Before: <img width="755" alt="Screenshot 2023-11-09 at 21 36 01" src="https://github.com/Unleash/unleash/assets/104830839/189f21d5-8a68-4d6b-b094-b518749a9b2f"> After: <img width="812" alt="Screenshot 2023-11-09 at 22 09 26" src="https://github.com/Unleash/unleash/assets/104830839/9056f995-bd2b-4353-8526-77160e49e990"> Adds the missed onClick to the edit button to show the dialog Fixes a bug with ScheduleChangesDialog onClose --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash
GitHub
parent
0b9e11629d
commit
180c0dceae
@ -219,7 +219,7 @@ export const ChangeRequestOverview: FC = () => {
|
||||
const onCancelAbort = () => setShowCancelDialog(false);
|
||||
const onCancelReject = () => setShowRejectDialog(false);
|
||||
const onApplyScheduledAbort = () => setShowApplyScheduledDialog(false);
|
||||
const onScheduleChangeAbort = () => setShowApplyScheduledDialog(false);
|
||||
const onScheduleChangeAbort = () => setShowScheduleChangeDialog(false);
|
||||
const onRejectScheduledAbort = () => setShowRejectScheduledDialog(false);
|
||||
|
||||
const isSelfReview =
|
||||
@ -286,6 +286,9 @@ export const ChangeRequestOverview: FC = () => {
|
||||
/>
|
||||
<ChangeRequestReviewStatus
|
||||
changeRequest={changeRequest}
|
||||
onEditClick={() =>
|
||||
setShowScheduleChangeDialog(true)
|
||||
}
|
||||
/>
|
||||
<StyledButtonBox>
|
||||
<ConditionallyRender
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import React, { FC } from 'react';
|
||||
import { Box, IconButton, Theme, Typography, useTheme } from '@mui/material';
|
||||
import {
|
||||
Box,
|
||||
IconButton,
|
||||
styled,
|
||||
Theme,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
|
||||
import {
|
||||
StyledOuterContainer,
|
||||
@ -19,10 +26,11 @@ import {
|
||||
ChangeRequestState,
|
||||
IChangeRequest,
|
||||
} from 'component/changeRequest/changeRequest.types';
|
||||
import { getBrowserTimezoneInHumanReadableUTCOffset } from './utils';
|
||||
import { getBrowserTimezone } from './utils';
|
||||
|
||||
interface ISuggestChangeReviewsStatusProps {
|
||||
changeRequest: IChangeRequest;
|
||||
onEditClick?: () => void;
|
||||
}
|
||||
const resolveBorder = (state: ChangeRequestState, theme: Theme) => {
|
||||
if (state === 'Approved' || state === 'Scheduled') {
|
||||
@ -58,7 +66,7 @@ const resolveIconColors = (state: ChangeRequestState, theme: Theme) => {
|
||||
};
|
||||
|
||||
export const ChangeRequestReviewStatus: FC<ISuggestChangeReviewsStatusProps> =
|
||||
({ changeRequest }) => {
|
||||
({ changeRequest, onEditClick }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<StyledOuterContainer>
|
||||
@ -80,7 +88,10 @@ export const ChangeRequestReviewStatus: FC<ISuggestChangeReviewsStatusProps> =
|
||||
}}
|
||||
border={resolveBorder(changeRequest.state, theme)}
|
||||
>
|
||||
<ResolveComponent changeRequest={changeRequest} />
|
||||
<ResolveComponent
|
||||
changeRequest={changeRequest}
|
||||
onEditClick={onEditClick}
|
||||
/>
|
||||
</StyledReviewStatusContainer>
|
||||
</StyledOuterContainer>
|
||||
);
|
||||
@ -88,9 +99,13 @@ export const ChangeRequestReviewStatus: FC<ISuggestChangeReviewsStatusProps> =
|
||||
|
||||
interface IResolveComponentProps {
|
||||
changeRequest: IChangeRequest;
|
||||
onEditClick?: () => void;
|
||||
}
|
||||
|
||||
const ResolveComponent = ({ changeRequest }: IResolveComponentProps) => {
|
||||
const ResolveComponent = ({
|
||||
changeRequest,
|
||||
onEditClick,
|
||||
}: IResolveComponentProps) => {
|
||||
const { state } = changeRequest;
|
||||
|
||||
if (!state) {
|
||||
@ -115,7 +130,10 @@ const ResolveComponent = ({ changeRequest }: IResolveComponentProps) => {
|
||||
|
||||
if (state === 'Scheduled') {
|
||||
return (
|
||||
<Scheduled scheduledDate={changeRequest.schedule?.scheduledAt} />
|
||||
<Scheduled
|
||||
scheduledDate={changeRequest.schedule?.scheduledAt}
|
||||
onEditClick={onEditClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -204,17 +222,23 @@ const Applied = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const StyledIconButton = styled(IconButton)({
|
||||
maxWidth: '32px',
|
||||
maxHeight: '32px',
|
||||
});
|
||||
|
||||
interface IScheduledProps {
|
||||
scheduledDate?: string;
|
||||
onEditClick?: () => any;
|
||||
}
|
||||
const Scheduled = ({ scheduledDate }: IScheduledProps) => {
|
||||
const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
if (!scheduledDate) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const timezone = getBrowserTimezoneInHumanReadableUTCOffset();
|
||||
const timezone = getBrowserTimezone();
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -243,9 +267,9 @@ const Scheduled = ({ scheduledDate }: IScheduledProps) => {
|
||||
<Typography>Your timezone is {timezone}</Typography>
|
||||
</Box>
|
||||
</StyledFlexAlignCenterBox>
|
||||
<IconButton>
|
||||
<StyledIconButton onClick={onEditClick}>
|
||||
<StyledEditIcon />
|
||||
</IconButton>
|
||||
</StyledIconButton>
|
||||
</StyledScheduledBox>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -15,3 +15,7 @@ export const getBrowserTimezoneInHumanReadableUTCOffset = (
|
||||
|
||||
return `UTC${sign}${zeroPaddedHours}:${zeroPaddedMinutes}`;
|
||||
};
|
||||
|
||||
export const getBrowserTimezone = (): string => {
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import { APPLY_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions';
|
||||
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
|
||||
import { DateTimePicker } from 'component/common/DateTimePicker/DateTimePicker';
|
||||
import { getBrowserTimezoneInHumanReadableUTCOffset } from '../ChangeRequestReviewStatus/utils';
|
||||
import { getBrowserTimezone } from '../ChangeRequestReviewStatus/utils';
|
||||
|
||||
export interface ScheduleChangeRequestDialogProps {
|
||||
title: string;
|
||||
@ -42,7 +42,7 @@ export const ScheduleChangeRequestDialog: FC<ScheduleChangeRequestDialogProps> =
|
||||
);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const timezone = getBrowserTimezoneInHumanReadableUTCOffset();
|
||||
const timezone = getBrowserTimezone();
|
||||
|
||||
return (
|
||||
<Dialogue
|
||||
@ -50,7 +50,7 @@ export const ScheduleChangeRequestDialog: FC<ScheduleChangeRequestDialogProps> =
|
||||
primaryButtonText={primaryButtonText}
|
||||
secondaryButtonText='Cancel'
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
onClose={() => onClose()}
|
||||
onClick={() => onConfirm(selectedDate)}
|
||||
permissionButton={
|
||||
<PermissionButton
|
||||
|
||||
@ -127,6 +127,8 @@ export const CHANGE_REQUEST_CANCELLED = 'change-request-cancelled' as const;
|
||||
export const CHANGE_REQUEST_SENT_TO_REVIEW =
|
||||
'change-request-sent-to-review' as const;
|
||||
export const CHANGE_REQUEST_APPLIED = 'change-request-applied' as const;
|
||||
export const SCHEDULED_CHANGE_REQUEST_APPLIED =
|
||||
'scheduled-change-request-applied' as const;
|
||||
export const CHANGE_REQUEST_SCHEDULED = 'change-request-scheduled' as const;
|
||||
|
||||
export const API_TOKEN_CREATED = 'api-token-created' as const;
|
||||
@ -248,6 +250,7 @@ export const IEventTypes = [
|
||||
CHANGE_REQUEST_CANCELLED,
|
||||
CHANGE_REQUEST_SENT_TO_REVIEW,
|
||||
CHANGE_REQUEST_APPLIED,
|
||||
SCHEDULED_CHANGE_REQUEST_APPLIED,
|
||||
CHANGE_REQUEST_SCHEDULED,
|
||||
API_TOKEN_CREATED,
|
||||
API_TOKEN_UPDATED,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user