padding and cleanup

aslilac · aslilac · commit c304463d5b0a · 2024-06-04T21:20:08.000Z
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -13,8 +13,15 @@ const widthBySize: Record<Size, number> = {
   small: containerWidth / 3,
 };
 
-export const Margins: FC<JSX.IntrinsicElements["div"] & { size?: Size }> = ({
+type MarginsProps = JSX.IntrinsicElements["div"] & {
+  size?: Size;
+  verticalMargin?: string | number;
+};
+
+export const Margins: FC<MarginsProps> = ({
   size = "regular",
+  verticalMargin = 0,
+  children,
   ...divProps
 }) => {
   const maxWidth = widthBySize[size];
@@ -27,6 +34,9 @@ export const Margins: FC<JSX.IntrinsicElements["div"] & { size?: Size }> = ({
         padding: `0 ${sidePadding}px`,
         width: "100%",
       }}
-    />
+      style={{ marginTop: verticalMargin, marginBottom: verticalMargin }}
+    >
+      {children}
+    </div>
   );
 };
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -101,7 +101,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
           Settings
         </MenuItem>
       )}
-      {canViewDeployment && (
+      {canViewOrganizations && (
         <MenuItem
           component={NavLink}
           to="/organizations"
diff --git a/site/src/pages/DeploySettingsPage/Sidebar.tsx b/site/src/pages/DeploySettingsPage/Sidebar.tsx
@@ -23,9 +23,6 @@ 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/OrganizationSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPage.tsx
@@ -7,36 +7,45 @@ import {
   deleteOrganization,
 } from "api/queries/organizations";
 import { myOrganizations } from "api/queries/users";
+import { Margins } from "components/Margins/Margins";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
 
-const TeamsSettingsPage: FC = () => {
+const OrganizationSettingsPage: FC = () => {
   const queryClient = useQueryClient();
-  const addTeamMutation = useMutation(createOrganization(queryClient));
-  const deleteTeamMutation = useMutation(deleteOrganization(queryClient));
+  const addOrganizationMutation = useMutation(createOrganization(queryClient));
+  const deleteOrganizationMutation = useMutation(
+    deleteOrganization(queryClient),
+  );
   const organizationsQuery = useQuery(myOrganizations());
   const [newOrgName, setNewOrgName] = useState("");
+
+  const error =
+    addOrganizationMutation.error ?? deleteOrganizationMutation.error;
+
   return (
-    <>
+    <Margins verticalMargin={48}>
+      {Boolean(error) && <ErrorAlert error={error} />}
+
       <TextField
         label="New organization name"
         onChange={(event) => setNewOrgName(event.target.value)}
       />
-      <p>{String(addTeamMutation.error)}</p>
-      <Button onClick={() => addTeamMutation.mutate({ name: newOrgName })}>
+      <Button
+        onClick={() => addOrganizationMutation.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)}>
+          <Button onClick={() => deleteOrganizationMutation.mutate(org.id)}>
             Delete
           </Button>
         </div>
       ))}
-    </>
+    </Margins>
   );
 };
 
-export default TeamsSettingsPage;
+export default OrganizationSettingsPage;
diff --git a/site/src/pages/OrganizationSettingsPage/Sidebar.tsx b/site/src/pages/OrganizationSettingsPage/Sidebar.tsx
@@ -0,0 +1,21 @@
+import GeneralIcon from "@mui/icons-material/SettingsOutlined";
+import type { FC } from "react";
+import type { Template } from "api/typesGenerated";
+import {
+  Sidebar as BaseSidebar,
+  SidebarNavItem,
+} from "components/Sidebar/Sidebar";
+
+interface SidebarProps {
+  template: Template;
+}
+
+export const Sidebar: FC<SidebarProps> = ({ template }) => {
+  return (
+    <BaseSidebar>
+      <SidebarNavItem href="" icon={GeneralIcon}>
+        General
+      </SidebarNavItem>
+    </BaseSidebar>
+  );
+};
