Studies page

shared/types/src/Study.ts

@@ -0,0 +1,20 @@
+export interface Study {
+  studyId: string;
+  name: string;
+  version: string;
+  description: string;
+  studyDetailsLink: string;
+  authors: {
+    name: string;
+  };
+  icons: Record<string, string>;
+  firefoxAddonId: string;
+  chromeExtensionId: string;
+  schemaNamespace: string;
+  downloadLink: string;
+  endDate: string | "Ongoing";
+  studyEnded: boolean;
+  studyPaused: boolean;
+  dataCollectionDetails: string[];
+  tags: string[];
+}

shared/types/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./Study";
 export * from "./UserDocument";
 export * from "./UserDemographicsData";
 export * from "./UserStudyRecord";

web-platform/website/__mocks__/firebase/firestore.js

@@ -1,8 +1,11 @@
 // Manual mock required as jest does not handle ESM modules.
 module.exports = {
+  collection: jest.fn(),
   doc: jest.fn(),
   getDoc: jest.fn(),
+  getDocs: jest.fn(),
   getFirestore: jest.fn(),
   onSnapshot: jest.fn(),
+  setDoc: jest.fn(),
   updateDoc: jest.fn()
 };

web-platform/website/src/__tests__/IndexPage.tests.tsx

@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react";
+import Head from "next/head";
+
+import { AuthenticatedPage } from "../components/AuthenticatedPage";
+import { StudiesPageContent } from "../components/pages/studies/StudiesPageContent";
+import { default as IndexPage } from "../pages/index";
+import { Strings } from "../resources/Strings";
+
+jest.mock("next/head");
+jest.mock("../components/AuthenticatedPage");
+jest.mock("../components/Layout");
+jest.mock("../components/pages/studies/StudiesPageContent");
+
+const strings = Strings.pages.index;
+
+describe("IndexPage tests", () => {
+  beforeEach(() => {
+    (Head as jest.Mock).mockImplementation(({ children }) => children);
+    (AuthenticatedPage as jest.Mock).mockImplementation(
+      ({ children }) => children
+    );
+  });
+
+  it("renders studies content", () => {
+    render(<IndexPage />);
+
+    expect(AuthenticatedPage).toHaveBeenCalled();
+    expect(StudiesPageContent).toHaveBeenCalled();
+
+    expect(document.title).toBe(strings.title);
+  });
+});

web-platform/website/src/__tests__/PrivacyPolicyPage.tests.tsx

