Merge pull request #1389 from Dhanus3133/feat/policy-new-tab

feat: Support opening policy in new tab for easier navigation

Author: Marfuen

apps/app/src/app/(app)/[orgId]/policies/all/components/policies-table-columns.tsx

@@ -5,18 +5,32 @@ import { StatusIndicator } from '@/components/status-indicator';
 import { formatDate } from '@/lib/format';
 import { Policy } from '@db';
 import { ColumnDef } from '@tanstack/react-table';
+import { ExternalLink } from 'lucide-react';
+import Link from 'next/link';
 
-export function getPolicyColumns(): ColumnDef<Policy>[] {
+export function getPolicyColumns(orgId: string): ColumnDef<Policy>[] {
   return [
     {
       id: 'name',
       accessorKey: 'name',
       header: ({ column }) => <DataTableColumnHeader column={column} title="Policy Name" />,
       cell: ({ row }) => {
+        const policyName = row.getValue('name') as string;
+        const policyHref = `/${orgId}/policies/${row.original.id}`;
+
         return (
-          <div className="flex items-center gap-2">
-            <span className="max-w-[31.25rem] truncate font-medium">{row.getValue('name')}</span>
-          </div>
+          <Link
+            href={policyHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="group flex items-center gap-2"
+          >
+            <span className="max-w-[31.25rem] truncate font-medium group-hover:underline">
+              {policyName}
+            </span>
+            <ExternalLink className="size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+          </Link>
         );
       },
       meta: {

apps/app/src/app/(app)/[orgId]/policies/all/components/policies-table.tsx

@@ -16,9 +16,10 @@ interface PoliciesTableProps {
 
 export function PoliciesTable({ promises }: PoliciesTableProps) {
   const [{ data, pageCount }] = React.use(promises);
-  const { orgId } = useParams();
+  const params = useParams();
+  const orgId = params.orgId as string;
 
-  const columns = React.useMemo(() => getPolicyColumns(), []);
+  const columns = React.useMemo(() => getPolicyColumns(orgId), [orgId]);
 
   const { table } = useDataTable({
     data,

apps/app/src/components/data-table/data-table.tsx

@@ -33,14 +33,14 @@ export function DataTable<TData>({
     if (onRowClick) {
       onRowClick(row);
     }
-    if (getRowId) {
+    if (getRowId && rowClickBasePath) {
       const id = getRowId(row);
       router.push(`${rowClickBasePath}/${id}`);
     }
   };
 
-  // Apply client-side filtering
   const filteredRows = table.getFilteredRowModel().rows;
+  const isRowClickable = !!(getRowId && rowClickBasePath) || !!onRowClick;
 
   return (
     <div className={cn('space-y-4', className)} {...props}>
@@ -78,25 +78,27 @@ export function DataTable<TData>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
-                  className={cn((getRowId || onRowClick) && 'hover:bg-muted/50 cursor-pointer')}
-                  onClick={() => handleRowClick(row.original)}
+                  className={cn(isRowClickable && 'hover:bg-muted/50 cursor-pointer')}
+                  onClick={isRowClickable ? () => handleRowClick(row.original) : undefined}
                 >
-                  {row.getVisibleCells().map((cell, index) => (
-                    <TableCell
-                      key={cell.id}
-                      className={cn(
-                        index !== 0 && 'hidden md:table-cell',
-                        index === 0 && 'truncate',
-                      )}
-                      style={{
-                        ...getCommonPinningStyles({
-                          column: cell.column,
-                        }),
-                      }}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
+                  {row.getVisibleCells().map((cell, index) => {
+                    return (
+                      <TableCell
+                        key={cell.id}
+                        className={cn(
+                          index !== 0 && 'hidden md:table-cell',
+                          index === 0 && 'truncate',
+                        )}
+                        style={{
+                          ...getCommonPinningStyles({
+                            column: cell.column,
+                          }),
+                        }}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    );
+                  })}
                 </TableRow>
               ))
             ) : (