Skip to content

feat: unify organization and deployment management settings #13602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Jul 1, 2024
Merged

feat: unify organization and deployment management settings #13602

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e3da0a4
something
aslilac Jun 18, 2024
0d55592
yes
aslilac Jun 18, 2024
fe275f6
Merge branch 'main' into management-settings
aslilac Jun 18, 2024
6443abc
🧹
aslilac Jun 18, 2024
d532a2b
yay
aslilac Jun 20, 2024
73773bf
🧹
aslilac Jun 20, 2024
32cbc68
🧹
aslilac Jun 20, 2024
e768bcd
use the old sidebar outside of the experiment
aslilac Jun 20, 2024
bda6d75
🧹
aslilac Jun 24, 2024
aadff9a
delete notification
aslilac Jun 24, 2024
09dae97
Merge branch 'main' into management-settings
aslilac Jun 27, 2024
bb49eb6
🧼
aslilac Jun 27, 2024
94a8338
🧹
aslilac Jun 28, 2024
4246349
e2e test
aslilac Jun 28, 2024
f86b129
🧼
aslilac Jul 1, 2024
6d7dea9
Merge branch 'main' into management-settings
aslilac Jul 1, 2024
04d9cc8
typo
aslilac Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
🧹
  • Loading branch information
@aslilac
aslilac committed Jun 20, 2024
commit 73773bf266f1b4ea5112ae8f3bbb603d94eceb5a
4 changes: 2 additions & 2 deletions site/src/pages/ManagementSettingsPage/Horizontal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -51,7 +51,7 @@ const OrganizationSettingsPage: FC = () => {
});
displaySuccess("Organization settings updated.");
}}
onDeleteOrg={() => {
onDeleteOrganization={() => {
deleteOrganizationMutation.mutate(org.id);
navigate("/organizations");
}}
Expand Down
13 changes: 11 additions & 2 deletions site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
};
56 changes: 24 additions & 32 deletions site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type {
Organization,
UpdateOrganizationRequest,
} from "api/typesGenerated";
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
import {
FormFields,
FormSection,
Expand All @@ -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.`;
Expand All @@ -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,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand All @@ -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>>;
Loading