Added a blank state

Author: matt-aitken

apps/webapp/app/components/BlankStatePanels.tsx

@@ -36,6 +36,7 @@ import { TextLink } from "./primitives/TextLink";
 import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { HttpCallbackIcon } from "~/assets/icons/HttpCallbackIcon";
 
 export function HasNoTasksDev() {
   return (
@@ -431,6 +432,33 @@ export function NoWaitpointTokens() {
   );
 }
 
+export function NoHttpCallbacks() {
+  return (
+    <InfoPanel
+      title="You don't have any HTTP callbacks"
+      icon={HttpCallbackIcon}
+      iconClassName="text-teal-500"
+      panelClassName="max-w-md"
+      accessory={
+        <LinkButton
+          to={docsPath("wait-for-http-callback")}
+          variant="docs/small"
+          LeadingIcon={BookOpenIcon}
+        >
+          Waitpoint docs
+        </LinkButton>
+      }
+    >
+      <Paragraph spacing variant="small">
+        HTTP callbacks are used to pause runs until an HTTP request is made to a provided URL.
+      </Paragraph>
+      <Paragraph spacing variant="small">
+        They are useful when using APIs that provide a callback URL. You can send the URL to them
+        and when they callback your run will continue.
+      </Paragraph>
+    </InfoPanel>
+  );
+}
 function SwitcherPanel() {
   const organization = useOrganization();
   const project = useProject();

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.http-callbacks/route.tsx

@@ -3,7 +3,7 @@ import { Outlet, useParams, type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
-import { NoWaitpointTokens } from "~/components/BlankStatePanels";
+import { NoHttpCallbacks } from "~/components/BlankStatePanels";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { ListPagination } from "~/components/ListPagination";
 import { LinkButton } from "~/components/primitives/Buttons";
@@ -132,7 +132,7 @@ export default function Page() {
       <PageBody scrollable={false}>
         {!hasAnyTokens ? (
           <MainCenteredContainer className="max-w-md">
-            <NoWaitpointTokens />
+            <NoHttpCallbacks />
           </MainCenteredContainer>
         ) : (
           <ResizablePanelGroup orientation="horizontal" className="max-h-full">