fix: Init handling lifecycle hooks

apps/event-worker/src/job-dispatch/github.ts

@@ -1,12 +1,14 @@
 import type { Job } from "@ctrlplane/db/schema";
 
-import { and, eq, takeFirstOrNull } from "@ctrlplane/db";
+import { and, eq, or, takeFirstOrNull } from "@ctrlplane/db";
 import { db } from "@ctrlplane/db/client";
 import {
   environment,
   githubOrganization,
   job,
   releaseJobTrigger,
+  runbook,
+  runbookJobTrigger,
   system,
   workspace,
 } from "@ctrlplane/db/schema";
@@ -37,16 +39,21 @@ export const dispatchGithubJob = async (je: Job) => {
     .from(githubOrganization)
     .innerJoin(workspace, eq(githubOrganization.workspaceId, workspace.id))
     .innerJoin(system, eq(system.workspaceId, workspace.id))
-    .innerJoin(environment, eq(environment.systemId, system.id))
-    .innerJoin(
+    .leftJoin(environment, eq(environment.systemId, system.id))
+    .leftJoin(
       releaseJobTrigger,
       eq(releaseJobTrigger.environmentId, environment.id),
     )
+    .leftJoin(runbook, eq(runbook.systemId, system.id))
+    .leftJoin(runbookJobTrigger, eq(runbookJobTrigger.runbookId, runbook.id))
     .where(
       and(
         eq(githubOrganization.installationId, parsed.data.installationId),
         eq(githubOrganization.organizationName, parsed.data.owner),
-        eq(releaseJobTrigger.jobId, je.id),
+        or(
+          eq(releaseJobTrigger.jobId, je.id),
+          eq(runbookJobTrigger.jobId, je.id),
+        ),
       ),
     )
     .then(takeFirstOrNull);

apps/jobs/src/expired-env-checker/index.ts

@@ -1,10 +1,9 @@
 import _ from "lodash";
-import { isPresent } from "ts-is-present";
 
 import { eq, inArray, lte } from "@ctrlplane/db";
 import { db } from "@ctrlplane/db/client";
 import * as SCHEMA from "@ctrlplane/db/schema";
-import { logger } from "@ctrlplane/logger";
+import { handleTargetsFromEnvironmentToBeDeleted } from "@ctrlplane/job-dispatch";
 
 type QueryRow = {
   environment: SCHEMA.Environment;
@@ -32,22 +31,11 @@ export const run = async () => {
     .then(groupByEnvironment);
   if (expiredEnvironments.length === 0) return;
 
-  const targetPromises = expiredEnvironments
-    .filter((env) => isPresent(env.targetFilter))
-    .map(async (env) => {
-      const targets = await db
-        .select()
-        .from(SCHEMA.target)
-        .where(SCHEMA.targetMatchesMetadata(db, env.targetFilter));
-
-      return { environmentId: env.id, targets };
-    });
-  const associatedTargets = await Promise.all(targetPromises);
-
-  for (const { environmentId, targets } of associatedTargets)
-    logger.info(
-      `[${targets.length}] targets are associated with expired environment [${environmentId}]`,
-    );
+  await Promise.all(
+    expiredEnvironments.map((env) =>
+      handleTargetsFromEnvironmentToBeDeleted(db, env),
+    ),
+  );
 
   const envIds = expiredEnvironments.map((env) => env.id);
   await db

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx

@@ -53,17 +53,21 @@ export const DeploymentNavBar: React.FC<DeploymentNavBarProps> = ({
   const releasesUrl = `/${workspaceSlug}/systems/${systemSlug}/deployments/${deploymentSlug}/releases`;
   const variablesUrl = `/${workspaceSlug}/systems/${systemSlug}/deployments/${deploymentSlug}/variables`;
   const releaseChannelsUrl = `/${workspaceSlug}/systems/${systemSlug}/deployments/${deploymentSlug}/release-channels`;
+  const lifecycleHooksUrl = `/${workspaceSlug}/systems/${systemSlug}/deployments/${deploymentSlug}/lifecycle-hooks`;
   const overviewUrl = `/${workspaceSlug}/systems/${systemSlug}/deployments/${deploymentSlug}`;
 
-  const isReleasesActive = pathname.includes("/releases");
-  const isVariablesActive = pathname.includes("/variables");
-  const isJobsActive = pathname.includes("/jobs");
-  const isReleaseChannelsActive = pathname.includes("/release-channels");
+  const isReleasesActive = pathname.endsWith("/releases");
+  const isVariablesActive = pathname.endsWith("/variables");
+  const isJobsActive = pathname.endsWith("/jobs");
+  const isReleaseChannelsActive = pathname.endsWith("/release-channels");
+  const isLifecycleHooksActive = pathname.endsWith("/lifecycle-hooks");
+
   const isSettingsActive =
     !isReleasesActive &&
     !isVariablesActive &&
     !isJobsActive &&
-    !isReleaseChannelsActive;
+    !isReleaseChannelsActive &&
+    !isLifecycleHooksActive;
 
   return (
     <div className="flex items-center justify-between border-b p-2">
@@ -116,6 +120,16 @@ export const DeploymentNavBar: React.FC<DeploymentNavBarProps> = ({
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>
+            <NavigationMenuItem>
+              <Link href={lifecycleHooksUrl} legacyBehavior passHref>
+                <NavigationMenuLink
+                  className="group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent/50 hover:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+                  active={isLifecycleHooksActive}
+                >
+                  Lifecycle Hooks
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
             <NavigationMenuItem>
               <Link href={overviewUrl} legacyBehavior passHref>
                 <NavigationMenuLink

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx

@@ -2,10 +2,13 @@
 
 import React from "react";
 import { usePathname } from "next/navigation";
+import { IconLoader2 } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 
 import { CreateReleaseDialog } from "~/app/[workspaceSlug]/_components/CreateRelease";
+import { api } from "~/trpc/react";
+import { CreateLifecycleHookDialog } from "./lifecycle-hooks/CreateLifecycleHookDialog";
 import { CreateReleaseChannelDialog } from "./release-channels/CreateReleaseChannelDialog";
 import { CreateVariableDialog } from "./releases/CreateVariableDialog";
 
@@ -14,8 +17,11 @@ export const NavigationMenuAction: React.FC<{
   systemId: string;
 }> = ({ deploymentId, systemId }) => {
   const pathname = usePathname();
-  const isVariablesActive = pathname.includes("variables");
-  const isReleaseChannelsActive = pathname.includes("release-channels");
+  const isVariablesActive = pathname.endsWith("variables");
+  const isReleaseChannelsActive = pathname.endsWith("release-channels");
+  const isLifecycleHooksActive = pathname.endsWith("lifecycle-hooks");
+
+  const runbooksQ = api.runbook.bySystemId.useQuery(systemId);
 
   return (
     <div>
@@ -35,13 +41,34 @@ export const NavigationMenuAction: React.FC<{
         </CreateReleaseChannelDialog>
       )}
 
-      {!isVariablesActive && !isReleaseChannelsActive && (
-        <CreateReleaseDialog deploymentId={deploymentId} systemId={systemId}>
-          <Button size="sm" variant="secondary">
-            New Release
+      {isLifecycleHooksActive && (
+        <CreateLifecycleHookDialog
+          deploymentId={deploymentId}
+          runbooks={runbooksQ.data ?? []}
+        >
+          <Button
+            size="sm"
+            variant="secondary"
+            disabled={runbooksQ.isLoading}
+            className="w-36"
+          >
+            {runbooksQ.isLoading && (
+              <IconLoader2 className="h-3 w-3 animate-spin" />
+            )}
+            {!runbooksQ.isLoading && "New Lifecycle Hook"}
           </Button>
-        </CreateReleaseDialog>
+        </CreateLifecycleHookDialog>
       )}
+
+      {!isVariablesActive &&
+        !isReleaseChannelsActive &&
+        !isLifecycleHooksActive && (
+          <CreateReleaseDialog deploymentId={deploymentId} systemId={systemId}>
+            <Button size="sm" variant="secondary">
+              New Release
+            </Button>
+          </CreateReleaseDialog>
+        )}
     </div>
   );
 };

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/lifecycle-hooks/CreateLifecycleHookDialog.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { z } from "zod";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ctrlplane/ui/dialog";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  useForm,
+} from "@ctrlplane/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ctrlplane/ui/select";
+
+import { api } from "~/trpc/react";
+
+type CreateLifecycleHookDialogProps = {
+  deploymentId: string;
+  runbooks: SCHEMA.Runbook[];
+  children: React.ReactNode;
+};
+
+const schema = z.object({ runbookId: z.string() });
+
+export const CreateLifecycleHookDialog: React.FC<
+  CreateLifecycleHookDialogProps
+> = ({ deploymentId, runbooks, children }) => {
+  const [open, setOpen] = useState(false);
+  const createLifecycleHook = api.deployment.lifecycleHook.create.useMutation();
+  const router = useRouter();
+  const form = useForm({ schema });
+  const onSubmit = form.handleSubmit((data) =>
+    createLifecycleHook
+      .mutateAsync({ deploymentId, ...data })
+      .then(() => form.reset())
+      .then(() => router.refresh())
+      .then(() => setOpen(false)),
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Lifecycle Hook</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="runbookId"
+              render={({ field: { value, onChange } }) => (
+                <FormItem>
+                  <FormLabel>Runbook</FormLabel>
+                  <Select value={value} onValueChange={onChange}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a runbook" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {runbooks.map((runbook) => (
+                        <SelectItem key={runbook.id} value={runbook.id}>
+                          {runbook.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="submit" disabled={createLifecycleHook.isPending}>
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/lifecycle-hooks/LifecycleHookActionsDropdown.tsx

@@ -0,0 +1,108 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { IconTrash } from "@tabler/icons-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@ctrlplane/ui/alert-dialog";
+import { buttonVariants } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+
+import { api } from "~/trpc/react";
+
+type DeleteLifecycleHookDialogProps = {
+  lifecycleHookId: string;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+const DeleteLifecycleHookDialog: React.FC<DeleteLifecycleHookDialogProps> = ({
+  lifecycleHookId,
+  onClose,
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const deleteLifecycleHook = api.deployment.lifecycleHook.delete.useMutation();
+
+  const onDelete = async () =>
+    deleteLifecycleHook
+      .mutateAsync(lifecycleHookId)
+      .then(() => router.refresh())
+      .then(() => setOpen(false));
+
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(o) => {
+        setOpen(o);
+        if (!o) onClose();
+      }}
+    >
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Lifecycle Hook?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <div className="flex-grow" />
+          <AlertDialogAction
+            className={buttonVariants({ variant: "destructive" })}
+            onClick={onDelete}
+            disabled={deleteLifecycleHook.isPending}
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+type LifecycleHookActionsDropdownProps = {
+  lifecycleHook: SCHEMA.DeploymentLifecycleHook;
+  children: React.ReactNode;
+};
+
+export const LifecycleHookActionsDropdown: React.FC<
+  LifecycleHookActionsDropdownProps
+> = ({ lifecycleHook, children }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DeleteLifecycleHookDialog
+          lifecycleHookId={lifecycleHook.id}
+          onClose={() => setOpen(false)}
+        >
+          <DropdownMenuItem
+            className="flex items-center gap-2"
+            onSelect={(e) => e.preventDefault()}
+          >
+            Delete
+            <IconTrash size="icon" className="h-4 w-4 text-destructive" />
+          </DropdownMenuItem>
+        </DeleteLifecycleHookDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};