🧹

coder · aslilac · Jul 1, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
commit 6443abca640f61826e47c7352228ee33c4e02f20
diff --git a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx b/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx
@@ -8,9 +8,9 @@ import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
-import { Sidebar } from "../ManagementSettingsPage/Sidebar";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout";
+import { Sidebar } from "../ManagementSettingsPage/Sidebar";
 
 type DeploySettingsContextValue = {
   deploymentValues: DeploymentConfig;

diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx
@@ -1,15 +1,10 @@
-import { type FC } from "react";
+import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
-import {
-  createOrganization,
-  updateOrganization,
-  deleteOrganization,
-} from "api/queries/organizations";
+import { createOrganization } from "api/queries/organizations";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Stack } from "components/Stack/Stack";
-import { useOrganizationSettings } from "./ManagementSettingsLayout";
 import { CreateOrganizationPageView } from "./CreateOrganizationPageView";
 
 const CreateOrganizationPage: FC = () => {

diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
@@ -1,38 +1,22 @@
-import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
-import { type FC, useState } from "react";
-import { useMutation, useQueryClient } from "react-query";
+import type { FC } from "react";
 import * as Yup from "yup";
-import {
-  createOrganization,
-  updateOrganization,
-  deleteOrganization,
-} from "api/queries/organizations";
-import type {
-  CreateOrganizationRequest,
-  Organization,
-} from "api/typesGenerated";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
+import type { CreateOrganizationRequest } from "api/typesGenerated";
 import {
   FormFields,
   FormSection,
   HorizontalForm,
   FormFooter,
 } from "components/Form/Form";
-import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { IconField } from "components/IconField/IconField";
-import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { Stack } from "components/Stack/Stack";
 import {
   getFormHelpers,
   nameValidator,
   displayNameValidator,
   onChangeTrimmed,
 } from "utils/formUtils";
-import { useOrganizationSettings } from "./ManagementSettingsLayout";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
@@ -118,30 +102,3 @@ export const CreateOrganizationPageView: FC<
     </div>
   );
 };
