From 6e745bd6516d0f939b1c7b5d50819a5ef533092b Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Sun, 31 Mar 2024 15:45:51 +0700
Subject: [PATCH] feat: display shared connection different

---
 src/app/api/database/[database_id]/route.ts   | 11 +++++----
 src/app/api/databases/route.ts                | 12 +++++++++-
 src/app/connect/saved-connection-card.tsx     | 24 +++++++++++++++----
 src/app/connect/saved-connection-storage.ts   |  4 ++++
 .../table-cell/createEditableCell.tsx         |  2 ++
 5 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/app/api/database/[database_id]/route.ts b/src/app/api/database/[database_id]/route.ts
index ccca6df3..4d2e0d4d 100644
--- a/src/app/api/database/[database_id]/route.ts
+++ b/src/app/api/database/[database_id]/route.ts
@@ -38,8 +38,10 @@ export const GET = withDatabaseOperation(async ({ database: databaseInfo }) => {
 });
 
 export const DELETE = withDatabaseOperation(
-  async ({ database: databaseInfo, permission }) => {
-    if (!permission.isOwner) {
+  async ({ database: databaseInfo, user }) => {
+    const isOriginalOwner = databaseInfo.userId === user.id;
+
+    if (!isOriginalOwner) {
       return NextResponse.json({ error: "Unauthorization" }, { status: 500 });
     }
 
@@ -55,7 +57,7 @@ export const DELETE = withDatabaseOperation(
 );
 
 export const PUT = withDatabaseOperation(
-  async ({ database: databaseInfo, permission, body }) => {
+  async ({ database: databaseInfo, body, user }) => {
     const parsed = databaseSchema.safeParse(body);
 
     if (!parsed.success) {
@@ -69,7 +71,8 @@ export const PUT = withDatabaseOperation(
 
     const data = parsed.data;
 
-    if (!permission.isOwner) {
+    const isOriginalOwner = databaseInfo.userId === user.id;
+    if (!isOriginalOwner) {
       return NextResponse.json({ error: "Unauthorization" }, { status: 500 });
     }
 
diff --git a/src/app/api/databases/route.ts b/src/app/api/databases/route.ts
index d63b7dea..47c59fc8 100644
--- a/src/app/api/databases/route.ts
+++ b/src/app/api/databases/route.ts
@@ -1,6 +1,6 @@
 import { SavedConnectionItem } from "@/app/connect/saved-connection-storage";
 import { db } from "@/db";
-import { database, database_user_role } from "@/db/schema";
+import { database, database_user_role, user as userTable } from "@/db/schema";
 import withUser from "@/lib/with-user";
 import { and, desc, eq, isNull } from "drizzle-orm";
 import { NextResponse } from "next/server";
@@ -12,6 +12,7 @@ export const GET = withUser(async ({ user }) => {
     .select()
     .from(database_user_role)
     .innerJoin(database, eq(database.id, database_user_role.databaseId))
+    .innerJoin(userTable, eq(userTable.id, database.userId))
     .where(
       and(eq(database_user_role.userId, user.id), isNull(database.deletedAt))
     )
@@ -27,6 +28,15 @@ export const GET = withUser(async ({ user }) => {
           description: d.database.description,
           storage: "remote",
           label: d.database.color,
+          shared:
+            d.database.userId === d.database_user_role.userId
+              ? undefined
+              : {
+                  sharedBy: {
+                    id: d.user.id,
+                    name: d.user.name,
+                  },
+                },
         } as SavedConnectionItem)
     ),
   });
diff --git a/src/app/connect/saved-connection-card.tsx b/src/app/connect/saved-connection-card.tsx
index 4ee36fb7..4f4af194 100644
--- a/src/app/connect/saved-connection-card.tsx
+++ b/src/app/connect/saved-connection-card.tsx
@@ -6,7 +6,7 @@ import {
   ContextMenuItem,
   ContextMenuSeparator,
 } from "@/components/ui/context-menu";
-import { LucidePencil, LucideTrash } from "lucide-react";
+import { LucidePencil, LucideTrash, LucideUsers } from "lucide-react";
 import { useState } from "react";
 import {
   SavedConnectionItem,
@@ -28,7 +28,14 @@ export default function ConnectionItemCard({
 
   return (
     <ContextMenu onOpenChange={setOpen}>
-      <ContextMenuTrigger>
+      <ContextMenuTrigger
+        disabled={!!conn.shared}
+        onContextMenu={(e) => {
+          if (conn.shared) {
+            e.preventDefault();
+          }
+        }}
+      >
         <Link
           className={cn(
             "border rounded w-[285px] flex overflow-hidden hover:border-secondary hover:bg-secondary",
@@ -55,9 +62,16 @@ export default function ConnectionItemCard({
           </div>
           <div className="p-2">
             <h2 className="line-clamp-1">{conn.name}</h2>
-            <p className="text-gray-600 text-xs line-clamp-2 h-8">
-              {conn.description || <i>No description</i>}
-            </p>
+            {conn.shared ? (
+              <p className="text-gray-600 text-xs line-clamp-2 h-8 mt-1">
+                <LucideUsers className="w-4 h-4 mr-1 inline" />
+                Shared by <strong>{conn.shared.sharedBy.name}</strong>
+              </p>
+            ) : (
+              <p className="text-gray-600 text-xs line-clamp-2 h-8">
+                {conn.description || <i>No description</i>}
+              </p>
+            )}
           </div>
         </Link>
       </ContextMenuTrigger>
diff --git a/src/app/connect/saved-connection-storage.ts b/src/app/connect/saved-connection-storage.ts
index f7f3ecad..d9f6a91b 100644
--- a/src/app/connect/saved-connection-storage.ts
+++ b/src/app/connect/saved-connection-storage.ts
@@ -1,3 +1,4 @@
+import { ApiUser } from "@/lib/api/api-database-response";
 import parseSafeJson from "../../lib/json-safe";
 
 export const DRIVER_DETAIL = Object.freeze({
@@ -60,6 +61,9 @@ export interface SavedConnectionItem {
   name: string;
   description?: string;
   label?: SavedConnectionLabel;
+  shared?: {
+    sharedBy: ApiUser;
+  };
 }
 
 export interface SavedConnectionItemConfigConfig {
diff --git a/src/components/table-cell/createEditableCell.tsx b/src/components/table-cell/createEditableCell.tsx
index 78555b76..6a32147d 100644
--- a/src/components/table-cell/createEditableCell.tsx
+++ b/src/components/table-cell/createEditableCell.tsx
@@ -73,6 +73,8 @@ function InputCellEditor({
             if (y >= state.getRowsCount()) return;
 
             shouldExit.current = false;
+            applyChange(value, false);
+
             state.setFocus(y, x);
             state.scrollToFocusCell(x === 0 ? "left" : "right", "bottom");
             e.preventDefault();