Added 2 buttons below the list of Integrations

2 CTA to request a missing API and to link to the docs to create your own integration

apps/webapp/app/components/Feedback.tsx

@@ -1,14 +1,17 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { ChatBubbleLeftRightIcon } from "@heroicons/react/24/solid";
 import {
   Form,
   useActionData,
   useLocation,
   useNavigation,
 } from "@remix-run/react";
-import { useState } from "react";
-import { feedbackTypeLabel, schema } from "~/routes/resources.feedback";
+import { ReactNode, useState } from "react";
+import {
+  FeedbackType,
+  feedbackTypeLabel,
+  schema,
+} from "~/routes/resources.feedback";
 import { Button } from "./primitives/Buttons";
 import { Fieldset } from "./primitives/Fieldset";
 import { FormButtons } from "./primitives/FormButtons";
@@ -33,7 +36,12 @@ import {
 } from "./primitives/Sheet";
 import { TextArea } from "./primitives/TextArea";
 
-export function Feedback() {
+type FeedbackProps = {
+  button: ReactNode;
+  defaultValue?: FeedbackType;
+};
+
+export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
   const [open, setOpen] = useState(false);
   const location = useLocation();
   const lastSubmission = useActionData();
@@ -58,15 +66,7 @@ export function Feedback() {
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild={true}>
-        <Button
-          variant="secondary/small"
-          LeadingIcon={ChatBubbleLeftRightIcon}
-          shortcut={{ key: "f" }}
-        >
-          Send us feedback
-        </Button>
-      </SheetTrigger>
+      <SheetTrigger asChild={true}>{button}</SheetTrigger>
       <SheetContent size="sm">
         <SheetHeader className="justify-between">Give us feedback</SheetHeader>
         <SheetBody>
@@ -82,7 +82,10 @@ export function Feedback() {
               <InputGroup>
                 <Label>What kind of feedback do you have?</Label>
                 <SelectGroup>
-                  <Select {...conform.input(feedbackType)} defaultValue={"bug"}>
+                  <Select
+                    {...conform.input(feedbackType)}
+                    defaultValue={defaultValue}
+                  >
                     <SelectTrigger size="medium" width="full">
                       <SelectValue placeholder="Type" />
                     </SelectTrigger>

apps/webapp/app/components/navigation/NavBar.tsx

@@ -1,11 +1,14 @@
 import { Popover, Transition } from "@headlessui/react";
-import { BookOpenIcon } from "@heroicons/react/20/solid";
+import {
+  BookOpenIcon,
+  ChatBubbleLeftRightIcon,
+} from "@heroicons/react/20/solid";
 import { Link } from "@remix-run/react";
 import { Fragment } from "react";
 import { cn } from "~/utils/cn";
 import { Feedback } from "../Feedback";
 import { LogoIcon } from "../LogoIcon";
-import { LinkButton } from "../primitives/Buttons";
+import { Button, LinkButton } from "../primitives/Buttons";
 import { Breadcrumb } from "./Breadcrumb";
 import { docsRoot } from "~/utils/pathBuilder";
 
@@ -27,7 +30,17 @@ export function NavBar() {
         >
           Documentation
         </LinkButton>
-        <Feedback />
+        <Feedback
+          button={
+            <Button
+              variant="secondary/small"
+              LeadingIcon={ChatBubbleLeftRightIcon}
+              shortcut={{ key: "f" }}
+            >
+              Send us feedback
+            </Button>
+          }
+        />
       </div>
     </div>
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx

@@ -2,6 +2,7 @@ import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import type { LoaderArgs } from "@remix-run/server-runtime";
 import { useCallback, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { Feedback } from "~/components/Feedback";
 import { LogoIcon } from "~/components/LogoIcon";
 import { HowToConnectAnIntegration } from "~/components/helpContent/HelpContentText";
 import { ConnectToIntegrationSheet } from "~/components/integrations/ConnectToIntegrationSheet";
@@ -211,9 +212,28 @@ function PossibleIntegrationsList({
           }
         })}
       </div>
-      {/* <Header2 className="mb-2 mt-6">Missing an API?</Header2> */}
-      {/* <AddIntegrationConnection identifier={""} name="" isIntegration={false} />
-      <Header2 className="mb-2 mt-6">Create your own Integration</Header2> */}
+      <Header2 className="mb-2 mt-6">Missing an API?</Header2>
+      <Feedback
+        button={
+          <button className="w-full">
+            <ExternalIntegrationLink
+              name="plus"
+              label="Request an API and we'll add it to the list as an Integration"
+              trailingIcon="chevron-right"
+            />
+          </button>
+        }
+        defaultValue="integration"
+      />
+
+      <Header2 className="mb-2 mt-6">Create an Integration</Header2>
+      <a href="https://docs.trigger.dev/integrations/create" target="_blank">
+        <ExternalIntegrationLink
+          name="integration"
+          label="Learn how to create your own API Integrations"
+          trailingIcon="external-link"
+        />
+      </a>
     </div>
   );
 }
@@ -511,6 +531,38 @@ function AddIntegrationConnection({
   );
 }
 
+function ExternalIntegrationLink({
+  name,
+  label,
+  trailingIcon,
+}: {
+  name: string;
+  label: string;
+  trailingIcon: string;
+}) {
+  return (
+    <span className="group flex h-11 w-full items-center gap-3 rounded-md p-1 pr-3 transition hover:bg-slate-850">
+      <NamedIconInBox
+        name={name}
+        className="h-9 w-9 flex-none text-dimmed transition group-hover:border-slate-750"
+        iconClassName="text-dimmed"
+      />
+      <Paragraph
+        variant="base"
+        className="m-0 flex-1 text-left transition group-hover:text-bright"
+      >
+        {label}
+      </Paragraph>
+      <div className="flex flex-none items-center gap-1">
+        <NamedIcon
+          name={trailingIcon}
+          className="h-6 w-6 flex-none text-slate-700 transition group-hover:text-bright"
+        />
+      </div>
+    </span>
+  );
+}
+
 export function IntegrationIcon() {
   return <LogoIcon className="h-3.5 w-3.5 flex-none pb-0.5" />;
 }