SD-20 Move FAQ content into translations and add Help entry point

react-ui/src/app/components/LandingPage/__snapshots__/LandingPage.test.tsx.snap

@@ -62,6 +62,35 @@ exports[`LandingPage > should match snapshot 1`] = `
             <ul
               class="wfp--main-navigation__list"
             >
+              <li
+                class="wfp--main-navigation__item"
+              >
+                <div
+                  class="wfp--main-navigation__trigger"
+                >
+                  <a
+                    class="d-flex align-items-center"
+                    href="/help"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="svg-inline--fa fa-circle-question wfp--btn__icon nav-icon"
+                      data-icon="circle-question"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    actions.help
+                  </a>
+                </div>
+              </li>
               <li
                 class="wfp--main-navigation__item"
               >

react-ui/src/app/components/LandingPage/index.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { Link, MainNavigation, MainNavigationItem } from "@wfp/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 import Footer from "../Footer";
 import { languageSelect } from "../languageSelect";
@@ -39,6 +41,15 @@ function LandingPage() {
               }
               className={styles.navbar}
             >
+              <MainNavigationItem>
+                <NavLink to="/help" className="d-flex align-items-center">
+                  <FontAwesomeIcon
+                    icon={faCircleQuestion}
+                    className="wfp--btn__icon nav-icon"
+                  />
+                  {t("actions.help")}
+                </NavLink>
+              </MainNavigationItem>
               <MainNavigationItem>
                 <Link
                   href={`${import.meta.env.VITE_APP_API_ENDPOINT}/auth/login/`}

react-ui/src/app/index.tsx

@@ -97,14 +97,7 @@ function App() {
             </PrivateRoute>
           }
         />
-        <Route
-          path="/help"
-          element={
-            <PrivateRoute>
-              <Faq />
-            </PrivateRoute>
-          }
-        />
+        <Route path="/help" element={<Faq />} />
         <Route
           path="/survey/copy/:uuid"
           element={

react-ui/src/app/utils/index.tsx

@@ -3,7 +3,6 @@ import { Link, Text } from "@wfp/react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import React, { PropsWithChildren, ReactElement } from "react";
-import { ReactMarkdownProps } from "react-markdown/lib/complex-types";
 import { FrontendContent, SavedSurvey } from "../types/api";
 
 /*
@@ -56,34 +55,13 @@ function LinkRenderer(props: LinkRendererProps) {
   );
 }
 
-type BlockquoteRendererProps = PropsWithChildren;
-
-function BlockquoteRenderer(props: BlockquoteRendererProps) {
-  // match style of Blockquote for rendered markdown
-  return <blockquote className="wfp-blockquote">{props.children}</blockquote>;
-}
-
 type TextRendererProps = PropsWithChildren;
 
 function TextRenderer(props: TextRendererProps) {
   // match style of Text for rendered markdown
   return <Text>{props.children}</Text>;
 }
 
-type ImgRendererProps = JSX.IntrinsicElements["img"] & ReactMarkdownProps;
-
-function ImgRenderer(props: ImgRendererProps) {
-  // use div "img-wrapper" and wrap props in <img>
-  return (
-    <div className="img-wrapper">
-      <img
-        alt={`${props.node.properties?.alt}`}
-        src={`${props.node.properties?.src}`}
-      />
-    </div>
-  );
-}
-
 interface RenderMarkdownFunction {
   (data: FrontendContent[] | null, key: string): ReactElement;
 }
@@ -106,28 +84,6 @@ export const renderTooltipMarkdown: RenderMarkdownFunction = (data, key) => {
   );
 };
 
-export const renderTextWithImageMarkdown: RenderMarkdownFunction = (
-  data,
-  key,
-) => {
-  // fetch markdown from frontend-content endpoint based on key
-  const content = data?.find((data) => data?.key === key)?.message;
-  return (
-    <Text>
-      <ReactMarkdown
-        components={{
-          a: LinkRenderer,
-          h6: BlockquoteRenderer,
-          img: ImgRenderer,
-        }}
-        remarkPlugins={[remarkGfm]}
-      >
-        {`${content}`}
-      </ReactMarkdown>
-    </Text>
-  );
-};
-
 export const getSurveyTags = (selectedSavedSurvey: SavedSurvey | undefined) => {
   const tags = [];
   if (selectedSavedSurvey) {

react-ui/src/app/views/Faq/FaqContent.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import "../../../locales/i18n";
+import { render, screen } from "../../utils/tests";
+import FaqContent from "./FaqContent";
+
+describe("FaqContent", () => {
+  it("renders translated FAQ copy with links and images", () => {
+    render(<FaqContent />);
+
+    expect(
+      screen.getByRole("heading", { name: "Definitions & Terminologies" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "What is the Codebook?" }),
+    ).toBeInTheDocument();
+
+    const codebookLinks = screen.getAllByRole("link", { name: "Codebook" });
+    expect(codebookLinks[0]).toHaveAttribute("href", "/admin/");
+    expect(screen.getByAltText("Codebook Screenshot")).toBeInTheDocument();
+    const supportLinks = screen.getAllByRole("link", {
+      name: "global.surveydesigner@wfp.org",
+    });
+    expect(supportLinks[0]).toHaveAttribute(
+      "href",
+      "mailto:global.surveydesigner@wfp.org",
+    );
+  });
+});