feat: add stories for CreateEditRolePageView

coder · jaaydenh · Aug 9, 2024 · Jul 31, 2024 · Jul 31, 2024 · Aug 1, 2024
commit 11db948e34055a14fdbba7a1296c7af568608557
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
@@ -1,18 +1,13 @@
-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 { organizationPermissions } from "api/queries/organizations";
 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, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { nameValidator } from "utils/formUtils";
 import { pageTitle } from "utils/page";
 import { useOrganizationSettings } from "../ManagementSettingsLayout";
 import CreateEditRolePageView from "./CreateEditRolePageView";
@@ -36,32 +31,7 @@ export const CreateEditRolePage: FC = () => {
   const role = roleData?.find((role) => role.name === roleName);
   const permissions = permissionsQuery.data;
 
-  const validationSchema = Yup.object({
-    name: nameValidator("Name"),
-  });
-
-  const onSubmit = async (data: PatchRoleRequest) => {
-    try {
-      await patchOrganizationRoleMutation.mutateAsync(data);
-      navigate(`/organizations/${organizationName}/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) {
+  if (isLoading || !permissions) {
     return <Loader />;
   }
 
@@ -75,41 +45,22 @@ export const CreateEditRolePage: FC = () => {
         </title>
       </Helmet>
 
-      <PageHeader
-        actions={
-          permissions &&
-          permissions.assignOrgRole && (
-            <>
-              <Button
-                onClick={() => {
-                  navigate(`/organizations/${organizationName}/roles`);
-                }}
-              >
-                Cancel
-              </Button>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  form.handleSubmit();
-                }}
-              >
-                {role !== undefined ? "Save" : "Create Role"}
-              </Button>
-            </>
-          )
-        }
-      >
-        <PageHeaderTitle>
-          {role ? "Edit" : "Create"} custom role
-        </PageHeaderTitle>
-      </PageHeader>
-
       <CreateEditRolePageView
         role={role}
-        form={form}
+        onSubmit={async (data: PatchRoleRequest) => {
+          try {
+            await patchOrganizationRoleMutation.mutateAsync(data);
+            navigate(`/organizations/${organizationName}/roles`);
+          } catch (error) {
+            displayError(
+              getErrorMessage(error, "Failed to update custom role"),
+            );
+          }
+        }}
         error={patchOrganizationRoleMutation.error}
         isLoading={patchOrganizationRoleMutation.isLoading}
+        organizationName={organizationName}
+        canAssignOrgRole={permissions.assignOrgRole}
       />
     </>
   );

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  mockApiError,
+  MockRoleWithOrgPermissions,
+  assignableRole,
+} from "testHelpers/entities";
+import { CreateEditRolePageView } from "./CreateEditRolePageView";
+
+const meta: Meta<typeof CreateEditRolePageView> = {
+  title: "pages/OrganizationCreateEditRolePage",
+  component: CreateEditRolePageView,
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateEditRolePageView>;
+
+export const Default: Story = {
+  args: {
+    role: assignableRole(MockRoleWithOrgPermissions, true),
+    onSubmit: () => null,
+    error: undefined,
+    isLoading: false,
+    organizationName: "my-org",
+    canAssignOrgRole: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    role: assignableRole(MockRoleWithOrgPermissions, true),
+    onSubmit: () => null,
+    error: mockApiError({
+      message: "A role named new-role already exists.",
+      validations: [{ field: "name", detail: "Role names must be unique" }],
+    }),
+    isLoading: false,
+    organizationName: "my-org",
+    canAssignOrgRole: true,
+  },
+};
+
+export const CannotEdit: Story = {
+  args: {
+    role: assignableRole(MockRoleWithOrgPermissions, true),
+    onSubmit: () => null,
+    error: undefined,
+    isLoading: false,
+    organizationName: "my-org",
+    canAssignOrgRole: false,
+  },
+};
+
+export const ShowAllResources: Story = {
+  args: {
+    role: assignableRole(MockRoleWithOrgPermissions, true),
+    onSubmit: () => null,
+    error: undefined,
+    isLoading: false,
+    organizationName: "my-org",
+    canAssignOrgRole: true,
+    allResources: true,
+  },
+};
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
@@ -1,4 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import Button from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Table from "@mui/material/Table";
@@ -8,9 +9,10 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TextField from "@mui/material/TextField";
-import type { useFormik } from "formik";
+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";
 import { RBACResourceActions } from "api/rbacresources_gen";
 import type {
@@ -28,71 +30,129 @@ import {
   FormSection,
   HorizontalForm,
 } from "components/Form/Form";
-import { getFormHelpers } from "utils/formUtils";
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { getFormHelpers, nameValidator } from "utils/formUtils";
+
+const validationSchema = Yup.object({
+  name: nameValidator("Name"),
+});
 
 export type CreateEditRolePageViewProps = {
   role: AssignableRoles | undefined;
-  form: ReturnType<typeof useFormik<PatchRoleRequest>>;
+  onSubmit: (data: PatchRoleRequest) => void;
   error?: unknown;
   isLoading: boolean;
+  organizationName: string;
+  canAssignOrgRole: boolean;
+  allResources?: boolean;
 };
 
 export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
   role,
-  form,
+  onSubmit,
   error,
   isLoading,
+  organizationName,
+  canAssignOrgRole,
+  allResources = false,
 }) => {
   const navigate = useNavigate();
-  const getFieldHelpers = getFormHelpers<Role>(form, error);
   const onCancel = () => navigate(-1);
 
+  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);
+
   return (
-    <HorizontalForm onSubmit={form.handleSubmit}>
-      <FormSection
-        title="Role settings"
-        description="Set a name and permissions for this role."
+    <>
+      <PageHeader
+        actions={
+          canAssignOrgRole && (
+            <>
+              <Button
+                onClick={() => {
+                  navigate(`/organizations/${organizationName}/roles`);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  form.handleSubmit();
+                }}
+              >
+                {role !== undefined ? "Save" : "Create Role"}
+              </Button>
+            </>
+          )
+        }
       >
-        <FormFields>
-          {Boolean(error) && !isApiValidationError(error) && (
-            <ErrorAlert error={error} />
-          )}
-
-          <TextField
-            {...getFieldHelpers("name", {
-              helperText:
-                "The role name cannot be modified after the role is created.",
-            })}
-            autoFocus
-            fullWidth
-            disabled={role !== undefined}
-            label="Name"
-          />
-          <TextField
-            {...getFieldHelpers("display_name", {
-              helperText: "Optional: keep empty to default to the name.",
-            })}
-            fullWidth
-            label="Display Name"
-          />
-          <ActionCheckboxes
-            permissions={role?.organization_permissions || []}
-            form={form}
+        <PageHeaderTitle>
+          {role ? "Edit" : "Create"} custom role
+        </PageHeaderTitle>
+      </PageHeader>
+      <HorizontalForm onSubmit={form.handleSubmit}>
+        <FormSection
+          title="Role settings"
+          description="Set a name and permissions for this role."
+        >
+          <FormFields>
+            {Boolean(error) && !isApiValidationError(error) && (
+              <ErrorAlert error={error} />
+            )}
+
+            <TextField
+              {...getFieldHelpers("name", {
+                helperText:
+                  "The role name cannot be modified after the role is created.",
+              })}
+              autoFocus
+              fullWidth
+              disabled={role !== undefined}
+              label="Name"
+            />
+            <TextField
+              {...getFieldHelpers("display_name", {
+                helperText: "Optional: keep empty to default to the name.",
+              })}
+              fullWidth
+              label="Display Name"
+            />
+            <ActionCheckboxes
+              permissions={role?.organization_permissions || []}
+              form={form}
+              allResources={allResources}
+            />
+          </FormFields>
+        </FormSection>
+        {canAssignOrgRole && (
+          <FormFooter
+            onCancel={onCancel}
+            isLoading={isLoading}
+            submitLabel={role !== undefined ? "Save" : "Create Role"}
           />
-        </FormFields>
-      </FormSection>
-      <FormFooter
-        onCancel={onCancel}
-        isLoading={isLoading}
-        submitLabel={role !== undefined ? "Save" : "Create Role"}
-      />
-    </HorizontalForm>
+        )}
+      </HorizontalForm>
+    </>
   );
 };
 
 interface ActionCheckboxesProps {
   permissions: readonly Permission[] | undefined;
   form: ReturnType<typeof useFormik<Role>> & { values: Role };
+  allResources: boolean;
 }
 
 const ResourceActionComparator = (
@@ -120,9 +180,13 @@ const filteredRBACResourceActions = Object.fromEntries(
   ),
 );
 
-const ActionCheckboxes: FC<ActionCheckboxesProps> = ({ permissions, form }) => {
+const ActionCheckboxes: FC<ActionCheckboxesProps> = ({
+  permissions,
+  form,
+  allResources,
+}) => {
   const [checkedActions, setCheckActions] = useState(permissions);
-  const [showAllResources, setShowAllResources] = useState(false);
+  const [showAllResources, setShowAllResources] = useState(allResources);
 
   const handleActionCheckChange = async (
     e: ChangeEvent<HTMLInputElement>,