Skip to content

Commit

Permalink
feat: add disabled state handling on slow network (#6165)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kwasniew
kwasniew committed Feb 8, 2024
1 parent bc7d4b8 commit 7e66a79
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 26 deletions.
3 changes: 3 additions & 0 deletions ...end/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx
View file
Expand Up @@ -13,10 +13,12 @@ interface IChangeRequestDialogueProps {
environment?: string;
showBanner?: boolean;
messageComponent: JSX.Element;
disabled?: boolean;
}

export const ChangeRequestDialogue: FC<IChangeRequestDialogueProps> = ({
isOpen,
disabled = false,
onConfirm,
onClose,
showBanner,
Expand All @@ -40,6 +42,7 @@ export const ChangeRequestDialogue: FC<IChangeRequestDialogueProps> = ({
open={isOpen}
primaryButtonText={primaryButtonText}
secondaryButtonText='Cancel'
disabledPrimaryButton={disabled}
onClick={onConfirm}
onClose={onClose}
title='Request changes'
Expand Down
58 changes: 45 additions & 13 deletions frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
View file
Expand Up @@ -97,13 +97,14 @@ export const ChangeRequestOverview: FC = () => {
projectId,
id,
);
const { changeState, addComment, loading } = useChangeRequestApi();
const { changeState, addComment } = useChangeRequestApi();
const { refetch: refetchChangeRequestOpen } =
usePendingChangeRequests(projectId);
const { setToastData, setToastApiError } = useToast();
const { isChangeRequestConfiguredForReview } =
useChangeRequestsEnabled(projectId);
const scheduleChangeRequests = useUiFlag('scheduledConfigurationChanges');
const [disabled, setDisabled] = useState(false);

if (!changeRequest) {
return null;
Expand All @@ -124,11 +125,12 @@ export const ChangeRequestOverview: FC = () => {

const onApplyChanges = async () => {
try {
setDisabled(true);
await changeState(projectId, Number(id), getCurrentState(), {
state: 'Applied',
});
setShowApplyScheduledDialog(false);
refetchChangeRequest();
await refetchChangeRequest();
refetchChangeRequestOpen();
setToastData({
type: 'success',
Expand All @@ -137,11 +139,14 @@ export const ChangeRequestOverview: FC = () => {
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
} finally {
setDisabled(false);
}
};

const onScheduleChangeRequest = async (scheduledDate: Date) => {
try {
setDisabled(true);
await changeState(projectId, Number(id), getCurrentState(), {
state: 'Scheduled',
scheduledAt: scheduledDate.toISOString(),
Expand All @@ -156,31 +161,37 @@ export const ChangeRequestOverview: FC = () => {
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
} finally {
setDisabled(false);
}
};

const onAddComment = async () => {
try {
setDisabled(true);
await addComment(projectId, id, commentText);
setCommentText('');
refetchChangeRequest();
await refetchChangeRequest();
setToastData({
type: 'success',
title: 'Success',
text: 'Comment added',
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
} finally {
setDisabled(false);
}
};

const onCancelChanges = async () => {
try {
setDisabled(true);
await changeState(projectId, Number(id), getCurrentState(), {
state: 'Cancelled',
});
setShowCancelDialog(false);
refetchChangeRequest();
await refetchChangeRequest();
refetchChangeRequestOpen();
setToastData({
type: 'success',
Expand All @@ -189,34 +200,41 @@ export const ChangeRequestOverview: FC = () => {
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
} finally {
setDisabled(false);
}
};

const onReject = async (comment?: string) => {
try {
setDisabled(true);
await changeState(projectId, Number(id), getCurrentState(), {
state: 'Rejected',
comment,
});
setShowRejectDialog(false);
await refetchChangeRequest();

setToastData({
type: 'success',
title: 'Success',
text: 'Changes rejected',
});
refetchChangeRequest();
refetchChangeRequestOpen();
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
} finally {
setDisabled(false);
}
};

const onApprove = async () => {
try {
setDisabled(true);
await changeState(projectId, Number(id), getCurrentState(), {
state: 'Approved',
});
refetchChangeRequest();
await refetchChangeRequest();
refetchChangeRequestOpen();
setToastData({
type: 'success',
Expand All @@ -225,6 +243,8 @@ export const ChangeRequestOverview: FC = () => {
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
} finally {
setDisabled(false);
}
};

Expand Down Expand Up @@ -313,7 +333,8 @@ export const ChangeRequestOverview: FC = () => {
disabled={
!allowChangeRequestActions ||
commentText.trim().length === 0 ||
commentText.trim().length > 1000
commentText.trim().length > 1000 ||
disabled
}
>
Comment
Expand Down Expand Up @@ -350,7 +371,10 @@ export const ChangeRequestOverview: FC = () => {
setShowRejectDialog(true)
}
onApprove={onApprove}
disabled={!allowChangeRequestActions}
disabled={
!allowChangeRequestActions ||
disabled
}
>
Review changes ({countOfChanges})
</ReviewButton>
Expand All @@ -366,7 +390,7 @@ export const ChangeRequestOverview: FC = () => {
onApply={onApplyChanges}
disabled={
!allowChangeRequestActions ||
loading
disabled
}
onSchedule={() =>
setShowScheduleChangeDialog(
Expand All @@ -390,7 +414,7 @@ export const ChangeRequestOverview: FC = () => {
}
disabled={
!allowChangeRequestActions ||
loading
disabled
}
>
Apply changes
Expand All @@ -411,7 +435,7 @@ export const ChangeRequestOverview: FC = () => {
}
disabled={
!allowChangeRequestActions ||
loading
disabled
}
onSchedule={() =>
setShowScheduleChangeDialog(true)
Expand Down Expand Up @@ -445,6 +469,7 @@ export const ChangeRequestOverview: FC = () => {
true,
)
}
disabled={disabled}
>
Reject changes
</StyledButton>
Expand All @@ -453,6 +478,7 @@ export const ChangeRequestOverview: FC = () => {
<StyledButton
variant='outlined'
onClick={onCancel}
disabled={disabled}
>
Cancel changes
</StyledButton>
Expand Down Expand Up @@ -485,6 +511,7 @@ export const ChangeRequestOverview: FC = () => {
open={showRejectDialog}
onConfirm={onReject}
onClose={onCancelReject}
disabled={disabled}
/>
<ConditionallyRender
condition={scheduleChangeRequests}
Expand All @@ -494,7 +521,9 @@ export const ChangeRequestOverview: FC = () => {
open={showScheduleChangesDialog}
onConfirm={onScheduleChangeRequest}
onClose={onScheduleChangeAbort}
disabled={!allowChangeRequestActions || loading}
disabled={
!allowChangeRequestActions || disabled
}
projectId={projectId}
environment={changeRequest.environment}
primaryButtonText={
Expand All @@ -514,7 +543,9 @@ export const ChangeRequestOverview: FC = () => {
onConfirm={onApplyChanges}
onClose={onApplyScheduledAbort}
scheduledTime={scheduledAt}
disabled={!allowChangeRequestActions || loading}
disabled={
!allowChangeRequestActions || disabled
}
projectId={projectId}
environment={changeRequest.environment}
/>
Expand All @@ -523,6 +554,7 @@ export const ChangeRequestOverview: FC = () => {
onConfirm={onReject}
onClose={onRejectScheduledAbort}
scheduledTime={scheduledAt}
disabled={disabled}
/>
</>
}
Expand Down
3 changes: 3 additions & 0 deletions ...angeRequest/ChangeRequestOverview/ChangeRequestRejectDialog/ChangeRequestRejectDialog.tsx
View file
Expand Up @@ -6,12 +6,14 @@ interface IChangeRequestDialogueProps {
open: boolean;
onConfirm: (comment?: string) => void;
onClose: () => void;
disabled?: boolean;
}

export const ChangeRequestRejectDialogue: FC<IChangeRequestDialogueProps> = ({
open,
onConfirm,
onClose,
disabled = false,
}) => {
const [commentText, setCommentText] = useState('');

Expand All @@ -21,6 +23,7 @@ export const ChangeRequestRejectDialogue: FC<IChangeRequestDialogueProps> = ({
primaryButtonText='Reject changes'
secondaryButtonText='Cancel'
onClick={() => onConfirm(commentText)}
disabledPrimaryButton={disabled}
onClose={onClose}
title='Reject changes'
fullWidth
Expand Down
2 changes: 2 additions & 0 deletions ...uest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ChangeRequestScheduledDialog.tsx
View file
Expand Up @@ -29,6 +29,7 @@ export const ChangeRequestScheduledDialog: FC<
onClose,
title,
primaryButtonText,
disabled,
message,
scheduledTime,
permissionButton,
Expand All @@ -39,6 +40,7 @@ export const ChangeRequestScheduledDialog: FC<
<Dialogue
title={title}
primaryButtonText={primaryButtonText}
disabledPrimaryButton={disabled}
secondaryButtonText='Cancel'
open={open}
onClose={onClose}
Expand Down
1 change: 1 addition & 0 deletions ...quest/ChangeRequestOverview/ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog.tsx
View file
Expand Up @@ -48,6 +48,7 @@ export const ScheduleChangeRequestDialog: FC<ScheduleChangeRequestDialogProps> =
<Dialogue
title={title}
primaryButtonText={primaryButtonText}
disabledPrimaryButton={disabled}
secondaryButtonText='Cancel'
open={open}
onClose={() => onClose()}
Expand Down
1 change: 1 addition & 0 deletions ...src/component/changeRequest/ChangeRequestOverview/MultiActionButton/MultiActionButton.tsx
View file
Expand Up @@ -102,6 +102,7 @@ export const MultiActionButton: FC<{
{actions.map(
({ label, onSelect, icon }) => (
<MenuItem
disabled={disabled}
onClick={onSelect}
key={`MenuItem-${label}`}
>
Expand Down
42 changes: 29 additions & 13 deletions .../changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
View file
Expand Up @@ -25,11 +25,17 @@ import { ChangeRequestTitle } from './ChangeRequestTitle';
import { UpdateCount } from 'component/changeRequest/UpdateCount';
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';

const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
onClick,
count,
}) => (
<Button sx={{ ml: 'auto' }} variant='contained' onClick={onClick}>
const SubmitChangeRequestButton: FC<{
onClick: () => void;
count: number;
disabled?: boolean;
}> = ({ onClick, count, disabled = false }) => (
<Button
sx={{ ml: 'auto' }}
variant='contained'
onClick={onClick}
disabled={disabled}
>
Submit change request ({count})
</Button>
);
Expand Down Expand Up @@ -66,11 +72,18 @@ export const EnvironmentChangeRequest: FC<{
const { user } = useAuthUser();
const [title, setTitle] = useState(environmentChangeRequest.title);
const { changeState } = useChangeRequestApi();
const sendToReview = async (project: string) =>
changeState(project, environmentChangeRequest.id, 'Draft', {
state: 'In review',
comment: commentText,
});
const [disabled, setDisabled] = useState(false);
const sendToReview = async (project: string) => {
setDisabled(true);
try {
await changeState(project, environmentChangeRequest.id, 'Draft', {
state: 'In review',
comment: commentText,
});
} catch (e) {
setDisabled(false);
}
};

return (
<Box key={environmentChangeRequest.id}>
Expand Down Expand Up @@ -152,14 +165,17 @@ export const EnvironmentChangeRequest: FC<{
count={changesCount(
environmentChangeRequest,
)}
disabled={disabled}
/>

<Button
sx={{ ml: 2 }}
variant='outlined'
onClick={() =>
onDiscard(environmentChangeRequest.id)
}
disabled={disabled}
onClick={() => {
setDisabled(true);
onDiscard(environmentChangeRequest.id);
}}
>
Discard changes
</Button>
Expand Down

0 comments on commit 7e66a79

Please sign in to comment.