add user button is important

aslilac · aslilac · commit 267c54c7cf87 · 2024-07-24T22:11:35.000Z
diff --git a/site/src/pages/UsersPage/UsersLayout.tsx b/site/src/pages/UsersPage/UsersLayout.tsx
@@ -27,6 +27,8 @@ export const UsersLayout: FC = () => {
   const location = useLocation();
   const activeTab = location.pathname.endsWith("groups") ? "groups" : "users";
 
+  const isMultiOrg = experiments.includes("multi-organization");
+
   return (
     <>
       <Margins>
@@ -59,7 +61,7 @@ export const UsersLayout: FC = () => {
         </PageHeader>
       </Margins>
 
-      {!experiments.includes("multi-organization") && (
+      {!isMultiOrg && (
         <Tabs
           css={{ marginBottom: 40, marginTop: -TAB_PADDING_Y }}
           active={activeTab}
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -1,10 +1,16 @@
+import PersonAdd from "@mui/icons-material/PersonAdd";
+import Button from "@mui/material/Button";
 import type { ComponentProps, FC } from "react";
+import { useNavigate } from "react-router-dom";
 import type { GroupsByUserId } from "api/queries/groups";
 import type * as TypesGen from "api/typesGenerated";
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import {
   PaginationContainer,
   type PaginationResult,
 } from "components/PaginationWidget/PaginationContainer";
+import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { useDashboard } from "modules/dashboard/useDashboard";
 import { UsersFilter } from "./UsersFilter";
 import { UsersTable } from "./UsersTable/UsersTable";
 
@@ -56,8 +62,35 @@ export const UsersPageView: FC<UsersPageViewProps> = ({
   groupsByUserId,
   usersQuery,
 }) => {
+  const { experiments } = useDashboard();
+  const { permissions } = useAuthenticated();
+  const navigate = useNavigate();
+  const { createUser: canCreateUser } = permissions;
+
+  const isMultiOrg = experiments.includes("multi-organization");
+
   return (
     <>
+      {isMultiOrg && (
+        <PageHeader
+          css={{ paddingTop: 0 }}
+          actions={
+            <>
+              {canCreateUser && (
+                <Button
+                  onClick={() => navigate("/users/create")}
+                  startIcon={<PersonAdd />}
+                >
+                  Create user
+                </Button>
+              )}
+            </>
+          }
+        >
+          <PageHeaderTitle>Users</PageHeaderTitle>
+        </PageHeader>
+      )}
+
       <UsersFilter {...filterProps} />
 
       <PaginationContainer query={usersQuery} paginationUnitLabel="users">
