Continue progress on project role page

2026-10-16 10:18:16 +00:00 · 2024-07-25 14:45:02 -07:00
parent 1cb4dc9e84
commit bf00d16c80
8 changed files with 657 additions and 24 deletions
@@ -0,0 +1,199 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  Table,
+  TableContainer,
+  TBody,
+  Th,
+  THead,
+  Tr
+  // Td
+} from "@app/components/v2";
+import { ProjectPermissionSub,useWorkspace  } from "@app/context";
+import {
+  // useUpdateOrgRole,
+  useGetProjectRoleBySlug
+} from "@app/hooks/api";
+import {
+  formSchema,
+  rolePermission2Form,
+  TFormSchema} from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
+
+import { RolePermissionRow } from "./RolePermissionRow";
+
+const SINGLE_PERMISSION_LIST = [
+  {
+    title: "Project",
+    formName: "workspace"
+  },
+  {
+    title: "Integrations",
+    formName: "integrations"
+  },
+  {
+    title: "Secret Protect policy",
+    formName: ProjectPermissionSub.SecretApproval
+  },
+  {
+    title: "Roles",
+    formName: "role"
+  },
+  {
+    title: "User management",
+    formName: "member"
+  },
+  {
+    title: "Group management",
+    formName: "groups"
+  },
+  {
+    title: "Machine identity management",
+    formName: "identity"
+  },
+  {
+    title: "Webhooks",
+    formName: "webhooks"
+  },
+  {
+    title: "Service Tokens",
+    formName: "service-tokens"
+  },
+  {
+    title: "Settings",
+    formName: "settings"
+  },
+  {
+    title: "Environments",
+    formName: "environments"
+  },
+  {
+    title: "Tags",
+    formName: "tags"
+  },
+  {
+    title: "Audit Logs",
+    formName: "audit-logs"
+  },
+  {
+    title: "IP Allowlist",
+    formName: "ip-allowlist"
+  },
+  {
+    title: "Certificate Authorities",
+    formName: "certificate-authorities"
+  },
+  {
+    title: "Certificates",
+    formName: "certificates"
+  },
+  {
+    title: "Secret Rollback",
+    formName: "secret-rollback"
+  }
+] as const;
+
+type Props = {
+  roleSlug: string;
+};
+
+// TODO: fill table
+
+export const RolePermissionsSection = ({ roleSlug }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: role } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
+
+  console.log("RolePermissionsSection role data: ", role);
+
+  const {
+    setValue,
+    control,
+    handleSubmit,
+    formState: { isDirty, isSubmitting },
+    reset
+  } = useForm<TFormSchema>({
+    defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
+    resolver: zodResolver(formSchema)
+  });
+
+  //   const { mutateAsync: updateRole } = useUpdateOrgRole();
+
+  const onSubmit = async () => {
+    try {
+      //   await updateRole({
+      //     orgId,
+      //     id: roleId,
+      //     ...el,
+      //     permissions: formRolePermission2API(el.permissions)
+      //   });
+      createNotification({ type: "success", text: "Successfully updated role" });
+    } catch (err) {
+      console.log(err);
+      createNotification({ type: "error", text: "Failed to update role" });
+    }
+  };
+
+  const isCustomRole = !["admin", "member", "viewer", "no-access"].includes(role?.slug ?? "");
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Permissions</h3>
+        {isCustomRole && (
+          <div className="flex items-center">
+            <Button
+              colorSchema="primary"
+              type="submit"
+              isDisabled={isSubmitting || !isDirty}
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              className="ml-4 text-mineshaft-300"
+              variant="link"
+              isDisabled={isSubmitting || !isDirty}
+              isLoading={isSubmitting}
+              onClick={() => reset()}
+            >
+              Cancel
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="py-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-5" />
+                <Th>Resource</Th>
+                <Th>Permission</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {SINGLE_PERMISSION_LIST.map((permission) => {
+                console.log("permission: ", permission);
+                return (
+                  <RolePermissionRow
+                    title={permission.title}
+                    formName={permission.formName}
+                    control={control}
+                    setValue={setValue}
+                    key={`project-role-${roleSlug}-permission-${permission.formName}`}
+                    isEditable={isCustomRole}
+                  />
+                );
+              })}
+            </TBody>
+          </Table>
+        </TableContainer>
+      </div>
+    </form>
+  );
+};