-
-const styles = {
-  dangerButton: (theme) => ({
-    "&.MuiButton-contained": {
-      backgroundColor: theme.roles.danger.fill.solid,
-      borderColor: theme.roles.danger.fill.outline,
-
-      "&:not(.MuiLoadingButton-loading)": {
-        color: theme.roles.danger.fill.text,
-      },
-
-      "&:hover:not(:disabled)": {
-        backgroundColor: theme.roles.danger.hover.fill.solid,
-        borderColor: theme.roles.danger.hover.fill.outline,
-      },
-
-      "&.Mui-disabled": {
-        backgroundColor: theme.roles.danger.disabled.background,
-        borderColor: theme.roles.danger.disabled.outline,
-
-        "&:not(.MuiLoadingButton-loading)": {
-          color: theme.roles.danger.disabled.fill.text,
-        },
-      },
-    },
-  }),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx b/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx
@@ -1,6 +1,7 @@
 import { createContext, type FC, Suspense, useContext } from "react";
 import { useQuery } from "react-query";
 import { Outlet, useLocation, useParams } from "react-router-dom";
+import { deploymentConfig } from "api/queries/deployment";
 import { myOrganizations } from "api/queries/users";
 import type { Organization } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
@@ -10,9 +11,8 @@ import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import NotFoundPage from "pages/404Page/404Page";
-import { Sidebar } from "./Sidebar";
-import { deploymentConfig } from "api/queries/deployment";
 import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayout";
+import { Sidebar } from "./Sidebar";
 
 type OrganizationSettingsContextValue = {
   currentOrganizationId?: string;
@@ -43,8 +43,6 @@ export const ManagementSettingsLayout: FC = () => {
 
   const multiOrgExperimentEnabled = experiments.includes("multi-organization");
 
-  console.log("oh jeez", organization);
-
   const inOrganizationSettings =
     location.pathname.startsWith("/organizations") &&
     location.pathname !== "/organizations/new";

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -1,8 +1,7 @@
-import { type FC } from "react";
+import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 import {
-  createOrganization,
   updateOrganization,
   deleteOrganization,
 } from "api/queries/organizations";
@@ -16,7 +15,6 @@ const OrganizationSettingsPage: FC = () => {
   const navigate = useNavigate();
 
   const queryClient = useQueryClient();
-  const addOrganizationMutation = useMutation(createOrganization(queryClient));
   const updateOrganizationMutation = useMutation(
     updateOrganization(queryClient),
   );
@@ -29,9 +27,7 @@ const OrganizationSettingsPage: FC = () => {
   const org = organizations.find((org) => org.id === currentOrganizationId);
 
   const error =
-    updateOrganizationMutation.error ??
-    addOrganizationMutation.error ??
-    deleteOrganizationMutation.error;
+    updateOrganizationMutation.error ?? deleteOrganizationMutation.error;
 
   if (!currentOrganizationId) {
     return null;
@@ -55,10 +51,6 @@ const OrganizationSettingsPage: FC = () => {
           });
           displaySuccess("Organization settings updated.");
         }}
-        onCreateOrg={(name) => {
-          addOrganizationMutation.mutate({ name });
-          navigate(`/organizations/${name}`);
-        }}
         onDeleteOrg={() => {
           deleteOrganizationMutation.mutate(org.id);
           navigate("/organizations");

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -2,37 +2,26 @@ import type { Interpolation, Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
-import { type FC, useState } from "react";
-import { useMutation, useQueryClient } from "react-query";
+import type { FC } from "react";
 import * as Yup from "yup";
-import {
-  createOrganization,
-  updateOrganization,
-  deleteOrganization,
-} from "api/queries/organizations";
 import type {
   Organization,
   UpdateOrganizationRequest,
 } from "api/typesGenerated";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
 import {
   FormFields,
   FormSection,
   HorizontalForm,
   FormFooter,
 } from "components/Form/Form";
-import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { IconField } from "components/IconField/IconField";
-import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { Stack } from "components/Stack/Stack";
 import {
   getFormHelpers,
   nameValidator,
   displayNameValidator,
   onChangeTrimmed,
 } from "utils/formUtils";
-import { useOrganizationSettings } from "./ManagementSettingsLayout";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
@@ -51,13 +40,12 @@ interface OrganizationSettingsPageViewProps {
   error: unknown;
   onSubmit: (values: UpdateOrganizationRequest) => Promise<void>;
 
-  onCreateOrg: (name: string) => void;
   onDeleteOrg: () => void;
 }
 
 export const OrganizationSettingsPageView: FC<
   OrganizationSettingsPageViewProps
-> = ({ org, error, onSubmit, onCreateOrg, onDeleteOrg }) => {
+> = ({ org, error, onSubmit, onDeleteOrg }) => {
   const form = useFormik<UpdateOrganizationRequest>({
     initialValues: {
       name: org.name,
@@ -71,8 +59,6 @@ export const OrganizationSettingsPageView: FC<
   });
   const getFieldHelpers = getFormHelpers(form, error);
 
-  const [newOrgName, setNewOrgName] = useState("");
-
   return (
     <div>
       <PageHeader>
@@ -132,16 +118,6 @@ export const OrganizationSettingsPageView: FC<
           Delete this organization
         </Button>
       )}
-
-      <Stack css={{ marginTop: 128 }}>
-        <TextField
-          label="New organization name"
-          onChange={(event) => setNewOrgName(event.target.value)}
-        />
-        <Button onClick={() => onCreateOrg(newOrgName)}>
-          Create new organization
-        </Button>
-      </Stack>
     </div>
   );
 };

diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
@@ -1,4 +1,6 @@
 import { cx } from "@emotion/css";
+import AddIcon from "@mui/icons-material/Add";
+import SettingsIcon from "@mui/icons-material/Settings";
 import type { FC, ReactNode } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import type { Organization } from "api/typesGenerated";
@@ -7,8 +9,6 @@ import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type ClassName, useClassName } from "hooks/useClassName";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
-import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
 
 export const Sidebar: FC = () => {
   const { currentOrganizationId, organizations } = useOrganizationSettings();
@@ -47,11 +47,7 @@ export const Sidebar: FC = () => {
   );
 };
 
-interface DeploymentSettingsNavigationProps {}
-
-const DeploymentSettingsNavigation: FC<
-  DeploymentSettingsNavigationProps
-> = ({}) => {
+const DeploymentSettingsNavigation: FC = () => {
   const location = useLocation();
   const active = location.pathname.startsWith("/deployment");