feat: cleanup

jaaydenh · jaaydenh · commit 8ebfee789d8d · 2024-08-06T17:22:40.000Z
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { getErrorMessage } from "api/errors";
 import { patchOrganizationRole, organizationRoles } from "api/queries/roles";
 import { displayError } from "components/GlobalSnackbar/utils";
+import { Loader } from "components/Loader/Loader";
 import { pageTitle } from "utils/page";
 import CreateEditRolePageView from "./CreateEditRolePageView";
 
@@ -18,26 +19,32 @@ export const CreateGroupPage: FC = () => {
   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";
+  const { data: roleData, isLoading } = useQuery(
+    organizationRoles(organization),
+  );
+  const role = roleData?.find((role) => role.name === roleName);
+
+  if (isLoading) {
+    return <Loader />;
+  }
 
   return (
     <>
       <Helmet>
-        <title>{pageTitle(pageTitleText)}</title>
+        <title>
+          {pageTitle(
+            role !== undefined ? "Edit Custom Role" : "Create Custom Role",
+          )}
+        </title>
       </Helmet>
       <CreateEditRolePageView
         role={role}
         organization={organization}
         onSubmit={async (data) => {
           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"),
             );
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
@@ -6,8 +6,8 @@ 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 { type FormikValues, useFormik } from "formik";
-import { type ChangeEvent, useState, type FC, useEffect } from "react";
+import { useFormik } from "formik";
+import { type ChangeEvent, useState, type FC } from "react";
 import { useNavigate } from "react-router-dom";
 import * as Yup from "yup";
 import { isApiValidationError } from "api/errors";
@@ -112,7 +112,7 @@ interface ActionCheckboxesProps {
 }
 
 const ActionCheckboxes: FC<ActionCheckboxesProps> = ({ permissions, form }) => {
-  const [checkedActions, setIsChecked] = useState(permissions);
+  const [checkedActions, setCheckActions] = useState(permissions);
 
   const handleCheckChange = async (
     e: ChangeEvent<HTMLInputElement>,
@@ -134,14 +134,10 @@ const ActionCheckboxes: FC<ActionCheckboxesProps> = ({ permissions, form }) => {
           (p) => p.resource_type !== resource_type || p.action !== action,
         );
 
-    setIsChecked(newPermissions);
-    await form.setFieldValue("organization_permissions", checkedActions);
+    setCheckActions(newPermissions);
+    await form.setFieldValue("organization_permissions", newPermissions);
   };
 
-  // useEffect(() => {
-  //   setIsChecked(permissions);
-  // }, [permissions]);
-
   return (
     <TableContainer>
       <Table>
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
@@ -3,15 +3,9 @@ import Button from "@mui/material/Button";
 import { type FC, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
-import {
-  Navigate,
-  Link as RouterLink,
-  useLocation,
-  useParams,
-} from "react-router-dom";
+import { Link as RouterLink, useLocation, useParams } from "react-router-dom";
 import { getErrorMessage } from "api/errors";
 import { organizationRoles } from "api/queries/roles";
-import type { Organization } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
@@ -31,6 +25,9 @@ export const CustomRolesPage: FC = () => {
   const location = useLocation();
   const { organization = "default" } = useParams() as { organization: string };
   const organizationRolesQuery = useQuery(organizationRoles(organization));
+  const filteredRoleData = organizationRolesQuery.data?.filter(
+    (role) => role.built_in === false,
+  );
 
   useEffect(() => {
     if (organizationRolesQuery.error) {
@@ -56,7 +53,7 @@ export const CustomRolesPage: FC = () => {
   return (
     <>
       <Helmet>
-        <title>{pageTitle("Groups")}</title>
+        <title>{pageTitle("Custom Roles")}</title>
       </Helmet>
 
       <PageHeader
@@ -78,7 +75,7 @@ export const CustomRolesPage: FC = () => {
       </PageHeader>
 
       <CustomRolesPageView
-        roles={organizationRolesQuery.data}
+        roles={filteredRoleData}
         canAssignOrgRole={canAssignOrgRole}
         isCustomRolesEnabled={isCustomRolesEnabled}
       />
