triggerdotdev · ericallam · Feb 15, 2023 · Feb 9, 2023 · Feb 9, 2023 · Feb 9, 2023
diff --git a/.changeset/spotty-walls-flow.md b/.changeset/spotty-walls-flow.md
@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Automatically pickup on the TRIGGER_WSS_URL for the wss endpoint
diff --git a/README.md b/README.md
@@ -172,7 +172,7 @@ new Trigger({
 
 One of the most powerful features of Trigger.dev is the [runs page](https://docs.trigger.dev/viewing-runs). All of the steps in a workflow, including the initial event, can be viewed in detail. See the status / output of each step, the logs, rich previews, errors and much more.
 
-![Viewing runs](https://mintlify.s3-us-west-1.amazonaws.com/api-hero/images/run-succeeded.png)
+![Viewing runs](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/7343f3b2-2342-493b-5007-78f60ba5b700/public)
 
 
 &nbsp;

diff --git a/apps/webapp/Dockerfile b/apps/webapp/Dockerfile
@@ -42,6 +42,7 @@ ENV NODE_ENV production
 RUN pnpm run generate
 RUN pnpm run build --filter=webapp...
 RUN pnpx prisma migrate deploy --schema apps/webapp/prisma/schema.prisma
+RUN pnpm run db:seed --filter=webapp
 
 # Runner
 FROM node:16-bullseye AS runner

diff --git a/apps/webapp/app/components/LoginPromoPanel.tsx b/apps/webapp/app/components/LoginPromoPanel.tsx
@@ -4,67 +4,99 @@ import {
   CloudArrowUpIcon,
   WrenchScrewdriverIcon,
 } from "@heroicons/react/24/outline";
+import { TemplateListItem } from "~/presenters/templateListPresenter.server";
+import { Panel } from "./layout/Panel";
+import { Body } from "./primitives/text/Body";
+import { Header2, Header3 } from "./primitives/text/Headers";
 
-export function LoginPromoPanel() {
+export function LoginPromoPanel({ template }: { template?: TemplateListItem }) {
   return (
     <div className="hidden h-full max-w-[30vw] flex-col justify-center border-r border-black/20 bg-slate-950 p-12 lg:flex">
-      <ul>
-        <li className="flex gap-2 text-white">
-          <div className="mt-1.5 flex flex-col items-center gap-2">
-            <WrenchScrewdriverIcon className="h-8 w-8 text-toxic" />
-            <div className="h-full w-0.5 bg-toxic/50"></div>
-          </div>
+      {template ? (
+        <div className="flex max-w-md flex-col">
+          <Header2
+            size="extra-large"
+            className="mb-5 bg-gradient-to-r from-indigo-400 to-pink-500 bg-clip-text font-semibold text-transparent"
+          >
+            Login to continue setting up your template
+          </Header2>
+          <Panel className="border border-slate-800 bg-slate-800/40 !p-6">
+            <div className="h-fit w-full overflow-hidden rounded object-cover">
+              <img src={template.imageUrl} />
+            </div>
+            <div className="mt-5 flex flex-col gap-2 border-t border-slate-600/50 pt-4">
+              <Header3
+                size="extra-small"
+                className="font-semibold text-slate-400"
+              >
+                {template.title}
+              </Header3>
+              <Body size="small" className="text-slate-400">
+                {template.description}
+              </Body>
+            </div>
+          </Panel>
+        </div>
+      ) : (
+        <ul>
+          <li className="flex gap-2 text-white">
+            <div className="mt-1.5 flex flex-col items-center gap-2">
+              <WrenchScrewdriverIcon className="text-toxic h-8 w-8" />
+              <div className="bg-toxic/50 h-full w-0.5"></div>
+            </div>
 
-          <div className="mb-1">
-            <h2 className="mb-2 text-2xl font-semibold">Create</h2>
-            <p className="mb-10 text-white/60">
-              Write workflows by creating triggers directly in your code. These
-              can be 3rd-party integrations, custom events or on a schedule.
-            </p>
-          </div>
-        </li>
-        <li className="flex gap-2 text-white">
-          <div className="mt-1.5 flex flex-col items-center gap-2">
-            <BoltIcon className="h-8 w-8 text-toxic" />
-            <div className="h-full w-0.5 bg-toxic/50"></div>
-          </div>
+            <div className="mb-1">
+              <h2 className="mb-2 text-2xl font-semibold">Create</h2>
+              <p className="mb-10 text-white/60">
+                Write workflows by creating triggers directly in your code.
+                These can be 3rd-party integrations, custom events or on a
+                schedule.
+              </p>
+            </div>
+          </li>
+          <li className="flex gap-2 text-white">
+            <div className="mt-1.5 flex flex-col items-center gap-2">
+              <BoltIcon className="text-toxic h-8 w-8" />
+              <div className="bg-toxic/50 h-full w-0.5"></div>
+            </div>
 
-          <div className="mb-1">
-            <h2 className="mb-2 text-2xl font-semibold">Run</h2>
-            <p className="mb-10 text-white/60">
-              When your server runs, your workflow will be registered and you
-              can authenticate with any APIs you’re using.
-            </p>
-          </div>
-        </li>
-        <li className="flex gap-2 text-white">
-          <div className="mt-1.5 flex flex-col items-center gap-2">
-            <BeakerIcon className="h-8 w-8 text-toxic" />
-            <div className="h-full w-0.5 bg-toxic/50"></div>
-          </div>
-          <div className="mb-1">
-            <h2 className="mb-2 text-2xl font-semibold">Test</h2>
-            <p className="mb-10 text-white/60">
-              Test your workflow by triggering them manually in your dashboard.
-              Follow it as it runs step-by-step.
-            </p>
-          </div>
-        </li>
+            <div className="mb-1">
+              <h2 className="mb-2 text-2xl font-semibold">Run</h2>
+              <p className="mb-10 text-white/60">
+                When your server runs, your workflow will be registered and you
+                can authenticate with any APIs you’re using.
+              </p>
+            </div>
+          </li>
+          <li className="flex gap-2 text-white">
+            <div className="mt-1.5 flex flex-col items-center gap-2">
+              <BeakerIcon className="text-toxic h-8 w-8" />
+              <div className="bg-toxic/50 h-full w-0.5"></div>
+            </div>
+            <div className="mb-1">
+              <h2 className="mb-2 text-2xl font-semibold">Test</h2>
+              <p className="mb-10 text-white/60">
+                Test your workflow by triggering them manually in your
+                dashboard. Follow it as it runs step-by-step.
+              </p>
+            </div>
+          </li>
 
-        <li className="flex gap-3 text-white">
-          <div className="mt-1.5 flex flex-col items-center gap-2">
-            <CloudArrowUpIcon className="ml-0.5 h-7 w-7 text-toxic" />
-          </div>
+          <li className="flex gap-3 text-white">
+            <div className="mt-1.5 flex flex-col items-center gap-2">
+              <CloudArrowUpIcon className="text-toxic ml-0.5 h-7 w-7" />
+            </div>
 
-          <div className="mb-1">
-            <h2 className="mb-2 text-2xl font-semibold">Deploy</h2>
-            <p className="mb-10 text-white/60">
-              Deploy your new workflow as you would any other code commit and
-              inspect each workflow run in real time.
-            </p>
-          </div>
-        </li>
-      </ul>
+            <div className="mb-1">
+              <h2 className="mb-2 text-2xl font-semibold">Deploy</h2>
+              <p className="mb-10 text-white/60">
+                Deploy your new workflow as you would any other code commit and
+                inspect each workflow run in real time.
+              </p>
+            </div>
+          </li>
+        </ul>
+      )}
     </div>
   );
 }
diff --git a/apps/webapp/app/components/integrations/AddApiKeyButton.tsx b/apps/webapp/app/components/integrations/AddApiKeyButton.tsx
@@ -68,14 +68,14 @@ export function AddApiKeyButton({
           <StyledDialog.Title>
             Add your {integration.name} API keys
           </StyledDialog.Title>
-          <div className="overflow-hidden overflow-y-auto max-h-40 mb-3 mt-4 bg-slate-700/50 rounded px-4 pb-3 pt-4">
-            <div className="flex gap-0.5 items-center -m-0.5 mb-1 text-slate-400">
+          <div className="mb-3 mt-4 max-h-40 overflow-hidden overflow-y-auto rounded bg-slate-700/50 px-4 pb-3 pt-4">
+            <div className="-m-0.5 mb-1 flex items-center gap-0.5 text-slate-400">
               <InformationCircleIcon className="h-5 w-5" />
               <Body size="small" className="uppercase tracking-wide">
                 Instructions
               </Body>
             </div>
-            <p
+            <div
               className="prose prose-sm prose-invert"
               dangerouslySetInnerHTML={{
                 __html: marked(authentication.documentation),
@@ -99,7 +99,7 @@ export function AddApiKeyButton({
                 <img
                   src={integration.icon}
                   alt={integration.icon}
-                  className="flex pointer-events-none z-10 -mr-7 ml-2.5 mt-2.5 w-5 h-5"
+                  className="pointer-events-none z-10 -mr-7 ml-2.5 mt-2.5 flex h-5 w-5"
                 />
                 <Input
                   id="title"

diff --git a/apps/webapp/app/components/layout/AppLayout.tsx b/apps/webapp/app/components/layout/AppLayout.tsx
@@ -24,6 +24,14 @@ export function AppLayout({
   );
 }
 
+export function PublicAppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid h-full w-full grid-rows-[5rem_auto_2rem]">
+      {children}
+    </div>
+  );
+}
+
 export function AppBody({
   children,
   className = "bg-slate-850",

diff --git a/apps/webapp/app/components/layout/List.tsx b/apps/webapp/app/components/layout/List.tsx
@@ -1,10 +1,18 @@
+import classNames from "classnames";
+
 export type ListProps = {
   children: React.ReactNode;
+  className?: string;
 };
 
-export function List({ children }: { children: React.ReactNode }) {
+export function List({ children, className }: ListProps) {
   return (
-    <div className="bg-slate-800 shadow-md sm:rounded-md mb-4">
+    <div
+      className={classNames(
+        className,
+        "mb-4 bg-slate-800 shadow-md sm:rounded-md"
+      )}
+    >
       <ul className="divide-y divide-slate-850">{children}</ul>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -172,7 +172,7 @@ new Trigger({ @@
     One of the most powerful features of Trigger.dev is the [runs page](https://docs.trigger.dev/viewing-runs). All of the steps in a workflow, including the initial event, can be viewed in detail. See the status / output of each step, the logs, rich previews, errors and much more.
-    ![Viewing runs](https://mintlify.s3-us-west-1.amazonaws.com/api-hero/images/run-succeeded.png)
+    ![Viewing runs](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/7343f3b2-2342-493b-5007-78f60ba5b700/public)
     &nbsp;
@@ Expand Down @@