wip org management ui

aslilac · aslilac · commit 06cdfe2b222d · 2024-05-15T20:01:22.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -505,6 +505,14 @@ class ApiMethods {
     return response.data;
   };
 
+  createOrganization = async (params: TypesGen.CreateOrganizationRequest) => {
+    const response = await this.axios.post<TypesGen.Organization>(
+      "/api/v2/organizations",
+      params,
+    );
+    return response.data;
+  };
+
   getOrganization = async (
     organizationId: string,
   ): Promise<TypesGen.Organization> => {
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -0,0 +1,16 @@
+import type { QueryClient } from "react-query";
+import { API } from "api/api";
+import type { CreateOrganizationRequest } from "api/typesGenerated";
+import { meKey, myOrganizationsKey } from "./users";
+
+export const createOrganization = (queryClient: QueryClient) => {
+  return {
+    mutationFn: (params: CreateOrganizationRequest) =>
+      API.createOrganization(params),
+
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(meKey);
+      await queryClient.invalidateQueries(myOrganizationsKey);
+    },
+  };
+};
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -124,7 +124,7 @@ export const authMethods = () => {
   };
 };
 
-const meKey = ["me"];
+export const meKey = ["me"];
 
 export const me = (metadata: MetadataState<User>) => {
   return cachedQuery({
@@ -249,3 +249,12 @@ export const updateAppearanceSettings = (
     },
   };
 };
+
+export const myOrganizationsKey = ["organizations", "me"] as const;
+
+export const myOrganizations = () => {
+  return {
+    queryKey: myOrganizationsKey,
+    queryFn: () => API.getOrganizations(),
+  };
+};
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/DeploySettingsPage/Sidebar.tsx b/site/src/pages/DeploySettingsPage/Sidebar.tsx
@@ -12,6 +12,7 @@ import {
   Sidebar as BaseSidebar,
   SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import TeamsIcon from "@mui/icons-material/Groups";
 
 export const Sidebar: FC = () => {
   return (
@@ -22,6 +23,9 @@ export const Sidebar: FC = () => {
       <SidebarNavItem href="licenses" icon={ApprovalIcon}>
         Licenses
       </SidebarNavItem>
+      <SidebarNavItem href="teams" icon={TeamsIcon}>
+        Teams
+      </SidebarNavItem>
       <SidebarNavItem href="appearance" icon={Brush}>
         Appearance
       </SidebarNavItem>
diff --git a/site/src/pages/DeploySettingsPage/TeamsSettingsPage/TeamsSettingsPage.tsx b/site/src/pages/DeploySettingsPage/TeamsSettingsPage/TeamsSettingsPage.tsx
@@ -0,0 +1,42 @@
+import Button from "@mui/material/Button";
+import { type FC, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { createOrganization } from "api/queries/organizations";
+import { myOrganizations } from "api/queries/users";
+import { TextField } from "@mui/material";
+
+const TeamsSettingsPage: FC = () => {
+  const queryClient = useQueryClient();
+  const addTeamMutation = useMutation(createOrganization(queryClient));
+  const organizationsQuery = useQuery(myOrganizations());
+  const [newOrgName, setNewOrgName] = useState("");
+  return (
+    <>
+      <TextField
+        label="New organization name"
+        onChange={(event) => setNewOrgName(event.target.value)}
+      />
+      <p>{String(addTeamMutation.error)}</p>
+      <Button onClick={() => addTeamMutation.mutate({ name: newOrgName })}>
+        add new team
+      </Button>
+
+      {organizationsQuery.data?.map((org) => (
+        <div key={org.id}>
+          {org.name}{" "}
+          <Button
+            onClick={() =>
+              console.log(
+                "I tried to delete an org and all I got was this log message",
+              )
+            }
+          >
+            Delete
+          </Button>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default TeamsSettingsPage;
diff --git a/site/src/router.tsx b/site/src/router.tsx
@@ -220,6 +220,10 @@ const AddNewLicensePage = lazy(
   () =>
     import("./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage"),
 );
+const TeamsSettingsPage = lazy(
+  () =>
+    import("./pages/DeploySettingsPage/TeamsSettingsPage/TeamsSettingsPage"),
+);
 const TemplateEmbedPage = lazy(
   () => import("./pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage"),
 );
@@ -329,6 +333,7 @@ export const router = createBrowserRouter(
             <Route path="general" element={<GeneralSettingsPage />} />
             <Route path="licenses" element={<LicensesSettingsPage />} />
             <Route path="licenses/add" element={<AddNewLicensePage />} />
+            <Route path="teams" element={<TeamsSettingsPage />} />
             <Route path="security" element={<SecuritySettingsPage />} />
             <Route
               path="observability"
