[MDS-6042] permit details fix (#3196)

* fix UI issues. * update css. * fix displays and ui. * update snapshot tests
bcgov · Jul 26, 2024 · 8488702 · 8488702
1 parent eaa99ed
commit 8488702
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 223 deletions.
diff --git a/services/core-web/src/components/mine/Permit/MinePermitTable.tsx b/services/core-web/src/components/mine/Permit/MinePermitTable.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import { Button, Dropdown, Menu, Popconfirm } from "antd";
 import { Link, useHistory, useParams } from "react-router-dom";
-import { PlusOutlined, ReadOutlined, SafetyCertificateOutlined } from "@ant-design/icons";
+import {
+  PlusOutlined,
+  ReadOutlined,
+  SafetyCertificateOutlined,
+  EyeOutlined,
+} from "@ant-design/icons";
 import { useSelector } from "react-redux";
 import { Feature } from "@mds/common/index";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
@@ -340,8 +345,23 @@ export const MinePermitTable: React.FC<MinePermitTableProps> = ({
           ? record.permit.permit_guid
           : record.permit?.permit_amendment_guid;
         const items = [
-          {
+          isFeatureEnabled(Feature.DIGITIZED_PERMITS) && {
             key: "0",
+            label: (
+              <button
+                type="button"
+                className="full add-permit-dropdown-button"
+                onClick={() => history.push(VIEW_MINE_PERMIT.dynamicRoute(id, permitGuid))}
+              >
+                <div>
+                  <EyeOutlined className="padding-sm add-permit-dropdown-button-icon" />
+                  View
+                </div>
+              </button>
+            ),
+          },
+          {
+            key: "1",
             label: (
               <button
                 type="button"
@@ -356,7 +376,7 @@ export const MinePermitTable: React.FC<MinePermitTableProps> = ({
             ),
           },
           !text.hasAmalgamated && {
-            key: "1",
+            key: "2",
             label: (
               <button
                 type="button"
@@ -373,7 +393,7 @@ export const MinePermitTable: React.FC<MinePermitTableProps> = ({
             ),
           },
           {
-            key: "2",
+            key: "3",
             label: (
               <AuthorizationWrapper permission={Permission.EDIT_HISTORICAL_AMENDMENTS}>
                 <div className="custom-menu-item">
@@ -397,7 +417,7 @@ export const MinePermitTable: React.FC<MinePermitTableProps> = ({
             ),
           },
           {
-            key: "3",
+            key: "4",
             label: (
               <AuthorizationWrapper permission={Permission.EDIT_SECURITIES}>
                 <div className="custom-menu-item">
@@ -421,7 +441,7 @@ export const MinePermitTable: React.FC<MinePermitTableProps> = ({
             ),
           },
           {
-            key: "4",
+            key: "5",
             label: (
               <AuthorizationWrapper permission={Permission.EDIT_PERMITS}>
                 <div className="custom-menu-item">
@@ -442,20 +462,6 @@ export const MinePermitTable: React.FC<MinePermitTableProps> = ({
               </AuthorizationWrapper>
             ),
           },
-          isFeatureEnabled(Feature.DIGITIZED_PERMITS) && {
-            key: "5",
-            label: (
-              <div className="custom-menu-item">
-                <button
-                  type="button"
-                  className="full"
-                  onClick={() => history.push(VIEW_MINE_PERMIT.dynamicRoute(id, permitGuid))}
-                >
-                  View
-                </button>
-              </div>
-            ),
-          },
         ].filter(Boolean);
 
         const menu = <Menu items={items} />;

diff --git a/services/core-web/src/components/mine/Permit/ViewPermit.tsx b/services/core-web/src/components/mine/Permit/ViewPermit.tsx
@@ -1,16 +1,12 @@
 import React, { useEffect } from "react";
-import { Col, Row, Tabs, Typography } from "antd";
+import { Col, Row, Tabs, Typography, Tag } from "antd";
 import { Link, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { getPermitByGuid } from "@mds/common/redux/selectors/permitSelectors";
 import { IMine, IPermit } from "@mds/common";
-import { faLocationDot } from "@fortawesome/pro-light-svg-icons";
-import CoreTag from "@mds/common/components/common/CoreTag";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import CompanyIcon from "@mds/common/assets/icons/CompanyIcon";
 import ViewPermitOverview from "@/components/mine/Permit/ViewPermitOverview";
 import ViewPermitConditions from "@/components/mine/Permit/ViewPermitConditions";
-import ViewPermitReports from "@/components/mine/Permit/ViewPermitReports";
+
 import { fetchPermits } from "@mds/common/redux/actionCreators/permitActionCreator";
 import { getMineById } from "@mds/common/redux/selectors/mineSelectors";
 import * as routes from "@/constants/routes";
@@ -48,11 +44,6 @@ const ViewPermit = () => {
       label: "Permit Conditions",
       children: <ViewPermitConditions />,
     },
-    {
-      key: "3",
-      label: "Reports",
-      children: <ViewPermitReports />,
-    },
   ];
 
   return (
@@ -72,10 +63,10 @@ const ViewPermit = () => {
           </Title>
         </Col>
         <Col>
-          <CoreTag icon={<FontAwesomeIcon icon={faLocationDot} />} text={mine?.mine_name} />
+          <Tag>{mine?.mine_name}</Tag>
         </Col>
         <Col>
-          <CoreTag icon={<CompanyIcon />} text={permit?.current_permittee} />
+          <Tag>{permit?.current_permittee}</Tag>
         </Col>
       </Row>
       <Tabs items={tabItems} />

diff --git a/services/core-web/src/components/mine/Permit/ViewPermitOverview.tsx b/services/core-web/src/components/mine/Permit/ViewPermitOverview.tsx
@@ -154,7 +154,7 @@ const ViewPermitOverview = () => {
             <Row>
               <Col span={24}>
                 <Paragraph strong>Fee Exemption Note</Paragraph>
-                <Paragraph>{permit.exemption_fee_status_note ?? "-"}</Paragraph>
+                <Paragraph>{permit.exemption_fee_status_note ?? ""}</Paragraph>
               </Col>
             </Row>
             <Row>
@@ -174,14 +174,14 @@ const ViewPermitOverview = () => {
                 <Paragraph>
                   {latestAmendment.security_received_date
                     ? formatDate(latestAmendment.security_received_date)
-                    : "-"}
+                    : ""}
                 </Paragraph>
               </Col>
             </Row>
             <Row>
               <Col span={24}>
                 <Paragraph strong>Assessed Liability Adjustment</Paragraph>
-                <Paragraph>${latestAmendment.liability_adjustment ?? "-"}</Paragraph>
+                <Paragraph>${latestAmendment.liability_adjustment ?? ""}</Paragraph>
               </Col>
             </Row>
             <Divider />
@@ -233,7 +233,7 @@ const ViewPermitOverview = () => {
             <Row>
               <Col span={24}>
                 <Paragraph strong>Remaining Outstanding Liability Amount (if any)</Paragraph>
-                <Paragraph>{permit.remaining_static_liability ?? "-"}</Paragraph>
+                <Paragraph>{permit.remaining_static_liability ?? ""}</Paragraph>
               </Col>
             </Row>
             <Row justify="space-between">

diff --git a/services/core-web/src/styles/components/ViewPermit.scss b/services/core-web/src/styles/components/ViewPermit.scss
@@ -11,16 +11,20 @@
 
 .view-permits-content {
   background-color: #f9f9f9;
+  margin-top: 16px;
+  margin-bottom: 16px;
   margin-left: -20px;
   margin-right: -20px;
-  padding: 0 20px;
+  padding: 0 20px 16px;
   p {
     margin: 0;
   }
   .ant-row:nth-child(2) {
+    padding-top: 16px;
+    padding-bottom: 16px;
     background-color: #fff;
     > .ant-col:nth-child(1) {
-      border-right: 1px solid $non-textual-grey;
+      border-right: 1px solid $light-grey;
     }
     .ant-row {
       padding: 0;

diff --git a/services/core-web/src/tests/components/mine/Permit/MinePermitTable.spec.tsx b/services/core-web/src/tests/components/mine/Permit/MinePermitTable.spec.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import { shallow } from "enzyme";
 import { MinePermitTable } from "@/components/mine/Permit/MinePermitTable";
 import * as MOCK from "@/tests/mocks/dataMocks";
 import { render } from "@testing-library/react";
 import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
 import { BrowserRouter } from "react-router-dom";
-import ViewPermit from "@/components/mine/Permit/ViewPermit";
 
 const dispatchProps: any = {};
 const props: any = {};