Skip to content

[MDS-6781] - Improve MineSpace User Guidance #3882

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
matbusby-fw merged 2 commits into from
Apr 9, 2026
Merged

[MDS-6781] - Improve MineSpace User Guidance #3882

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
8a5e2b5
Added minespace help guide
Apr 8, 2026
fe475c7
fix broken snaps
Apr 8, 2026
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
31 changes: 19 additions & 12 deletions services/common/src/components/help/HelpGuide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,10 @@ import { useAppDispatch, useAppSelector } from "@mds/common/redux/rootState";

interface HelpGuideProps {
helpKey: string;
showText?: boolean;
}

export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey, showText = false }) => {
const dispatch = useAppDispatch();
const system: SystemFlagEnum = useSelector(getSystemFlag);
const params = useParams<any>();
Expand All @@ -50,7 +51,11 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
const [open, setOpen] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
const canEditHelp = useSelector(userHasRole(USER_ROLES.role_edit_helpdesk));
const helpGuide = useAppSelector(getHelpByKey(helpKey, pageTab)) ?? { help_guid: null, help_key: helpKey, content: "" };
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;
Expand All @@ -61,11 +66,14 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {

const cancelEdit = () => {
cancelConfirmWrapper(() => setIsEditMode(false), isFormDirty);
}
};

const showDrawer = () => setOpen(true);
const hideDrawer = () => {
cancelConfirmWrapper(() => { setIsEditMode(false); setOpen(false) }, isFormDirty);
cancelConfirmWrapper(() => {
setIsEditMode(false);
setOpen(false);
}, isFormDirty);
};

const handleFetchData = () => {
Expand Down Expand Up @@ -114,11 +122,7 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
{hasHelpGuide ? "Edit Help Guide" : "Create Help Guide"}
</Button>
);
const cancelEditButton = (
<Button onClick={cancelEdit}>
Cancel Edit
</Button>
);
const cancelEditButton = <Button onClick={cancelEdit}>Cancel Edit</Button>;
const submitButton = (
<Button type="primary" onClick={triggerSubmit}>
Publish Help Guide
Expand All @@ -142,7 +146,9 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
return <Row justify={justify}>{buttons}</Row>;
};
const initialValues =
hasHelpGuide && !defaultGuide ? helpGuide : { help_key: helpKey, page_tab: pageTab, content: "" };
hasHelpGuide && !defaultGuide
? helpGuide
: { help_key: helpKey, page_tab: pageTab, content: "" };
const mainContent = isEditMode ? (
<HelpGuideForm
initialValues={initialValues}
Expand All @@ -163,6 +169,7 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
type="text"
>
<FontAwesomeIcon icon={faQuestionCircle} />
{showText && <span className="margin-small--left">Help</span>}
</Button>
<Drawer
placement="right"
Expand Down Expand Up @@ -192,7 +199,7 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
);
};

const HelpGuide: FC = () => {
const HelpGuide: FC<{ showText?: boolean }> = ({ showText = false }) => {
const dispatch = useDispatch();
const system: SystemFlagEnum = useSelector(getSystemFlag);
const authenticated = useSelector(isAuthenticated);
Expand All @@ -215,7 +222,7 @@ const HelpGuide: FC = () => {
const { route = "", helpKey = "" } = routeData as any;
return (
<Route key={routeName} exact={true} path={route}>
{helpKey && <HelpGuideContent helpKey={helpKey} />}
{helpKey && <HelpGuideContent helpKey={helpKey} showText={showText} />}
</Route>
);
})}
Expand Down
Binary file added services/minespace-web/src/assets/downloads/MineSpace_User_Guide_2026.pdf
View file
Open in desktop
Binary file not shown.
8 changes: 8 additions & 0 deletions services/minespace-web/src/components/dashboard/mine/MineDashboardRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Variances from "./variances/Variances";
import Incidents from "./incidents/Incidents";
import NoticesOfDeparture from "@/components/dashboard/mine/noticeOfDeparture/NoticeOfDeparture";
import MineUserAccessPage from "./users/MineUserAccessPage";
import { MINESPACE_USER_GUIDE } from "@/constants/assets";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faHouse,
Expand All @@ -24,6 +25,7 @@ import {
faHouseWater,
faUserMagnifyingGlass,
faUsers,
faCircleQuestion,
} from "@fortawesome/pro-light-svg-icons";

