Projects ✨

- Deploy a new VM when a push event comes through
- Live updating project overview page

Author: ericallam

.changeset/shaggy-hounds-appear.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+SDK now passes through the project ID from the env var

.gitignore

@@ -45,4 +45,5 @@ yarn-error.log*
 .output
 apps/**/public/build
 .tests-container-id.txt
-.sentryclirc
+.sentryclirc
+.buildt

.warp/triggerdotdev.yaml.example

@@ -52,6 +52,9 @@ windows:
             - cwd: /Users/eric/code/triggerdotdev/trigger.dev
               commands:
                 - exec: ./scripts/proxy-pizzly.sh <your-pizzly-dev>
+            - cwd: /Users/eric/code/triggerdotdev/trigger.dev
+              commands:
+                - exec: ./scripts/proxy-wss.sh <your-wss-dev>
       - title: wss and examples
         layout:
           split_direction: horizontal

apps/webapp/app/components/IntlDate.tsx

@@ -0,0 +1,29 @@
+import { useLocales } from "./LocaleProvider";
+
+type IntlDateProps = {
+  date: Date;
+  timeZone?: string;
+};
+
+export const IntlDate = ({ date, timeZone }: IntlDateProps) => {
+  const locales = useLocales();
+  const isoString = date.toISOString();
+  const formattedDate = new Intl.DateTimeFormat(locales, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    timeZone,
+  }).format(date);
+
+  const formattedTime = new Intl.DateTimeFormat(locales, {
+    hour: "numeric",
+    minute: "numeric",
+    timeZone,
+  }).format(date);
+
+  return (
+    <time dateTime={isoString}>
+      {formattedDate} at {formattedTime}
+    </time>
+  );
+};

