feat(web): add auto flag removal

apps/web/package.json

@@ -34,7 +34,7 @@
     "@monaco-editor/react": "^4.5.1",
     "@next-auth/prisma-adapter": "1.0.5",
     "@next/mdx": "14.0.4",
-    "@prisma/client": "5.6.0",
+    "@prisma/client": "5.18.0",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -91,6 +91,7 @@
     "lodash-es": "^4.17.21",
     "logsnag": "^0.1.6",
     "lucide-react": "0.320.0",
+    "memoize": "^10.0.0",
     "micro": "^10.0.1",
     "ms": "^2.1.3",
     "next": "14.1.1",
@@ -102,7 +103,9 @@
     "nextjs-cors": "^2.1.2",
     "nodemailer": "^6.9.1",
     "nuqs": "^1.17.8",
-    "octokit": "^2.0.18",
+    "octokit": "^4.0.2",
+    "openai": "^4.56.0",
+    "prettier": "^2.8.7",
     "rate-limiter-flexible": "^5.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -138,9 +141,8 @@
     "autoprefixer": "^10.4.14",
     "jsdom": "^20.0.3",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "prisma": "5.6.0",
+    "prisma": "5.18.0",
     "tailwindcss": "^3.3.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",

apps/web/prisma/schema.prisma

