Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import { EmailIcon } from "@chakra-ui/icons";
import { Divider, Stack, useBreakpointValue } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { PACKAGE_ANALYTICS } from "./constants";
import { usePackageState } from "./PackageState";
import testIds from "./testIds";
import { ExternalLink } from "../../components/ExternalLink";
import { CONSTRUCT_HUB_REPO_URL } from "../../constants/links";
import { GithubIcon } from "../../icons/GithubIcon";
const iconProps = {
h: 6,
ml: 2,
w: 6,
};
export const FeedbackLinks: FunctionComponent = () => {
const state = usePackageState();
const orientation = useBreakpointValue<"vertical" | "horizontal">({
base: "horizontal",
md: "vertical",
});
const divider = (
<Divider borderColor="white" mr={6} orientation={orientation} />
);
const metadata = state.metadata.data;
const assembly = state.assembly.data;
if (!(assembly && metadata)) return null;
const repo = assembly?.repository ?? {};
let repoUrl = undefined;
if (repo.type === "git") {
repoUrl = repo.url?.endsWith(".git")
? repo.url.replace(".git", "")
: repo.url;
if (repoUrl.endsWith("/")) {
repoUrl = repoUrl.slice(0, repoUrl.length - 1);
}
}
return (
<Stack
align="center"
backgroundColor="blue.600"
borderTop="1px solid"
borderTopColor="borderColor"
color="white"
data-testid={testIds.feedbackLinks}
direction={{ base: "column", md: "row" }}
justify="space-evenly"
px={8}
py={5}
spacing={4}
>
{repoUrl && (
<>
<ExternalLink
color="currentcolor"
data-event={PACKAGE_ANALYTICS.FEEDBACK.PUBLISHER}
data-testid={testIds.githubLink}
fontSize="lg"
fontWeight="semibold"
hasIcon={false}
href={`${repoUrl}/issues`}
rightIcon={<GithubIcon color="white" {...iconProps} />}
variant="solid"
>
Provide feedback to publisher
</ExternalLink>
{divider}
</>
)}
<ExternalLink
color="currentcolor"
data-event={PACKAGE_ANALYTICS.FEEDBACK.CONSTRUCT_HUB}
data-testid={testIds.reportLink}
fontSize="lg"
fontWeight="semibold"
hasIcon={false}
href={`${CONSTRUCT_HUB_REPO_URL}/issues/new`}
rightIcon={<GithubIcon color="white" {...iconProps} />}
>
Provide feedback to Construct Hub
</ExternalLink>
{divider}
<ExternalLink
color="currentcolor"
data-event={PACKAGE_ANALYTICS.FEEDBACK.ABUSE}
data-testid={testIds.reportAbuseLink}
fontSize="lg"
fontWeight="semibold"
hasIcon={false}
href={`mailto:abuse@amazonaws.com?subject=${encodeURIComponent(
`ConstructHub - Report of abusive package: ${assembly?.name}`
)}`}
rightIcon={<EmailIcon {...iconProps} />}
>
Report abuse
</ExternalLink>
</Stack>
);
};
|