Make progress on org role detail modal

frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -6,13 +6,15 @@ import {
   // DeleteActionModal,
   IconButton
 } from "@app/components/v2";
+
+import { RolePermissionsTable } from "./RolePermissionsTable";
 // import { useDeleteIdentityFromWorkspace } from "@app/hooks/api";
 // import { usePopUp } from "@app/hooks/usePopUp";
 
 // import { IdentityAddToProjectModal } from "./IdentityAddToProjectModal";
 // import { IdentityProjectsTable } from "./IdentityProjectsTable";
 
-export const RolePermissionsSesction = () => {
+export const RolePermissionsSection = () => {
   //   const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
 
   // const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -62,7 +64,7 @@ export const RolePermissionsSesction = () => {
         </IconButton>
       </div>
       <div className="py-4">
-        Permissions Table
+        <RolePermissionsTable />
         {/* <IdentityProjectsTable identityId={identityId} handlePopUpOpen={handlePopUpOpen} /> */}
       </div>
       {/* <DeleteActionModal

frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsTable.tsx

@@ -1,62 +1,124 @@
-import { faKey } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  EmptyState,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  // Tooltip,
+  // IconButton,
+  // EmptyState,
   Table,
   TableContainer,
-  TableSkeleton,
+  // TableSkeleton,
   TBody,
+  Td,
   Th,
   THead,
-  Tr
-} from "@app/components/v2";
-import { useGetIdentityProjectMemberships } from "@app/hooks/api";
+  Tr} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 // import { UsePopUpState } from "@app/hooks/usePopUp";
 
 // import { IdentityProjectRow } from "./IdentityProjectRow";
 
-type Props = {
-  identityId: string;
-  //   handlePopUpOpen: (
-  //     popUpName: keyof UsePopUpState<["removeIdentityFromProject"]>,
-  //     data?: {}
-  //   ) => void;
-};
+// type Props = {
+//     identityId: string;
+//     handlePopUpOpen: (
+//       popUpName: keyof UsePopUpState<["removeIdentityFromProject"]>,
+//       data?: {}
+//     ) => void;
+// };
 
-export const IdentityProjectsTable = ({
-  identityId
-}: // handlePopUpOpen
-Props) => {
-  const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
+export const RolePermissionsTable = () => {
+  //   const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
   return (
     <TableContainer>
       <Table>
         <THead>
           <Tr>
-            <Th>Name</Th>
-            <Th>Role</Th>
-            <Th>Added On</Th>
+            <Th>Resource</Th>
+            <Th>Allowed Actions</Th>
             <Th className="w-5" />
           </Tr>
         </THead>
         <TBody>
-          {isLoading && <TableSkeleton columns={2} innerKey="identity-project-memberships" />}
-          {!isLoading &&
+          <Tr>
+            <Td>Identity</Td>
+            <Td>Create/Read</Td>
+            <Td>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="rounded-lg">
+                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="p-1">
+                  <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          // TODO
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Edit Permission
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Edit}
+                    a={OrgPermissionSubjects.Identity}
+                  >
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          isAllowed
+                            ? "hover:!bg-red-500 hover:!text-white"
+                            : "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          //   handlePopUpOpen("deleteIdentity", {
+                          //     identityId: id,
+                          //     name
+                          //   });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Delete Permission
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </Td>
+          </Tr>
+          {/* <TableSkeleton columns={3} innerKey="role-permissions" /> */}
+          {/* {isLoading && <TableSkeleton columns={2} innerKey="identity-project-memberships" />} */}
+          {/* {!isLoading &&
             projectMemberships?.map((membership) => {
               return (
                 <div key={`membership-${membership.id}`}>Row</div>
-                // <IdentityProjectRow
-                //   key={`identity-project-membership-${membership.id}`}
-                //   membership={membership}
-                //   handlePopUpOpen={handlePopUpOpen}
-                // />
+               <IdentityProjectRow
+                 key={`identity-project-membership-${membership.id}`}
+                  membership={membership}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
               );
-            })}
+            })} */}
         </TBody>
       </Table>
-      {!isLoading && !projectMemberships?.length && (
+      {/* <EmptyState title="This role does not have any permissions on it" icon={faShield} /> */}
+      {/* {!isLoading && !projectMemberships?.length && (
         <EmptyState title="This identity has not been assigned to any projects" icon={faKey} />
-      )}
+      )} */}
     </TableContainer>
   );
 };

frontend/src/views/Org/RolePage/components/RolePermissionsSection/index.tsx

@@ -1 +1 @@
-export { RolePermissionsSesction } from "./RolePermissionsSection";
+export { RolePermissionsSection } from "./RolePermissionsSection";