[MDS-6845] [Core] Permit-Search-Indicate-Multiple-Mine-Relationships (PR #2) (#3924)

* Update Permit Overview, so that associated mines are now shown and able to be navigated to. Updated backend model to support the new UI, updated unit tests for new code

* Switched to using CSS classes for styling, instead of linline

Author: alazar-aot

services/common/src/components/common/CommonPageHeader.spec.tsx

@@ -10,34 +10,56 @@ const initialState = {
   [MINES]: MOCK.MINES,
 };
 
+const defaultProps = {
+  entityType: "Llama",
+  entityLabel: "George",
+  mineGuid: MOCK.MINES.mineIds[0],
+  current_permittee: "Permit Holder",
+  breadCrumbs: [
+    { route: "https://example.com", text: "All Llamas" },
+    { route: "https://example.com/specific", text: "Specific Llamas" },
+  ],
+  tabProps: {
+    items: [{ key: "overview", label: "Overview", children: <div>Overview Content</div> }],
+    defaultActiveKey: "overview",
+  },
+};
+
 describe("CommonPageHeader", () => {
   it("renders properly", () => {
     const { container } = render(
       <ReduxWrapper initialState={initialState}>
         <BrowserRouter>
-          <CommonPageHeader
-            entityType="Llama"
-            entityLabel="George"
-            mineGuid={MOCK.MINES.mineIds[0]}
-            current_permittee="Permit Holder"
-            breadCrumbs={[
-              { route: "https://example.com", text: "All Llamas" },
-              { route: "https://example.com/specific", text: "Specific Llamas" },
-            ]}
-            tabProps={{
-              items: [
-                {
-                  key: "overview",
-                  label: "Overview",
-                  children: <div>Overview Content</div>,
-                },
-              ],
-              defaultActiveKey: "overview",
-            }}
-          />
+          <CommonPageHeader {...defaultProps} />
         </BrowserRouter>
       </ReduxWrapper>
     );
     expect(container).toMatchSnapshot();
   });
+
+  it("shows the additional mines button when additionalMines are provided", () => {
+    const additionalMines = [
+      { mine_guid: "abc-123", mine_name: "Mine Two" },
+      { mine_guid: "def-456", mine_name: "Mine Three" },
+    ];
+    const { getByRole } = render(
+      <ReduxWrapper initialState={initialState}>
+        <BrowserRouter>
+          <CommonPageHeader {...defaultProps} additionalMines={additionalMines} />
+        </BrowserRouter>
+      </ReduxWrapper>
+    );
+    expect(getByRole("button", { name: /show 2 more associated mines/i })).toBeInTheDocument();
+  });
+
+  it("does not show the additional mines button when no additionalMines are provided", () => {
+    const { queryByRole } = render(
+      <ReduxWrapper initialState={initialState}>
+        <BrowserRouter>
+          <CommonPageHeader {...defaultProps} />
+        </BrowserRouter>
+      </ReduxWrapper>
+    );
+    expect(queryByRole("button", { name: /more associated mines/i })).not.toBeInTheDocument();
+  });
 });

services/common/src/components/common/CommonPageHeader.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Col, Row, Tabs, TabsProps, Typography } from "antd";
+import { Col, Popover, Row, Tabs, TabsProps, Typography } from "antd";
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import CoreTag from "./CoreTag";
@@ -26,6 +26,7 @@ interface CommonPageHeaderProps {
   tabProps?: TabsProps;
   pageContent?: ReactNode;
   extraElement?: ReactNode;
+  additionalMines?: { mine_guid: string; mine_name: string }[];
 }
 
 const { Title, Text } = Typography;
