more changes/cleanup

ctrlplanedev · Sep 7, 2024 · a45978e · a45978e
1 parent bbdab06
commit a45978e
Show file tree

Hide file tree

Showing 22 changed files with 5,693 additions and 281 deletions.
diff --git a/...ettings/(settings)/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx b/...ettings/(settings)/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { Button } from "@ctrlplane/ui/button";
+
+import { api } from "~/trpc/react";
+
+export const DeleteGithubUserButton: React.FC<{ githubUserId: string }> = ({
+  githubUserId,
+}) => {
+  const deleteGithubUser = api.github.user.delete.useMutation();
+  const router = useRouter();
+
+  const handleDelete = () =>
+    deleteGithubUser.mutateAsync(githubUserId).then(() => router.refresh());
+
+  return (
+    <Button variant="secondary" onClick={handleDelete}>
+      Disconnect
+    </Button>
+  );
+};
diff --git a/...g]/settings/(settings)/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx b/...g]/settings/(settings)/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx
@@ -1,5 +1,8 @@
+"use client";
+
 import { useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { TbBulb } from "react-icons/tb";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@ctrlplane/ui/avatar";
@@ -26,7 +29,10 @@ import { Separator } from "@ctrlplane/ui/separator";
 import { api } from "~/trpc/react";
 
 type GithubAddOrgDialogProps = {
-  githubUserId: number;
+  githubUser?: {
+    githubUserId: number;
+    userId: string;
+  };
   children: React.ReactNode;
   githubConfig: {
     url: string;
@@ -38,32 +44,49 @@ type GithubAddOrgDialogProps = {
 };
 
 export const GithubAddOrgDialog: React.FC<GithubAddOrgDialogProps> = ({
-  githubUserId,
+  githubUser,
   children,
   githubConfig,
   workspaceId,
 }) => {
   const [open, setOpen] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const githubOrgs =
-    api.github.organizations.byGithubUserId.useQuery(githubUserId);
-
+  const githubOrgs = api.github.organizations.byGithubUserId.useQuery(
+    githubUser?.githubUserId ?? 0,
+  );
+  const router = useRouter();
   const githubOrgsInstalled =
     api.github.organizations.list.useQuery(workspaceId);
 
   const validOrgsToAdd =
     githubOrgs.data?.filter(
       (org) =>
         !githubOrgsInstalled.data?.some(
-          (o) =>
-            o.github_organization.organizationName === org.login &&
-            o.github_organization.connected === true,
+          (o) => o.organizationName === org.login,
         ),
     ) ?? [];
 
+  const githubOrgCreate = api.github.organizations.create.useMutation();
+
   const [image, setImage] = useState<string | null>(null);
   const [value, setValue] = useState<string | null>(null);
 
+  const handlePreconnectedOrgSave = () => {
+    if (value == null) return;
+    const org = validOrgsToAdd.find((o) => o.login === value);
+    if (org == null) return;
+
+    githubOrgCreate
+      .mutateAsync({
+        installationId: org.installationId,
+        workspaceId,
+        organizationName: org.login,
+        addedByUserId: githubUser?.userId ?? "",
+        avatarUrl: org.avatar_url,
+      })
+      .then(() => router.refresh());
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -175,7 +198,12 @@ export const GithubAddOrgDialog: React.FC<GithubAddOrgDialogProps> = ({
         )}
 
         <DialogFooter className="px-4">
-          <Button>Save</Button>
+          <Button
+            onClick={handlePreconnectedOrgSave}
+            disabled={value == null || githubOrgCreate.isPending}
+          >
+            Save
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

diff --git a/...]/settings/(settings)/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx b/...]/settings/(settings)/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx
@@ -1,8 +1,6 @@
 import type { GithubUser } from "@ctrlplane/db/schema";
-import Link from "next/link";
-import _ from "lodash";
 import { SiGithub } from "react-icons/si";
-import { TbChevronDown, TbPlus } from "react-icons/tb";
+import { TbPlus } from "react-icons/tb";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@ctrlplane/ui/avatar";
 import { Button } from "@ctrlplane/ui/button";
@@ -12,17 +10,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@ctrlplane/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@ctrlplane/ui/dropdown-menu";
 import { Separator } from "@ctrlplane/ui/separator";
-import { Skeleton } from "@ctrlplane/ui/skeleton";
 
-import { api } from "~/trpc/react";
+import { api } from "~/trpc/server";
 import { GithubAddOrgDialog } from "./GithubAddOrgDialog";
+import { OrgActionDropdown } from "./OrgActionDropdown";
 
 type GithubConnectedOrgsProps = {
   githubUser?: GithubUser | null;
@@ -36,17 +28,15 @@ type GithubConnectedOrgsProps = {
   };
 };
 
-export const GithubConnectedOrgs: React.FC<GithubConnectedOrgsProps> = ({
+export const GithubConnectedOrgs: React.FC<GithubConnectedOrgsProps> = async ({
   githubUser,
   workspaceSlug,
   workspaceId,
   githubConfig,
 }) => {
-  const githubOrgsInstalled = api.github.organizations.list.useQuery(
+  const githubOrgsInstalled = await api.github.organizations.list(
     workspaceId ?? "",
-    { enabled: workspaceId != null },
   );
-  const githubOrgUpdate = api.github.organizations.update.useMutation();
 
   return (
     <Card className="rounded-md">
@@ -61,7 +51,7 @@ export const GithubConnectedOrgs: React.FC<GithubConnectedOrgsProps> = ({
           </CardDescription>
         </div>
         <GithubAddOrgDialog
-          githubUserId={githubUser?.githubUserId ?? 0}
+          githubUser={githubUser ?? undefined}
           githubConfig={githubConfig}
           workspaceId={workspaceId ?? ""}
           workspaceSlug={workspaceSlug ?? ""}
@@ -72,90 +62,37 @@ export const GithubConnectedOrgs: React.FC<GithubConnectedOrgsProps> = ({
         </GithubAddOrgDialog>
       </CardHeader>
 
-      {githubOrgsInstalled.isLoading && (
-        <div className="flex flex-col gap-4">
-          {_.range(3).map((i) => (
-            <Skeleton
-              key={i}
-              className="h-9 w-full"
-              style={{ opacity: 1 * (1 - i / 3) }}
-            />
-          ))}
-        </div>
-      )}
-      {githubOrgsInstalled.data != null &&
-        githubOrgsInstalled.data.length > 0 && (
-          <>
-            <Separator />
-            <div className="flex flex-col gap-4 p-4">
-              {githubOrgsInstalled.data.map(
-                ({ github_organization, github_user }) => (
-                  <div
-                    key={github_organization.id}
-                    className="flex items-center justify-between"
-                  >
-                    <div className="flex items-center gap-4">
-                      <Avatar className="h-12 w-12">
-                        <AvatarImage
-                          src={github_organization.avatarUrl ?? ""}
-                        />
-                        <AvatarFallback>
-                          <SiGithub className="h-12 w-12" />
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="flex flex-col">
-                        <p className="font-semibold text-neutral-200">
-                          {github_organization.organizationName}
-                        </p>
-                        {github_user != null && (
-                          <p className="text-sm text-neutral-400">
-                            Enabled by {github_user.githubUsername} on{" "}
-                            {github_organization.createdAt.toLocaleDateString()}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          className="flex items-center gap-2"
-                        >
-                          <div className="h-2 w-2 rounded-full bg-green-500" />
-                          Connected
-                          <TbChevronDown className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        <DropdownMenuItem>
-                          <Link
-                            href={`${githubConfig.url}/organizations/${github_organization.organizationName}/settings/installations/${github_organization.installationId}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            Configure
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            githubOrgUpdate.mutateAsync({
-                              id: github_organization.id,
-                              data: {
-                                connected: false,
-                              },
-                            });
-                          }}
-                        >
-                          Disconnect
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+      {githubOrgsInstalled.length > 0 && (
+        <>
+          <Separator />
+          <div className="flex flex-col gap-4 p-4">
+            {githubOrgsInstalled.map((org) => (
+              <div key={org.id} className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <Avatar className="h-12 w-12">
+                    <AvatarImage src={org.avatarUrl ?? ""} />
+                    <AvatarFallback>
+                      <SiGithub className="h-12 w-12" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col">
+                    <p className="font-semibold text-neutral-200">
+                      {org.organizationName}
+                    </p>
+                    {org.addedByUser != null && (
+                      <p className="text-sm text-neutral-400">
+                        Enabled by {org.addedByUser.githubUsername} on{" "}
+                        {org.createdAt.toLocaleDateString()}
+                      </p>
+                    )}
                   </div>
-                ),
-              )}
-            </div>
-          </>
-        )}
+                </div>
+                <OrgActionDropdown githubConfig={githubConfig} org={org} />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
     </Card>
   );
 };