[FIX] Typescript errors on Minespace-web (#3416)

* Fix all TS errors

* Fix ReportDetailsForm

* Update common components

* Fix bug

services/common/src/components/documents/DocumentCompression.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState, useRef, useEffect } from "react";
-import { useDispatch } from "react-redux";
 import { notification } from "antd";
 import CompressionNotificationProgressBar from "@mds/common/components/documents/CompressionNotificationProgressBar";
 import { MineDocument } from "@mds/common/models/documents/document";
@@ -9,6 +8,7 @@ import {
 } from "@mds/common/redux/actionCreators/documentActionCreator";
 import DocumentCompressionWarningModal from "./DocumentCompressionWarningModal";
 import DocumentCompressedDownloadModal from "./DocumentCompressedDownloadModal";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 interface DocumentCompressionProps {
   documentType?: string;
@@ -27,7 +27,7 @@ const DocumentCompression: FC<DocumentCompressionProps> = ({
   setCompressionInProgress,
   showDownloadWarning,
 }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const [isDownloadModalVisible, setDownloadModalVisible] = useState(false);
   const [compressionProgress, setCompressionProgress] = useState(0);
   const [isProgressBarVisible, setProgressBarVisible] = useState(false);
@@ -97,7 +97,7 @@ const DocumentCompression: FC<DocumentCompressionProps> = ({
           setCompressionInProgress?.(true);
           setProgressBarVisible(true);
           const poll = async () => {
-            const { data } = await dispatch(pollDocumentsCompressionProgress(taskId));
+            const { data } = dispatch(pollDocumentsCompressionProgress(taskId));
             if (data.progress) {
               setCompressionProgress(data.progress);
             }

services/common/src/components/documents/ReplaceDocumentModal.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useState } from "react";
 import { Field } from "@mds/common/components/forms/form";
-import { useDispatch } from "react-redux";
 import { Alert, Col, notification, Row, Typography } from "antd";
 import { MineDocument } from "@mds/common/models/documents/document";
 import { formatDate } from "@mds/common/redux/utils/helpers";
@@ -15,6 +14,7 @@ import { FORM } from "@mds/common/constants/forms";
 import { closeModal } from "@mds/common/redux/actions/modalActions";
 import RenderCancelButton from "../forms/RenderCancelButton";
 import RenderSubmitButton from "../forms/RenderSubmitButton";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 interface ReplaceDocumentModalProps {
   document: MineDocument;
@@ -23,7 +23,7 @@ interface ReplaceDocumentModalProps {
 }
 
 const ReplaceDocumentModal: FC<ReplaceDocumentModalProps> = (props) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { document, alertMessage } = props;
   const [versionGuid, setVersionGuid] = useState<string>();
   const [disableReplace, setDisableReplace] = useState<boolean>(true);

services/common/src/components/documents/spatial/AddSpatialDocumentsModal.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from "react";
 import { Link } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import FormWrapper from "../../forms/FormWrapper";
 import { change, Field, getFormValues, reset, touch } from "@mds/common/components/forms/form";
 import RenderFileUpload from "../../forms/RenderFileUpload";
@@ -14,6 +14,7 @@ import { createDocmanSpatialBundle } from "@mds/common/redux/slices/spatialDataS
 import { OTHER_SPATIAL, XML } from "@mds/common/constants/fileTypes";
 import { SPATIAL_DATA_STANDARDS_URL } from "@mds/common/constants/strings";
 import { MAX_DOCUMENT_NAME_LENGTHS } from "@mds/common/constants/enums";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 interface AddSpatialDocumentsModalProps {
   formName: string;
@@ -28,7 +29,7 @@ const AddSpatialDocumentsModal: FC<AddSpatialDocumentsModalProps> = ({
   uploadUrl,
   transformFile,
 }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const initialValues = useSelector(getFormValues(formName));
   const initialDocuments = initialValues[fieldName] ?? [];
   const modalFormName = `${formName}_${fieldName}`;

services/common/src/components/forms/RenderFileUpload.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext, useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import "filepond-polyfill";
 import { FilePond, registerPlugin } from "react-filepond";
 import { Form, notification, Popover, Switch } from "antd";
@@ -28,6 +28,7 @@ import { ENVIRONMENT } from "@mds/common/constants/environment";
 import { APPLICATION_OCTET_STREAM } from "@mds/common/constants/fileTypes";
 import { Feature } from "@mds/common/utils/featureFlag";
 import { SystemFlagEnum } from "@mds/common/constants/enums";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 registerPlugin(FilePondPluginFileValidateSize, FilePondPluginFileValidateType);
 
@@ -114,7 +115,7 @@ export const FileUpload: FC<FileUploadProps> = ({
   shouldAbortUpload,
 }) => {
   const system = useSelector(getSystemFlag);
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { isFeatureEnabled } = useFeatureFlag();
   const { isEditMode } = useContext(FormContext);
 

services/common/src/components/help/HelpGuide.tsx

@@ -32,13 +32,14 @@ import { cancelConfirmWrapper } from "../forms/RenderCancelButton";
 import { SystemFlagEnum } from "@mds/common/constants/enums";
 import { USER_ROLES } from "@mds/common/constants/environment";
 import { FORM } from "@mds/common/constants/forms";
+import { useAppDispatch, useAppSelector } from "@mds/common/redux/rootState";
 
 interface HelpGuideProps {
   helpKey: string;
 }
 
 export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const system: SystemFlagEnum = useSelector(getSystemFlag);
   const params = useParams<any>();
   const { tab, activeTab } = params;
@@ -49,11 +50,10 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
   const [open, setOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const canEditHelp = useSelector((state) => userHasRole(state, USER_ROLES.role_edit_helpdesk));
-  const helpGuide = useSelector(getHelpByKey(helpKey, pageTab)) ?? {};
+  const helpGuide = useAppSelector(getHelpByKey(helpKey, pageTab)) ?? {help_guid: null, help_key: helpKey, content: ""};
   const { help_guid, help_key } = helpGuide;
   const hasHelpGuide = Boolean(help_guid);
   const defaultGuide = help_key === EMPTY_HELP_KEY;
-  const { content = "" } = helpGuide ?? {};
   const [isLoaded, setIsLoaded] = useState(hasHelpGuide);
   const unformattedTitle = pageTab ?? helpKey;
   const title = formatSnakeCaseToSentenceCase(unformattedTitle);
@@ -142,15 +142,15 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
     return <Row justify={justify}>{buttons}</Row>;
   };
   const initialValues =
-    hasHelpGuide && !defaultGuide ? helpGuide : { help_key: helpKey, page_tab: pageTab };
+    hasHelpGuide && !defaultGuide ? helpGuide : { help_key: helpKey, page_tab: pageTab, content: "" };
   const mainContent = isEditMode ? (
     <HelpGuideForm
       initialValues={initialValues}
       handleSaveGuide={handleSaveGuide}
       pageTab={pageTab}
     />
   ) : (
-    parse(DOMPurify.sanitize(content))
+    parse(DOMPurify.sanitize(helpGuide.content))
   );
 
   return (

services/common/src/components/projectSummary/Agent.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { Field, change, getFormValues } from "@mds/common/components/forms/form";
 import { Col, Row, Typography, Alert } from "antd";
 import RenderField from "@mds/common/components/forms/RenderField";
@@ -29,9 +29,10 @@ import { IProjectSummaryForm } from "@mds/common/interfaces";
 import { ProjectSummaryFormComponentProps } from "./ProjectSummaryForm";
 import { FORM } from "@mds/common/constants/forms";
 import { COLOR } from "@mds/common/constants/styles";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 export const Agent: FC<ProjectSummaryFormComponentProps> = ({ fieldsDisabled }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const formValues = useSelector(getFormValues(FORM.ADD_EDIT_PROJECT_SUMMARY)) as IProjectSummaryForm;
   const { agent, is_agent = false } = formValues;
   const { party_type_code, address, credential_id } = agent ?? {};

services/common/src/components/projectSummary/AuthorizationsInvolved.tsx

@@ -55,9 +55,10 @@ import { ProjectSummaryFormComponentProps } from "./ProjectSummaryForm";
 import { areAuthEnvFieldsDisabled, areDocumentFieldsDisabled, isDocumentDeletionEnabled } from "../projects/projectUtils";
 import { removeDocumentFromProjectSummary } from "@mds/common/redux/actionCreators/projectActionCreator";
 import { PROJECT_SUMMARY_DOCUMENT_TYPE_CODE_STATE, ENVIRONMENTAL_MANAGMENT_ACT, WASTE_DISCHARGE_NEW_AUTHORIZATIONS_URL, WASTE_DISCHARGE_AMENDMENT_AUTHORIZATIONS_URL } from "@mds/common/constants/strings";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 const RenderEMAPermitCommonSections = ({ code, isAmendment, index, isDisabled }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const purposeLabel = isAmendment
     ? "Additional Amendment Request Information"
     : "Purpose of Application";

services/common/src/components/projectSummary/DocumentUpload.tsx

@@ -24,6 +24,7 @@ import { Feature } from "@mds/common/utils";
 import { PROJECT_SUMMARY_DOCUMENT_TYPE_CODE } from "@mds/common/constants/strings";
 import { FORM } from "@mds/common/constants/forms";
 import { ENVIRONMENT } from "@mds/common/constants/environment";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 const RenderOldDocuments = ({
   documents,
@@ -71,7 +72,7 @@ interface DocumentUploadProps {
 }
 
 export const DocumentUpload: FC<DocumentUploadProps> = ({ docFieldsDisabled, deleteEnabled }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const {
     spatial_documents = [],
     support_documents = [],

services/common/src/components/projectSummary/ProjectLinks.tsx

@@ -18,14 +18,15 @@ import { FormContext } from "../forms/FormWrapper";
 import { ProjectSummaryFormComponentProps } from "./ProjectSummaryForm";
 import { FORM } from "@mds/common/constants/forms";
 import { USER_ROLES } from "@mds/common/constants/environment";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 interface ProjectLinksProps extends ProjectSummaryFormComponentProps {
   viewProject: (record: ILinkedProject) => string;
   tableOnly?: boolean; // only show the table, no inputs
 }
 // outside of component to sneak past "hooks can't be rendered conditionally"
 const ProjectLinkInput = ({ unrelatedProjects = [], mineGuid, projectGuid }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const [currentSelection, setCurrentSelection] = useState([]);
   const formName = FORM.ADD_EDIT_PROJECT_SUMMARY;
   const fieldName = "linked-projects";

services/common/src/components/projects/ArchivedDocumentsSection.tsx

@@ -2,14 +2,14 @@ import React, { FC } from "react";
 import { Typography } from "antd";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 import { Feature } from "@mds/common/utils/featureFlag";
-import { MineDocument } from "@mds/common/models/documents/document";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
 import DocumentTable from "../documents/DocumentTable";
 import { renderCategoryColumn } from "../common/CoreTableCommonColumns";
 import { CATEGORY_CODE } from "@mds/common/constants/strings";
+import { IMineDocument } from "@mds/common/interfaces/mineDocument.interface";
 
 interface ArchivedDocumentsSectionProps {
-  documents: MineDocument[];
+  documents: IMineDocument[];
   titleLevel?: 1 | 2 | 3 | 4 | 5;
   href?: string;
   showCategory?: boolean;

services/common/src/components/reports/ReportDetailsForm.tsx

@@ -134,8 +134,7 @@ const ReportDetailsForm: FC<ReportDetailsFormProps> = ({
   const coreEditReportPermission = USER_ROLES.role_edit_reports;
   const coreViewAllPermission = USER_ROLES.role_view;
   const dispatch = useDispatch();
-  const formValues: IMineReportSubmission =
-    useSelector((state) => getFormValues(FORM.VIEW_EDIT_REPORT)(state)) ?? {};
+  const formValues = useSelector((state) => getFormValues(FORM.VIEW_EDIT_REPORT)(state) ?? {}) as IMineReportSubmission;
   const [mineManager, setMineManager] = useState<IParty>();
   const [mineManagerGuid, setMineManagerGuid] = useState<string>("");
 

services/common/src/components/reports/ReportGetStarted.tsx

@@ -164,7 +164,7 @@ const ReportGetStarted: FC<ReportGetStartedProps> = ({
   const dispatch = useDispatch();
   const { reportType } = useParams<{ reportType?: string }>();
   const system = useSelector(getSystemFlag);
-  const formValues = useSelector(getFormValues(FORM.VIEW_EDIT_REPORT));
+  const formValues = useSelector(getFormValues(FORM.VIEW_EDIT_REPORT)) as IMineReportSubmission;
   const [commonReportDefinitionOptions, setCommonReportDefinitionOptions] = useState([]);
   const mineReportDefinitionOptions = useSelector(getFormattedMineReportDefinitionOptions);
   const selectedReportDefinition: IMineReportDefinition = useSelector(

services/common/src/components/reports/ReportSteps.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Button, Col, Row, Steps, Typography } from "antd";
 import { Link, useHistory, useParams } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { reset } from "@mds/common/components/forms/form";
 import { IMine, IMineReportSubmission } from "@mds/common/interfaces";
 import ArrowLeftOutlined from "@ant-design/icons/ArrowLeftOutlined";
@@ -13,11 +13,12 @@ import { createReportSubmission } from "./reportSubmissionSlice";
 import { getSystemFlag } from "@mds/common/redux/selectors/authenticationSelectors";
 import { SystemFlagEnum } from "@mds/common/constants/enums";
 import { FORM } from "@mds/common/constants/forms";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 
 const ReportSteps = () => {
   const system = useSelector(getSystemFlag);
   const history = useHistory();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { mineGuid, reportType } = useParams<{ mineGuid: string; reportType: string }>();
   const [currentStep, setCurrentStep] = useState(0);

services/common/src/interfaces/helpGuide.interface.ts

@@ -1,7 +1,7 @@
 export interface HelpGuide {
   help_guid?: string;
   content: string;
-  system: string;
+  system?: string;
   page_tab?: string;
   help_key: string;
 }

services/common/src/interfaces/mineDocumentVersion.interface.ts

@@ -1,4 +1,5 @@
 export interface IMineDocumentVersion {
+  status: string;
   mine_document_guid: string;
   mine_document_version_guid: string;
   mine_guid: string;

services/common/src/interfaces/projects/createMajorMinesApplication.interface.ts

@@ -1,9 +1,6 @@
-import { IMajorMinesApplicationDocument, IMajorMinesApplication } from "@mds/common/interfaces";
+import { IMajorMinesApplication } from "@mds/common/interfaces";
 
 export interface ICreateMajorMinesApplication extends IMajorMinesApplication {
   mine_name: string;
   primary_contact: string;
-  primary_documents: Partial<IMajorMinesApplicationDocument>[];
-  spatial_documents?: Partial<IMajorMinesApplicationDocument>[];
-  supporting_documents?: Partial<IMajorMinesApplicationDocument>[];
 }

services/common/src/interfaces/tailingsStorageFacility/tailingsStorageFacility.interface.ts

@@ -33,3 +33,9 @@ export interface IEngineerOfRecord extends IPartyAppt {
   mine_party_acknowledgement_status: string;
   status?: string;
 }
+
+export interface ITailingsStorageFacilityForm{
+  engineer_of_record?: IEngineerOfRecord;
+  engineers_of_record?: IEngineerOfRecord[];
+  mine_tailings_storage_facility_guid: string;
+}

services/common/src/models/documents/document.ts

@@ -1,5 +1,5 @@
 import { USER_ROLES } from "@mds/common/constants/environment";
-import { IMineDocument } from "@mds/common/interfaces";
+import { IMineDocument, IMineDocumentVersion } from "@mds/common/interfaces";
 import { isFeatureEnabled, Feature } from "@mds/common/utils";
 
 export enum FileOperations {
@@ -90,7 +90,7 @@ export class MineDocument implements IMineDocument {
 
   public number_prev_versions: number;
 
-  public versions: MineDocumentVersion[]; // all previous file versions, not including latest
+  public versions: IMineDocumentVersion[]; // all previous file versions, not including latest
 
   public allowed_actions: FileOperations[];
 

services/common/src/tests/mocks/dataMocks.tsx

@@ -1817,7 +1817,8 @@ export const PERMITS: IPermit[] = [
               permit_condition_id: 1639,
               due_date_period_months: 12,
               initial_due_date: "2024-01-01",
-            },
+              condition_category_code: "HSC"
+            }
           },
           {
             permit_condition_id: 1646,

services/core-web/common/components/tailings/EngineerOfRecord.tsx

@@ -2,12 +2,17 @@ import { Alert, Button, Col, Empty, Popconfirm, Row, Typography } from "antd";
 import { change, ChangeAction, Field, getFormValues } from "@mds/common/components/forms/form";
 import React, { FC, useContext, useEffect, useState } from "react";
 import { closeModal, openModal } from "@mds/common/redux/actions/modalActions";
-import { IDocument, IMine, IMinePartyAppt } from "@mds/common/interfaces";
+import {
+  IDocument,
+  IMine,
+  IMinePartyAppt,
+  ITailingsStorageFacilityForm,
+} from "@mds/common/interfaces";
 
 import { MINE_PARTY_APPOINTMENT_DOCUMENTS } from "@mds/common/constants/API";
 import PlusCircleFilled from "@ant-design/icons/PlusCircleFilled";
 import { bindActionCreators } from "redux";
-import { connect, useSelector } from "react-redux";
+import { ConnectedProps, connect, useSelector } from "react-redux";
 import { downloadFileFromDocumentManager } from "@common/utils/actionlessNetworkCalls";
 import { getPartyRelationships } from "@mds/common/redux/selectors/partiesSelectors";
 import {
@@ -63,7 +68,7 @@ const columns = (LinkButton): ColumnsType<IDocument> => [
   },
 ];
 
-export const EngineerOfRecord: FC<EngineerOfRecordProps> = (props) => {
+export const EngineerOfRecord: FC<EngineerOfRecordProps & PropsFromRedux> = (props) => {
   const {
     mineGuid,
     uploadedFiles,
@@ -88,7 +93,9 @@ export const EngineerOfRecord: FC<EngineerOfRecordProps> = (props) => {
     isCore,
   } = useContext(TailingsContext);
 
-  const formValues = useSelector((state) => getFormValues(tsfFormName)(state));
+  const formValues = useSelector((state) =>
+    getFormValues(tsfFormName)(state)
+  ) as ITailingsStorageFacilityForm;
 
   const { LinkButton, ContactDetails } = components;
 
@@ -421,4 +428,7 @@ const mapStateToProps = (state) => ({
   mines: getMines(state),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(EngineerOfRecord);
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export default connector(EngineerOfRecord);