fetch and render help content (#87)

Implement a `Help` component that fetches and renders help content from the server. 

* rename HelpContent to TextualHelp to clarify the type of content it is responsible for rendering

* add styling for handling help content overflow

* update documentation

docs/README.md

@@ -7,6 +7,12 @@
 3. [Nomenclature](#nomenclature)
 4. [Implementation Notes](#implementation-notes)
 5. [Configuration](#configuration)
+
+- [Node Properties](#shared-node-properties)
+- [DefaultNode](#defaultnode)
+- [BoolNode](#boolnode)
+- [Help Content](#help-content)
+
 6. [Deployment](#deployment)
 7. [Future Work](#future-work)
 
@@ -123,6 +129,9 @@ requires a different configuration.
 - **data.help**: A boolean value that determines if the node has help content. If true, the node will display a help
   icon
   that will display help content when clicked.
+- **data.help**: A boolean value that determines if the node has help content. If true, the decision tree expects to be
+  able to find a JSON file in `public/help/` with the same name as the node id. A question mark icon will be displayed
+  on node if true. See [Help Content](#help-content) for more information.
 
 ### DefaultNode
 
@@ -159,6 +168,21 @@ requires a different configuration.
 }
 ```
 
+### Help Content
+
+Nodes can optionally have help content, which can be useful for providing additional information to the user when the
+node merits further explanation.
+
+Currently, we only support text based help content, stored in a JSON encoded file following the below schema.
+See [future work](#future-work).
+
+  ```json
+{
+  "type": "text",
+  "content": "Welcome to the Manifest Game!\n\n This decision tree will help you..."
+}
+  ```
+
 ## Deployment
 
 The development server can be started using the npm run dev command. This will start a server on port 3000 (by default).
@@ -183,3 +207,5 @@ docker compose up
 2. A new custom node type for multiple choice questions (e.g., what type of site are you? A generator, a TSDF, or a
    transporter).
 3. Allow EPA to create multiple tree for users.
+4. Markup help text. Currently, we only support text based help content, stored in a JSON encoded file. Being able to
+   provide more complex help content could make the tool more useful as it would allow linking to other resources.

public/default.json

@@ -14,22 +14,7 @@
       "id": "goRegister",
       "data": {
         "label": "Time to Register in RCRAInfo!",
-        "children": [
-          "test1",
-          "test2"
-        ]
-      }
-    },
-    {
-      "id": "test1",
-      "data": {
-        "label": "Test 1"
-      }
-    },
-    {
-      "id": "test2",
-      "data": {
-        "label": "Test 2"
+        "children": []
       }
     },
     {

public/help/root.json

@@ -1,4 +1,4 @@
 {
   "type": "text",
-  "content": "Hello, World!"
+  "content": "Welcome to the Manifest Game!\n\n This interactive decision tree will help guide you through common questions and scenarios when using the Environmental Protection Agency's (EPA) e-Manifest system."
 }

src/components/Help/Help.spec.tsx

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { Help } from 'components/Help/Help';
+import { delay, http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import useTreeStore from 'store';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
+
+const handlers = [
+  http.get('/help/:nodeId.json', async (info) => {
+    const nodeId = info.params.nodeId;
+    await delay(500);
+
+    return HttpResponse.json({
+      type: 'text',
+      content: `Help Text ${nodeId}`,
+    });
+  }),
+];
+
+const server = setupServer(...handlers);
+
+afterEach(() => {
+  cleanup();
+  server.resetHandlers(...handlers);
+});
+beforeAll(() => server.listen());
+afterAll(() => server.close());
+
+describe('Help', () => {
+  test('renders error message when help content ID is undefined', () => {
+    render(<Help />);
+    expect(screen.getByText(/problem/i)).toBeInTheDocument();
+  });
+  test('renders loader while fetching content', () => {
+    const helpContentId = 'root';
+    useTreeStore.setState({ isOpen: true, helpContentId });
+    render(<Help />);
+    expect(screen.getByTestId(/helpSpinner/i)).toBeInTheDocument();
+  });
+  test('renders help content after fetch', async () => {
+    const helpContentId = 'root';
+    useTreeStore.setState({ isOpen: true, helpContentId });
+    render(<Help />);
+    await waitFor(() => expect(screen.queryByTestId(/helpSpinner/i)).not.toBeInTheDocument());
+    expect(screen.getByText(/Help Text root/i)).toBeInTheDocument();
+  });
+});

src/components/Help/Help.tsx

@@ -0,0 +1,28 @@
+import { TextualHelp } from 'components/Help/HelpContent/TextualHelp';
+import { Spinner } from 'components/Spinner/Spinner';
+import { useFetchHelp } from 'hooks';
+import { useHelp } from 'hooks/useHelp/useHelp';
+import React from 'react';
+
+/**
+ * Responsible for retrieving, and displaying information to help users made decisions
+ * @constructor
+ */
+export const Help = () => {
+  const { helpContentId } = useHelp();
+  const { help, error, isLoading } = useFetchHelp(helpContentId);
+
+  if (helpContentId === undefined || error) {
+    return <p>There was a problem fetching help.</p>;
+  }
+
+  if (isLoading) {
+    return <Spinner testId={'helpSpinner'} />;
+  }
+
+  return (
+    <>
+      <TextualHelp help={help} />
+    </>
+  );
+};

src/components/Help/HelpContent/HelpContent.spec.tsx → src/components/Help/HelpContent/TextualHelp.spec.tsx

@@ -1,25 +1,25 @@
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
+import { TextHelp, TextualHelp } from 'components/Help/HelpContent/TextualHelp';
 import { afterEach, describe, expect, test } from 'vitest';
-import { HelpContent, TextHelp } from './HelpContent';
 
 afterEach(() => cleanup());
 
-describe('HelpContent', () => {
+describe('TextualHelp', () => {
   test('renders', () => {
-    render(<HelpContent />);
+    render(<TextualHelp />);
     expect(screen.getByTestId(/help-content/i)).toBeInTheDocument();
   });
   test('returns a friendly message if help prop is empty', () => {
-    render(<HelpContent />);
+    render(<TextualHelp />);
     expect(screen.getByText(/unavailable/i, { exact: false })).toBeInTheDocument();
   });
   test('accepts an TextHelp object and displays the data as text', () => {
     const help: TextHelp = {
       type: 'text',
-      data: 'This is a help message',
+      content: 'This is a help message',
     };
-    render(<HelpContent help={help} />);
-    expect(screen.getByText(help.data)).toBeInTheDocument();
+    render(<TextualHelp help={help} />);
+    expect(screen.getByText(help.content)).toBeInTheDocument();
   });
 });

src/components/Help/HelpContent/TextualHelp.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface TextHelp {
+  type: 'text';
+  content: string;
+}
+
+interface HelpContentProps {
+  help?: TextHelp;
+}
+
+/**
+ * Renders the textual help content
+ * @constructor
+ */
+export const TextualHelp = ({ help }: HelpContentProps) => {
+  return (
+    <div
+      data-testid={'help-content'}
+      style={{
+        whiteSpace: 'pre-line',
+        fontSize: '1.2rem',
+        maxHeight: '100%',
+      }}
+    >
+      {help ? <p>{help.content}</p> : <p> Help is unavailable for this node.</p>}
+    </div>
+  );
+};

src/components/OffCanvas/OffCanvas.tsx

@@ -1,3 +1,4 @@
+import { Help } from 'components/Help/Help';
 import styles from 'components/OffCanvas/offcanvas.module.css';
 import React, { useCallback, useEffect } from 'react';
 
@@ -11,7 +12,7 @@ interface OffCanvasProps {
  * Sidebar for displaying content and help
  * @constructor
  */
-export const OffCanvas = ({ title = 'Help', isOpen, handleClose }: OffCanvasProps) => {
+export const OffCanvas = ({ title = 'More Information', isOpen, handleClose }: OffCanvasProps) => {
   /** handle when user clicks outside the off canvas component*/
   const onClickOutside = useCallback(() => {
     if (isOpen) {
@@ -65,8 +66,7 @@ export const OffCanvas = ({ title = 'Help', isOpen, handleClose }: OffCanvasProp
           />
         </div>
         <div className={styles.content}>
-          Some text as placeholder. In real life you can have the elements you have chosen. Like,
-          text, images, lists, etc.
+          <Help />
         </div>
       </div>
       {/* backdrop while open*/}

src/components/OffCanvas/offcanvas.module.css

@@ -5,6 +5,9 @@ body {
 .content {
     font-family: sans-serif;
     padding: 0 2rem;
+    overflow: hidden scroll;
+    height: 100%;
+    scrollbar-color: #333333 transparent;
 }
 
 .offcanvas {

src/components/Spinner/Spinner.tsx

@@ -1,13 +1,17 @@
 import styles from 'components/Spinner/spinner.module.css';
 
+interface SpinnerProps {
+  testId?: string;
+}
+
 /**
  * Spinner - a loading spinner
  * https://loading.io/css/
  * @constructor
  */
-export const Spinner = () => {
+export const Spinner = ({ testId }: SpinnerProps) => {
   return (
-    <div className={styles.center} data-testid="spinner">
+    <div className={styles.center} data-testid={testId ?? 'spinner'}>
       <div className={styles.spinnerRing}>
         <div></div>
         <div></div>

src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useDecisionTree } from './useDecisionTree/useDecisionTree';
 export { useFetchConfig } from './useFetchConfig/useFetchConfig';
+export { useFetchHelp } from './useFetchHelp/useFetchHelp';
 export { useTreeDirection } from './useTreeDirection/useTreeDirection';
 export { useTreeViewport } from './useTreeViewport/useTreeViewport';

src/hooks/useFetchHelp/useFetchHelp.tsx

@@ -1,34 +1,34 @@
+import { TextHelp } from 'components/Help/HelpContent/TextualHelp';
 import { useEffect, useState } from 'react';
 
 /** Configuration for an individual node, part of the larger config*/
-export interface HelpConfig {
-  type: string;
-  content: string;
-}
+export type HelpConfig = TextHelp;
 
 /** Hook to fetch the help text for a given node from the server. */
-export const useFetchHelp = (nodeId: string) => {
+export const useFetchHelp = (nodeId?: string) => {
   const [help, setHelp] = useState<HelpConfig | undefined>();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<unknown | undefined>();
 
   useEffect(() => {
     setIsLoading(true);
-    fetch(`/help/${nodeId}.json`)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error('There was a problem fetching help.');
-        }
-        return response.json();
-      })
-      .then((data) => {
-        setHelp(data);
-        setIsLoading(false);
-      })
-      .catch((e) => {
-        setError(e);
-        setIsLoading(false);
-      });
+    if (nodeId) {
+      fetch(`/help/${nodeId}.json`)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('There was a problem fetching help.');
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setHelp(data);
+          setIsLoading(false);
+        })
+        .catch((e) => {
+          setError(e);
+          setIsLoading(false);
+        });
+    }
   }, [nodeId]);
 
   return {