Skip to content

Commit e3da0a4

Browse files
aslilacaslilac
committed
something
1 parent d0b2f61 commit e3da0a4

File tree

7 files changed

+217
-70
lines changed

7 files changed

+217
-70
lines changed

‎site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import { Margins } from "components/Margins/Margins";
88
import { Stack } from "components/Stack/Stack";
99
import { useAuthenticated } from "contexts/auth/RequireAuth";
1010
import { RequirePermission } from "contexts/auth/RequirePermission";
11-
import { Sidebar } from "./Sidebar";
11+
import { Sidebar } from "../ManagementSettingsPage/Sidebar";
12+
import { useDashboard } from "modules/dashboard/useDashboard";
13+
import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout";
1214

1315
type DeploySettingsContextValue = {
1416
deploymentValues: DeploymentConfig;
1517
};
1618

17-
const DeploySettingsContext = createContext<
19+
export const DeploySettingsContext = createContext<
1820
DeploySettingsContextValue | undefined
1921
>(undefined);
2022

@@ -29,6 +31,18 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
2931
};
3032

3133
export const DeploySettingsLayout: FC = () => {
34+
const { experiments } = useDashboard();
35+
36+
const multiOrgExperimentEnabled = experiments.includes("multi-organization");
37+
38+
return multiOrgExperimentEnabled ? (
39+
<ManagementSettingsLayout />
40+
) : (
41+
<DeploySettingsLayoutInner />
42+
);
43+
};
44+
45+
const DeploySettingsLayoutInner: FC = () => {
3246
const deploymentConfigQuery = useQuery(deploymentConfig());
3347
const { permissions } = useAuthenticated();
3448

‎site/src/pages/OrganizationSettingsPage/OrganizationSettingsLayout.tsx renamed to ‎site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import { RequirePermission } from "contexts/auth/RequirePermission";
1111
import { useDashboard } from "modules/dashboard/useDashboard";
1212
import NotFoundPage from "pages/404Page/404Page";
1313
import { Sidebar } from "./Sidebar";
14+
import { deploymentConfig } from "api/queries/deployment";
15+
import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayout";
1416

1517
type OrganizationSettingsContextValue = {
16-
currentOrganizationId: string;
18+
currentOrganizationId?: string;
1719
organizations: Organization[];
1820
};
1921

@@ -31,10 +33,11 @@ export const useOrganizationSettings = (): OrganizationSettingsContextValue => {
3133
return context;
3234
};
3335

34-
export const OrganizationSettingsLayout: FC = () => {
36+
export const ManagementSettingsLayout: FC = () => {
3537
const { permissions, organizationIds } = useAuthenticated();
3638
const { experiments } = useDashboard();
3739
const { organization } = useParams() as { organization: string };
40+
const deploymentConfigQuery = useQuery(deploymentConfig());
3841
const organizationsQuery = useQuery(myOrganizations());
3942

4043
const multiOrgExperimentEnabled = experiments.includes("multi-organization");
@@ -50,18 +53,29 @@ export const OrganizationSettingsLayout: FC = () => {
5053
{organizationsQuery.data ? (
5154
<OrganizationSettingsContext.Provider
5255
value={{
53-
currentOrganizationId:
54-
organizationsQuery.data.find(
55-
(org) => org.name === organization,
56-
)?.id ?? organizationIds[0],
56+
currentOrganizationId: !organization
57+
? organizationIds[0]
58+
: organizationsQuery.data.find(
59+
(org) => org.name === organization,
60+
)?.id,
5761
organizations: organizationsQuery.data,
5862
}}
5963
>
6064
<Sidebar />
6165
<main css={{ width: "100%" }}>
62-
<Suspense fallback={<Loader />}>
63-
<Outlet />
64-
</Suspense>
66+
{deploymentConfigQuery.data ? (
67+
<DeploySettingsContext.Provider
68+
value={{
69+
deploymentValues: deploymentConfigQuery.data,
70+
}}
71+
>
72+
<Suspense fallback={<Loader />}>
73+
<Outlet />
74+
</Suspense>
75+
</DeploySettingsContext.Provider>
76+
) : (
77+
<Loader />
78+
)}
6579
</main>
6680
</OrganizationSettingsContext.Provider>
6781
) : (

‎site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { type FC } from "react";
2+
import { useMutation, useQueryClient } from "react-query";
3+
import { useNavigate } from "react-router-dom";
4+
import {
5+
createOrganization,
6+
updateOrganization,
7+
deleteOrganization,
8+
} from "api/queries/organizations";
9+
import { ErrorAlert } from "components/Alert/ErrorAlert";
10+
import { displaySuccess } from "components/GlobalSnackbar/utils";
11+
import { Stack } from "components/Stack/Stack";
12+
import { useOrganizationSettings } from "./ManagementSettingsLayout";
13+
import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView";
14+
15+
const OrganizationSettingsPage: FC = () => {
16+
const navigate = useNavigate();
17+
18+
const queryClient = useQueryClient();
19+
const addOrganizationMutation = useMutation(createOrganization(queryClient));
20+
const updateOrganizationMutation = useMutation(
21+
updateOrganization(queryClient),
22+
);
23+
const deleteOrganizationMutation = useMutation(
24+
deleteOrganization(queryClient),
25+
);
26+
27+
const { currentOrganizationId, organizations } = useOrganizationSettings();
28+
29+
const org = organizations.find((org) => org.id === currentOrganizationId);
30+
31+
const error =
32+
updateOrganizationMutation.error ??
33+
addOrganizationMutation.error ??
34+
deleteOrganizationMutation.error;
35+
36+
if (!currentOrganizationId) {
37+
return null;
38+
}
39+
40+
if (!org) {
41+
return null;
42+
}
43+
44+
return (
45+
<Stack>
46+
{Boolean(error) && <ErrorAlert error={error} />}
47+
48+
<OrganizationSettingsPageView
49+
org={org}
50+
error={error}
51+
onSubmit={async (values) => {
52+
await updateOrganizationMutation.mutateAsync({
53+
orgId: org.id,
54+
req: values,
55+
});
56+
displaySuccess("Organization settings updated.");
57+
}}
58+
onCreateOrg={(name) => {
59+
addOrganizationMutation.mutate({ name });
60+
navigate(`/organizations/${name}`);
61+
}}
62+
onDeleteOrg={() => {
63+
deleteOrganizationMutation.mutate(org.id);
64+
navigate("/organizations");
65+
}}
66+
/>
67+
</Stack>
68+
);
69+
};
70+
71+
export default OrganizationSettingsPage;

‎site/src/pages/OrganizationSettingsPage/OrganizationSettingsPage.tsx renamed to ‎site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx

Lines changed: 22 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import {
1010
updateOrganization,
1111
deleteOrganization,
1212
} from "api/queries/organizations";
13-
import type { UpdateOrganizationRequest } from "api/typesGenerated";
13+
import type {
14+
Organization,
15+
UpdateOrganizationRequest,
16+
} from "api/typesGenerated";
1417
import { ErrorAlert } from "components/Alert/ErrorAlert";
1518
import {
1619
FormFields,
@@ -29,12 +32,12 @@ import {
2932
displayNameValidator,
3033
onChangeTrimmed,
3134
} from "utils/formUtils";
32-
import { useOrganizationSettings } from "./OrganizationSettingsLayout";
35+
import { useOrganizationSettings } from "./ManagementSettingsLayout";
3336

3437
const MAX_DESCRIPTION_CHAR_LIMIT = 128;
3538
const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
3639

37-
export const validationSchema = Yup.object({
40+
const validationSchema = Yup.object({
3841
name: nameValidator("Name"),
3942
display_name: displayNameValidator("Display name"),
4043
description: Yup.string().max(
@@ -43,25 +46,18 @@ export const validationSchema = Yup.object({
4346
),
4447
});
4548

46-
const OrganizationSettingsPage: FC = () => {
47-
const queryClient = useQueryClient();
48-
const addOrganizationMutation = useMutation(createOrganization(queryClient));
49-
const updateOrganizationMutation = useMutation(
50-
updateOrganization(queryClient),
51-
);
52-
const deleteOrganizationMutation = useMutation(
53-
deleteOrganization(queryClient),
54-
);
55-
56-
const { currentOrganizationId, organizations } = useOrganizationSettings();
49+
interface OrganizationSettingsPageViewProps {
50+
org: Organization;
51+
error: unknown;
52+
onSubmit: (values: UpdateOrganizationRequest) => Promise<void>;
5753

58-
const org = organizations.find((org) => org.id === currentOrganizationId)!;
59-
60-
const error =
61-
updateOrganizationMutation.error ??
62-
addOrganizationMutation.error ??
63-
deleteOrganizationMutation.error;
54+
onCreateOrg: (name: string) => void;
55+
onDeleteOrg: () => void;
56+
}
6457

58+
export const OrganizationSettingsPageView: FC<
59+
OrganizationSettingsPageViewProps
60+
> = ({ org, error, onSubmit, onCreateOrg, onDeleteOrg }) => {
6561
const form = useFormik<UpdateOrganizationRequest>({
6662
initialValues: {
6763
name: org.name,
@@ -70,24 +66,16 @@ const OrganizationSettingsPage: FC = () => {
7066
icon: org.icon,
7167
},
7268
validationSchema,
73-
onSubmit: async (values) => {
74-
await updateOrganizationMutation.mutateAsync({
75-
orgId: org.id,
76-
req: values,
77-
});
78-
displaySuccess("Organization settings updated.");
79-
},
69+
onSubmit,
8070
enableReinitialize: true,
8171
});
8272
const getFieldHelpers = getFormHelpers(form, error);
8373

8474
const [newOrgName, setNewOrgName] = useState("");
8575

8676
return (
87-
<Margins css={{ marginTop: 18, marginBottom: 18 }}>
88-
{Boolean(error) && <ErrorAlert error={error} />}
89-
90-
<PageHeader css={{ paddingTop: error ? undefined : 0 }}>
77+
<div>
78+
<PageHeader>
9179
<PageHeaderTitle>Organization settings</PageHeaderTitle>
9280
</PageHeader>
9381

@@ -139,9 +127,7 @@ const OrganizationSettingsPage: FC = () => {
139127
<Button
140128
css={styles.dangerButton}
141129
variant="contained"
142-
onClick={() =>
143-
deleteOrganizationMutation.mutate(currentOrganizationId)
144-
}
130+
onClick={onDeleteOrg}
145131
>
146132
Delete this organization
147133
</Button>
@@ -152,18 +138,14 @@ const OrganizationSettingsPage: FC = () => {
152138
label="New organization name"
153139
onChange={(event) => setNewOrgName(event.target.value)}
154140
/>
155-
<Button
156-
onClick={() => addOrganizationMutation.mutate({ name: newOrgName })}
157-
>
141+
<Button onClick={() => onCreateOrg(newOrgName)}>
158142
Create new organization
159143
</Button>
160144
</Stack>
161-
</Margins>
145+
</div>
162146
);
163147
};
164148

165-
export default OrganizationSettingsPage;
166-
167149
const styles = {
168150
dangerButton: (theme) => ({
169151
"&.MuiButton-contained": {

‎site/src/pages/OrganizationSettingsPage/OrganizationSettingsPlaceholder.tsx renamed to ‎site/src/pages/ManagementSettingsPage/OrganizationSettingsPlaceholder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "api/queries/organizations";
77
import { ErrorAlert } from "components/Alert/ErrorAlert";
88
import { Margins } from "components/Margins/Margins";
9-
import { useOrganizationSettings } from "./OrganizationSettingsLayout";
9+
import { useOrganizationSettings } from "./ManagementSettingsLayout";
1010

1111
const OrganizationSettingsPage: FC = () => {
1212
const queryClient = useQueryClient();

0 commit comments

Comments
 (0)