rebased old version

aslilac · aslilac · commit f36f1067eb70 · 2024-06-03T21:16:40.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -505,6 +505,20 @@ 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;
+  };
+
+  deleteOrganization = async (orgId: string) => {
+    await this.axios.delete<TypesGen.Organization>(
+      `/api/v2/organizations/${orgId}`,
+    );
+  };
+
   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,27 @@
+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);
+    },
+  };
+};
+
+export const deleteOrganization = (queryClient: QueryClient) => {
+  return {
+    mutationFn: (orgId: string) => API.deleteOrganization(orgId),
+
+    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({
@@ -250,9 +250,11 @@ export const updateAppearanceSettings = (
   };
 };
 
+export const myOrganizationsKey = ["organizations", "me"] as const;
+
 export const myOrganizations = () => {
   return {
-    queryKey: ["organizations", "me"],
+    queryKey: myOrganizationsKey,
     queryFn: () => API.getOrganizations(),
   };
 };
diff --git a/site/src/pages/DeploySettingsPage/Sidebar.tsx b/site/src/pages/DeploySettingsPage/Sidebar.tsx
@@ -1,4 +1,5 @@
 import Brush from "@mui/icons-material/Brush";
+import TeamsIcon from "@mui/icons-material/Groups";
 import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
 import InsertChartIcon from "@mui/icons-material/InsertChart";
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
@@ -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 TextField from "@mui/material/TextField";
+import { type FC, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import {
+  createOrganization,
+  deleteOrganization,
+} from "api/queries/organizations";
+import { myOrganizations } from "api/queries/users";
+
+const TeamsSettingsPage: FC = () => {
+  const queryClient = useQueryClient();
+  const addTeamMutation = useMutation(createOrganization(queryClient));
+  const deleteTeamMutation = useMutation(deleteOrganization(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>
+
+      <div>{String(deleteTeamMutation.error)}</div>
+
+      {organizationsQuery.data?.map((org) => (
+        <div key={org.id}>
+          {org.name}{" "}
+          <Button onClick={() => deleteTeamMutation.mutate(org.id)}>
+            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"