apps/webapp/app/components/LocaleProvider.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { useContext } from "react";
+import { createContext } from "react";
+
+type LocaleContext = {
+  locales: string[];
+};
+
+type LocaleContextProviderProps = {
+  locales: string[];
+  children: ReactNode;
+};
+
+const Context = createContext<LocaleContext | null>(null);
+
+export const LocaleContextProvider = ({
+  locales,
+  children,
+}: LocaleContextProviderProps) => {
+  const value = { locales };
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+const throwIfNoProvider = () => {
+  throw new Error("Please wrap your application in a LocaleContextProvider.");
+};
+
+export const useLocales = () => {
+  const { locales } = useContext(Context) ?? throwIfNoProvider();
+  return locales;
+};

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

@@ -8,11 +8,13 @@ import {
   ArrowTopRightOnSquareIcon,
   BeakerIcon,
   ChevronLeftIcon,
+  CloudArrowUpIcon,
   Cog6ToothIcon,
   EnvelopeIcon,
   ForwardIcon,
   PhoneArrowUpRightIcon,
   PlusCircleIcon,
+  QueueListIcon,
   Squares2X2Icon,
   SquaresPlusIcon,
   UsersIcon,
@@ -27,6 +29,7 @@ import {
 } from "~/hooks/useOrganizations";
 import { useCurrentWorkflow } from "~/hooks/useWorkflows";
 import { EnvironmentIcon } from "~/routes/resources/environment";
+import { CurrentProject } from "~/routes/__app/orgs/$organizationSlug/projects/$projectP";
 import { titleCase } from "~/utils";
 import { CopyTextPanel } from "../CopyTextButton";
 import { TertiaryA, TertiaryButton } from "../primitives/Buttons";
@@ -152,6 +155,43 @@ export function WorkflowsSideMenu() {
   );
 }
 
+export function ProjectSideMenu({
+  project,
+  backPath,
+}: {
+  project: CurrentProject;
+  backPath: string;
+}) {
+  if (!project) {
+    return null;
+  }
+
+  const items: SideMenuItem[] = [
+    {
+      name: "Overview",
+      icon: <ArrowsRightLeftIcon className={iconStyle} />,
+      to: ``,
+    },
+    {
+      name: "Deploys",
+      icon: <CloudArrowUpIcon className={iconStyle} />,
+      to: `deploys`,
+    },
+    {
+      name: "Logs",
+      icon: <QueueListIcon className={iconStyle} />,
+      to: `logs`,
+    },
+    {
+      name: "Settings",
+      icon: <Cog6ToothIcon className={iconStyle} />,
+      to: `settings`,
+    },
+  ];
+
+  return <SideMenu title={project.name} items={items} backPath={backPath} />;
+}
+
 const defaultStyle =
   "group flex items-center gap-2 px-3 py-3 text-base rounded transition text-slate-300 hover:bg-slate-850 hover:text-white";
 const activeStyle =

apps/webapp/app/entry.client.tsx

@@ -3,30 +3,36 @@ import { hydrateRoot } from "react-dom/client";
 import * as Sentry from "@sentry/remix";
 import { useEffect } from "react";
 import posthog from "posthog-js";
+import { LocaleContextProvider } from "./components/LocaleProvider";
 
-hydrateRoot(document, <RemixBrowser />);
+hydrateRoot(
+  document,
+  <LocaleContextProvider locales={window.navigator.languages as string[]}>
+    <RemixBrowser />
+  </LocaleContextProvider>
+);
 
 //hack because the type is not exported
 type SentryIntegration = (typeof Sentry.defaultIntegrations)[number];
 
 if (process.env.NODE_ENV === "production") {
-Sentry.init({
-  dsn: "https://bf96820b08004fa4b2e1506f2ac74a14@o4504419574087680.ingest.sentry.io/4504419607052288",
-  tracesSampleRate: 1,
-  integrations: [
-    new Sentry.BrowserTracing({
-      routingInstrumentation: Sentry.remixRouterInstrumentation(
-        useEffect,
-        useLocation,
-        useMatches
-      ),
-    }),
-    //casted because TypeScript is unhappy about the type from PostHog
-    new posthog.SentryIntegration(
-      posthog,
-      "triggerdev",
-      4504419607052288
-    ) as SentryIntegration,
-  ],
-});
+  Sentry.init({
+    dsn: "https://bf96820b08004fa4b2e1506f2ac74a14@o4504419574087680.ingest.sentry.io/4504419607052288",
+    tracesSampleRate: 1,
+    integrations: [
+      new Sentry.BrowserTracing({
+        routingInstrumentation: Sentry.remixRouterInstrumentation(
+          useEffect,
+          useLocation,
+          useMatches
+        ),
+      }),
+      //casted because TypeScript is unhappy about the type from PostHog
+      new posthog.SentryIntegration(
+        posthog,
+        "triggerdev",
+        4504419607052288
+      ) as SentryIntegration,
+    ],
+  });
 }

apps/webapp/app/entry.server.tsx

@@ -5,7 +5,9 @@ import { renderToPipeableStream } from "react-dom/server";
 import { RemixServer } from "@remix-run/react";
 import { Response } from "@remix-run/node"; // or cloudflare/deno
 import type { EntryContext, Headers } from "@remix-run/node"; // or cloudflare/deno
+import { parseAcceptLanguage } from "intl-parse-accept-language";
 import isbot from "isbot";
+import { LocaleContextProvider } from "./components/LocaleProvider";
 
 const ABORT_DELAY = 30000;
 
@@ -15,6 +17,11 @@ export default function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
+  const acceptLanguage = request.headers.get("accept-language");
+  const locales = parseAcceptLanguage(acceptLanguage, {
+    validate: Intl.DateTimeFormat.supportedLocalesOf,
+  });
+
   // If the request is from a bot, we want to wait for the full
   // response to render before sending it to the client. This
   // ensures that bots can see the full page content.
@@ -23,31 +30,36 @@ export default function handleRequest(
       request,
       responseStatusCode,
       responseHeaders,
-      remixContext
+      remixContext,
+      locales
     );
   }
 
   return serveBrowsers(
     request,
     responseStatusCode,
     responseHeaders,
-    remixContext
+    remixContext,
+    locales
   );
 }
 
 function serveTheBots(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  locales: string[]
 ) {
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <LocaleContextProvider locales={locales}>
+        <RemixServer
+          context={remixContext}
+          url={request.url}
+          abortDelay={ABORT_DELAY}
+        />
+      </LocaleContextProvider>,
       {
         // Use onAllReady to wait for the entire document to be ready
         onAllReady() {
@@ -74,16 +86,19 @@ function serveBrowsers(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
+  locales: string[]
 ) {
   return new Promise((resolve, reject) => {
     let didError = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <LocaleContextProvider locales={locales}>
+        <RemixServer
+          context={remixContext}
+          url={request.url}
+          abortDelay={ABORT_DELAY}
+        />
+      </LocaleContextProvider>,
       {
         // use onShellReady to wait until a suspense boundary is triggered
         onShellReady() {

apps/webapp/app/env.server.ts

@@ -57,6 +57,8 @@ const EnvironmentSchema = z.object({
   GITHUB_APP_WEBHOOK_SECRET: z.string().optional(),
   INTEGRATIONS_API_KEY: z.string(),
   INTEGRATIONS_API_ORIGIN: z.string(),
+  CAKEWORK_API_KEY: z.string(),
+  TRIGGER_WSS_URL: z.string().default("wss://wss.trigger.dev/ws"),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/features/ee/projects/cakework.server.ts

@@ -0,0 +1,10 @@
+import {
+  CakeworkApiClient,
+  CakeworkApiEnvironment,
+} from "@cakework/client/dist";
+import { env } from "~/env.server";
+
+export const cakework = new CakeworkApiClient({
+  environment: CakeworkApiEnvironment.Production,
+  xApiKey: env.CAKEWORK_API_KEY,
+});