feat: Update and Delete deployments with cascade, also lint fix (#3)

Signed-off-by: Zachary Blasczyk <[email protected]>

agents/github-app/eslint.config.js

@@ -3,7 +3,7 @@ import baseConfig from "@ctrlplane/eslint-config/base";
 /** @type {import('typescript-eslint').Config} */
 export default [
   {
-    ignores: [".nitro/**", ".output/**"],
+    ignores: [".nitro/**", ".output/**", "dist/**", "node_modules/**"],
   },
   ...baseConfig,
 ];

apps/docs/package.json

@@ -32,6 +32,6 @@
     "prettier": "catalog:",
     "tailwindcss": "catalog:",
     "typescript": "catalog:",
-    "typescript-eslint": "^7.8.0"
+    "typescript-eslint": "catalog:"
   }
 }

apps/event-worker/eslint.config.js

@@ -5,6 +5,6 @@ export default [
   {
     ignores: [".nitro/**", ".output/**"],
   },
-  requireJsSuffix,
+  ...requireJsSuffix,
   ...baseConfig,
 ];

apps/event-worker/src/index.ts

@@ -1,7 +1,7 @@
 import { logger } from "@ctrlplane/logger";
 
-import { redis } from "./redis";
-import { createTargetScanWorker } from "./target-scan";
+import { redis } from "./redis.js";
+import { createTargetScanWorker } from "./target-scan/index.js";
 
 const targetScanWorker = createTargetScanWorker();
 

apps/event-worker/src/redis.ts

@@ -1,6 +1,6 @@
 import IORedis from "ioredis";
 
