feat: wip

coder · jaaydenh · Aug 9, 2024 · Jul 31, 2024 · Jul 31, 2024 · Aug 1, 2024
commit 928de7e5b9fa5a45c7caa490b1100b1e4dc09efc
@@ -1,29 +1,47 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams } from "react-router-dom";
-import { patchOrganizationRole } from "api/queries/roles";
+import { getErrorMessage } from "api/errors";
+import { patchOrganizationRole, organizationRoles } from "api/queries/roles";
+import { displayError } from "components/GlobalSnackbar/utils";
 import { pageTitle } from "utils/page";
 import CreateEditRolePageView from "./CreateEditRolePageView";
 
 export const CreateGroupPage: FC = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const { organization } = useParams() as { organization: string };
+  const { organization, roleName } = useParams() as {
+    organization: string;
+    roleName: string;
+  };
   const patchOrganizationRoleMutation = useMutation(
     patchOrganizationRole(queryClient, organization ?? "default"),
   );
+  const { data } = useQuery(organizationRoles(organization));
+  const role = data?.find((role) => role.name === roleName);
+  const pageTitleText =
+    role !== undefined ? "Edit Custom Role" : "Create Custom Role";
 
   return (
     <>
       <Helmet>
-        <title>{pageTitle("Create Custom Role")}</title>
+        <title>{pageTitle(pageTitleText)}</title>
       </Helmet>
       <CreateEditRolePageView
+        role={role}
+        organization={organization}
         onSubmit={async (data) => {
-          const newRole = await patchOrganizationRoleMutation.mutateAsync(data);
-          console.log({ newRole });
-          navigate(`/organizations/${organization}/roles`);
+          try {
+            console.log({ data });
+            await patchOrganizationRoleMutation.mutateAsync(data);
+            navigate(`/organizations/${organization}/roles`);
+          } catch (error) {
+            console.log({ error });
+            displayError(
+              getErrorMessage(error, "Failed to update custom role"),
+            );
+          }
         }}
         error={patchOrganizationRoleMutation.error}
         isLoading={patchOrganizationRoleMutation.isLoading}

@@ -1,17 +1,24 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import Checkbox from "@mui/material/Checkbox";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import TextField from "@mui/material/TextField";
-import { useFormik } from "formik";
-import type { FC } from "react";
+import { type FormikValues, useFormik } from "formik";
+import { type ChangeEvent, useState, type FC, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import * as Yup from "yup";
 import { isApiValidationError } from "api/errors";
 import { RBACResourceActions } from "api/rbacresources_gen";
-import type { Role } from "api/typesGenerated";
+import type {
+  Role,
+  Permission,
+  AssignableRoles,
+  RBACResource,
+  RBACAction,
+} from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import {
   FormFields,
@@ -27,24 +34,29 @@ const validationSchema = Yup.object({
 });
 
 export type CreateEditRolePageViewProps = {
+  role: AssignableRoles | undefined;
+  organization: string;
   onSubmit: (data: Role) => void;
   error?: unknown;
   isLoading: boolean;
 };
 
 export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
+  role,
+  organization,
   onSubmit,
   error,
   isLoading,
 }) => {
   const navigate = useNavigate();
   const form = useFormik<Role>({
     initialValues: {
-      name: "",
-      display_name: "",
-      site_permissions: [],
-      organization_permissions: [],
-      user_permissions: [],
+      name: role?.name || "",
+      organization_id: role?.organization_id || organization,
+      display_name: role?.display_name || "",
+      site_permissions: role?.site_permissions || [],
+      organization_permissions: role?.organization_permissions || [],
+      user_permissions: role?.user_permissions || [],
     },
     validationSchema,
     onSubmit,
@@ -55,12 +67,14 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
   return (
     <>
       <PageHeader css={{ paddingTop: 8 }}>
-        <PageHeaderTitle>Create custom role</PageHeaderTitle>
+        <PageHeaderTitle>
+          {role ? "Edit" : "Create"} custom role
+        </PageHeaderTitle>
       </PageHeader>
       <HorizontalForm onSubmit={form.handleSubmit}>
         <FormSection
           title="Role settings"
-          description="Set a name for this role."
+          description="Set a name and permissions for this role."
         >
           <FormFields>
             {Boolean(error) && !isApiValidationError(error) && (
@@ -80,7 +94,10 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
               fullWidth
               label="Display Name"
             />
-            <ActionCheckboxes permissions={[]}></ActionCheckboxes>
+            <ActionCheckboxes
+              permissions={role?.organization_permissions || []}
+              form={form}
+            />
           </FormFields>
         </FormSection>
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
@@ -90,26 +107,69 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
 };
 
 interface ActionCheckboxesProps {
-  permissions: Permissions[];
+  permissions: readonly Permission[] | undefined;
+  form: ReturnType<typeof useFormik<Role>> & { values: Role };
 }
 
-const ActionCheckboxes: FC<ActionCheckboxesProps> = ({ permissions }) => {
+const ActionCheckboxes: FC<ActionCheckboxesProps> = ({ permissions, form }) => {
+  const [checkedActions, setIsChecked] = useState(permissions);
+
+  const handleCheckChange = async (
+    e: ChangeEvent<HTMLInputElement>,
+    form: ReturnType<typeof useFormik<Role>> & { values: Role },
+  ) => {
+    const { name, checked } = e.currentTarget;
+    const [resource_type, action] = name.split(":");
+
+    const newPermissions = checked
+      ? [
+          ...(checkedActions ?? []),
+          {
+            negate: false,
+            resource_type: resource_type as RBACResource,
+            action: action as RBACAction,
+          },
+        ]
+      : checkedActions?.filter(
+          (p) => p.resource_type !== resource_type || p.action !== action,
+        );
+
+    setIsChecked(newPermissions);
+    await form.setFieldValue("organization_permissions", checkedActions);
+  };
+
+  // useEffect(() => {
+  //   setIsChecked(permissions);
+  // }, [permissions]);
+
   return (
     <TableContainer>
       <Table>
         <TableBody>
-          {Object.entries(RBACResourceActions).map(([key, value]) => {
+          {Object.entries(RBACResourceActions).map(([resourceKey, value]) => {
             return (
-              <TableRow key={key}>
+              <TableRow key={resourceKey}>
                 <TableCell>
-                  <li key={key} css={styles.checkBoxes}>
-                    <input type="checkbox" /> {key}
+                  <li key={resourceKey} css={styles.checkBoxes}>
+                    {resourceKey}
                     <ul css={styles.checkBoxes}>
-                      {Object.entries(value).map(([key, value]) => {
+                      {Object.entries(value).map(([actionKey, value]) => {
                         return (
-                          <li key={key}>
+                          <li key={actionKey}>
                             <span css={styles.actionText}>
-                              <input type="checkbox" /> {key}
+                              <Checkbox
+                                name={`${resourceKey}:${actionKey}`}
+                                checked={
+                                  checkedActions?.some(
+                                    (p) =>
+                                      p.resource_type === resourceKey &&
+                                      (p.action.toString() === "*" ||
+                                        p.action === actionKey),
+                                  ) || false
+                                }
+                                onChange={(e) => handleCheckChange(e, form)}
+                              />
+                              {actionKey}
                             </span>{" "}
                             -{" "}
                             <span css={styles.actionDescription}>{value}</span>
@@ -129,9 +189,6 @@ const ActionCheckboxes: FC<ActionCheckboxesProps> = ({ permissions }) => {
 };
 
 const styles = {
-  rolesDropdown: {
-    marginBottom: 20,
-  },
   checkBoxes: {
     margin: 0,
     listStyleType: "none",

@@ -1,8 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import AddOutlined from "@mui/icons-material/AddOutlined";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import { LoadingButton } from "@mui/lab";
-import { createFilterOptions } from "@mui/material/Autocomplete";
 import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
 import Table from "@mui/material/Table";
@@ -11,19 +9,17 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { useState, type FC } from "react";
+import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import type { Role } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Paywall } from "components/Paywall/Paywall";
-import { Stack } from "components/Stack/Stack";
 import {
   TableLoader,
   TableLoaderSkeleton,
   TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
-import { permissionsToCheck } from "contexts/auth/permissions";
 import { useClickableTableRow } from "hooks";
 import { docs } from "utils/docs";
 
@@ -33,17 +29,14 @@ export type CustomRolesPageViewProps = {
   isCustomRolesEnabled: boolean;
 };
 
-// const filter = createFilterOptions<Role>();
-
 export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
   roles,
   canAssignOrgRole,
   isCustomRolesEnabled,
 }) => {
   const isLoading = Boolean(roles === undefined);
   const isEmpty = Boolean(roles && roles.length === 0);
-  // const [selectedRole, setSelectedRole] = useState<Role | null>(null);
-  console.log({ roles });
+
   return (
     <>
       <ChooseOne>
@@ -59,9 +52,8 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
             <Table>
               <TableHead>
                 <TableRow>
-                  <TableCell width="33%">Name</TableCell>
-                  <TableCell width="33%">Display Name</TableCell>
-                  <TableCell width="33%">Permissions</TableCell>
+                  <TableCell width="50%">Name</TableCell>
+                  <TableCell width="49%">Permissions</TableCell>
                   <TableCell width="1%"></TableCell>
                 </TableRow>
               </TableHead>
@@ -125,9 +117,7 @@ const RoleRow: FC<RoleRowProps> = ({ role }) => {
 
   return (
     <TableRow data-testid={`role-${role.name}`} {...rowProps}>
-      <TableCell>{role.name}</TableCell>
-
-      <TableCell css={styles.secondary}>{role.display_name}</TableCell>
+      <TableCell>{role.display_name || role.name}</TableCell>
 
       <TableCell css={styles.secondary}>
         {role.organization_permissions.length}