feat: add cancel and save buttons to top of page

jaaydenh · jaaydenh · commit 3f19d9957a5c · 2024-08-02T21:01:12.000Z
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
@@ -1,21 +1,29 @@
+import Button from "@mui/material/Button";
+import { useFormik } from "formik";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate, useParams } from "react-router-dom";
+import * as Yup from "yup";
 import { getErrorMessage } from "api/errors";
 import { patchOrganizationRole, organizationRoles } from "api/queries/roles";
+import type { PatchRoleRequest } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import { PageHeader } from "components/PageHeader/PageHeader";
+import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { pageTitle } from "utils/page";
 import CreateEditRolePageView from "./CreateEditRolePageView";
 
-export const CreateGroupPage: FC = () => {
+export const CreateEditRolePage: FC = () => {
+  const { permissions } = useAuthenticated();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { organization, roleName } = useParams() as {
     organization: string;
     roleName: string;
   };
+  const { assignOrgRole: canAssignOrgRole } = permissions;
   const patchOrganizationRoleMutation = useMutation(
     patchOrganizationRole(queryClient, organization ?? "default"),
   );
@@ -24,6 +32,31 @@ export const CreateGroupPage: FC = () => {
   );
   const role = roleData?.find((role) => role.name === roleName);
 
+  const validationSchema = Yup.object({
+    name: Yup.string().required().label("Name"),
+  });
+
+  const onSubmit = async (data: PatchRoleRequest) => {
+    try {
+      await patchOrganizationRoleMutation.mutateAsync(data);
+      navigate(`/organizations/${organization}/roles`);
+    } catch (error) {
+      displayError(getErrorMessage(error, "Failed to update custom role"));
+    }
+  };
+
+  const form = useFormik<PatchRoleRequest>({
+    initialValues: {
+      name: role?.name || "",
+      display_name: role?.display_name || "",
+      site_permissions: role?.site_permissions || [],
+      organization_permissions: role?.organization_permissions || [],
+      user_permissions: role?.user_permissions || [],
+    },
+    validationSchema,
+    onSubmit,
+  });
+
   if (isLoading) {
     return <Loader />;
   }
@@ -37,23 +70,40 @@ export const CreateGroupPage: FC = () => {
           )}
         </title>
       </Helmet>
+
+      <PageHeader
+        actions={
+          canAssignOrgRole && (
+            <>
+              <Button
+                onClick={() => {
+                  navigate(`/organizations/${organization}/roles`);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  form.handleSubmit();
+                }}
+              >
+                {role !== undefined ? "Save" : "Create Role"}
+              </Button>
+            </>
+          )
+        }
+      ></PageHeader>
+
       <CreateEditRolePageView
         role={role}
-        onSubmit={async (data) => {
-          try {
-            await patchOrganizationRoleMutation.mutateAsync(data);
-            navigate(`/organizations/${organization}/roles`);
-          } catch (error) {
-            displayError(
-              getErrorMessage(error, "Failed to update custom role"),
-            );
-          }
-        }}
+        form={form}
         error={patchOrganizationRoleMutation.error}
         isLoading={patchOrganizationRoleMutation.isLoading}
       />
     </>
   );
 };
 
-export default CreateGroupPage;
+export default CreateEditRolePage;
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
@@ -6,10 +6,9 @@ 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 { 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";
 import { RBACResourceActions } from "api/rbacresources_gen";
 import type {
@@ -30,35 +29,20 @@ import {
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { getFormHelpers } from "utils/formUtils";
 
-const validationSchema = Yup.object({
-  name: Yup.string().required().label("Name"),
-});
-
 export type CreateEditRolePageViewProps = {
   role: AssignableRoles | undefined;
-  onSubmit: (data: Role) => void;
+  form: ReturnType<typeof useFormik<PatchRoleRequest>>;
   error?: unknown;
   isLoading: boolean;
 };
 
 export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
   role,
-  onSubmit,
+  form,
   error,
   isLoading,
 }) => {
   const navigate = useNavigate();
-  const form = useFormik<PatchRoleRequest>({
-    initialValues: {
-      name: role?.name || "",
-      display_name: role?.display_name || "",
-      site_permissions: role?.site_permissions || [],
-      organization_permissions: role?.organization_permissions || [],
-      user_permissions: role?.user_permissions || [],
-    },
-    validationSchema,
-    onSubmit,
-  });
   const getFieldHelpers = getFormHelpers<Role>(form, error);
   const onCancel = () => navigate(-1);
 
@@ -102,7 +86,11 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
             />
           </FormFields>
         </FormSection>
-        <FormFooter onCancel={onCancel} isLoading={isLoading} />
+        <FormFooter
+          onCancel={onCancel}
+          isLoading={isLoading}
+          submitLabel={role !== undefined ? "Save" : "Create Role"}
+        />
       </HorizontalForm>
     </>
   );