@@ -39,6 +40,7 @@ const CommonPageHeader: FC<CommonPageHeaderProps> = ({
   tabProps,
   pageContent,
   extraElement,
+  additionalMines,
 }) => {
   const mine = useSelector(getMineById(mineGuid));
   const dispatch = useDispatch();
@@ -84,6 +86,45 @@ const CommonPageHeader: FC<CommonPageHeaderProps> = ({
                   icon={<FontAwesomeIcon icon={faLocationDot} />}
                   text={mine?.mine_name}
                   link={GLOBAL_ROUTES?.MINE_DASHBOARD.dynamicRoute(mineGuid)}
+                  suffix={
+                    additionalMines?.length > 0 ? (
+                      <Popover
+                        title="Associated Mines"
+                        overlayStyle={{ maxWidth: 360 }}
+                        overlayInnerStyle={{
+                          border: "1px solid #d9d9d9",
+                          borderRadius: 8,
+                          boxShadow: "0 6px 16px rgba(0,0,0,0.15)",
+                        }}
+                        content={
+                          <div>
+                            <Typography.Text type="secondary" className="tag-more-popover__description">
+                              This permit applies to multiple mine sites due to historical amendments or operational grouping.
+                            </Typography.Text>
+                            <div className="tag-more-popover__mines">
+                              {additionalMines.map((m) => (
+                                <div key={m.mine_guid} className="tag-more-popover__mine">
+                                  <CoreTag
+                                    icon={<FontAwesomeIcon icon={faLocationDot} />}
+                                    text={m.mine_name}
+                                    link={GLOBAL_ROUTES?.MINE_DASHBOARD.dynamicRoute(m.mine_guid)}
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        }
+                      >
+                        <button
+                          type="button"
+                          aria-label={`Show ${additionalMines.length} more associated mines`}
+                          className="tag-more-btn"
+                        >
+                          + {additionalMines.length} More
+                        </button>
+                      </Popover>
+                    ) : undefined
+                  }
                 />
               </Col>
               {current_permittee && (

services/common/src/components/common/CoreTag.tsx

@@ -6,9 +6,10 @@ interface TagProps {
   text: string;
   icon: ReactNode;
   link?: string;
+  suffix?: ReactNode;
 }
 
-const CoreTag: FC<TagProps> = ({ text, icon, link }) => {
+const CoreTag: FC<TagProps> = ({ text, icon, link, suffix }) => {
   const getText = () => {
     return link ? (
       <Link style={{ textDecoration: "none", color: "inherit" }} to={link}>
@@ -23,6 +24,7 @@ const CoreTag: FC<TagProps> = ({ text, icon, link }) => {
     <Row justify="space-between" align="middle" className="tag">
       {icon}
       <Typography.Text className="margin-medium--left">{getText()}</Typography.Text>
+      {suffix && <span className="margin-small--left">{suffix}</span>}
     </Row>
   );
 };

services/common/src/components/permits/ViewPermit.tsx

@@ -303,6 +303,9 @@ const ViewPermit: FC = () => {
     <ActionMenuButton actions={headerActions} />
   ) : null;
 
+  // filter out the mine already shown in the primary CoreTag (the one from the URL context)
+  const additionalMines = permit?.mine?.filter((m) => m.mine_guid !== id) ?? [];
+
   return (
     <div className="fixed-tabs-container permit-tabs-container">
       <CommonPageHeader
@@ -312,6 +315,7 @@ const ViewPermit: FC = () => {
         current_permittee={permit?.current_permittee ?? ""}
         breadCrumbs={[{ route: GLOBAL_ROUTES.MINE_PERMITS.dynamicRoute(id), text: "All Permits" }]}
         extraElement={headerActionComponent}
+        additionalMines={additionalMines}
         tabProps={{
           items: tabItems,
           defaultActiveKey: activeTab,

services/common/src/interfaces/permits/permit.interface.ts

@@ -24,6 +24,7 @@ export interface IPermit {
   site_properties: IMineType;
   permit_prefix: string;
   mine_guid?: string;
+  mine?: { mine_guid: string; mine_name: string; mine_no?: string }[];
   status_changed_timestamp?: string;
   update_user: string;
   update_timestamp: string;

services/core-api/app/api/mines/response_models.py

@@ -364,6 +364,7 @@ def format(self, value):
         'exemption_fee_status_note': fields.String,
         'site_properties': fields.List(fields.Nested(MINE_TYPE_MODEL)),
         'permit_prefix': fields.String,
+        'mine': fields.List(fields.Nested(BASIC_MINE_LIST), attribute='_all_mines'),
         'status_changed_timestamp': fields.DateTime,
         'update_user': fields.String,
         'update_timestamp': fields.String,

services/core-web/src/components/search/GlobalSearch/components/SearchResultItem.tsx

@@ -69,22 +69,26 @@ export const SearchResultItem: React.FC<SearchResultItemProps> = ({
               <Popover
                 content={
                   <>
-                    {item.result.mines.map((mine) => (
-                      <Link
-                        key={"mine-link-" + mine.mine_guid}
-                        to={router.MINE_GENERAL.dynamicRoute(mine.mine_guid)}>
-                        {mine.mine_name}
-                      </Link>
+                    {item.result.mines.map((mine, index) => (
+                      <React.Fragment key={"mine-link-" + mine.mine_guid}>
+                        {index > 0 && ", "}
+                        <Link
+                          to={router.MINE_GENERAL.dynamicRoute(mine.mine_guid)}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {mine.mine_name}
+                        </Link>
+                      </React.Fragment>
                     ))}
                   </>
                 }
               >
                 <button
                   type="button"
                   onClick={(e) => e.stopPropagation()}
-                  style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'inherit', font: 'inherit' }} // Strip all styling, keep as inline text
+                  style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: '#1890ff', font: 'inherit', textDecoration: 'underline' }} // Strip all styling, keep as inline text
                 >
-                  Associated with {item.result.mines.length} Mines
+                  • Associated with {item.result.mines.length} Mines
                 </button>
               </Popover>
             )}

services/core-web/src/styles/components/Tag.scss

@@ -14,4 +14,36 @@
     stroke: $primary-btn-color;
     color: $primary-btn-color;
   }
+}
+
+.tag-more-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  font-size: 0.85em;
+  white-space: nowrap;
+  text-decoration: underline;
+}
+
+.tag-more-popover {
+  &__description {
+    display: block;
+    font-size: 0.85em;
+    font-style: italic;
+    margin-bottom: 12px;
+  }
+
+  &__mines {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  &__mine {
+    display: inline-block;
+  }
 }

services/core-web/src/tests/components/common/CoreTag.spec.tsx

@@ -8,4 +8,11 @@ describe("CoreTag", () => {
     const { container } = render(<CoreTag icon={<CompanyIcon />} text="test" />);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("renders a suffix when provided", () => {
+    const { getByText } = render(
+      <CoreTag icon={<CompanyIcon />} text="test" suffix={<span>extra content</span>} />
+    );
+    expect(getByText("extra content")).toBeInTheDocument();
+  });
 });