-import { env } from "./config";
+import { env } from "./config.js";
 
 export const redis = new IORedis(env.REDIS_URL, {
   maxRetriesPerRequest: null,

apps/event-worker/src/target-scan/gke.ts

@@ -1,17 +1,16 @@
+import type { TargetProviderGoogle, Workspace } from "@ctrlplane/db/schema";
 import { CoreV1Api } from "@kubernetes/client-node";
-import { Job } from "bullmq";
 import _ from "lodash";
 
-import { TargetProviderGoogle, Workspace } from "@ctrlplane/db/schema";
 import { logger } from "@ctrlplane/logger";
 
+import type { UpsertTarget } from "./upsert.js";
 import {
   clusterToTarget,
   connectToCluster,
   getClusters,
   getGoogleClusterClient,
 } from "./google.js";
-import { UpsertTarget } from "./upsert.js";
 
 const log = logger.child({ label: "target-scan/gke" });
 
@@ -52,7 +51,7 @@ export const getGkeTargets = async (
   );
   const kubernetesNamespaceTargets = (
     await Promise.all(
-      clusters.flatMap(({ project, clusters }, idx) => {
+      clusters.flatMap(({ project, clusters }) => {
         return clusters.flatMap(async (cluster) => {
           if (cluster.name == null || cluster.location == null) return [];
 

apps/event-worker/src/target-scan/google.ts

@@ -1,6 +1,6 @@
 import type { ClusterManagerClient } from "@google-cloud/container";
+import type { google } from "@google-cloud/container/build/protos/protos.js";
 import Container from "@google-cloud/container";
-import { google } from "@google-cloud/container/build/protos/protos.js";
 import { KubeConfig } from "@kubernetes/client-node";
 import { GoogleAuth } from "google-auth-library";
 import { SemVer } from "semver";

apps/event-worker/src/target-scan/index.ts

@@ -1,5 +1,6 @@
 import type { TargetScanEvent } from "@ctrlplane/validators/events";
-import { Job, Queue, Worker } from "bullmq";
+import type { Job } from "bullmq";
+import { Queue, Worker } from "bullmq";
 
 import { eq, takeFirstOrNull } from "@ctrlplane/db";
 import { db } from "@ctrlplane/db/client";

apps/event-worker/src/target-scan/upsert.ts

@@ -1,5 +1,8 @@
-import { buildConflictUpdateColumns, sql, Tx } from "@ctrlplane/db";
-import { Target, target } from "@ctrlplane/db/schema";
+import type { Tx } from "@ctrlplane/db";
+import type { Target } from "@ctrlplane/db/schema";
+
+import { buildConflictUpdateColumns, sql } from "@ctrlplane/db";
+import { target } from "@ctrlplane/db/schema";
 
 export type UpsertTarget = Pick<
   Target,

apps/event-worker/src/utils.ts

@@ -1,5 +1,3 @@
-import { Target } from "@ctrlplane/db/schema";
-
 export function omitNullUndefined(obj: object) {
   return Object.entries(obj).reduce<Record<string, string>>(
     (acc, [key, value]) => {

apps/job-policy-checker/eslint.config.js

@@ -3,7 +3,7 @@ import baseConfig from "@ctrlplane/eslint-config/base";
 /** @type {import('typescript-eslint').Config} */
 export default [
   {
-    ignores: [".nitro/**", ".output/**"],
+    ignores: [".nitro/**", ".output/**", "dist/**", "node_modules/**"],
   },
   ...baseConfig,
 ];

apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/TargetProviderSelectCard.tsx

@@ -1,4 +1,4 @@
-import { SiAmazonaws, SiGooglecloud, SiMicrosoftazure } from "react-icons/si";
+import { SiAmazon, SiGooglecloud, SiMicrosoftazure } from "react-icons/si";
 import { TbApi, TbCaretDownFilled } from "react-icons/tb";
 
 import { Button } from "@ctrlplane/ui/button";
@@ -41,7 +41,7 @@ export const TargetProviderSelectCard: React.FC<{
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline" className="flex items-center gap-2">
-              <SiAmazonaws />
+              <SiAmazon />
               AWS
               <TbCaretDownFilled className="text-xs text-neutral-500" />
             </Button>

apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  SiAmazonaws,
+  SiAmazon,
   SiGooglecloud,
   SiKubernetes,
   SiMicrosoftazure,
@@ -73,7 +73,7 @@ const TargetProviders: React.FC = () => {
           <TargetProviderCard>
             <TargetProviderContent>
               <TargetProviderHeading>
-                <SiAmazonaws className="mx-auto text-4xl text-orange-300" />
+                <SiAmazon className="mx-auto text-4xl text-orange-300" />
                 <div className="font-semibold">Amazon</div>
               </TargetProviderHeading>
               <p className="text-xs text-muted-foreground">

apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx

@@ -222,7 +222,7 @@ export default function VariablePage({
 
             <Table className="w-full">
               <TableHeader className="text-left">
-                <TableRow className="text-sm ">
+                <TableRow className="text-sm">
                   <TableHead className="p-3">Keys</TableHead>
                   <TableHead className="p-3">Value</TableHead>
                   <TableHead />

apps/webservice/src/app/[workspaceSlug]/(targets)/targets/page.tsx

@@ -324,7 +324,7 @@ export default function TargetsPage({
             </div>
 
             {targets.data?.total != null && (
-              <div className="flex items-center gap-2 rounded-lg border border-neutral-800/50 px-2 py-1 text-sm text-muted-foreground ">
+              <div className="flex items-center gap-2 rounded-lg border border-neutral-800/50 px-2 py-1 text-sm text-muted-foreground">
                 Total:
                 <Badge
                   variant="outline"
@@ -412,7 +412,7 @@ export default function TargetsPage({
                 <TabsTrigger value="general" className="m-0">
                   General
                 </TabsTrigger>
-                <TabsTrigger value="deployments" className="m-0 ">
+                <TabsTrigger value="deployments" className="m-0">
                   Deployments
                 </TabsTrigger>
               </TabsList>

apps/webservice/src/app/[workspaceSlug]/_components/DeleteDeployment.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@ctrlplane/ui/alert-dialog";
+import { Button } from "@ctrlplane/ui/button";
+
+import { api } from "~/trpc/react";
+
+type DeleteDeploymentProps = {
+  id: string;
+  name: string;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+export const DeleteDeploymentDialog: React.FC<DeleteDeploymentProps> = ({
+  id,
+  name,
+  isOpen,
+  setIsOpen,
+}) => {
+  const router = useRouter();
+  const deleteDeployment = api.deployment.delete.useMutation();
+
+  const onDelete = async () => {
+    await deleteDeployment.mutateAsync(id);
+    router.refresh();
+    setIsOpen(false);
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Deployment</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogDescription>
+          Are you sure you want to delete the{" "}
+          <span className="rounded-md bg-gray-900 px-2 py-1 text-gray-100">
+            {name}
+          </span>{" "}
+          deployment? This action cannot be undone.
+        </AlertDialogDescription>
+        <AlertDialogFooter>
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onDelete}>
+            Delete
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/_components/DeploymentOptionsDropdown.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React, { useState } from "react";
+import { TbDotsVertical, TbEdit, TbTrash } from "react-icons/tb";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+
+import { DeleteDeploymentDialog } from "./DeleteDeployment";
+import { EditDeploymentDialog } from "./EditDeploymentDialog";
+
+export const DeploymentOptionsDropdown: React.FC<{
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+}> = (props) => {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button size="icon" variant="ghost" className="rounded-full">
+            <TbDotsVertical />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="w-42 bg-neutral-900"
+          align="center"
+          forceMount
+        >
+          <DropdownMenuGroup>
+            <EditDeploymentDialog {...props}>
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <TbEdit className="mr-2" />
+                Edit
+              </DropdownMenuItem>
+            </EditDeploymentDialog>
+            <DropdownMenuItem onSelect={() => setDeleteDialogOpen(true)}>
+              <TbTrash className="mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DeleteDeploymentDialog
+        {...props}
+        isOpen={deleteDialogOpen}
+        setIsOpen={setDeleteDialogOpen}
+      />
+    </>
+  );
+};