@@ -107,7 +107,8 @@ model Project {
   stripePriceId        String?
   currentPeriodEnd     DateTime @default(dbgenerated("(CURRENT_TIMESTAMP(3) + INTERVAL 30 DAY)"))
 
-  apiRequests ApiRequest[]
+  apiRequests  ApiRequest[]
+  integrations Integration[]
 }
 
 model ProjectUser {
@@ -310,3 +311,21 @@ model ApiRequest {
   @@index([createdAt])
   @@index([type])
 }
+
+enum IntegrationType {
+  GITHUB
+}
+
+model Integration {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  type      IntegrationType
+  settings  Json
+  project   Project         @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  projectId String
+
+  @@unique([projectId, type])
+  @@index([projectId])
+}

apps/web/src/api/helpers.ts

@@ -0,0 +1,33 @@
+import type { Context, MiddlewareHandler } from "hono";
+import { getCookie } from "hono/cookie";
+import type { GetServerSidePropsContext } from "next";
+import type { DefaultSession } from "next-auth";
+import { getServerAuthSession } from "server/common/get-server-auth-session";
+import type { UserSession } from "types/next-auth";
+
+export async function getHonoSession(c: Context) {
+  return await getServerAuthSession({
+    req: {
+      ...c.req.raw.clone(),
+      cookies: getCookie(c),
+    } as unknown as GetServerSidePropsContext["req"],
+    res: {
+      ...c.res,
+      getHeader: (h: string) => c.req.header(h),
+      setHeader: (h: string, v: string) => c.header(h, v),
+    } as unknown as GetServerSidePropsContext["res"],
+  });
+}
+
+export const authMiddleware: MiddlewareHandler<{
+  Variables: {
+    user: UserSession & DefaultSession["user"];
+  };
+}> = async (c, next) => {
+  const session = await getHonoSession(c);
+  if (!session || !session.user) {
+    return c.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  c.set("user", session.user);
+  return next();
+};

apps/web/src/api/index.ts

@@ -4,6 +4,7 @@ import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { logger } from "hono/logger";
 import { makeHealthRoute } from "./routes/health";
+import { makeIntegrationsRoute } from "./routes/integrations";
 import { makeLegacyProjectDataRoute } from "./routes/legacy_project_data";
 import { makeEventRoute } from "./routes/v1_event";
 
@@ -19,4 +20,5 @@ export const app = new Hono()
   // v1 routes
   .route("/v1/config", makeConfigRoute())
   .route("/v1/data", makeProjectDataRoute())
-  .route("/v1/track", makeEventRoute());
+  .route("/v1/track", makeEventRoute())
+  .route("/integrations", makeIntegrationsRoute());

apps/web/src/api/routes/integrations.ts

@@ -0,0 +1,94 @@
+import { zValidator } from "@hono/zod-validator";
+import { authMiddleware } from "api/helpers";
+import { Hono } from "hono";
+import { githubApp } from "server/common/github-app";
+import type { GithubIntegrationSettings } from "server/common/integrations";
+import { prisma } from "server/db/client";
+import { z } from "zod";
+
+export function makeIntegrationsRoute() {
+  return new Hono()
+    .get(
+      "/github",
+      zValidator(
+        "query",
+        z.object({
+          projectId: z.string(),
+        })
+      ),
+      authMiddleware,
+      async (c) => {
+        const user = c.get("user");
+        const { projectId } = c.req.valid("query");
+        const project = await prisma.project.findFirst({
+          where: { id: projectId, users: { some: { userId: user.id } } },
+          include: { integrations: true },
+        });
+        const referrer = new URL(c.req.header("Referer") ?? "/");
+
+        if (!project) {
+          referrer.searchParams.set("error", "Unauthorized");
+          return c.redirect(referrer.toString());
+        }
+        if (project.integrations.some((i) => i.type === "GITHUB")) {
+          referrer.searchParams.set("error", "Integration already exists");
+          return c.redirect(referrer.toString());
+        }
+
+        const searchParams = new URLSearchParams();
+        searchParams.set("projectId", projectId);
+
+        return c.redirect(
+          await githubApp.getInstallationUrl({ state: searchParams.toString() })
+        );
+      }
+    )
+    .get(
+      "/github/setup",
+      zValidator(
+        "query",
+        z.object({
+          installation_id: z.string().transform(Number),
+          setup_action: z.enum(["install", "update"]),
+          state: z.string().transform((s) => {
+            const url = new URLSearchParams(s);
+            const projectId = url.get("projectId");
+            if (!projectId) {
+              throw new Error("projectId not found in state");
+            }
+            return { projectId };
+          }),
+        })
+      ),
+      async (c) => {
+        const { installation_id, setup_action, state } = c.req.valid("query");
+        if (setup_action === "update") {
+          return c.json({ message: "Update not implemented" }, { status: 501 });
+        }
+
+        const project = await prisma.project.findFirst({
+          where: { id: state.projectId },
+          include: { integrations: true },
+        });
+        if (!project) {
+          return c.json(
+            { message: "Project not found" },
+            {
+              status: 404,
+            }
+          );
+        }
+        await prisma.integration.create({
+          data: {
+            type: "GITHUB",
+            projectId: project.id,
+            settings: {
+              installationId: installation_id,
+              repositoryIds: [],
+            } satisfies GithubIntegrationSettings,
+          },
+        });
+        return c.redirect(`/projects/${project.id}/settings`);
+      }
+    );
+}

apps/web/src/components/AddFeatureFlagModal.tsx

@@ -177,7 +177,9 @@ export const AddFeatureFlagModal = ({
 
   const { mutateAsync } = trpc.flags.addFlag.useMutation({
     onSuccess() {
-      ctx.flags.getFlags.invalidate({ projectId });
+      ctx.flags.getFlags.invalidate({
+        projectId,
+      });
     },
   });
 

apps/web/src/components/FlagPage.tsx

@@ -1,5 +1,5 @@
 import type { FeatureFlagType } from "@prisma/client";
-import type { InferQueryResult } from "@trpc/react-query/dist/utils/inferReactQueryProcedure";
+import type { inferRouterOutputs } from "@trpc/server";
 import { AddFeatureFlagModal } from "components/AddFeatureFlagModal";
 import { CreateEnvironmentModal } from "components/CreateEnvironmentModal";
 import {
@@ -15,8 +15,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "components/Tooltip";
 import { Input } from "components/ui/input";
 import Fuse from "fuse.js";
 import { useProjectId } from "lib/hooks/useProjectId";
-import { EditIcon, FileEditIcon, Search, TrashIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import {
+  EditIcon,
+  FileEditIcon,
+  Search,
+  Sparkle,
+  TrashIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { AiOutlinePlus } from "react-icons/ai";
 import { BiInfoCircle } from "react-icons/bi";
@@ -155,9 +161,7 @@ export const FeatureFlagPageContent = ({
   data,
   type,
 }: {
-  data: NonNullable<
-    InferQueryResult<(typeof appRouter)["flags"]["getFlags"]>["data"]
-  >;
+  data: NonNullable<inferRouterOutputs<typeof appRouter>["flags"]["getFlags"]>;
   type: "Flags" | "Remote Config";
 }) => {
   const [isCreateFlagModalOpen, setIsCreateFlagModalOpen] = useState(false);
@@ -170,6 +174,8 @@ export const FeatureFlagPageContent = ({
 
   const [isCreateEnvironmentModalOpen, setIsCreateEnvironmentModalOpen] =
     useState(false);
+  const createFlagRemovalPRMutation =
+    trpc.flags.createFlagRemovalPR.useMutation();
 
   const projectId = useProjectId();
 
@@ -178,6 +184,10 @@ export const FeatureFlagPageContent = ({
     [data.flags]
   );
 
+  useEffect(() => {
+    setFlags(data.flags);
+  }, [data.flags]);
+
   const onSearch = (query: string) => {
     if (!query) {
       setFlags(data.flags);
@@ -326,6 +336,26 @@ export const FeatureFlagPageContent = ({
                         <FileEditIcon className="mr-4 h-4 w-4" />
                         Edit Description
                       </DropdownMenuItem>
+                      <DropdownMenuItem
+                        disabled={!data.hasGithubIntegration}
+                        className="cursor-pointer bg-gradient-to-r from-blue-800 via-purple-600 to-pink-500 hover:from-purple-700 hover:via-pink-500 hover:to-red-400"
+                        onClick={async () => {
+                          const url = await toast.promise(
+                            createFlagRemovalPRMutation.mutateAsync({
+                              flagId: currentFlag.id,
+                            }),
+                            {
+                              loading: "Creating removal PR...",
+                              success: "Successfully created removal PR",
+                              error: "Failed to create removal PR",
+                            }
+                          );
+                          window.open(url, "_blank");
+                        }}
+                      >
+                        <Sparkle className="mr-4 h-4 w-4" />
+                        Create Removal PR
+                      </DropdownMenuItem>
                       <DropdownMenuItem
                         className="cursor-pointer focus:!bg-red-700 focus:!text-white"
                         onClick={() => {