diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index c814ff3264..65601f800b 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -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 = () => { /> + setShowScheduleChangeDialog(true) + } /> 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 = - ({ changeRequest }) => { + ({ changeRequest, onEditClick }) => { const theme = useTheme(); return ( @@ -80,7 +88,10 @@ export const ChangeRequestReviewStatus: FC = }} border={resolveBorder(changeRequest.state, theme)} > - + ); @@ -88,9 +99,13 @@ export const ChangeRequestReviewStatus: FC = 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 ( - + ); } @@ -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) => { Your timezone is {timezone} - + - + ); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/utils.ts b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/utils.ts index 5b39595de8..6dcbd1f788 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/utils.ts +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/utils.ts @@ -15,3 +15,7 @@ export const getBrowserTimezoneInHumanReadableUTCOffset = ( return `UTC${sign}${zeroPaddedHours}:${zeroPaddedMinutes}`; }; + +export const getBrowserTimezone = (): string => { + return Intl.DateTimeFormat().resolvedOptions().timeZone; +}; diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog.tsx index 039acb9467..4bae14d42d 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog.tsx @@ -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 = ); const [error, setError] = useState(undefined); - const timezone = getBrowserTimezoneInHumanReadableUTCOffset(); + const timezone = getBrowserTimezone(); return ( = primaryButtonText={primaryButtonText} secondaryButtonText='Cancel' open={open} - onClose={onClose} + onClose={() => onClose()} onClick={() => onConfirm(selectedDate)} permissionButton={