From 7a21ee2907ed4bca67bb2e1e305a5ce9096d313e Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Thu, 16 May 2024 23:01:40 +0200
Subject: [PATCH] change emailVerified column to icon

---
 .../components/data-table/elements/cells.tsx  |  9 +++--
 .../data-table/elements/data-table.tsx        |  4 +-
 .../data-table/team-member-table.tsx          |  9 ++++-
 .../src/components/data-table/user-table.tsx  | 37 ++++++++++++++-----
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/stack-server/src/components/data-table/elements/cells.tsx b/packages/stack-server/src/components/data-table/elements/cells.tsx
index 49edfdbd6..f594d42ea 100644
--- a/packages/stack-server/src/components/data-table/elements/cells.tsx
+++ b/packages/stack-server/src/components/data-table/elements/cells.tsx
@@ -15,10 +15,13 @@ import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
 
-export function TextCell(props: { children: React.ReactNode, size?: number }) {
+export function TextCell(props: { children: React.ReactNode, size?: number, icon?: React.ReactNode }) {
   return (
-    <div className="text-ellipsis text-nowrap overflow-x-hidden" style={{ width: props.size }}>
-      {props.children}
+    <div className="flex items-center gap-2" style={{ width: props.size }}>
+      <div className="text-ellipsis text-nowrap overflow-x-hidden">
+        {props.children}
+      </div>
+      {props.icon && <div>{props.icon}</div>}
     </div>
   );
 }
diff --git a/packages/stack-server/src/components/data-table/elements/data-table.tsx b/packages/stack-server/src/components/data-table/elements/data-table.tsx
index 132325b42..cde0c3915 100644
--- a/packages/stack-server/src/components/data-table/elements/data-table.tsx
+++ b/packages/stack-server/src/components/data-table/elements/data-table.tsx
@@ -33,15 +33,17 @@ interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[],
   data: TData[],
   toolbarRender?: (table: TableType<TData>) => React.ReactNode,
+  defaultVisibility?: VisibilityState,
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
   toolbarRender,
+  defaultVisibility,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({});
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(defaultVisibility || {});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
diff --git a/packages/stack-server/src/components/data-table/team-member-table.tsx b/packages/stack-server/src/components/data-table/team-member-table.tsx
index e4cd6caa8..d78654739 100644
--- a/packages/stack-server/src/components/data-table/team-member-table.tsx
+++ b/packages/stack-server/src/components/data-table/team-member-table.tsx
@@ -34,7 +34,7 @@ function RemoveUserDialog(props: {
     onOpenChange={props.onOpenChange}
     okButton={{
       label: "Remove user from team",
-      onClick: async () => await props.team.removeUser(props.user.id)
+      onClick: async () => { await props.team.removeUser(props.user.id); }
     }}
     cancelButton
     confirmText="I understand this will cause the user to lose access to the team."
@@ -99,5 +99,10 @@ export function TeamMemberTable(props: { members: ServerTeamMember[], team: Serv
     }).catch(console.error);
   }, [props.members, props.team]);
 
-  return <DataTable data={extendedUsers} columns={teamMemberColumns} toolbarRender={teamMemberToolbarRender} />;
+  return <DataTable 
+    data={extendedUsers}
+    columns={teamMemberColumns} 
+    toolbarRender={teamMemberToolbarRender} 
+    defaultVisibility={{ emailVerified: false }} 
+  />;
 }
\ No newline at end of file
diff --git a/packages/stack-server/src/components/data-table/user-table.tsx b/packages/stack-server/src/components/data-table/user-table.tsx
index 228aef611..f47f96605 100644
--- a/packages/stack-server/src/components/data-table/user-table.tsx
+++ b/packages/stack-server/src/components/data-table/user-table.tsx
@@ -14,6 +14,8 @@ import { DateField, InputField, SwitchField } from "../form-fields";
 import { ActionDialog } from "../action-dialog";
 import Typography from "../ui/typography";
 import { standardFilterFn } from "./elements/utils";
+import { CircleAlert } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 
 export type ExtendedServerUser = ServerUser & {
   authType: string,
@@ -85,7 +87,7 @@ function EditUserDialog(props: {
         <DateField control={form.control} label="Signed Up At" name="signedUpAt" />
       </>
     )}
-    onSubmit={async (values) => await props.user.update(values)}
+    onSubmit={async (values) => { await props.user.update(values); }}
     cancelButton
   />;
 }
@@ -153,18 +155,30 @@ export const commonUserColumns: ColumnDef<ExtendedServerUser>[] = [
   {
     accessorKey: "primaryEmail",
     header: ({ column }) => <DataTableColumnHeader column={column} title="Primary Email" />,
-    cell: ({ row }) => <TextCell size={180}>{row.original.primaryEmail}</TextCell>,
+    cell: ({ row }) => <TextCell size={180} icon={row.original.emailVerified === "unverified" && 
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <CircleAlert className="text-zinc-500 h-4 w-4" />
+        </TooltipTrigger>
+        <TooltipContent>
+          Email not verified
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>}>
+      {row.original.primaryEmail}
+    </TextCell>,
+  },
+  {
+    accessorKey: "emailVerified",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Email Verified" />,
+    cell: ({ row }) => <TextCell>{row.original.emailVerified === 'verified' ? '✓' : '✗'}</TextCell>,
+    filterFn: standardFilterFn
   },
 ];
 
 const columns: ColumnDef<ExtendedServerUser>[] =  [
   ...commonUserColumns,
-  {
-    accessorKey: "emailVerified",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Email Verified" />,
-    cell: ({ row }) => <TextCell>{row.original.emailVerified === 'verified' ? '✓' : ''}</TextCell>,
-    filterFn: standardFilterFn
-  },
   {
     accessorKey: "authType",
     header: ({ column }) => <DataTableColumnHeader column={column} title="Auth Method" />,
@@ -192,5 +206,10 @@ export function extendUsers(users: ServerUser[]): ExtendedServerUser[] {
 
 export function UserTable(props: { users: ServerUser[] }) {
   const extendedUsers: ExtendedServerUser[] = useMemo(() => extendUsers(props.users), [props.users]);
-  return <DataTable data={extendedUsers} columns={columns} toolbarRender={userToolbarRender} />;
+  return <DataTable 
+    data={extendedUsers} 
+    columns={columns} 
+    toolbarRender={userToolbarRender} 
+    defaultVisibility={{ emailVerified: false }} 
+  />;
 }
\ No newline at end of file