PSP-6945 : Access to PIMS Overview (Help File) - Header

source/frontend/src/components/layout/Header/Header.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { FaBomb } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
 
 import { BCGovLogo } from '@/components/common/BCGovLogo';
 import { VerticalBar } from '@/components/common/VerticalBar';
@@ -47,7 +48,9 @@ export const Header = () => {
           <BCGovLogo />
         </a>
         <VerticalBar />
-        <Logo height={50} />
+        <Link to="/mapview">
+          <Logo height={50} />
+        </Link>
       </Navbar.Brand>
       <Nav className="title mr-auto">
         <Nav.Item>

source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap

@@ -128,12 +128,16 @@ exports[`App Header renders correctly 1`] = `
       <span
         class="c1"
       />
-      <img
-        alt="PIMS logo"
-        class="pims-logo"
-        height="50"
-        src="/tenants/MOTI/PIMS-logo.png"
-      />
+      <a
+        href="/mapview"
+      >
+        <img
+          alt="PIMS logo"
+          class="pims-logo"
+          height="50"
+          src="/tenants/MOTI/PIMS-logo.png"
+        />
+      </a>
     </span>
     <div
       class="title mr-auto navbar-nav"

source/frontend/src/features/help/components/HelpModal.tsx

@@ -3,11 +3,12 @@ import Container from 'react-bootstrap/Container';
 import Modal from 'react-bootstrap/Modal';
 import ModalDialog from 'react-bootstrap/ModalDialog';
 import Draggable from 'react-draggable';
+import { FaQuestionCircle } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import variables from '@/assets/scss/_variables.module.scss';
 import { Button } from '@/components/common/buttons/Button';
-import TooltipIcon from '@/components/common/TooltipIcon';
+import { H3 } from '@/components/common/styles';
 import { useAppSelector } from '@/store/hooks';
 import { useTenants } from '@/store/slices/tenants';
 
@@ -57,31 +58,44 @@ const HelpModal: FunctionComponent<React.PropsWithChildren<IModalProps>> = ({
       <ModalStyled dialogAs={DraggableModalDialog} show={show} onHide={handleCancel}>
         <ModalHeader closeButton>
           <DraggableTitle>
-            Help Desk&nbsp;
-            <StyledTooltip toolTipId="help-toolTip" toolTip="Click and drag to move this popup" />
+            <FaQuestionCircle size={24} />
+            <DraggableTitleText>Help Desk</DraggableTitleText>
           </DraggableTitle>
         </ModalHeader>
-
         <Modal.Body>
+          <H3Styled>Get started at PIMS</H3Styled>
+          <p>
+            This overview has useful tools that will support you to start using the application. You
+            can also watch the video demos.
+          </p>
+          <LinkStyled
+            target="_blank"
+            href="https://sp.th.gov.bc.ca/sites/PropertiesServices/Project%20Management/03.%20Execution%20and%20Control/PIMS%20Training"
+          >
+            PIMS resources
+          </LinkStyled>
+          <hr />
           <HelpModalContentContainer setMailto={setMailto} />
+          <StyledConfirmationText>Do you want to proceed?</StyledConfirmationText>
+          <hr />
         </Modal.Body>
 
         <Modal.Footer>
+          <StyledButton variant="secondary" onClick={handleCancel}>
+            No
+          </StyledButton>
           {config?.settings?.helpDeskEmail ? (
-            <Button
+            <StyledButton
               href={`mailto:${config?.settings?.helpDeskEmail}?subject=${mailto?.subject}&body=${mailto?.body}`}
               onClick={() => {
                 handleSubmit();
               }}
             >
-              Submit
-            </Button>
+              Yes
+            </StyledButton>
           ) : (
-            <Button disabled>Submit</Button>
+            <StyledButton disabled>Yes</StyledButton>
           )}
-          <Button variant="secondary" onClick={handleCancel}>
-            Cancel
-          </Button>
         </Modal.Footer>
       </ModalStyled>
     </Container>
@@ -111,23 +125,48 @@ const ModalStyled = styled(Modal)`
   .modal-body {
     max-height: calc(100vh - 20rem);
     overflow-y: auto;
+    padding: 0px 16px;
+  }
+  .modal-footer {
+    border: none;
+    padding-right: 16px;
   }
 `;
 
 const DraggableTitle = styled(Modal.Title)`
+  margin-left: 10px;
   width: 100%;
   cursor: pointer;
   color: white;
 `;
 
+const DraggableTitleText = styled.div`
+  display: inline-block;
+  margin-left: 10px;
+`;
+
+const StyledConfirmationText = styled.p`
+  margin-top: 24px;
+`;
+
+const StyledButton = styled(Button)`
+  width: 95px;
+  margin-right: 24px;
+`;
+
+const LinkStyled = styled.a`
+  margin-bottom: 16px;
+`;
+
+const H3Styled = styled(H3)`
+  border: none;
+  margin-bottom: 16px;
+  margin-top: 24px;
+`;
+
 const ModalHeader = styled(Modal.Header)`
   background-color: ${variables.primaryColor};
   padding: 0.5rem;
 `;
 
-const StyledTooltip = styled(TooltipIcon)`
-  margin-left: 0.5rem;
-  margin-bottom: 0.5rem;
-`;
-
 export default HelpModal;

source/frontend/src/features/help/components/HelpSubmitBox.test.tsx

@@ -1,15 +1,12 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 
-import { TicketTypes } from '../constants/HelpText';
 import HelpSubmitBox from './HelpSubmitBox';
 
-const renderHelpBox = (ticketType: TicketTypes) =>
+const renderHelpBox = () =>
   render(
     <HelpSubmitBox
-      activeTicketType={ticketType}
       user="Test User"
       email="[email protected]"
-      setActiveTicketType={jest.fn(x => x)}
       setMailto={jest.fn()}
       page="Landing Page"
     />,
@@ -18,39 +15,18 @@ const renderHelpBox = (ticketType: TicketTypes) =>
 describe('Help Box tests', () => {
   it('renders properly', async () => {
     await act(async () => {
-      const { asFragment } = renderHelpBox(TicketTypes.QUESTION);
+      const { asFragment } = renderHelpBox();
       const fragment = await waitFor(() => asFragment());
 
       expect(fragment).toMatchSnapshot();
     });
   });
 
-  it('contains question field and option when question selected', async () => {
+  it('displays appropriate fields', async () => {
     await act(async () => {
-      renderHelpBox(TicketTypes.QUESTION);
+      renderHelpBox();
     });
-
-    const question = await waitFor(() => screen.getAllByText('Question'));
-    expect(question).toHaveLength(2);
-  });
-
-  it('displays appropriate fields when switching to bug type', async () => {
-    await act(async () => {
-      renderHelpBox(TicketTypes.BUG);
-    });
-    const reproduce = await waitFor(() => screen.getByText('Steps to Reproduce'));
-    const expected = await waitFor(() => screen.getByText('Expected Result'));
-    const result = await waitFor(() => screen.getByText('Actual Result'));
-    expect(reproduce).toBeInTheDocument();
-    expect(expected).toBeInTheDocument();
-    expect(result).toBeInTheDocument();
-  });
-
-  it('displays appropriate fields when switching to feature request ticket type', async () => {
-    await act(async () => {
-      renderHelpBox(TicketTypes.FEATURE_REQUEST);
-    });
-    const desc = await waitFor(() => screen.getByText('Description'));
+    const desc = await waitFor(() => screen.getByText('Description:'));
     expect(desc).toBeInTheDocument();
   });
 });