Merge branch 'release/pacific-spiny-lumpsucker' into feat/integrate-5…

…02-into-release-branch
bcgov · Jul 16, 2024 · f00dd20 · f00dd20
2 parents 668e479 + eb61a22
commit f00dd20
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 138 deletions.
diff --git a/backend/db/test-only-migrations/V23.0.0__CE-875.sql b/backend/db/test-only-migrations/V23.0.0__CE-875.sql
@@ -0,0 +1,5 @@
+update complaint
+set
+  geo_organization_unit_code = 'QUEENCHA'
+where
+  geo_organization_unit_code = 'DJNG';
diff --git a/backend/src/middleware/maps/automapper-entity-to-dto-maps.ts b/backend/src/middleware/maps/automapper-entity-to-dto-maps.ts
@@ -45,6 +45,10 @@ const cosGeoOrgUnitToOrganizationDtoMap = (mapper: Mapper) => {
       (destination) => destination.area,
       mapFrom((source) => source.area_code),
     ),
+    forMember(
+      (destination) => destination.areaName,
+      mapFrom((source) => source.area_name),
+    ),
     forMember(
       (destination) => destination.officeLocation,
       mapFrom((source) => source.office_location_code),

diff --git a/backend/src/v1/case_file/case_file.service.ts b/backend/src/v1/case_file/case_file.service.ts
@@ -150,7 +150,7 @@ export class CaseFileService {
       const caseFileDto = data.getCaseFileByLeadId as CaseFileDto;
       return caseFileDto;
     } else {
-      this.logger.error(`Case with complaint Id ${complaint_id} not found.`);
+      this.logger.debug(`Case with complaint Id ${complaint_id} not found.`);
       return null;
     }
   };

diff --git a/frontend/cypress.config.ts b/frontend/cypress.config.ts
@@ -33,4 +33,5 @@ export default defineConfig({
       keycloak_login_url: "https://logontest7.gov.bc.ca",
     },
   },
+  retries: 2,
 });
diff --git a/frontend/cypress/e2e/complaints-on-map-view.cy.ts b/frontend/cypress/e2e/complaints-on-map-view.cy.ts
@@ -126,11 +126,8 @@ describe("Complaints on map tests", () => {
       cy.get(".leaflet-popup").should("exist");
 
       if ("#hwcr-tab".includes(complaintTypes[index])) {
-        cy.get("div.hwcr-conflict-type").should("exist");
-        cy.get("div.hwcr-conflict-type").should("have.text", "Human Wildlife Conflict");
         cy.get("#popup-community-label").should("exist");
-        cy.get("#popup-community-label").should("have.text", "CommunityKelowna");
-        cy.get("div.hwcr-conflict-type").should("not.have.text", "Human Wildlife Conflicts");
+        cy.get("#popup-community-label").should("have.text", "Kelowna");
       }
 
       // click the "view details" button to navigate to the complaint

diff --git a/...nd/src/app/components/containers/complaints/list-items/allegation-complaint-list-item.tsx b/...nd/src/app/components/containers/complaints/list-items/allegation-complaint-list-item.tsx
@@ -15,7 +15,6 @@ type Props = {
 };
 
 export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
-  const areaCodes = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.AREA_CODES));
   const statusCodes = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.COMPLAINT_STATUS));
   const violationCodes = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.VIOLATIONS));
 
@@ -35,14 +34,9 @@ export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
     locationDetail,
     locationSummary,
     delegates,
-    organization: { area: locationCode, zone },
+    organization: { areaName: location, zone },
   } = complaint;
 
-  const getLocationName = (input: string): string => {
-    const code = areaCodes.find((item) => item.area === input);
-    return code.areaName;
-  };
-
   const getStatusDescription = (input: string): string => {
     const code = statusCodes.find((item) => item.complaintStatus === input);
     return code.longDescription;
@@ -88,8 +82,6 @@ export const AllegationComplaintListItem: FC<Props> = ({ type, complaint }) => {
   const reportedOnDateTime = formatDateTime(reportedOn.toString());
   const updatedOnDateTime = formatDateTime(updatedOn.toString());
 
-  const location = getLocationName(locationCode);
-
   const statusButtonClass = `badge ${applyStatusClass(status)}`;
 
   const inProgressFlag = isInProgress ? "In Progress" : "";

diff --git a/...tend/src/app/components/containers/complaints/list-items/wildlife-complaint-list-item.tsx b/...tend/src/app/components/containers/complaints/list-items/wildlife-complaint-list-item.tsx
@@ -14,7 +14,6 @@ type Props = {
 };
 
 export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
-  const areaCodes = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.AREA_CODES));
   const statusCodes = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.COMPLAINT_STATUS));
   const natureOfComplaints = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.NATURE_OF_COMPLAINT));
   const speciesCodes = useAppSelector(selectCodeTable(CODE_TABLE_TYPES.SPECIES));