export const getMineDashboardRoutes = (showApplications, reportsBadgeCount?: number) =>
Expand Down Expand Up @@ -97,6 +99,12 @@ export const getMineDashboardRoutes = (showApplications, reportsBadgeCount?: num
icon: <FontAwesomeIcon icon={faHouseWater} style={{ width: "24px" }} />,
component: Tailings,
},
{
key: "help-guide",
label: "How to use MineSpace",
icon: <FontAwesomeIcon icon={faCircleQuestion} style={{ width: "24px" }} />,
onClick: () => window.open(MINESPACE_USER_GUIDE, "_blank"),
},
{
key: "user-access",
label: "User Access",
Expand Down
2 changes: 1 addition & 1 deletion services/minespace-web/src/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const Header: FC<HeaderProps> = ({ xs, lg, xl, xxl, isAuthenticated = fal
<div className="inline-flex items-center">
<HeaderDropdown />
{isAuthenticated && !isNewUser && <NotificationDrawer />}
{!isNewUser && <HelpGuide />}
{!isNewUser && <HelpGuide showText={true} />}
</div>
</div>
</Col>
Expand Down
1 change: 1 addition & 0 deletions services/minespace-web/src/constants/assets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@ export { default as MAP_LOGO } from "../assets/images/maplogo.svg";
export { default as LANDING_BG } from "../assets/images/minespace-landing-bg.jpg";

export { default as USER_GUIDE } from "../assets/downloads/User Guide - Register of Tailings Storage Facilities and Dams.pdf";
export { default as MINESPACE_USER_GUIDE } from "../assets/downloads/MineSpace_User_Guide_2026.pdf";
export { default as TAILINGS_DOCUMENT } from "../assets/downloads/Register of Tailings Storage Facilities and Dams.xlsm";
export { default as LOADER } from "../assets/images/loader.gif";
29 changes: 29 additions & 0 deletions ...nespace-web/src/tests/components/dashboard/mine/__snapshots__/MineDashboard.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,35 @@ exports[`MineDashboard renders properly 1`] = `
Tailings & Dams
</span>
</li>
<li
class="ant-menu-item"
data-menu-id="rc-menu-uuid-test-help-guide"
path="/mines/18133c75-49ad-4101-85f3-a43e35ae989a/dashboard/help-guide"
role="menuitem"
tabindex="-1"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-circle-question ant-menu-item-icon"
data-icon="circle-question"
data-prefix="fal"
focusable="false"
role="img"
style="width: 24px;"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480 256A224 224 0 1 0 32 256a224 224 0 1 0 448 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm168.7-86.2c6.5-24.6 28.7-41.8 54.2-41.8H280c35.5 0 64 29 64 64.3c0 24-13.4 46.2-34.9 57.2L272 268.3V288c0 8.8-7.2 16-16 16s-16-7.2-16-16V258.5c0-6 3.4-11.5 8.7-14.3l45.8-23.4c10.7-5.4 17.5-16.6 17.5-28.7c0-17.8-14.4-32.3-32-32.3H222.9c-10.9 0-20.5 7.4-23.2 17.9l-.2 .7c-2.2 8.5-11 13.7-19.5 11.4s-13.7-11-11.4-19.5l.2-.7zM232 352a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"
fill="currentColor"
/>
</svg>
<span
class="ant-menu-title-content"
>
How to use MineSpace
</span>
</li>
<li
class="ant-menu-item"
data-menu-id="rc-menu-uuid-test-user-access"
Expand Down
29 changes: 29 additions & 0 deletions ...e-web/src/tests/components/dashboard/mine/__snapshots__/MineDashboardRoutes.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,35 @@ exports[`MineDashboardRoutes matches snapshot when navigated to the reports rout
Tailings & Dams
</span>
</li>
<li
class="ant-menu-item"
data-menu-id="rc-menu-uuid-test-help-guide"
path="/help-guide"
role="menuitem"
tabindex="-1"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-circle-question ant-menu-item-icon"
data-icon="circle-question"
data-prefix="fal"
focusable="false"
role="img"
style="width: 24px;"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480 256A224 224 0 1 0 32 256a224 224 0 1 0 448 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm168.7-86.2c6.5-24.6 28.7-41.8 54.2-41.8H280c35.5 0 64 29 64 64.3c0 24-13.4 46.2-34.9 57.2L272 268.3V288c0 8.8-7.2 16-16 16s-16-7.2-16-16V258.5c0-6 3.4-11.5 8.7-14.3l45.8-23.4c10.7-5.4 17.5-16.6 17.5-28.7c0-17.8-14.4-32.3-32-32.3H222.9c-10.9 0-20.5 7.4-23.2 17.9l-.2 .7c-2.2 8.5-11 13.7-19.5 11.4s-13.7-11-11.4-19.5l.2-.7zM232 352a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"
fill="currentColor"
/>
</svg>
<span
class="ant-menu-title-content"
>
How to use MineSpace
</span>
</li>
<li
class="ant-menu-item"
data-menu-id="rc-menu-uuid-test-user-access"
Expand Down
Loading