feat: add help buttons and link to repo

rare-magma · May 26, 2023 · 68deb54 · 68deb54
1 parent 05b92ce
commit 68deb54
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -306,6 +306,10 @@ input[type="number"] {
   font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;
 }
 
+.brand {
+  color: var(--textcolor);
+}
+
 .pre,
 .textarea {
   font-size: 0.9em;

diff --git a/src/components/LandingPage/LandingPage.test.tsx b/src/components/LandingPage/LandingPage.test.tsx
@@ -23,11 +23,10 @@ describe("LandingPage", () => {
   });
 
   it("renders initial state", () => {
+    expect(screen.getByLabelText("new budget")).toBeInTheDocument();
+    expect(screen.getByLabelText("import budget")).toBeInTheDocument();
     expect(
-      screen.getAllByRole("button", { name: "new budget" })[0]
-    ).toBeInTheDocument();
-    expect(
-      screen.getAllByRole("button", { name: "import budget" })[0]
+      screen.getByLabelText("open instructions in new tab")
     ).toBeInTheDocument();
   });
 
@@ -45,6 +44,17 @@ describe("LandingPage", () => {
     expect(onImport).toHaveBeenCalledTimes(1);
   });
 
+  it("opens instructions in new tab", async () => {
+    const instructionsButton = screen.getByLabelText(
+      "open instructions in new tab"
+    );
+    await userEvent.click(instructionsButton);
+    expect(instructionsButton).toHaveAttribute(
+      "href",
+      "https://github.com/rare-magma/guitos#getting-started"
+    );
+  });
+
   it("renders loading spinner", () => {
     render(
       <LandingPage

diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
@@ -74,6 +74,15 @@ function LandingPage({
                   style={{ display: "none" }}
                 />
               </Form.Group>
+              <Button
+                className="w-25 align-self-center"
+                aria-label="open instructions in new tab"
+                variant="outline-info"
+                href="https://github.com/rare-magma/guitos#getting-started"
+                target="_blank"
+              >
+                help
+              </Button>
             </Stack>
           </Row>
         </Container>

diff --git a/src/components/NavBar/NavBar.test.tsx b/src/components/NavBar/NavBar.test.tsx
@@ -66,21 +66,31 @@ describe("NavBar", () => {
   });
 
   it("triggers onImport when import button is pressed", async () => {
+    await userEvent.click(screen.getByLabelText("import budget"));
     await userEvent.upload(
       screen.getByTestId("import-form-control"),
       testBudget as unknown as File
     );
     expect(onImport).toHaveBeenCalledTimes(1);
   });
 
-  it("triggers onExport when export button is pressed", async () => {
+  it("triggers onExport when export json button is pressed", async () => {
     await userEvent.click(screen.getByLabelText("export budget"));
     await userEvent.click(
       screen.getByRole("button", { name: "export budget as json" })
     );
     expect(onExport).toHaveBeenCalledTimes(1);
   });
 
+  it("triggers onExport when export csv button is pressed", async () => {
+    onExport.mockClear();
+    await userEvent.click(screen.getByLabelText("export budget"));
+    await userEvent.click(
+      screen.getByRole("button", { name: "export budget as csv" })
+    );
+    expect(onExport).toHaveBeenCalledTimes(1);
+  });
+
   it("triggers onRename when user changes budget name input", async () => {
     await userEvent.type(screen.getByDisplayValue("2023-04"), "change name");
 
@@ -114,4 +124,42 @@ describe("NavBar", () => {
     await userEvent.click(screen.getByText("CAD"));
     expect(onSetCurrency).toHaveBeenCalledTimes(1);
   });
+
+  it("opens instructions in new tab", async () => {
+    const instructionsButton = screen.getByLabelText(
+      "open instructions in new tab"
+    );
+    await userEvent.click(instructionsButton);
+    expect(instructionsButton).toHaveAttribute(
+      "href",
+      "https://github.com/rare-magma/guitos#getting-started"
+    );
+  });
+
+  it("opens guitos repo in new tab", async () => {
+    render(
+      <NavBar
+        budgetNameList={[]}
+        currency={testIntlConfig.currency}
+        selected={null}
+        id={"035c2de4-00a4-403c-8f0e-f81339be9a4e"}
+        onClone={onClone}
+        onExport={onExport}
+        onGoBack={onGoBack}
+        onGoForward={onGoForward}
+        onImport={onImport}
+        onNew={onNew}
+        onRemove={onRemove}
+        onRename={onRename}
+        onSelect={onSelect}
+        onSetCurrency={onSetCurrency}
+      />
+    );
+    const guitosButton = screen.getByLabelText("open guitos repository");
+    await userEvent.click(guitosButton);
+    expect(guitosButton).toHaveAttribute(
+      "href",
+      "https://github.com/rare-magma/guitos"
+    );
+  });
 });
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -18,6 +18,7 @@ import {
   BsDownload,
   BsArrowLeft,
   BsArrowRight,
+  BsQuestionLg,
 } from "react-icons/bs";
 import { FaRegClone } from "react-icons/fa";
 import { Typeahead } from "react-bootstrap-typeahead";
@@ -173,7 +174,27 @@ function NavBar({
     >
       <Container fluid className="flex-row">
         {initialBudgetNameList && initialBudgetNameList.length < 1 && (
-          <Navbar.Brand className="flex-sm-row">guitos</Navbar.Brand>
+          <OverlayTrigger
+            delay={250}
+            placement="bottom"
+            overlay={
+              <Tooltip id={`tooltip-guitos-repo`} style={{ position: "fixed" }}>
+                open repository in new tab
+              </Tooltip>
+            }
+          >
+            <Navbar.Brand className="flex-sm-row">
+              <a
+                className="brand"
+                aria-label="open guitos repository"
+                href="https://github.com/rare-magma/guitos"
+                target="_blank"
+                rel="noreferrer"
+              >
+                guitos
+              </a>
+            </Navbar.Brand>
+          </OverlayTrigger>
         )}
         <Nav className="flex-row flex-grow-1">
           {initialSelectedName && (
@@ -560,6 +581,30 @@ function NavBar({
                   </Nav>
                 </>
               )}
+              <Nav className="m-2">
+                <OverlayTrigger
+                  delay={250}
+                  placement="bottom"
+                  overlay={
+                    <Tooltip
+                      id={`tooltip-guitos-instructions`}
+                      style={{ position: "fixed" }}
+                    >
+                      open instructions in new tab
+                    </Tooltip>
+                  }
+                >
+                  <Button
+                    className="w-100"
+                    aria-label="open instructions in new tab"
+                    variant="outline-info"
+                    href="https://github.com/rare-magma/guitos#getting-started"
+                    target="_blank"
+                  >
+                    {expanded ? "instructions" : <BsQuestionLg />}
+                  </Button>
+                </OverlayTrigger>
+              </Nav>
               <OverlayTrigger
                 delay={250}
                 placement="bottom"