@@ -88,7 +88,10 @@ describe("privacy policy page tests", () => {
 
     render(<PrivacyPolicyPage />);
 
-    expect(PrivacyPolicyPageContent).toHaveBeenCalled();
+    expect(PrivacyPolicyPageContent).toHaveBeenCalledWith(
+      { readOnly: false },
+      expect.anything()
+    );
 
     expect(replace).not.toHaveBeenCalled();
 

web-platform/website/src/__tests__/TermsPage.tests.tsx

@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react";
+import Head from "next/head";
+
+import { Layout } from "../components/Layout";
+import { PrivacyPolicyPageContent } from "../components/pages/privacy-policy/PrivacyPolicyPageContent";
+import { default as TermsPage } from "../pages/terms";
+import { Strings } from "../resources/Strings";
+
+jest.mock("next/head");
+jest.mock("../components/Layout");
+jest.mock("../components/pages/privacy-policy/PrivacyPolicyPageContent");
+
+const strings = Strings.pages.privacyPolicy;
+
+describe("TermsPage tests", () => {
+  beforeEach(() => {
+    (Layout as jest.Mock).mockImplementation(({ children }) => children);
+    (Head as jest.Mock).mockImplementation(({ children }) => children);
+  });
+
+  it("renders terms content", () => {
+    render(<TermsPage />);
+
+    expect(Layout).toHaveBeenCalled();
+    expect(PrivacyPolicyPageContent).toHaveBeenCalledWith(
+      { readOnly: true },
+      expect.anything()
+    );
+
+    expect(document.title).toBe(strings.title);
+  });
+});

web-platform/website/src/components/Footer.tsx

@@ -0,0 +1,115 @@
+import { Col, Container, Row } from "reactstrap";
+import { style } from "typestyle";
+
+import { Strings } from "../resources/Strings";
+import { Colors } from "../styles/Colors";
+import { ContainerStyles } from "../styles/ContainerStyles";
+import { FontSize } from "../styles/Fonts";
+import { LinkStyles } from "../styles/LinkStyles";
+import { Spacing } from "../styles/Spacing";
+
+const strings = Strings.components.footer;
+
+export function Footer() {
+  return (
+    <Container
+      className={`${ContainerStyles.TopLevelContainer} ${styles.container} g-0`}
+    >
+      <Row>
+        <Col>
+          <img
+            src="/img/moz-rally-logo-inverted.svg"
+            className="logo-large"
+            alt=""
+          />
+        </Col>
+      </Row>
+      <Row>
+        {strings.sections.map((section, i) => (
+          <Col className="col-12 col-lg-4 col-md-6" key={i}>
+            <a
+              className={`${FontSize.Large} ${LinkStyles.NoUnderline} fw-bold mb-2`}
+              href={section.heading.link}
+              target={section.heading.external ? "_blank" : "_self"}
+              rel="noreferrer"
+            >
+              {section.heading.text}
+            </a>
+            <ul className="list-unstyled mb-5">
+              {section.links.map((l, i) => (
+                <li key={i}>
+                  <a
+                    href={l.link}
+                    target={l.external ? "_blank" : "_self"}
+                    className={`${FontSize.Small} ${LinkStyles.NoUnderline}`}
+                    rel="noreferrer"
+                  >
+                    {l.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </Col>
+        ))}
+      </Row>
+      <Row>
+        <Col>
+          <hr className="" />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <p className={`${FontSize.xSmall} ms-0`}>{strings.copyright}</p>
+        </Col>
+      </Row>
+      <Row>
+        {strings.bottomLinks.map((l, i) => (
+          <Col className="col-auto" key={i}>
+            <a
+              href={l.link}
+              target={l.external ? "_blank" : "_self"}
+              className={`${FontSize.xSmall} ${LinkStyles.NoUnderline}`}
+              rel="noreferrer"
+            >
+              {l.text}
+            </a>
+          </Col>
+        ))}
+        <Col>
+          <a
+            className="d-flex justify-content-end"
+            target="_blank"
+            href={strings.twitterLink}
+            rel="noreferrer"
+          >
+            <img
+              src="img/twitter.svg"
+              width={Spacing.xLarge}
+              height={Spacing.xLarge}
+              alt=""
+            />
+          </a>
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+const styles = {
+  container: style({
+    backgroundColor: Colors.ColorBlack,
+    color: Colors.ColorWhite,
+    maxWidth: "unset",
+
+    paddingTop: Spacing.xxxLarge,
+    paddingBottom: Spacing.xxxLarge,
+
+    $nest: {
+      ".logo-large": {
+        width: 200,
+        marginRight: Spacing.xxLarge,
+        paddingBottom: Spacing.Medium * 6,
+      },
+    },
+  }),
+};

web-platform/website/src/components/Layout.tsx

@@ -1,10 +1,12 @@
+import { Footer } from "./Footer";
 import { NavigationBar } from "./navigation-bar";
 
 export function Layout(props: { children?: JSX.Element }) {
   return (
     <>
       <NavigationBar />
       {props.children}
+      <Footer />
     </>
   );
 }

web-platform/website/src/components/__tests__/Footer.tests.tsx

@@ -0,0 +1,52 @@
+import { render } from "@testing-library/react";
+
+import { Strings } from "../../resources/Strings";
+import { Footer } from "../Footer";
+
+const strings = Strings.components.footer;
+
+describe("Footer tests", () => {
+  it("renders all components correctly", () => {
+    const root = render(<Footer />);
+
+    expect(
+      document.querySelector(`img[src="/img/moz-rally-logo-inverted.svg"]`)
+    ).toBeInTheDocument();
+
+    strings.sections.forEach((section) => {
+      assertLinkExists(section.heading);
+
+      section.links.forEach((link) => {
+        assertLinkExists(link);
+      });
+    });
+
+    expect(root.getByText(strings.copyright)).toBeInTheDocument();
+
+    strings.bottomLinks.forEach((link) => assertLinkExists(link));
+
+    const twitterLink = document.querySelector(
+      `a[href="${strings.twitterLink}"]`
+    ) as HTMLAnchorElement;
+    expect(twitterLink).not.toBeNull();
+    expect(twitterLink.target).toBe("_blank");
+
+    expect(
+      document.querySelector(`img[src="img/twitter.svg"]`)
+    ).toBeInTheDocument();
+  });
+
+  function assertLinkExists(link: {
+    text: string;
+    link: string;
+    external: boolean;
+  }) {
+    const anchorElement = document.querySelector(
+      `a[href="${link.link}"]`
+    ) as HTMLAnchorElement;
+
+    expect(anchorElement).not.toBeNull();
+    expect(anchorElement.innerHTML.replace("&amp;", "&")).toBe(link.text);
+    expect(anchorElement.target).toBe(link.external ? "_blank" : "_self");
+  }
+});

web-platform/website/src/components/navigation-bar/DesktopMenu.tsx

@@ -30,7 +30,7 @@ export function DesktopMenu() {
       </DropdownToggle>
       <DropdownMenu>
         <DropdownItem>
-          <div className={"text-center text-nowrap"}>
+          <div className={"text-nowrap"}>
             {user && user.firebaseUser && user.firebaseUser.email}
           </div>
         </DropdownItem>