@@ -35,14 +34,9 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
     locationDetail,
     locationSummary,
     delegates,
-    organization: { area: locationCode, zone },
+    organization: { areaName: location, zone },
   } = complaint;
 
-  const getLocationName = (input: string): string => {
-    const code = areaCodes.find((item) => item.area === input);
-    return code.areaName;
-  };
-
   const getStatusDescription = (input: string): string => {
     const code = statusCodes.find((item) => item.complaintStatus === input);
     return code.longDescription;
@@ -93,8 +87,6 @@ export const WildlifeComplaintListItem: FC<Props> = ({ type, complaint }) => {
   const natureCode = getNatureOfComplaint(natureOfComplaint);
   const species = getSpecies(speciesCode);
 
-  const location = getLocationName(locationCode);
-
   const statusButtonClass = `badge ${applyStatusClass(status)}`;
 
   const toggleExpand = () => {

diff --git a/frontend/src/app/components/mapping/complaint-summary-popup.tsx b/frontend/src/app/components/mapping/complaint-summary-popup.tsx
@@ -2,28 +2,20 @@ import { FC } from "react";
 import { selectComplaintDetails, selectComplaintHeader } from "../../store/reducers/complaints";
 import { useAppSelector } from "../../hooks/hooks";
 import { ComplaintDetails } from "../../types/complaints/details/complaint-details";
-import {
-  applyStatusClass,
-  formatDate,
-  formatTime,
-  getAvatarInitials,
-  getFirstInitialAndLastName,
-} from "../../common/methods";
-import COMPLAINT_TYPES, { complaintTypeToName } from "../../types/app/complaint-types";
-import { Button } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import { applyStatusClass, formatDate, getFirstInitialAndLastName } from "../../common/methods";
+import COMPLAINT_TYPES from "../../types/app/complaint-types";
+import { Badge, Button } from "react-bootstrap";
 import { Popup } from "react-leaflet";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 
 interface Props {
   complaint_identifier: string;
   complaintType: string;
 }
 
 export const ComplaintSummaryPopup: FC<Props> = ({ complaint_identifier, complaintType }) => {
-  const { officerAssigned, natureOfComplaint, species, violationType, loggedDate, lastUpdated, status } =
-    useAppSelector(selectComplaintHeader(complaintType));
+  const { officerAssigned, natureOfComplaint, species, violationType, loggedDate, status } = useAppSelector(
+    selectComplaintHeader(complaintType),
+  );
 
   const { violationInProgress, location, area } = useAppSelector(
     selectComplaintDetails(complaintType),
@@ -37,105 +29,61 @@ export const ComplaintSummaryPopup: FC<Props> = ({ complaint_identifier, complai
   return (
     <Popup
       keepInView={true}
-      className="map-comp-popup"
+      className="comp-map-popup"
     >
-      <div className="map-comp-summary-popup-container">
-        <div className="map-comp-summary-popup-details">
-          <div className="map-comp-popup-header-container">
-            <div className="map-comp-summary-popup-header">
-              <div className="complaint-identifier">{complaint_identifier}</div>
-              <div className="complaint-assignee">
-                <div
-                  data-initials-sm={getAvatarInitials(officerAssigned)}
-                  className={
-                    "Not Assigned" === officerAssigned ? "leaflet-popup-not-assigned" : "comp-orange-avatar-sm"
-                  }
-                >
-                  <span
-                    id="comp-details-assigned-officer-name-text-id"
-                    className="comp-padding-left-xs"
-                  >
-                    {officerAssigned}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="comp-complaint-info">
-              <div className="map-comp-summary-popup-subheading">
-                <div
-                  className={`comp-box-conflict-type ${
-                    renderHWCRSection ? "hwcr-conflict-type" : "allegation-conflict-type"
-                  }`}
-                >
-                  {complaintTypeToName(complaintType, true)}
-                </div>
-                {renderHWCRSection ? (
-                  <div className="comp-box-species-type">{species}</div>
-                ) : (
-                  violationInProgress && (
-                    <div
-                      id="comp-details-status-text-id"
-                      className="comp-box-violation-in-progress"
-                    >
-                      <FontAwesomeIcon
-                        id="violation-in-progress-icon"
-                        icon={faExclamationCircle}
-                      />
-                      {inProgressInd}
-                    </div>
-                  )
-                )}
-                <div
-                  id="comp-details-status-text-id"
-                  className={`badge ${applyStatusClass(status)}`}
-                >
-                  {status}
-                </div>
-              </div>
-            </div>
+      <div>
+        <div className="comp-map-popup-header">
+          <div className="comp-map-popup-header-title">
+            <h2>{complaint_identifier}</h2>
+            <Badge
+              id="comp-details-status-text-id"
+              className={`badge ${applyStatusClass(status)}`}
+            >
+              {status}
+            </Badge>
           </div>
-          <div className="map-comp-nature-of-complaint">{renderHWCRSection ? natureOfComplaint : violationType}</div>
-          <div className="map-comp-summary-popup-details-section">
-            <div className="comp-details-content">
+          <div className="comp-map-popup-header-meta">
+            {renderHWCRSection ? (
               <div>
-                <label>Logged</label>
-                <i className="bi bi-calendar comp-margin-right-xxs"></i>
-                {formatDate(loggedDate)}
-                <i className="bi bi-clock comp-margin-left-xxs comp-margin-right-xxs"></i>
-                {formatTime(loggedDate)}
-              </div>
-              <div id="popup-community-label">
-                <label>Community</label>
-                {area}
-              </div>
-              <div className="map-comp-popup-address">
-                <label>Location/Address</label>
-                <div>{location}</div>
+                <span className="comp-box-species-type">{species}</span> • <span>{natureOfComplaint}</span>
               </div>
+            ) : (
               <div>
-                <label>Last Updated</label>
-                {lastUpdated && (
-                  <>
-                    <i className="bi bi-calendar comp-margin-right-xxs"></i>
-                    {formatDate(lastUpdated)}
-                    <i className="bi bi-clock comp-margin-left-xxs comp-margin-right-xxs"></i>
-                    {formatTime(lastUpdated)}
-                  </>
-                )}
-                {!lastUpdated && <>Not Available</>}
+                {violationType} • {inProgressInd}
               </div>
-            </div>
+            )}
           </div>
         </div>
-        <Link to={`/complaint/${complaintType}/${complaint_identifier}`}>
+        <div className="comp-map-popup-details">
+          <dl>
+            <div>
+              <dt className="text-muted">Date Logged</dt>
+              <dd>{formatDate(loggedDate)}</dd>
+            </div>
+            <div>
+              <dt className="text-muted">Officer Assigned</dt>
+              <dd id="comp-details-assigned-officer-name-text-id">{getFirstInitialAndLastName(officerAssigned)}</dd>
+            </div>
+            <div>
+              <dt className="text-muted">Community</dt>
+              <dd id="popup-community-label">{area}</dd>
+            </div>
+            <div>
+              <dt className="text-muted">Location</dt>
+              <dd>{location}</dd>
+            </div>
+          </dl>
           <Button
-            id="view-complaint-details-button-id"
+            as="a"
             variant="primary"
+            size="sm"
+            className="comp-map-popup-details-btn"
+            id="view-complaint-details-button-id"
+            href={`/complaint/${complaintType}/${complaint_identifier}`}
           >
             View Details
           </Button>
-        </Link>
+        </div>
       </div>
     </Popup>
   );

diff --git a/frontend/src/app/types/app/complaints/complaint.ts b/frontend/src/app/types/app/complaints/complaint.ts
@@ -23,6 +23,7 @@ export interface Complaint {
   updatedBy: string;
   organization: {
     area: string;
+    areaName?: string;
     zone: string;
     region: string;
     officeLocation?: string;

diff --git a/frontend/src/assets/sass/maps.scss b/frontend/src/assets/sass/maps.scss
@@ -115,31 +115,70 @@
   visibility: visible;
 }
 
-/** Leaflet style updates **/
-
+// MAP POPUP
 .leaflet-popup-tip {
   display: none; /* Hide the default tip (pointer) */
 }
 
 .leaflet-popup-content-wrapper {
-  display: flex;
-  justify-content: center;
-  padding: 0px;
+  width: 360px;
+}
+
+.leaflet-popup-content {
+  width: auto !important;
+  margin: 12px;
+  font-size: 1rem;
 }
 
-.leaflet-popup-not-assigned {
-  margin-top: 5px;
+.comp-map-popup-header {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid $gray-300;
 }
 
-.leaflet-popup-content {
+.comp-map-popup-header-title {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto !important;
-  max-width: 100%;
-  margin: 24px !important;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 4px;
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  .badge {
+    margin-top: 2px;
+    line-height: normal;
+  }
 }
 
-.leaflet-popup-close-button {
-  display: none;
+.comp-map-popup-details {
+  font-size: 0.875rem;
+
+  dl div {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+
+    + div {
+      margin-top: 4px;
+    }
+
+    dt {
+      flex: 0 0 auto;
+      width: 8rem;
+      font-weight: 400;
+    }
+
+    dd {
+      margin-bottom: 0;
+    }
+  }
+
+  .btn {
+    color: #fff;
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,4 +33,5 @@ export default defineConfig({ @@
           keycloak_login_url: "https://logontest7.gov.bc.ca",
         },
       },
+      retries: 2,
     });