🧼

coder · aslilac · Jul 1, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
commit bb49eb64e819e5971c6fa36fe02200963205ffa5
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx
@@ -2,11 +2,8 @@ import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 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 { CreateOrganizationPageView } from "./CreateOrganizationPageView";
-import { isApiValidationError } from "api/errors";
 
 const CreateOrganizationPage: FC = () => {
   const navigate = useNavigate();
@@ -19,20 +16,14 @@ const CreateOrganizationPage: FC = () => {
   const error = createOrganizationMutation.error;
 
   return (
-    <Stack>
-      {Boolean(error) && !isApiValidationError(error) && (
-        <ErrorAlert error={error} />
-      )}
-
-      <CreateOrganizationPageView
-        error={error}
-        onSubmit={async (values) => {
-          await createOrganizationMutation.mutateAsync(values);
-          displaySuccess("Organization created.");
-          navigate(`/organizations/${values.name}`);
-        }}
-      />
-    </Stack>
+    <CreateOrganizationPageView
+      error={error}
+      onSubmit={async (values) => {
+        await createOrganizationMutation.mutateAsync(values);
+        displaySuccess("Organization created.");
+        navigate(`/organizations/${values.name}`);
+      }}
+    />
   );
 };
 

diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { mockApiError } from "testHelpers/entities";
 import { CreateOrganizationPageView } from "./CreateOrganizationPageView";
 
 const meta: Meta<typeof CreateOrganizationPageView> = {
@@ -10,3 +11,21 @@ export default meta;
 type Story = StoryObj<typeof CreateOrganizationPageView>;
 
 export const Example: Story = {};
+
+export const Error: Story = {
+  args: { error: "Oh no!" },
+};
+
+export const InvalidName: Story = {
+  args: {
+    error: mockApiError({
+      message: "Display name is bad",
+      validations: [
+        {
+          field: "display_name",
+          detail: "That display name is terrible. What were you thinking?",
+        },
+      ],
+    }),
+  },
+};
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
@@ -2,7 +2,9 @@ import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
 import type { FC } from "react";
 import * as Yup from "yup";
+import { isApiValidationError } from "api/errors";
 import type { CreateOrganizationRequest } from "api/typesGenerated";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
 import {
   FormFields,
   FormSection,
@@ -56,6 +58,12 @@ export const CreateOrganizationPageView: FC<
         <PageHeaderTitle>Organization settings</PageHeaderTitle>
       </PageHeader>
 
+      {Boolean(error) && !isApiValidationError(error) && (
+        <div css={{ marginBottom: 32 }}>
+          <ErrorAlert error={error} />
+        </div>
+      )}
+
       <HorizontalForm
         onSubmit={form.handleSubmit}
         aria-label="Organization settings form"

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -5,13 +5,10 @@ import {
   updateOrganization,
   deleteOrganization,
 } from "api/queries/organizations";
-import { isApiValidationError } from "api/errors";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { EmptyState } from "components/EmptyState/EmptyState";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
-import { Stack } from "components/Stack/Stack";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
 import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView";
-import { EmptyState } from "components/EmptyState/EmptyState";
 
 const OrganizationSettingsPage: FC = () => {
   const navigate = useNavigate();
@@ -36,28 +33,22 @@ const OrganizationSettingsPage: FC = () => {
   }
 
   return (
-    <Stack>
-      {Boolean(error) && !isApiValidationError(error) && (
-        <ErrorAlert error={error} />
-      )}
-
-      <OrganizationSettingsPageView
-        organization={org}
-        error={error}
-        onSubmit={async (values) => {
-          await updateOrganizationMutation.mutateAsync({
-            orgId: org.id,
-            req: values,
-          });
-          displaySuccess("Organization settings updated.");
-        }}
-        onDeleteOrganization={() => {
-          deleteOrganizationMutation.mutate(org.id);
-          displaySuccess("Organization deleted.");
-          navigate("/organizations");
-        }}
-      />
-    </Stack>
+    <OrganizationSettingsPageView
+      organization={org}
+      error={error}
+      onSubmit={async (values) => {
+        await updateOrganizationMutation.mutateAsync({
+          orgId: org.id,
+          req: values,
+        });
+        displaySuccess("Organization settings updated.");
+      }}
+      onDeleteOrganization={() => {
+        deleteOrganizationMutation.mutate(org.id);
+        displaySuccess("Organization deleted.");
+        navigate("/organizations");
+      }}
+    />
   );
 };
 

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -4,10 +4,12 @@ import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
 import { type FC, useState } from "react";
 import * as Yup from "yup";
+import { isApiValidationError } from "api/errors";
 import type {
   Organization,
   UpdateOrganizationRequest,
 } from "api/typesGenerated";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import {
   FormFields,
@@ -68,6 +70,12 @@ export const OrganizationSettingsPageView: FC<
         <PageHeaderTitle>Organization settings</PageHeaderTitle>
       </PageHeader>
 
+      {Boolean(error) && !isApiValidationError(error) && (
+        <div css={{ marginBottom: 32 }}>
+          <ErrorAlert error={error} />
+        </div>
+      )}
+
       <HorizontalForm
         onSubmit={form.handleSubmit}
         aria-label="Organization settings form"

diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
@@ -245,7 +245,7 @@ const classNames = {
 
     display: block;
     font-size: 13px;
-    margin-left: 42px;
+    margin-left: 44px;
     padding: 4px 12px;
     border-radius: 4px;
     transition: background-color 0.15s ease-in-out;