feat: fixed help button for admins/analysts

app/components/helpers/HelpButton.tsx

@@ -0,0 +1,148 @@
+import React, {useState} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import getConfig from 'next/config';
+import {
+  faQuestion,
+  faComments,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons';
+
+interface Props {
+  isInternalUser?: boolean;
+}
+
+const HelpButton: React.FunctionComponent<Props> = ({
+  isInternalUser = true
+}) => {
+  const supportEmail = getConfig()?.publicRuntimeConfig.SUPPORT_EMAIL;
+  const mailToUrl = supportEmail
+    ? `mailto:${supportEmail}?subject=Internal Support Request`
+    : '#';
+  const docsUrl = isInternalUser
+    ? 'https://github.com/bcgov/cas-ciip-portal/blob/master/docs/admin-analyst-guide.md'
+    : '#';
+
+  const [isOpened, setIsOpened] = useState(false);
+  const toggleHelpBubble = () => {
+    setIsOpened((current) => !current);
+  };
+  const helpIcon = (
+    <>
+      <FontAwesomeIcon
+        icon={faComments}
+        color="white"
+        style={{height: '2.2em', width: '2.5em'}}
+      />
+      <FontAwesomeIcon
+        icon={faQuestion}
+        size="sm"
+        style={{position: 'absolute', top: '29%', left: '33%'}}
+      />
+    </>
+  );
+  const closeIcon = <FontAwesomeIcon icon={faTimes} color="white" size="lg" />;
+  return (
+    <>
+      {isOpened && (
+        <div id="help-bubble">
+          {isInternalUser ? (
+            <ul>
+              <li>
+                <span role="img" aria-label="waving hand emoji">
+                  👋
+                </span>
+                <a href={mailToUrl}>
+                  Need to report a problem to the development team?
+                </a>
+              </li>
+              <li>OR</li>
+              <li>
+                <span role="img" aria-label="open book emoji">
+                  📖
+                </span>
+                <a href={docsUrl} target="_blank" rel="noopener noreferrer">
+                  Looking for help documentation?
+                </a>
+              </li>
+            </ul>
+          ) : (
+            ''
+          )}
+          <span className="triangle">◥</span>
+        </div>
+      )}
+      <button
+        id="help-button"
+        type="button"
+        aria-label="Click for help options"
+        onClick={toggleHelpBubble}
+      >
+        {isOpened ? closeIcon : helpIcon}
+      </button>
+      <style jsx>{`
+        #help-button {
+          height: 65px;
+          width: 65px;
+          position: fixed;
+          bottom: 16px;
+          right: 16px;
+          border: none;
+          outline: none;
+          border-radius: 50%;
+          background: #0060ff;
+          color: #0060ff;
+          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+            0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+          z-index: 999;
+        }
+        #help-button:focus,
+        #help-button:active {
+          background: #003899;
+          color: #003899;
+          box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+            0 3px 14px 2px rgba(0, 0, 0, 0.12),
+            0 5px 5px -3px rgba(0, 0, 0, 0.4);
+        }
+        #help-bubble {
+          position: fixed;
+          right: 70px;
+          bottom: 94px;
+          padding: 1.6em;
+          background: #fff;
+          max-width: 310px;
+          min-height: 80px;
+          border-radius: 4px;
+          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+            0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+          z-index: 999;
+        }
+        #help-bubble > ul {
+          list-style-type: none;
+          margin: 0;
+          padding: 0;
+        }
+        li {
+          display: flex;
+        }
+        li:nth-of-type(2) {
+          justify-content: center;
+          font-weight: bold;
+          padding: 0.5em;
+        }
+        #help-bubble .triangle {
+          color: #fff;
+          font-size: 18px;
+          text-shadow: 0 4px 4px rgb(0 0 0 / 40%);
+          position: absolute;
+          bottom: -20px;
+          right: 0;
+        }
+        span[role='img'] {
+          margin-right: 0.2em;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default HelpButton;

app/layouts/default-layout.tsx

@@ -9,6 +9,8 @@ import Subheader from 'components/Layout/Subheader';
 import Help from 'components/helpers/Help';
 import SiteNoticeBanner from 'components/Layout/SiteNoticeBanner';
 import CookieDayPickerInput from 'components/helpers/CookieDayPickerInput';
+import HelpButton from 'components/helpers/HelpButton';
+import {ADMIN_GROUP, INCENTIVE_ANALYST} from 'data/group-constants';
 
 const runtimeConfig = getConfig()?.publicRuntimeConfig ?? {};
 
@@ -33,6 +35,10 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
   width = 'narrow',
   help
 }) => {
+  const isInternalUser = [INCENTIVE_ANALYST, ...ADMIN_GROUP].some((role) => {
+    return session?.userGroups.includes(role);
+  });
+
   return (
     <div className="page-wrap">
       <Header
@@ -67,6 +73,9 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
         <Container id="page-content" className={`content ${width}`}>
           {children}
         </Container>
+        {Boolean(session) && isInternalUser && (
+          <HelpButton isInternalUser={isInternalUser} />
+        )}
       </main>
       <Footer />
       <style jsx>
@@ -171,6 +180,7 @@ export default createFragmentContainer(DefaultLayout, {
       ciipUserBySub {
         __typename
       }
+      userGroups
     }
   `
 });

app/tests/unit/components/helpers/HelpButton.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import HelpButton from 'components/helpers/HelpButton';
+
+describe('HelpButton', () => {
+  it('(closed) matches the last accepted snapshot', () => {
+    const r = mount(<HelpButton />);
+    expect(r).toMatchSnapshot();
+  });
+  it('(opened) matches the last accepted snapshot', () => {
+    const r = mount(<HelpButton />);
+    r.find('button#help-button').simulate('click');
+    expect(r).toMatchSnapshot();
+  });
+});

app/tests/unit/components/helpers/__snapshots__/HelpButton.test.tsx.snap

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelpButton (closed) matches the last accepted snapshot 1`] = `
+Array [
+  <button
+    aria-label="Click for help options"
+    className="jsx-327948841"
+    id="help-button"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-comments fa-w-18 "
+      color="white"
+      data-icon="comments"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={
+        Object {
+          "height": "2.2em",
+          "width": "2.5em",
+        }
+      }
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-question fa-w-12 fa-sm "
+      data-icon="question"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={
+        Object {
+          "left": "33%",
+          "position": "absolute",
+          "top": "29%",
+        }
+      }
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>,
+  "",
+]
+`;
+
+exports[`HelpButton (opened) matches the last accepted snapshot 1`] = `
+Array [
+  <div
+    className="jsx-327948841"
+    id="help-bubble"
+  >
+    <ul
+      className="jsx-327948841"
+    >
+      <li
+        className="jsx-327948841"
+      >
+        <span
+          aria-label="waving hand emoji"
+          className="jsx-327948841"
+          role="img"
+        >
+          👋
+        </span>
+        <a
+          className="jsx-327948841"
+          href="#"
+        >
+          Need to report a problem to the development team?
+        </a>
+      </li>
+      <li
+        className="jsx-327948841"
+      >
+        OR
+      </li>
+      <li
+        className="jsx-327948841"
+      >
+        <span
+          aria-label="open book emoji"
+          className="jsx-327948841"
+          role="img"
+        >
+          📖
+        </span>
+        <a
+          className="jsx-327948841"
+          href="https://github.com/bcgov/cas-ciip-portal/blob/master/docs/admin-analyst-guide.md"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Looking for help documentation?
+        </a>
+      </li>
+    </ul>
+    <span
+      className="jsx-327948841 triangle"
+    >
+      ◥
+    </span>
+  </div>,
+  <button
+    aria-label="Click for help options"
+    className="jsx-327948841"
+    id="help-button"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-times fa-w-11 fa-lg "
+      color="white"
+      data-icon="times"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 352 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>,
+  "",
+]
+`;