feat: Role and Permission rows open update dialog

apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/table/permissions-list.tsx

@@ -6,6 +6,7 @@ import { BookBookmark, Page2 } from "@unkey/icons";
 import { Button, Checkbox, Empty } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { useCallback, useMemo, useState } from "react";
+import { EditPermission } from "./components/actions/components/edit-permission";
 import { PermissionsTableActions } from "./components/actions/keys-table-action.popover.constants";
 import { AssignedItemsCell } from "./components/assigned-items-cell";
 import { LastUpdated } from "./components/last-updated";
@@ -54,20 +55,21 @@ export const PermissionsList = () => {
           const iconContainer = (
             <div
               className={cn(
-                "size-5 rounded flex items-center justify-center cursor-pointer border border-grayA-3 transition-all duration-100",
+                "size-5 rounded flex items-center justify-center border border-grayA-3 transition-all duration-100",
                 "bg-grayA-3",
                 isSelected && "bg-grayA-5",
               )}
               onMouseEnter={() => setHoveredPermissionName(permission.name)}
               onMouseLeave={() => setHoveredPermissionName(null)}
             >
               {!isSelected && !isHovered && (
-                <Page2 iconSize="sm-regular" className="text-gray-12" />
+                <Page2 iconSize="sm-regular" className="text-gray-12 cursor-pointer" />
               )}
               {(isSelected || isHovered) && (
                 <Checkbox
                   checked={isSelected}
                   className="size-4 [&_svg]:size-3"
+                  onClick={(e) => e.stopPropagation()}
                   onCheckedChange={() => toggleSelection(permission.permissionId)}
                 />
               )}
@@ -162,87 +164,96 @@ export const PermissionsList = () => {
   );
 
   return (
-    <VirtualTable
-      data={permissions}
-      isLoading={isLoading}
-      isFetchingNextPage={isLoadingMore}
-      onLoadMore={loadMore}
-      columns={columns}
-      onRowClick={setSelectedPermission}
-      selectedItem={selectedPermission}
-      keyExtractor={(permission) => permission.permissionId}
-      rowClassName={(permission) => getRowClassName(permission, selectedPermission)}
-      loadMoreFooterProps={{
-        hide: isLoading,
-        buttonText: "Load more permissions",
-        hasMore,
-        headerContent: (
-          <SelectionControls
-            selectedPermissions={selectedPermissions}
-            setSelectedPermissions={setSelectedPermissions}
-          />
-        ),
-        countInfoText: (
-          <div className="flex gap-2">
-            <span>Showing</span>{" "}
-            <span className="text-accent-12">
-              {new Intl.NumberFormat().format(permissions.length)}
-            </span>
-            <span>of</span>
-            {new Intl.NumberFormat().format(totalCount)}
-            <span>permissions</span>
+    <>
+      <VirtualTable
+        data={permissions}
+        isLoading={isLoading}
+        isFetchingNextPage={isLoadingMore}
+        onLoadMore={loadMore}
+        columns={columns}
+        onRowClick={setSelectedPermission}
+        selectedItem={selectedPermission}
+        keyExtractor={(permission) => permission.permissionId}
+        rowClassName={(permission) => getRowClassName(permission, selectedPermission)}
+        loadMoreFooterProps={{
+          hide: isLoading,
+          buttonText: "Load more permissions",
+          hasMore,
+          headerContent: (
+            <SelectionControls
+              selectedPermissions={selectedPermissions}
+              setSelectedPermissions={setSelectedPermissions}
+            />
+          ),
+          countInfoText: (
+            <div className="flex gap-2">
+              <span>Showing</span>{" "}
+              <span className="text-accent-12">
+                {new Intl.NumberFormat().format(permissions.length)}
+              </span>
+              <span>of</span>
+              {new Intl.NumberFormat().format(totalCount)}
+              <span>permissions</span>
+            </div>
+          ),
+        }}
+        emptyState={
+          <div className="w-full flex justify-center items-center h-full">
+            <Empty className="w-[400px] flex items-start">
+              <Empty.Icon className="w-auto" />
+              <Empty.Title>No Permissions Found</Empty.Title>
+              <Empty.Description className="text-left">
+                There are no permissions configured yet. Create your first permission to start
+                managing permissions and access control.
+              </Empty.Description>
+              <Empty.Actions className="mt-4 justify-start">
+                <a
+                  href="https://www.unkey.com/docs/security/permissions"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button size="md">
+                    <BookBookmark />
+                    Learn about Permissions
+                  </Button>
+                </a>
+              </Empty.Actions>
+            </Empty>
           </div>
-        ),
-      }}
-      emptyState={
-        <div className="w-full flex justify-center items-center h-full">
-          <Empty className="w-[400px] flex items-start">
-            <Empty.Icon className="w-auto" />
-            <Empty.Title>No Permissions Found</Empty.Title>
-            <Empty.Description className="text-left">
-              There are no permissions configured yet. Create your first permission to start
-              managing permissions and access control.
-            </Empty.Description>
-            <Empty.Actions className="mt-4 justify-start">
-              <a
-                href="https://www.unkey.com/docs/security/permissions"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button size="md">
-                  <BookBookmark />
-                  Learn about Permissions
-                </Button>
-              </a>
-            </Empty.Actions>
-          </Empty>
-        </div>
-      }
-      config={{
-        rowHeight: 52,
-        layoutMode: "grid",
-        rowBorders: true,
-        containerPadding: "px-0",
-      }}
-      renderSkeletonRow={({ columns, rowHeight }) =>
-        columns.map((column) => (
-          <td
-            key={column.key}
-            className={cn(
-              "text-xs align-middle whitespace-nowrap",
-              column.key === "permission" ? "py-[6px]" : "py-1",
-            )}
-            style={{ height: `${rowHeight}px` }}
-          >
-            {column.key === "permission" && <RoleColumnSkeleton />}
-            {column.key === "slug" && <SlugColumnSkeleton />}
-            {column.key === "used_in_roles" && <AssignedKeysColumnSkeleton />}
-            {column.key === "assigned_to_keys" && <AssignedToKeysColumnSkeleton />}
-            {column.key === "last_updated" && <LastUpdatedColumnSkeleton />}
-            {column.key === "action" && <ActionColumnSkeleton />}
-          </td>
-        ))
-      }
-    />
+        }
+        config={{
+          rowHeight: 52,
+          layoutMode: "grid",
+          rowBorders: true,
+          containerPadding: "px-0",
+        }}
+        renderSkeletonRow={({ columns, rowHeight }) =>
+          columns.map((column) => (
+            <td
+              key={column.key}
+              className={cn(
+                "text-xs align-middle whitespace-nowrap",
+                column.key === "permission" ? "py-[6px]" : "py-1",
+              )}
+              style={{ height: `${rowHeight}px` }}
+            >
+              {column.key === "permission" && <RoleColumnSkeleton />}
+              {column.key === "slug" && <SlugColumnSkeleton />}
+              {column.key === "used_in_roles" && <AssignedKeysColumnSkeleton />}
+              {column.key === "assigned_to_keys" && <AssignedToKeysColumnSkeleton />}
+              {column.key === "last_updated" && <LastUpdatedColumnSkeleton />}
+              {column.key === "action" && <ActionColumnSkeleton />}
+            </td>
+          ))
+        }
+      />
+      {selectedPermission && (
+        <EditPermission
+          permission={selectedPermission}
+          isOpen={!!selectedPermission}
+          onClose={() => setSelectedPermission(null)}
+        />
+      )}
+    </>
   );
 };