Add button and route

site/src/AppRouter.tsx

@@ -17,6 +17,7 @@ import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
 import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
 import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
 import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
+import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacesPage/WorkspacesPage"
 
@@ -76,14 +77,24 @@ export const AppRouter: React.FC = () => (
         />
       </Route>
 
-      <Route
-        path="users"
-        element={
-          <AuthAndFrame>
-            <UsersPage />
-          </AuthAndFrame>
-        }
-      />
+      <Route path="users" >
+        <Route
+          index
+          element={
+            <AuthAndFrame>
+              <UsersPage />
+            </AuthAndFrame>
+          }
+        />
+        <Route
+          path="create"
+          element={
+            <RequireAuth>
+              <CreateUserPage />
+            </RequireAuth>
+          }
+        />
+      </Route>
       <Route
         path="orgs"
         element={

site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const CreateUserPage = () => {
+  return <div>"Coming soon!"</div>
+}

site/src/pages/UsersPage/UsersPage.tsx

@@ -1,5 +1,6 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
+import { useNavigate } from "react-router"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
@@ -8,10 +9,11 @@ export const UsersPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [usersState] = useActor(xServices.usersXService)
   const { users, pager, getUsersError } = usersState.context
+  const navigate = useNavigate()
 
   if (usersState.matches("error")) {
     return <ErrorSummary error={getUsersError} />
   } else {
-    return <UsersPageView users={users} pager={pager} />
+    return <UsersPageView users={users} pager={pager} openUserCreationDialog={() => {navigate("/users/create")}} />
   }
 }

site/src/pages/UsersPage/UsersPageView.tsx

@@ -7,18 +7,21 @@ import { UsersTable } from "../../components/UsersTable/UsersTable"
 export const Language = {
   pageTitle: "Users",
   pageSubtitle: (pager: Pager | undefined): string => (pager ? `${pager.total} total` : ""),
+  newUserButton: "New User"
 }
 
 export interface UsersPageViewProps {
   users: UserResponse[]
   pager?: Pager
+  openUserCreationDialog: () => void
 }
 
-export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager }) => {
+export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager, openUserCreationDialog }) => {
   const styles = useStyles()
+
   return (
     <div className={styles.flexColumn}>
-      <Header title={Language.pageTitle} subTitle={Language.pageSubtitle(pager)} />
+      <Header title={Language.pageTitle} subTitle={Language.pageSubtitle(pager)} action={{ text: Language.newUserButton, onClick: openUserCreationDialog}}/>
       <UsersTable users={users} />
     </div>
   )