Make progress on org role detail modal

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

@@ -27,7 +27,8 @@ import {
 } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { RoleDetailsSection } from "./components";
+import { RolePermissionsTable } from "./components/RolePermissionsSection/RolePermissionsTable";
+import { RoleDetailsSection, RolePermissionsSection } from "./components";
 
 // import { IdentityAuthMethodModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal";
 // import { IdentityModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal";
@@ -201,8 +202,7 @@ export const RolePage = withPermission(
               <div className="mr-4 w-96">
                 <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
               </div>
-              Permissions Section
-              {/* <IdentityProjectsSection identityId={identityId} /> */}
+              <RolePermissionsSection />
             </div>
           </div>
         )}

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

@@ -0,0 +1,218 @@
+// import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+// import { useRouter } from "next/router";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+  useGetOrgRole
+  // useCreateOrgRole,
+  // useUpdateOrgRole
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    name: z.string(),
+    description: z.string(),
+    slug: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["role"]>;
+  // handlePopUpOpen: (
+  //   popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+  //   data: {
+  //     identityId: string;
+  //     name: string;
+  //     authMethod?: IdentityAuthMethod;
+  //   }
+  // ) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["role"]>, state?: boolean) => void;
+};
+
+export const RoleDetailsModal = ({ popUp, handlePopUpToggle }: Props) => {
+  // const router = useRouter();
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const role = popUp?.role?.data as {
+    roleId: string;
+  };
+
+  const { data } = useGetOrgRole(orgId, role.roleId ?? "");
+  console.log("RoleDetailsModal: useGetOrgRole data: ", data);
+
+  // TODO: fetch by role id here
+
+  // const { mutateAsync: createMutateAsync } = useCreateIdentity();
+  // const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+  // const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
+
+  // const { mutateAsync: createOrgRole } = useCreateOrgRole();
+  // const { mutateAsync: updateOrgRole } = useUpdateOrgRole();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: ""
+    }
+  });
+
+  // useEffect(() => {
+  //   if (role) {
+  //     reset({
+  //       name: role.name,
+  //       description: role.description,
+  //       slug: role.slug
+  //     });
+  //   } else {
+  //     reset({
+  //       name: "",
+  //       description: "",
+  //       slug: ""
+  //     });
+  //   }
+  // }, [role]);
+
+  const onFormSubmit = async ({ name, description, slug }: FormData) => {
+    try {
+      console.log("onFormSubmit args: ", {
+        name,
+        description,
+        slug
+      });
+
+      if (role) {
+        // update
+
+        // const up = await updateOrgRole({});
+
+        // console.log("onFormSubmit up: ", up);
+
+        // await updateMutateAsync({
+        //   identityId: identity.identityId,
+        //   name,
+        //   role: role || undefined,
+        //   organizationId: orgId
+        // });
+
+        handlePopUpToggle("role", false);
+      } else {
+        // create
+
+        // const { id: createdId } = await createMutateAsync({
+        //   name,
+        //   role: role || undefined,
+        //   organizationId: orgId
+        // });
+
+        // await addMutateAsync({
+        //   organizationId: orgId,
+        //   identityId: createdId,
+        //   clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+        //   accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+        //   accessTokenTTL: 2592000,
+        //   accessTokenMaxTTL: 2592000,
+        //   accessTokenNumUsesLimit: 0
+        // });
+
+        handlePopUpToggle("role", false);
+        // router.push(`/org/${orgId}/identities/${createdId}`);
+      }
+
+      createNotification({
+        text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text =
+        error?.response?.data?.message ??
+        `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.role?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("role", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${popUp?.role?.data ? "Update" : "Create"} Role`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="Billing Team" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="slug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Slug" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="billing" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="To manage billing" />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.role?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("role", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </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";

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

@@ -1 +1,2 @@
 export { RoleDetailsSection } from "./RoleDetailsSection";
+export { RolePermissionsSection } from "./RolePermissionsSection";