feedback/report and issue link

.env.production

@@ -0,0 +1 @@
+VITE_ISSUE_URL=mailto:[email protected]

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*.local*
+

docs/README.md

@@ -12,6 +12,7 @@
 - [DefaultNode](#defaultnode)
 - [BoolNode](#boolnode)
 - [Help Content](#help-content)
+- [Environment Variables](#environment-variables)
 
 6. [Deployment](#deployment)
 7. [Future Work](#future-work)
@@ -103,7 +104,10 @@ The configuration should reflect the following example:
       "id": "goRegister",
       "data": {
         "label": "Time to Register in RCRAInfo!",
-        "children": ["test1", "test2"]
+        "children": [
+          "test1",
+          "test2"
+        ]
       }
     }
   ]
@@ -138,7 +142,10 @@ requires a different configuration.
   "id": "goRegister",
   "data": {
     "label": "You have options",
-    "children": ["option1", "option2"]
+    "children": [
+      "option1",
+      "option2"
+    ]
   }
 }
 ```
@@ -176,6 +183,15 @@ See [future work](#future-work).
 }
 ```
 
+### Environment Variables
+
+A list of environment variables that can be used to configure the application can be found in the `/src/.env.d.ts` file.
+These variables are passed at build time, see the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html) for
+further details.
+
+A couple of things that can be configured are the app title (default: 'The Manifest Game') and the issue
+tracker URL (default: 'mailto:[email protected]').
+
 ## Deployment
 
 The development server can be started using the npm run dev command. This will start a server on port 3000 (by default).

src/components/Error/ErrorMsg.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import { ErrorMsg } from 'components/Error/ErrorMsg';
-import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 
 beforeAll(() => {
   vi.stubEnv('VITE_ISSUE_URL', 'https://example.com/issues/new');
@@ -12,6 +12,9 @@ beforeEach(() => {
 afterEach(() => {
   cleanup();
 });
+afterAll(() => {
+  vi.unstubAllEnvs();
+});
 
 describe('ErrorMsg', () => {
   test('renders', () => {
@@ -27,10 +30,10 @@ describe('ErrorMsg', () => {
     expect(issueLink).toHaveAccessibleName('file a ticket');
     expect(issueLink).toHaveAttribute('href', issueUrl);
   });
-  test('renders generic feedback link if no issue URL present', () => {
+  test('no feedback link rendered if no config', () => {
+    vi.stubEnv('VITE_ISSUE_URL', 'mailto:[email protected]');
     render(<ErrorMsg />);
-    const issueLink = screen.queryByRole('link', { name: /e-Manifest team/i });
-    expect(issueLink).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: /e-Manifest team/i })).not.toBeInTheDocument();
   });
   test('renders an issue URL if present', () => {
     const message = 'alright meow, license and registration';

src/components/Error/ErrorMsg.tsx

@@ -18,22 +18,12 @@ export const ErrorMsg = ({ message }: ErrorMsgProps) => {
           <h2 className="text-center text-xl font-semibold text-white">
             We would appreciate your feedback.
           </h2>
-          {issueURL ? (
+          {issueURL && (
             <p className="text-center">
               <a href={issueURL} className="underline decoration-blue-100 decoration-1">
                 file a ticket
               </a>
             </p>
-          ) : (
-            <p className="text-center">
-              Please direct all comments to the{' '}
-              <a
-                href="https://epa.gov/e-manifest"
-                className="underline decoration-blue-100 decoration-1"
-              >
-                EPA e-Manifest team
-              </a>
-            </p>
           )}
         </div>
       </div>

src/components/Header/Header.spec.tsx

@@ -1,9 +1,19 @@
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import { ReactFlowProvider } from 'reactflow';
-import { afterEach, describe, expect, test } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { Header } from './Header';
 
+beforeEach(() => {
+  vi.unstubAllEnvs();
+});
+afterEach(() => {
+  cleanup();
+});
+afterEach(() => {
+  vi.unstubAllEnvs();
+});
+
 const TestComponent = ({ title }: { title?: string }) => {
   return (
     <ReactFlowProvider>
@@ -13,10 +23,19 @@ const TestComponent = ({ title }: { title?: string }) => {
 };
 
 describe('Header', () => {
-  afterEach(() => cleanup());
   test('renders a title', () => {
     const title = 'hello';
     render(<TestComponent title={title} />);
     expect(screen.getByText(title)).toBeInTheDocument();
   });
+  test('no feedback link rendered if no config', () => {
+    vi.stubEnv('VITE_ISSUE_URL', '');
+    render(<TestComponent />);
+    expect(screen.queryByRole('link', { name: /feedback/i })).not.toBeInTheDocument();
+  });
+  test('feedback link rendered if config present', () => {
+    vi.stubEnv('VITE_ISSUE_URL', 'mailto:[email protected]');
+    render(<TestComponent />);
+    expect(screen.queryByRole('link', { name: /feedback/i })).toBeInTheDocument();
+  });
 });

src/components/Header/Header.tsx

@@ -5,10 +5,21 @@ interface HeaderProps {
 }
 
 export const Header = ({ treeTitle }: HeaderProps) => {
+  const issueUrl = import.meta.env.VITE_ISSUE_URL;
+
   return (
     <Panel position="top-left" className="w-3/12">
-      <div className="box-border flex w-full justify-between rounded-xl bg-gradient-to-b from-sky-700 to-sky-900 p-2 align-middle">
-        <h1 className="text-xl font-semibold text-white">{treeTitle}</h1>
+      <div className="box-border w-full rounded-xl bg-gradient-to-b from-sky-700 to-sky-900 p-2 align-middle">
+        <div>
+          <h1 className="text-xl font-semibold text-white">{treeTitle}</h1>
+        </div>
+        {issueUrl && (
+          <div>
+            <a href={issueUrl} className="text-sm underline decoration-1">
+              Feedback/Report and Issue
+            </a>
+          </div>
+        )}
       </div>
     </Panel>
   );