Skip to content

Commit c9c3c52

Browse files
taraepptaraepp
authored
[MDS-6395] Remove Skeleton from Permit Conditions (#3434)
* remove skeleton, track loading instead * some little fixes- the submit button, add in something I shouldn't have taken out, more loading indicators
1 parent fa1765c commit c9c3c52

18 files changed

+223
-102
lines changed

‎services/common/src/components/forms/RenderCancelButton.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ interface RenderCancelButtonProps {
3232
cancelFunction?: () => void | Promise<void>;
3333
cancelModalProps?: ModalFuncProps;
3434
iconButton?: boolean;
35+
disabled?: boolean;
36+
loading?: boolean;
3537
}
3638

3739
/**
@@ -48,7 +50,9 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
4850
buttonProps = { type: "default" },
4951
cancelFunction,
5052
cancelModalProps,
51-
iconButton = false
53+
iconButton = false,
54+
disabled = false,
55+
loading = false,
5256
}) => {
5357
const dispatch = useDispatch();
5458
const { formName, isModal, isEditMode } = useContext(FormContext);
@@ -72,7 +76,7 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
7276
const className = `${buttonProps?.className ?? ""} form-btn`;
7377

7478
return (
75-
<CoreButton aria-label="Cancel" {...buttonProps} className={className} type={buttonType} onClick={() => buttonCancelFunction()}>
79+
<CoreButton aria-label="Cancel" loading={loading} disabled={disabled} {...buttonProps} className={className} type={buttonType} onClick={() => buttonCancelFunction()}>
7680
{!iconButton && buttonLabel}
7781
</CoreButton>
7882
);

‎services/common/src/components/forms/RenderSubmitButton.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
2727
const submitting = useSelector(isSubmitting(formName));
2828
const isFormDirty = useSelector(isDirty(formName));
2929
const disabled = props.disabled || submitting || (!isFormDirty && disableOnClean);
30+
const loading = props.loading || (submitting && !iconButton);
3031
const className = `${buttonProps?.className ?? ""} form-btn`;
3132

3233
return (
@@ -35,7 +36,7 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
3536
<Button
3637
type="primary"
3738
disabled={disabled}
38-
loading={submitting || props.loading}
39+
loading={loading}
3940
htmlType="submit"
4041
icon={icon}
4142
aria-label="Submit"

‎services/core-web/src/components/Forms/reports/ReportPermitRequirementForm.tsx

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FC, useEffect } from "react";
22
import { Field } from "@mds/common/components/forms/form";
33
import { Button, Col, Row, Typography } from "antd";
4-
import { useDispatch } from "react-redux";
4+
import { useAppDispatch } from "@mds/common/redux/rootState";
55
import {
66
IMineReport,
77
IMineReportPermitRequirement,
@@ -27,6 +27,8 @@ import {
2727
updateMineReportPermitRequirement,
2828
} from "@mds/common/redux/slices/mineReportPermitRequirementSlice";
2929
import { deleteConfirmWrapper } from "@mds/common/components/common/ActionMenu";
30+
import { usePermitConditions } from "@/components/mine/Permit/PermitConditionsContext";
31+
3032

3133
interface ReportPermitRequirementProps {
3234
onSubmit?: (values: Partial<IMineReport>) => void | Promise<void>;
@@ -51,8 +53,9 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
5153
currentAmendment,
5254
mineGuid,
5355
}) => {
54-
const dispatch = useDispatch();
55-
const [isEditMode, setIsEditMode] = React.useState(modalView);
56+
const { loading } = usePermitConditions();
57+
const dispatch = useAppDispatch();
58+
const [isEditMode, setIsEditMode] = React.useState(modalView && canEditPermitConditions);
5659

5760
useEffect(() => {
5861
if (!canEditPermitConditions) {
@@ -62,7 +65,6 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
6265

6366
const handleDeleteReportRequirement = async ({ mine_report_permit_requirement_id }) => {
6467
deleteConfirmWrapper("Report Requirement", async () => {
65-
// @ts-ignore
6668
await dispatch(deleteMineReportPermitRequirement({ mineGuid, mine_report_permit_requirement_id })).then(async () => {
6769
await refreshData();
6870
setIsEditMode(false);
@@ -71,7 +73,6 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
7173
};
7274

7375
const handleEditReportRequirement = async (values) => {
74-
// @ts-ignore
7576
await dispatch(updateMineReportPermitRequirement({ mineGuid, values })).then(async () => {
7677
await refreshData();
7778
setIsEditMode(false);
@@ -121,6 +122,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
121122
label="Report Type"
122123
validate={[maxLength(255)]}
123124
component={RenderField}
125+
disabled={loading}
124126
/>
125127
</Col>
126128
<Col span={12}>
@@ -136,6 +138,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
136138
label: key,
137139
};
138140
})}
141+
disabled={loading}
139142
/>
140143
</Col>
141144
<Col md={12} sm={24}>
@@ -145,6 +148,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
145148
placeholder="Select date"
146149
formatViewDate
147150
component={RenderDate}
151+
disabled={loading}
148152
/>
149153
</Col>
150154
<Col md={12} sm={24}>
@@ -173,6 +177,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
173177
isVertical
174178
validate={[requiredRadioButton]}
175179
component={RenderRadioButtons}
180+
disabled={loading}
176181
/>
177182
)}
178183
</Col>
@@ -201,13 +206,15 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
201206
label: REPORT_MINISTRY_RECIPIENT_HASH[key],
202207
};
203208
})}
209+
disabled={loading}
204210
/>
205211
)}
206212
</Col>
207213
</Row>
208214
<Row justify={isEditMode && mineReportPermitRequirement ? "space-between" : "end"}>
209215
{(isEditMode && mineReportPermitRequirement) && (
210216
<LinkButton
217+
disabled={loading}
211218
className="report-delete-button"
212219
onClick={() => handleDeleteReportRequirement(mineReportPermitRequirement)}
213220
>
@@ -218,14 +225,16 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
218225
{isEditMode ? (
219226
<div>
220227
<RenderCancelButton
228+
loading={loading}
221229
cancelFunction={!modalView ? () => setIsEditMode(false) : undefined}
222230
/>
223-
<Button type="primary" htmlType="submit">
231+
<Button type="primary" htmlType="submit" loading={loading}>
224232
{mineReportPermitRequirement ? "Update" : "Add"} Report
225233
</Button>
226234
</div>
227235
) : (canEditPermitConditions &&
228236
<Button
237+
loading={loading}
229238
type="primary"
230239
onClick={(event) => {
231240
event.preventDefault();

‎services/core-web/src/components/mine/Permit/PermitConditionCategory.spec.tsx

+32-7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { render, fireEvent, screen } from "@testing-library/react";
33
import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
44
import { EditPermitConditionCategoryInline } from "./PermitConditionCategory";
5+
import { PermitConditionsProvider } from "./PermitConditionsContext";
56

67
const mockCategory = {
78
condition_category_code: "TEST-CAT",
@@ -22,13 +23,25 @@ const mockProps = {
2223
moveDown: jest.fn()
2324
};
2425

26+
const providerParams = {
27+
mineGuid: "mineGuid",
28+
permitGuid: "permitGuid",
29+
latestAmendment: null,
30+
previousAmendment: null,
31+
currentAmendment: null,
32+
loading: false,
33+
setLoading: jest.fn(),
34+
};
35+
2536
const initialState = {};
2637

2738
describe("PermitConditionCategory", () => {
2839
it("renders category title with count in view mode", () => {
2940
render(
3041
<ReduxWrapper initialState={initialState}>
31-
<EditPermitConditionCategoryInline {...mockProps} />
42+
<PermitConditionsProvider value={providerParams}>
43+
<EditPermitConditionCategoryInline {...mockProps} />
44+
</PermitConditionsProvider>
3245
</ReduxWrapper>
3346
);
3447

@@ -38,7 +51,9 @@ describe("PermitConditionCategory", () => {
3851
it("switches to edit mode on click", () => {
3952
render(
4053
<ReduxWrapper initialState={initialState}>
41-
<EditPermitConditionCategoryInline {...mockProps} />
54+
<PermitConditionsProvider value={providerParams}>
55+
<EditPermitConditionCategoryInline {...mockProps} />
56+
</PermitConditionsProvider>
4257
</ReduxWrapper>
4358
);
4459

@@ -49,7 +64,9 @@ describe("PermitConditionCategory", () => {
4964
it("calls moveUp when up arrow clicked", () => {
5065
render(
5166
<ReduxWrapper initialState={initialState}>
52-
<EditPermitConditionCategoryInline {...mockProps} />
67+
<PermitConditionsProvider value={providerParams}>
68+
<EditPermitConditionCategoryInline {...mockProps} />
69+
</PermitConditionsProvider>
5370
</ReduxWrapper>
5471
);
5572

@@ -63,7 +80,9 @@ describe("PermitConditionCategory", () => {
6380
it("calls moveDown when down arrow clicked", () => {
6481
render(
6582
<ReduxWrapper initialState={initialState}>
66-
<EditPermitConditionCategoryInline {...mockProps} />
83+
<PermitConditionsProvider value={providerParams}>
84+
<EditPermitConditionCategoryInline {...mockProps} />
85+
</PermitConditionsProvider>
6786
</ReduxWrapper>
6887
);
6988

@@ -77,7 +96,9 @@ describe("PermitConditionCategory", () => {
7796
it("disables delete button when condition count > 0", () => {
7897
render(
7998
<ReduxWrapper initialState={initialState}>
80-
<EditPermitConditionCategoryInline {...mockProps} conditionCount={1} />
99+
<PermitConditionsProvider value={providerParams}>
100+
<EditPermitConditionCategoryInline {...mockProps} conditionCount={1} />
101+
</PermitConditionsProvider>
81102
</ReduxWrapper>
82103
);
83104

@@ -90,7 +111,9 @@ describe("PermitConditionCategory", () => {
90111
it("enables delete button when condition count = 0", () => {
91112
render(
92113
<ReduxWrapper initialState={initialState}>
93-
<EditPermitConditionCategoryInline {...mockProps} conditionCount={0} />
114+
<PermitConditionsProvider value={providerParams}>
115+
<EditPermitConditionCategoryInline {...mockProps} conditionCount={0} />
116+
</PermitConditionsProvider>
94117
</ReduxWrapper>
95118
);
96119

@@ -110,7 +133,9 @@ describe("PermitConditionCategory", () => {
110133
it("submits form with updated values", async () => {
111134
render(
112135
<ReduxWrapper initialState={initialState}>
113-
<EditPermitConditionCategoryInline {...mockProps} />
136+
<PermitConditionsProvider value={providerParams}>
137+
<EditPermitConditionCategoryInline {...mockProps} />
138+
</PermitConditionsProvider>
114139
</ReduxWrapper>
115140
);
116141

‎services/core-web/src/components/mine/Permit/PermitConditionCategory.tsx

+19-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import PermitConditionCategorySelector from "./PermitConditionCategorySelector";
1212
import { required } from "@mds/common/redux/utils/Validate";
1313
import { useDispatch } from "react-redux";
1414
import { formatPermitConditionStep } from "@mds/common/utils/helpers";
15+
import { usePermitConditions } from "./PermitConditionsContext";
1516

1617
export interface IPermitConditionCategoryProps {
1718
canEdit: boolean;
@@ -28,6 +29,7 @@ export interface IPermitConditionCategoryProps {
2829
export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps> = ({ category, ...props }) => {
2930
const [isEditMode, setIsEditMode] = useState(false);
3031
const { condition_category_code } = category;
32+
const { loading } = usePermitConditions();
3133

3234
const dispatch = useDispatch();
3335
const formName = `${FORM.INLINE_EDIT_PERMIT_CONDITION_CATEGORY}}-${condition_category_code}`;
@@ -73,21 +75,33 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
7375
<FormWrapper scrollOnToggleEdit={false} name={formName} onSubmit={handleSubmit} initialValues={category} isEditMode={isEditMode}>
7476
<Row style={{ gap: '0.5em' }}>
7577
<Col flex-shrink="1" style={{ maxWidth: '40px' }}>
76-
<Field name="step" component={RenderField} required={true} validate={[required]} style={{ marginRight: 0, }} />
78+
<Field
79+
name="step"
80+
component={RenderField}
81+
required={true}
82+
validate={[required]}
83+
style={{ marginRight: 0, }}
84+
disabled={loading}
85+
/>
7786
</Col>
7887
<Col>
7988
<PermitConditionCategorySelector showLabel={false} />
8089
</Col>
8190
<Col flex="auto" style={{ display: 'flex', gap: '0.5em' }}>
8291
<Button
92+
disabled={loading}
8393
className="icon-button-container"
8494
style={{ marginRight: 0 }}
8595
onClick={cancel}
8696
type="primary"
8797
icon={<FontAwesomeIcon icon={faXmark} />}
8898
/>
8999

90-
<RenderSubmitButton buttonText="" buttonProps={{ "aria-label": "Confirm", className: "icon-button-container", style: { marginRight: 0, marginLeft: 0 }, icon: <FontAwesomeIcon icon={faCheck} /> }} />
100+
<RenderSubmitButton
101+
disabled={loading}
102+
icon={<FontAwesomeIcon icon={faCheck} />}
103+
buttonProps={{ "aria-label": "Confirm", className: "fa-icon-container", style: { marginRight: 0, marginLeft: 0 } }}
104+
/>
91105

92106
<Popconfirm
93107
disabled={props.conditionCount > 0}
@@ -103,14 +117,15 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
103117
cancelText="No"
104118
>
105119
<Button
120+
loading={loading}
106121
disabled={props.conditionCount > 0}
107122
danger={true}
108123
icon={<FontAwesomeIcon icon={faTrash} />}
109124
aria-label="Delete Category" />
110125
</Popconfirm>
111126

112127
<Button
113-
disabled={props.currentPosition <= 0}
128+
disabled={props.currentPosition <= 0 || loading}
114129
onClick={(event) => {
115130
event.stopPropagation();
116131
props.moveUp(category);
@@ -121,7 +136,7 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
121136
/>
122137
<Button
123138
style={{ marginLeft: 0 }}
124-
disabled={props.currentPosition >= props.categoryCount - 1}
139+
disabled={props.currentPosition >= props.categoryCount - 1 || loading}
125140
aria-label="Move Category Down"
126141
onClick={(event) => {
127142
event.stopPropagation();

‎services/core-web/src/components/mine/Permit/PermitConditionForm.spec.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ describe("PermitConditionForm", () => {
3737
latestAmendment: MOCK.PERMITS[0].permit_amendments[0],
3838
previousAmendment: MOCK.PERMITS[0].permit_amendments[1],
3939
currentAmendment: MOCK.PERMITS[0].permit_amendments[0],
40+
loading: false,
41+
setLoading: jest.fn()
4042
};
4143

4244
it("renders properly in edit mode", async () => {

0 commit comments

Comments
 (0)