Skip to content

[MDS-6395] Remove Skeleton from Permit Conditions #3434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 26, 2025
Merged

[MDS-6395] Remove Skeleton from Permit Conditions #3434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50bfba9
remove skeleton, track loading instead
taraepp Feb 25, 2025
2e549ac
some little fixes- the submit button, add in something I shouldn't ha…
taraepp Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions services/common/src/components/forms/RenderCancelButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ interface RenderCancelButtonProps {
cancelFunction?: () => void | Promise<void>;
cancelModalProps?: ModalFuncProps;
iconButton?: boolean;
disabled?: boolean;
loading?: boolean;
}

/**
Expand All @@ -48,7 +50,9 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
buttonProps = { type: "default" },
cancelFunction,
cancelModalProps,
iconButton = false
iconButton = false,
disabled = false,
loading = false,
}) => {
const dispatch = useDispatch();
const { formName, isModal, isEditMode } = useContext(FormContext);
Expand All @@ -72,7 +76,7 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
const className = `${buttonProps?.className ?? ""} form-btn`;

return (
<CoreButton aria-label="Cancel" {...buttonProps} className={className} type={buttonType} onClick={() => buttonCancelFunction()}>
<CoreButton aria-label="Cancel" loading={loading} disabled={disabled} {...buttonProps} className={className} type={buttonType} onClick={() => buttonCancelFunction()}>
{!iconButton && buttonLabel}
</CoreButton>
);
Expand Down
3 changes: 2 additions & 1 deletion services/common/src/components/forms/RenderSubmitButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
const submitting = useSelector(isSubmitting(formName));
const isFormDirty = useSelector(isDirty(formName));
const disabled = props.disabled || submitting || (!isFormDirty && disableOnClean);
const loading = props.loading || (submitting && !iconButton);
const className = `${buttonProps?.className ?? ""} form-btn`;

return (
Expand All @@ -35,7 +36,7 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
<Button
type="primary"
disabled={disabled}
loading={submitting || props.loading}
loading={loading}
htmlType="submit"
icon={icon}
aria-label="Submit"
Expand Down
21 changes: 15 additions & 6 deletions services/core-web/src/components/Forms/reports/ReportPermitRequirementForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC, useEffect } from "react";
import { Field } from "@mds/common/components/forms/form";
import { Button, Col, Row, Typography } from "antd";
import { useDispatch } from "react-redux";
import { useAppDispatch } from "@mds/common/redux/rootState";
import {
IMineReport,
IMineReportPermitRequirement,
Expand All @@ -27,6 +27,8 @@ import {
updateMineReportPermitRequirement,
} from "@mds/common/redux/slices/mineReportPermitRequirementSlice";
import { deleteConfirmWrapper } from "@mds/common/components/common/ActionMenu";
import { usePermitConditions } from "@/components/mine/Permit/PermitConditionsContext";


interface ReportPermitRequirementProps {
onSubmit?: (values: Partial<IMineReport>) => void | Promise<void>;
Expand All @@ -51,8 +53,9 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
currentAmendment,
mineGuid,
}) => {
const dispatch = useDispatch();
const [isEditMode, setIsEditMode] = React.useState(modalView);
const { loading } = usePermitConditions();
const dispatch = useAppDispatch();
const [isEditMode, setIsEditMode] = React.useState(modalView && canEditPermitConditions);

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

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

const handleEditReportRequirement = async (values) => {
// @ts-ignore
await dispatch(updateMineReportPermitRequirement({ mineGuid, values })).then(async () => {
await refreshData();
setIsEditMode(false);
Expand Down Expand Up @@ -121,6 +122,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
label="Report Type"
validate={[maxLength(255)]}
component={RenderField}
disabled={loading}
/>
</Col>
<Col span={12}>
Expand All @@ -136,6 +138,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
label: key,
};
})}
disabled={loading}
/>
</Col>
<Col md={12} sm={24}>
Expand All @@ -145,6 +148,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
placeholder="Select date"
formatViewDate
component={RenderDate}
disabled={loading}
/>
</Col>
<Col md={12} sm={24}>
Expand Down Expand Up @@ -173,6 +177,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
isVertical
validate={[requiredRadioButton]}
component={RenderRadioButtons}
disabled={loading}
/>
)}
</Col>
Expand Down Expand Up @@ -201,13 +206,15 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
label: REPORT_MINISTRY_RECIPIENT_HASH[key],
};
})}
disabled={loading}
/>
)}
</Col>
</Row>
<Row justify={isEditMode && mineReportPermitRequirement ? "space-between" : "end"}>
{(isEditMode && mineReportPermitRequirement) && (
<LinkButton
disabled={loading}
className="report-delete-button"
onClick={() => handleDeleteReportRequirement(mineReportPermitRequirement)}
>
Expand All @@ -218,14 +225,16 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
{isEditMode ? (
<div>
<RenderCancelButton
loading={loading}
cancelFunction={!modalView ? () => setIsEditMode(false) : undefined}
/>
<Button type="primary" htmlType="submit">
<Button type="primary" htmlType="submit" loading={loading}>
{mineReportPermitRequirement ? "Update" : "Add"} Report
</Button>
</div>
) : (canEditPermitConditions &&
<Button
loading={loading}
type="primary"
onClick={(event) => {
event.preventDefault();
Expand Down
39 changes: 32 additions & 7 deletions services/core-web/src/components/mine/Permit/PermitConditionCategory.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { render, fireEvent, screen } from "@testing-library/react";
import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
import { EditPermitConditionCategoryInline } from "./PermitConditionCategory";
import { PermitConditionsProvider } from "./PermitConditionsContext";

const mockCategory = {
condition_category_code: "TEST-CAT",
Expand All @@ -22,13 +23,25 @@ const mockProps = {
moveDown: jest.fn()
};

const providerParams = {
mineGuid: "mineGuid",
permitGuid: "permitGuid",
latestAmendment: null,
previousAmendment: null,
currentAmendment: null,
loading: false,
setLoading: jest.fn(),
};

const initialState = {};

describe("PermitConditionCategory", () => {
it("renders category title with count in view mode", () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand All @@ -38,7 +51,9 @@ describe("PermitConditionCategory", () => {
it("switches to edit mode on click", () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand All @@ -49,7 +64,9 @@ describe("PermitConditionCategory", () => {
it("calls moveUp when up arrow clicked", () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand All @@ -63,7 +80,9 @@ describe("PermitConditionCategory", () => {
it("calls moveDown when down arrow clicked", () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand All @@ -77,7 +96,9 @@ describe("PermitConditionCategory", () => {
it("disables delete button when condition count > 0", () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} conditionCount={1} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} conditionCount={1} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand All @@ -90,7 +111,9 @@ describe("PermitConditionCategory", () => {
it("enables delete button when condition count = 0", () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} conditionCount={0} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} conditionCount={0} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand All @@ -110,7 +133,9 @@ describe("PermitConditionCategory", () => {
it("submits form with updated values", async () => {
render(
<ReduxWrapper initialState={initialState}>
<EditPermitConditionCategoryInline {...mockProps} />
<PermitConditionsProvider value={providerParams}>
<EditPermitConditionCategoryInline {...mockProps} />
</PermitConditionsProvider>
</ReduxWrapper>
);

Expand Down
23 changes: 19 additions & 4 deletions services/core-web/src/components/mine/Permit/PermitConditionCategory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import PermitConditionCategorySelector from "./PermitConditionCategorySelector";
import { required } from "@mds/common/redux/utils/Validate";
import { useDispatch } from "react-redux";
import { formatPermitConditionStep } from "@mds/common/utils/helpers";
import { usePermitConditions } from "./PermitConditionsContext";

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

const dispatch = useDispatch();
const formName = `${FORM.INLINE_EDIT_PERMIT_CONDITION_CATEGORY}}-${condition_category_code}`;
Expand Down Expand Up @@ -73,21 +75,33 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
<FormWrapper scrollOnToggleEdit={false} name={formName} onSubmit={handleSubmit} initialValues={category} isEditMode={isEditMode}>
<Row style={{ gap: '0.5em' }}>
<Col flex-shrink="1" style={{ maxWidth: '40px' }}>
<Field name="step" component={RenderField} required={true} validate={[required]} style={{ marginRight: 0, }} />
<Field
name="step"
component={RenderField}
required={true}
validate={[required]}
style={{ marginRight: 0, }}
disabled={loading}
/>
</Col>
<Col>
<PermitConditionCategorySelector showLabel={false} />
</Col>
<Col flex="auto" style={{ display: 'flex', gap: '0.5em' }}>
<Button
disabled={loading}
className="icon-button-container"
style={{ marginRight: 0 }}
onClick={cancel}
type="primary"
icon={<FontAwesomeIcon icon={faXmark} />}
/>

<RenderSubmitButton buttonText="" buttonProps={{ "aria-label": "Confirm", className: "icon-button-container", style: { marginRight: 0, marginLeft: 0 }, icon: <FontAwesomeIcon icon={faCheck} /> }} />
<RenderSubmitButton
disabled={loading}
icon={<FontAwesomeIcon icon={faCheck} />}
buttonProps={{ "aria-label": "Confirm", className: "fa-icon-container", style: { marginRight: 0, marginLeft: 0 } }}
/>

<Popconfirm
disabled={props.conditionCount > 0}
Expand All @@ -103,14 +117,15 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
cancelText="No"
>
<Button
loading={loading}
disabled={props.conditionCount > 0}
danger={true}
icon={<FontAwesomeIcon icon={faTrash} />}
aria-label="Delete Category" />
</Popconfirm>

<Button
disabled={props.currentPosition <= 0}
disabled={props.currentPosition <= 0 || loading}
onClick={(event) => {
event.stopPropagation();
props.moveUp(category);
Expand All @@ -121,7 +136,7 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
/>
<Button
style={{ marginLeft: 0 }}
disabled={props.currentPosition >= props.categoryCount - 1}
disabled={props.currentPosition >= props.categoryCount - 1 || loading}
aria-label="Move Category Down"
onClick={(event) => {
event.stopPropagation();
Expand Down
2 changes: 2 additions & 0 deletions services/core-web/src/components/mine/Permit/PermitConditionForm.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ describe("PermitConditionForm", () => {
latestAmendment: MOCK.PERMITS[0].permit_amendments[0],
previousAmendment: MOCK.PERMITS[0].permit_amendments[1],
currentAmendment: MOCK.PERMITS[0].permit_amendments[0],
loading: false,
setLoading: jest.fn()
};

it("renders properly in edit mode", async () => {
Expand Down
Loading
Loading