Merge branch 'main' into docs/on-cancel-limitation

Author: isshaddad

apps/webapp/app/components/integrations/VercelLink.tsx

@@ -0,0 +1,22 @@
+import { VercelLogo } from "./VercelLogo";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+
+export function VercelLink({ vercelDeploymentUrl }: { vercelDeploymentUrl: string }) {
+  return (
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          LeadingIcon={<VercelLogo className="size-3.5" />}
+          iconSpacing="gap-x-1"
+          to={vercelDeploymentUrl}
+          className="pl-1"
+        >
+          Vercel
+        </LinkButton>
+      }
+      content="View on Vercel"
+    />
+  );
+}

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -44,7 +44,7 @@ import {
 } from "~/v3/vercel/vercelProjectIntegrationSchema";
 import { type VercelCustomEnvironment } from "~/models/vercelIntegration.server";
 import { type VercelOnboardingData } from "~/presenters/v3/VercelSettingsPresenter.server";
-import { vercelAppInstallPath, v3ProjectSettingsPath, githubAppInstallPath, vercelResourcePath } from "~/utils/pathBuilder";
+import { vercelAppInstallPath, v3ProjectSettingsIntegrationsPath, githubAppInstallPath, vercelResourcePath } from "~/utils/pathBuilder";
 import type { loader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 import { useEffect, useState, useCallback, useRef } from "react";
 import { usePostHogTracking } from "~/hooks/usePostHog";
@@ -102,6 +102,7 @@ export function VercelOnboardingModal({
   hasOrgIntegration,
   nextUrl,
   onDataReload,
+  vercelManageAccessUrl,
 }: {
   isOpen: boolean;
   onClose: () => void;
@@ -114,6 +115,7 @@ export function VercelOnboardingModal({
   hasOrgIntegration: boolean;
   nextUrl?: string;
   onDataReload?: (vercelStagingEnvironment?: string) => void;
+  vercelManageAccessUrl?: string;
 }) {
   const { capture, startSessionRecording } = usePostHogTracking();
   const navigation = useNavigation();
@@ -122,7 +124,8 @@ export function VercelOnboardingModal({
   const completeOnboardingFetcher = useFetcher();
   const { Form: CompleteOnboardingForm } = completeOnboardingFetcher;
   const [searchParams] = useSearchParams();
-  const fromMarketplaceContext = searchParams.get("origin") === "marketplace";
+  const origin = searchParams.get("origin");
+  const fromMarketplaceContext = origin === "marketplace";
 
   const availableProjects = onboardingData?.availableProjects || [];
   const hasProjectSelected = onboardingData?.hasProjectSelected ?? false;
@@ -543,8 +546,15 @@ export function VercelOnboardingModal({
 
     if (!isGitHubConnectedForOnboarding) {
       setState("github-connection");
+      capture("vercel onboarding github step viewed", {
+        origin: fromMarketplaceContext ? "marketplace" : "dashboard",
+        step: "github-connection",
+        organization_slug: organizationSlug,
+        project_slug: projectSlug,
+        github_app_installed: gitHubAppInstallations.length > 0,
+      });
     }
-  }, [vercelStagingEnvironment, pullEnvVarsBeforeBuild, atomicBuilds, discoverEnvVars, syncEnvVarsMapping, nextUrl, fromMarketplaceContext, isGitHubConnectedForOnboarding, completeOnboardingFetcher, actionUrl, trackOnboarding]);
+  }, [vercelStagingEnvironment, pullEnvVarsBeforeBuild, atomicBuilds, discoverEnvVars, syncEnvVarsMapping, nextUrl, fromMarketplaceContext, isGitHubConnectedForOnboarding, completeOnboardingFetcher, actionUrl, trackOnboarding, capture, organizationSlug, projectSlug, gitHubAppInstallations.length]);
 
   const handleFinishOnboarding = useCallback((e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -639,7 +649,7 @@ export function VercelOnboardingModal({
           onClose();
         }
       }}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-lg" onInteractOutside={(e) => e.preventDefault()}>
           <DialogHeader>
             <div className="flex items-center gap-2">
               <VercelLogo className="size-5" />
@@ -727,14 +737,25 @@ export function VercelOnboardingModal({
 
               <FormButtons
                 confirmButton={
-                  <Button
-                    variant="primary/medium"
-                    onClick={handleProjectSelection}
-                    disabled={!selectedVercelProject || fetcher.state !== "idle"}
-                    LeadingIcon={fetcher.state !== "idle" ? SpinnerWhite : undefined}
-                  >
-                    {fetcher.state !== "idle" ? "Connecting..." : "Connect Project"}
-                  </Button>
+                  <div className="flex items-center gap-2">
+                    {vercelManageAccessUrl && !origin && (
+                      <LinkButton
+                        to={vercelManageAccessUrl}
+                        variant="tertiary/medium"
+                        target="_self"
+                      >
+                        Manage access
+                      </LinkButton>
+                    )}
+                    <Button
+                      variant="primary/medium"
+                      onClick={handleProjectSelection}
+                      disabled={!selectedVercelProject || fetcher.state !== "idle"}
+                      LeadingIcon={fetcher.state !== "idle" ? SpinnerWhite : undefined}
+                    >
+                      {fetcher.state !== "idle" ? "Connecting..." : "Connect Project"}
+                    </Button>
+                  </div>
                 }
                 cancelButton={
                   <Button
@@ -813,6 +834,7 @@ export function VercelOnboardingModal({
               <Header3>Pull Environment Variables</Header3>
               <Paragraph className="text-sm">
                 Select which environment variables to pull from Vercel now. This is a one-time pull.
+                Later on environment variables can be pulled before each build.
               </Paragraph>
 
               <div className="flex gap-4 text-sm">
@@ -1057,7 +1079,7 @@ export function VercelOnboardingModal({
               </Callout>
 
               {(() => {
-                const baseSettingsPath = v3ProjectSettingsPath(
+                const baseSettingsPath = v3ProjectSettingsIntegrationsPath(
                   { slug: organizationSlug },
                   { slug: projectSlug },
                   { slug: environmentSlug }
@@ -1081,6 +1103,7 @@ export function VercelOnboardingModal({
                       )}
                       variant="secondary/medium"
                       LeadingIcon={OctoKitty}
+                      onClick={() => trackOnboarding("vercel onboarding github app install clicked")}
                     >
                       Install GitHub app
                     </LinkButton>
@@ -1110,6 +1133,7 @@ export function VercelOnboardingModal({
                     <Button
                       variant="primary/medium"
                       onClick={() => {
+                        trackOnboarding("vercel onboarding github completed");
                         setState("completed");
                         const validUrl = safeRedirectUrl(nextUrl);
                         if (validUrl) {
@@ -1123,6 +1147,7 @@ export function VercelOnboardingModal({
                     <Button
                       variant="tertiary/medium"
                       onClick={() => {
+                        trackOnboarding("vercel onboarding github skipped");
                         setState("completed");
                         if (fromMarketplaceContext && nextUrl) {
                           const validUrl = safeRedirectUrl(nextUrl);
@@ -1141,6 +1166,7 @@ export function VercelOnboardingModal({
                     <Button
                       variant="tertiary/medium"
                       onClick={() => {
+                        trackOnboarding("vercel onboarding github skipped");
                         setState("completed");
                       }}
                     >

apps/webapp/app/components/logs/LogDetailView.tsx

@@ -186,7 +186,7 @@ function DetailsTab({
             <CopyableText value={log.runId} copyValue={log.runId} asChild />
             <LinkButton
               to={runPath}
-              variant="tertiary/small"
+              variant="secondary/small"
               shortcut={{ key: "v" }}
               className="mt-2"
             >

apps/webapp/app/components/logs/LogsTable.tsx

@@ -26,6 +26,7 @@ import {
   TableRow,
   type TableVariant,
 } from "../primitives/Table";
+import { RunsIcon } from "~/assets/icons/RunsIcon";
 
 type LogsTableProps = {
   logs: LogEntry[];
@@ -124,6 +125,7 @@ export function LogsTable({
             <TableHeaderCell
               className="min-w-24 whitespace-nowrap"
               tooltip={<LogLevelTooltipInfo />}
+              disableTooltipHoverableContent
             >
               Level
             </TableHeaderCell>
@@ -165,7 +167,7 @@ export function LogsTable({
                   >
                     <DateTimeAccurate date={log.triggeredTimestamp} hour12={false} />
                   </TableCell>
-                  <TableCell className="min-w-24">
+                  <TableCell className="min-w-24" onClick={handleRowClick} hasAction>
                     <TruncatedCopyableValue value={log.runId} />
                   </TableCell>
                   <TableCell className="min-w-32" onClick={handleRowClick} hasAction>
@@ -185,9 +187,11 @@ export function LogsTable({
                       <LinkButton
                         to={runPath}
                         variant="minimal/small"
-                        TrailingIcon={ArrowTopRightOnSquareIcon}
+                        TrailingIcon={RunsIcon}
+                        trailingIconClassName="text-text-bright"
+                        className="h-[1.375rem] pl-1.5 pr-2"
                       >
-                        View run
+                        <span className="text-[0.6875rem] text-text-bright">View run</span>
                       </LinkButton>
                     }
                   />

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

@@ -3,15 +3,17 @@ import {
   ChartBarIcon,
   Cog8ToothIcon,
   CreditCardIcon,
-  PuzzlePieceIcon,
   UserGroupIcon,
 } from "@heroicons/react/20/solid";
 import { ArrowLeftIcon } from "@heroicons/react/24/solid";
+import { SlackIcon } from "@trigger.dev/companyicons";
+import { VercelLogo } from "~/components/integrations/VercelLogo";
 import { useFeatures } from "~/hooks/useFeatures";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { cn } from "~/utils/cn";
 import {
   organizationSettingsPath,
+  organizationSlackIntegrationPath,
   organizationTeamPath,
   organizationVercelIntegrationPath,
   rootPath,
@@ -115,13 +117,25 @@ export function OrganizationSettingsSideMenu({
             to={organizationSettingsPath(organization)}
             data-action="settings"
           />
+        </div>
+        <div className="flex flex-col">
+          <div className="mb-1">
+            <SideMenuHeader title="Integrations" />
+          </div>
           <SideMenuItem
-            name="Integrations"
-            icon={PuzzlePieceIcon}
-            activeIconColor="text-blue-500"
+            name="Vercel"
+            icon={VercelLogo}
+            activeIconColor="text-white"
             to={organizationVercelIntegrationPath(organization)}
             data-action="integrations"
           />
+          <SideMenuItem
+            name="Slack"
+            icon={SlackIcon}
+            activeIconColor="text-white"
+            to={organizationSlackIntegrationPath(organization)}
+            data-action="integrations"
+          />
         </div>
         <div className="flex flex-col gap-1">
           <SideMenuHeader title="App version" />

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

@@ -11,6 +11,7 @@ import {
   Cog8ToothIcon,
   CogIcon,
   ExclamationTriangleIcon,
+  PuzzlePieceIcon,
   FolderIcon,
   FolderOpenIcon,
   GlobeAmericasIcon,
@@ -74,7 +75,8 @@ import {
   v3LogsPath,
   v3ProjectAlertsPath,
   v3ProjectPath,
-  v3ProjectSettingsPath,
+  v3ProjectSettingsGeneralPath,
+  v3ProjectSettingsIntegrationsPath,
   v3QueuesPath,
   v3RunsPath,
   v3SchedulesPath,
@@ -127,7 +129,7 @@ type SideMenuUser = Pick<
 };
 export type SideMenuProject = Pick<
   MatchedProject,
-  "id" | "name" | "slug" | "version" | "environments" | "engine"
+  "id" | "name" | "slug" | "version" | "environments" | "engine" | "createdAt"
 >;
 export type SideMenuEnvironment = MatchedEnvironment;
 
@@ -589,13 +591,34 @@ export function SideMenu({
                 data-action="limits"
                 isCollapsed={isCollapsed}
               />
+            </SideMenuSection>
+
+            <SideMenuSection
+              title="Project settings"
+              isSideMenuCollapsed={isCollapsed}
+              itemSpacingClassName="space-y-0"
+              initialCollapsed={getSectionCollapsed(
+                user.dashboardPreferences.sideMenu,
+                "project-settings"
+              )}
+              onCollapseToggle={handleSectionToggle("project-settings")}
+            >
               <SideMenuItem
-                name="Project settings"
+                name="General"
                 icon={Cog8ToothIcon}
                 activeIconColor="text-text-bright"
                 inactiveIconColor="text-text-dimmed"
-                to={v3ProjectSettingsPath(organization, project, environment)}
-                data-action="project-settings"
+                to={v3ProjectSettingsGeneralPath(organization, project, environment)}
+                data-action="project-settings-general"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Integrations"
+                icon={PuzzlePieceIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={v3ProjectSettingsIntegrationsPath(organization, project, environment)}
+                data-action="project-settings-integrations"
                 isCollapsed={isCollapsed}
               />
             </SideMenuSection>
@@ -611,6 +634,7 @@ export function SideMenu({
           <V3DeprecationPanel
             isCollapsed={isCollapsed}
             isV3={isV3Project}
+            projectCreatedAt={project.createdAt}
             hasIncident={incidentStatus.hasIncident}
             isManagedCloud={incidentStatus.isManagedCloud}
           />
@@ -641,15 +665,21 @@ export function SideMenu({
 function V3DeprecationPanel({
   isCollapsed,
   isV3,
+  projectCreatedAt,
   hasIncident,
   isManagedCloud,
 }: {
   isCollapsed: boolean;
   isV3: boolean;
+  projectCreatedAt: Date;
   hasIncident: boolean;
   isManagedCloud: boolean;
 }) {
-  if (!isManagedCloud || !isV3 || hasIncident) {
+  // Only show for projects created before v4 was released
+  const V4_RELEASE_DATE = new Date("2025-09-01");
+  const isLikelyV3 = isV3 && new Date(projectCreatedAt) < V4_RELEASE_DATE;
+
+  if (!isManagedCloud || !isLikelyV3 || hasIncident) {
     return null;
   }
 

apps/webapp/app/components/navigation/sideMenuTypes.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 // Valid section IDs that can have their collapsed state toggled
-export const SideMenuSectionIdSchema = z.enum(["manage", "metrics"]);
+export const SideMenuSectionIdSchema = z.enum(["manage", "metrics", "project-settings"]);
 
 // Inferred type from the schema
 export type SideMenuSectionId = z.infer<typeof SideMenuSectionIdSchema>;

apps/webapp/app/components/primitives/Table.tsx

@@ -176,10 +176,22 @@ type TableCellBasicProps = {
 type TableHeaderCellProps = TableCellBasicProps & {
   hiddenLabel?: boolean;
   tooltip?: ReactNode;
+  disableTooltipHoverableContent?: boolean;
 };
 
 export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(
-  ({ className, alignment = "left", children, colSpan, hiddenLabel = false, tooltip }, ref) => {
+  (
+    {
+      className,
+      alignment = "left",
+      children,
+      colSpan,
+      hiddenLabel = false,
+      tooltip,
+      disableTooltipHoverableContent = false,
+    },
+    ref
+  ) => {
     const { variant } = useContext(TableContext);
     let alignmentClassName = "text-left";
     switch (alignment) {
@@ -222,6 +234,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
               content={tooltip}
               contentClassName="normal-case tracking-normal"
               enabled={isHovered}
+              disableHoverableContent={disableTooltipHoverableContent}
             />
           </div>
         ) : (