🧹

coder · aslilac · Jul 1, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
commit 73773bf266f1b4ea5112ae8f3bbb603d94eceb5a
diff --git a/site/src/pages/ManagementSettingsPage/Horizontal.tsx b/site/src/pages/ManagementSettingsPage/Horizontal.tsx
@@ -1,5 +1,5 @@
-import { type Interpolation, type Theme } from "@emotion/react";
-import { type FC, type HTMLAttributes, type ReactNode } from "react";
+import type { Interpolation, Theme } from "@emotion/react";
+import type { FC, HTMLAttributes, ReactNode } from "react";
 
 export const HorizontalContainer: FC<HTMLAttributes<HTMLDivElement>> = ({
   ...attrs

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -42,7 +42,7 @@ const OrganizationSettingsPage: FC = () => {
       {Boolean(error) && <ErrorAlert error={error} />}
 
       <OrganizationSettingsPageView
-        org={org}
+        organization={org}
         error={error}
         onSubmit={async (values) => {
           await updateOrganizationMutation.mutateAsync({
@@ -51,7 +51,7 @@ const OrganizationSettingsPage: FC = () => {
           });
           displaySuccess("Organization settings updated.");
         }}
-        onDeleteOrg={() => {
+        onDeleteOrganization={() => {
           deleteOrganizationMutation.mutate(org.id);
           navigate("/organizations");
         }}

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx
@@ -1,16 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MockDefaultOrganization,
+  MockOrganization,
+} from "testHelpers/entities";
 import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView";
-import { MockOrganization } from "testHelpers/entities";
 
 const meta: Meta<typeof OrganizationSettingsPageView> = {
   title: "pages/OrganizationSettingsPageView",
   component: OrganizationSettingsPageView,
   args: {
-    org: MockOrganization,
+    organization: MockOrganization,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof OrganizationSettingsPageView>;
 
 export const Example: Story = {};
+
+export const DefaultOrg: Story = {
+  args: {
+    organization: MockDefaultOrganization,
+  },
+};
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -8,6 +8,7 @@ import type {
   Organization,
   UpdateOrganizationRequest,
 } from "api/typesGenerated";
+import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import {
   FormFields,
   FormSection,
@@ -23,7 +24,6 @@ import {
   onChangeTrimmed,
 } from "utils/formUtils";
 import { HorizontalContainer, HorizontalSection } from "./Horizontal";
-import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
@@ -38,22 +38,21 @@ const validationSchema = Yup.object({
 });
 
 interface OrganizationSettingsPageViewProps {
-  org: Organization;
+  organization: Organization;
   error: unknown;
   onSubmit: (values: UpdateOrganizationRequest) => Promise<void>;
-
-  onDeleteOrg: () => void;
+  onDeleteOrganization: () => void;
 }
 
 export const OrganizationSettingsPageView: FC<
   OrganizationSettingsPageViewProps
-> = ({ org, error, onSubmit, onDeleteOrg }) => {
+> = ({ organization, error, onSubmit, onDeleteOrganization }) => {
   const form = useFormik<UpdateOrganizationRequest>({
     initialValues: {
-      name: org.name,
-      display_name: org.display_name,
-      description: org.description,
-      icon: org.icon,
+      name: organization.name,
+      display_name: organization.display_name,
+      description: organization.description,
+      icon: organization.icon,
     },
     validationSchema,
     onSubmit,
@@ -113,7 +112,7 @@ export const OrganizationSettingsPageView: FC<
         <FormFooter isLoading={form.isSubmitting} />
       </HorizontalForm>
 
-      {!org.is_default && (
+      {!organization.is_default && (
         <HorizontalContainer css={{ marginTop: 48 }}>
           <HorizontalSection
             title="Settings"
@@ -150,7 +149,10 @@ export const OrganizationSettingsPageView: FC<
               <span>Deleting an organization is irreversible.</span>
               <Button
                 css={styles.dangerButton}
-                variant="contained"
+                // variant="contained"
+                // varia
+                color="warning"
+                // variant="contained"
                 onClick={() => setIsDeleting(true)}
               >
                 Delete this organization
@@ -162,38 +164,28 @@ export const OrganizationSettingsPageView: FC<
 
       <DeleteDialog
         isOpen={isDeleting}
-        onConfirm={onDeleteOrg}
+        onConfirm={onDeleteOrganization}
         onCancel={() => setIsDeleting(false)}
         entity="organization"
-        name={org.name}
+        name={organization.name}
       />
     </div>
   );
 };
 
 const styles = {
   dangerButton: (theme) => ({
-    "&.MuiButton-contained": {
-      backgroundColor: theme.roles.danger.fill.solid,
-      borderColor: theme.roles.danger.fill.outline,
+    // backgroundColor: theme.roles.danger.fill.solid,
+    borderColor: theme.roles.danger.outline,
+    color: theme.roles.danger.text,
 
-      "&: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.fill.text,
+    },
 
-        "&:not(.MuiLoadingButton-loading)": {
-          color: theme.roles.danger.disabled.fill.text,
-        },
-      },
+    "&:hover:not(:disabled)": {
+      backgroundColor: theme.roles.danger.hover.background,
+      borderColor: theme.roles.danger.hover.fill.outline,
     },
   }),
 } satisfies Record<string, Interpolation<Theme>>;