feat: add feedback links to bottom of package page (#569)

Fixes #552 

<img width="1598" alt="Screen Shot 2021-11-03 at 9 51 45 AM" src="https://user-images.githubusercontent.com/8749859/140108540-e94e5ac1-b1bd-4867-be8e-cced00e1247d.png">

cypress/integration/package-page.spec.ts

@@ -0,0 +1,61 @@
+import { getPackagePath } from "util/url";
+import header from "components/Header/testIds";
+import packagePage from "views/Package/testIds";
+
+describe("Package Page", () => {
+  beforeEach(() => {
+    cy.intercept("**/assembly.json", async (req) => {
+      req.reply({
+        fixture: "assembly",
+      });
+    });
+
+    cy.intercept("**/metadata.json", async (req) => {
+      req.reply({
+        fixture: "metadata",
+      });
+    });
+
+    cy.intercept("**/docs-typescript.md", async (req) => {
+      req.reply({
+        fixture: "xss-docs.md",
+      });
+    }).as("getDocs");
+
+    cy.visit(
+      getPackagePath({
+        name: "construct-hub",
+        version: "0.2.31",
+        language: "typescript" as any,
+      })
+    );
+
+    cy.wait("@getDocs");
+
+    cy.getByDataTest(header.container).should("be.visible");
+  });
+
+  it("Has feedback and report links", () => {
+    cy.getByDataTest(packagePage.feedbackLinks)
+      .should("be.visible")
+      .within(() => {
+        cy.getByDataTest(packagePage.reportLink)
+          .should("be.visible")
+          .should(
+            "have.attr",
+            "href",
+            `mailto:[email protected]?subject=${encodeURIComponent(
+              `ConstructHub - Report of abusive package: construct-hub`
+            )}`
+          );
+
+        cy.getByDataTest(packagePage.githubLink)
+          .should("be.visible")
+          .should(
+            "have.attr",
+            "href",
+            "https://github.com/cdklabs/construct-hub/issues"
+          );
+      });
+  });
+});

src/icons/GithubIcon.tsx

@@ -0,0 +1,16 @@
+import { Icon } from "@chakra-ui/react";
+
+export const GithubIcon: typeof Icon = (props) => (
+  <Icon {...props}>
+    <path
+      clipRule="evenodd"
+      d="M10.2532 0C4.59124 0 0 4.59022 0 10.2532C0 14.7835 2.93785 18.6266 7.01174 19.9825C7.524 20.0776 7.71212 19.7601 7.71212 19.4893C7.71212 19.2448 7.70261 18.4371 7.6982 17.5804C4.84576 18.2006 4.24386 16.3706 4.24386 16.3706C3.77745 15.1855 3.10543 14.8704 3.10543 14.8704C2.17499 14.234 3.17555 14.2473 3.17555 14.2473C4.20498 14.3194 4.74728 15.3039 4.74728 15.3039C5.66176 16.871 7.14588 16.418 7.73097 16.1562C7.82299 15.4935 8.08871 15.041 8.38194 14.785C6.10457 14.5261 3.71038 13.6467 3.71038 9.718C3.71038 8.59859 4.11108 7.68394 4.76697 6.96573C4.66035 6.70765 4.30939 5.66481 4.86613 4.25252C4.86613 4.25252 5.72696 3.97695 7.68631 5.3035C8.50435 5.07616 9.38165 4.96189 10.2532 4.95799C11.1242 4.96189 12.002 5.07582 12.8216 5.30317C14.7785 3.97661 15.6383 4.25218 15.6383 4.25218C16.1964 5.6643 15.8455 6.70731 15.739 6.96539C16.3964 7.6836 16.7943 8.59825 16.7943 9.71766C16.7943 13.6557 14.3957 14.5227 12.1125 14.7767C12.4805 15.0949 12.8081 15.719 12.8081 16.6754C12.8081 18.0473 12.7963 19.1514 12.7963 19.4891C12.7963 19.762 12.981 20.0817 13.5005 19.981C17.5721 18.6237 20.5065 14.7818 20.5065 10.2532C20.5063 4.59056 15.9156 0.000169776 10.2532 0.000169776V0Z"
+      fill="#002954"
+      fillRule="evenodd"
+    />
+    <path
+      d="M3.88318 14.7214C3.86059 14.7724 3.78045 14.7876 3.70744 14.7528C3.63274 14.7195 3.59114 14.6501 3.61525 14.599C3.63732 14.5464 3.71763 14.5319 3.79183 14.5671C3.86654 14.6005 3.90898 14.6706 3.88301 14.7216L3.88318 14.7214ZM4.29848 15.1848C4.24975 15.2301 4.15416 15.209 4.0893 15.1372C4.02206 15.0659 4.0095 14.9703 4.05925 14.9243C4.10984 14.8791 4.20255 14.9005 4.26978 14.9719C4.33668 15.0442 4.34992 15.1389 4.29865 15.1849L4.29848 15.1848ZM4.70291 15.7751C4.64009 15.8189 4.5372 15.778 4.4737 15.6868C4.41088 15.5955 4.41088 15.486 4.4754 15.4423C4.53873 15.3985 4.64009 15.4381 4.70461 15.5284C4.76709 15.621 4.76709 15.7305 4.70291 15.775V15.7751ZM5.25659 16.3458C5.20056 16.4078 5.08069 16.3911 4.99308 16.3067C4.9036 16.224 4.87864 16.1064 4.93484 16.0446C4.99189 15.9824 5.11227 15.9998 5.20039 16.0836C5.28987 16.1661 5.31687 16.284 5.25693 16.3456L5.25659 16.3458ZM6.02064 16.677C5.99568 16.7573 5.88056 16.7939 5.76426 16.7596C5.64829 16.7244 5.5724 16.6305 5.59617 16.5494C5.61994 16.4684 5.7359 16.4305 5.85289 16.467C5.96885 16.502 6.04475 16.5954 6.02064 16.677ZM6.8599 16.7383C6.86279 16.8229 6.76431 16.8928 6.64257 16.8945C6.51982 16.8974 6.42049 16.8288 6.4193 16.7456C6.4193 16.6602 6.51574 16.5911 6.63833 16.5887C6.76007 16.5865 6.86007 16.6545 6.86007 16.7382L6.8599 16.7383ZM7.64059 16.6056C7.65519 16.6879 7.57047 16.7726 7.44941 16.7952C7.33056 16.8173 7.22019 16.766 7.20491 16.6843C7.19031 16.5998 7.27656 16.5151 7.39541 16.4932C7.51664 16.4723 7.62531 16.522 7.64059 16.6057V16.6056Z"
+      fill="#181616"
+    />
+  </Icon>
+);

src/views/Package/FeedbackLinks.tsx

@@ -0,0 +1,77 @@
+import { EmailIcon } from "@chakra-ui/icons";
+import { Button, Link, Flex } from "@chakra-ui/react";
+import type { FunctionComponent, ReactNode } from "react";
+import { ExternalLink } from "../../components/ExternalLink";
+import { GithubIcon } from "../../icons/GithubIcon";
+import { usePackageState } from "./PackageState";
+import testIds from "./testIds";
+
+const iconProps = {
+  h: 5,
+  ml: 2,
+  w: 5,
+};
+
+export const FeedbackLinks: FunctionComponent = () => {
+  const state = usePackageState();
+  const metadata = state.metadata.data;
+  const assembly = state.assembly.data;
+
+  if (!(assembly && metadata)) return null;
+
+  const repo = assembly?.repository ?? {};
+
+  let repoLink: ReactNode = null;
+
+  if (repo.type === "git") {
+    let repoUrl = repo.url?.endsWith(".git")
+      ? repo.url.replace(".git", "")
+      : repo.url;
+
+    if (repoUrl.endsWith("/")) {
+      repoUrl = repoUrl.slice(0, repoUrl.length - 1);
+    }
+
+    repoLink = (
+      <Button
+        as={ExternalLink}
+        color="black"
+        data-testid={testIds.githubLink}
+        hasIcon={false}
+        href={`${repoUrl}/issues`}
+        rightIcon={<GithubIcon {...iconProps} />}
+        variant="solid"
+      >
+        Provide Feedback
+      </Button>
+    );
+  }
+
+  return (
+    <Flex
+      align="center"
+      borderTop="1px solid"
+      borderTopColor="blue.50"
+      color="blue.500"
+      data-testid={testIds.feedbackLinks}
+      direction="row"
+      justify="space-evenly"
+      mx={8}
+      py={10}
+    >
+      <Button
+        as={Link}
+        colorScheme="blue"
+        data-testid={testIds.reportLink}
+        href={`mailto:[email protected]?subject=${encodeURIComponent(
+          `ConstructHub - Report of abusive package: ${assembly?.name}`
+        )}`}
+        rightIcon={<EmailIcon {...iconProps} />}
+      >
+        Report this package
+      </Button>
+
+      {repoLink}
+    </Flex>
+  );
+};

src/views/Package/PackageDocs.tsx

@@ -94,8 +94,9 @@ export const PackageDocs: FunctionComponent<PackageDocsProps> = ({
         display={{ base: "none", md: "flex" }}
         maxHeight={`calc(100vh - ${TOP_OFFSET})`}
         overflow="hidden auto"
+        pl={6}
         position="sticky"
-        px={4}
+        pr={4}
         top={TOP_OFFSET}
       >
         {Object.keys(assembly?.submodules ?? {}).length > 0 && (

src/views/Package/PackageLayout.tsx

@@ -11,11 +11,13 @@ import {
 } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
 import { Page } from "../../components/Page";
+import { FeedbackLinks } from "./FeedbackLinks";
 import { PackageDocs } from "./PackageDocs";
 import { PackageDocsError } from "./PackageDocsError";
 import { PackageDocsUnsupported } from "./PackageDocsUnsupported";
 import { PackageHeader } from "./PackageHeader";
 import { usePackageState } from "./PackageState";
+import testIds from "./testIds";
 
 export const PackageLayout: FunctionComponent = () => {
   const {
@@ -34,12 +36,18 @@ export const PackageLayout: FunctionComponent = () => {
       meta={{ title: pageTitle, description: pageDescription }}
       pageName="packageProfile"
     >
-      <Flex bg="white" direction="column" maxW="100vw">
+      <Flex
+        bg="white"
+        data-testid={testIds.page}
+        direction="column"
+        maxW="100vw"
+      >
         <PackageHeader />
 
         <Tabs variant="line">
           <TabList
-            borderBottom="base"
+            borderBottom="1px solid"
+            borderBottomColor="blue.50"
             mt={4}
             mx={{ base: 0, lg: 6 }}
             overflowX="auto"
@@ -76,6 +84,7 @@ export const PackageLayout: FunctionComponent = () => {
             <TabPanel>Coming Soon</TabPanel>
           </TabPanels>
         </Tabs>
+        <FeedbackLinks />
       </Flex>
     </Page>
   );

src/views/Package/testIds.ts

@@ -0,0 +1,8 @@
+import { createTestIds } from "../../util/createTestIds";
+
+export default createTestIds("package-page", [
+  "page",
+  "feedbackLinks",
+  "reportLink",
+  "githubLink",
+] as const);