Skip to content

Commit 24c767d

Browse files
aslilacaslilac
committed
:p
1 parent cb811be commit 24c767d

8 files changed

+62
-58
lines changed

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

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,18 @@ import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1414
import { type FC, useEffect } from "react";
1515
import { Helmet } from "react-helmet-async";
1616
import { useQuery } from "react-query";
17-
import { Navigate, Link as RouterLink, useParams } from "react-router-dom";
17+
import { Link as RouterLink } from "react-router-dom";
1818
import { pageTitle } from "utils/page";
1919
import { useOrganizationSettings } from "../ManagementSettingsLayout";
2020
import GroupsPageView from "./GroupsPageView";
21+
import { Breadcrumbs, Crumb } from "components/Breadcrumbs/Breadcrumbs";
2122

2223
export const GroupsPage: FC = () => {
2324
const feats = useFeatureVisibility();
24-
const { organization: organizationName } = useParams() as {
25-
organization: string;
26-
};
27-
const groupsQuery = useQuery(groupsByOrganization(organizationName));
28-
const { organizations } = useOrganizationSettings();
29-
const organization = organizations?.find((o) => o.name === organizationName);
25+
const { organization } = useOrganizationSettings();
26+
const groupsQuery = useQuery(
27+
organization ? groupsByOrganization(organization.name) : { enabled: false },
28+
);
3029
const permissionsQuery = useQuery(organizationPermissions(organization?.id));
3130

3231
useEffect(() => {
@@ -45,19 +44,6 @@ export const GroupsPage: FC = () => {
4544
}
4645
}, [permissionsQuery.error]);
4746

48-
if (!organizations) {
49-
return <Loader />;
50-
}
51-
52-
if (!organizationName) {
53-
const defaultName = getOrganizationNameByDefault(organizations);
54-
if (defaultName) {
55-
return <Navigate to={`/organizations/${defaultName}/groups`} replace />;
56-
}
57-
// We expect there to always be a default organization.
58-
throw new Error("No default organization found");
59-
}
60-
6147
if (!organization) {
6248
return <EmptyState message="Organization not found" />;
6349
}
@@ -77,12 +63,20 @@ export const GroupsPage: FC = () => {
7763
alignItems="baseline"
7864
direction="row"
7965
justifyContent="space-between"
66+
css={{ paddingBottom: 32 }}
8067
>
81-
<SettingsHeader
82-
title="Groups"
83-
description="Manage groups for this organization."
84-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
85-
/>
68+
<Stack direction="row" spacing={2} alignItems="center">
69+
<Breadcrumbs>
70+
<Crumb>Organizations</Crumb>
71+
<Crumb href={`/organizations/${organization}`}>
72+
{organization.display_name || organization.name}
73+
</Crumb>
74+
<Crumb href={`/organizations/${organization}/groups`} active>
75+
Groups
76+
</Crumb>
77+
</Breadcrumbs>
78+
<FeatureStageBadge contentType="beta" size="sm" />
79+
</Stack>
8680
{permissions.createGroup && feats.template_rbac && (
8781
<Button component={RouterLink} startIcon={<GroupAdd />} to="create">
8882
Create group
@@ -91,6 +85,7 @@ export const GroupsPage: FC = () => {
9185
</Stack>
9286

9387
<GroupsPageView
88+
organization={organization}
9489
groups={groupsQuery.data}
9590
canCreateGroup={permissions.createGroup}
9691
isTemplateRBACEnabled={feats.template_rbac}

‎site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import TableCell from "@mui/material/TableCell";
1010
import TableContainer from "@mui/material/TableContainer";
1111
import TableHead from "@mui/material/TableHead";
1212
import TableRow from "@mui/material/TableRow";
13-
import type { Group } from "api/typesGenerated";
13+
import type { Group, Organization } from "api/typesGenerated";
1414
import { AvatarData } from "components/AvatarData/AvatarData";
1515
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
1616
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
@@ -28,12 +28,14 @@ import { Link as RouterLink, useNavigate } from "react-router-dom";
2828
import { docs } from "utils/docs";
2929

3030
export type GroupsPageViewProps = {
31+
organization: Organization;
3132
groups: Group[] | undefined;
3233
canCreateGroup: boolean;
3334
isTemplateRBACEnabled: boolean;
3435
};
3536

3637
export const GroupsPageView: FC<GroupsPageViewProps> = ({
38+
organization,
3739
groups,
3840
canCreateGroup,
3941
isTemplateRBACEnabled,

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,27 @@ import { RequirePermission } from "contexts/auth/RequirePermission";
88
import { useDashboard } from "modules/dashboard/useDashboard";
99
import { type FC, Suspense } from "react";
1010
import { useQuery } from "react-query";
11-
import { Outlet } from "react-router-dom";
11+
import { Outlet, useParams } from "react-router-dom";
1212
import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayout";
1313
import { Sidebar } from "./Sidebar";
1414

1515
type OrganizationSettingsValue = Readonly<{
1616
organizations: readonly Organization[];
17-
organization: Organization;
17+
organization?: Organization;
1818
}>;
1919

2020
export const useOrganizationSettings = (): OrganizationSettingsValue => {
2121
const { organizations } = useDashboard();
22+
const { organization: orgName } = useParams() as {
23+
organization?: string;
24+
};
2225

23-
return { organizations, organization: organizations[0] };
26+
const organization =
27+
organizations && orgName
28+
? organizations.find((org) => org.name === orgName)
29+
: undefined;
30+
31+
return { organizations, organization };
2432
};
2533

2634
/**

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ const OrganizationMembersPage: FC = () => {
4848
updateOrganizationMemberRoles(queryClient, organizationName),
4949
);
5050

51-
const { organizations } = useOrganizationSettings();
52-
const organization = organizations?.find((o) => o.name === organizationName);
51+
const { organization } = useOrganizationSettings();
5352
const permissionsQuery = useQuery(organizationPermissions(organization?.id));
5453

5554
const permissions = permissionsQuery.data;
@@ -69,6 +68,7 @@ const OrganizationMembersPage: FC = () => {
6968
}
7069
isAddingMember={addMemberMutation.isLoading}
7170
isUpdatingMemberRoles={updateMemberRolesMutation.isLoading}
71+
organization={organization!}
7272
me={me}
7373
members={members}
7474
groupsByUserId={groupsByUserIdQuery.data}

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getErrorMessage } from "api/errors";
1111
import type { GroupsByUserId } from "api/queries/groups";
1212
import type {
1313
Group,
14+
Organization,
1415
OrganizationMemberWithUserData,
1516
SlimRole,
1617
User,
@@ -30,18 +31,17 @@ import {
3031
import { Stack } from "components/Stack/Stack";
3132
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
3233
import { UserAvatar } from "components/UserAvatar/UserAvatar";
33-
import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
3434
import { type FC, useState } from "react";
3535
import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip";
3636
import { UserRoleCell } from "./UserTable/UserRoleCell";
37-
import { useParams } from "react-router-dom";
3837

3938
interface OrganizationMembersPageViewProps {
4039
allAvailableRoles: readonly SlimRole[] | undefined;
4140
canEditMembers: boolean;
4241
error: unknown;
4342
isAddingMember: boolean;
4443
isUpdatingMemberRoles: boolean;
44+
organization: Organization;
4545
me: User;
4646
members: Array<OrganizationMemberTableEntry> | undefined;
4747
groupsByUserId: GroupsByUserId | undefined;
@@ -65,28 +65,26 @@ export const OrganizationMembersPageView: FC<
6565
error,
6666
isAddingMember,
6767
isUpdatingMemberRoles,
68+
organization,
6869
me,
6970
members,
7071
addMember,
7172
removeMember,
7273
updateMemberRoles,
7374
}) => {
74-
// TODO: Fix me
75-
const { organization } = useParams() as { organization: string };
76-
7775
return (
7876
<Stack spacing={4}>
79-
<Stack direction="row" spacing={1}>
77+
<Stack direction="row" spacing={2} alignItems="center">
8078
<Breadcrumbs>
8179
<Crumb>Organizations</Crumb>
8280
<Crumb href={`/organizations/${organization}`}>
83-
{organization || organization}
81+
{organization.display_name || organization.name}
8482
</Crumb>
8583
<Crumb href={`/organizations/${organization}/members`} active>
8684
Members
8785
</Crumb>
8886
</Breadcrumbs>
89-
<FeatureStageBadge contentType="beta" size="lg" />
87+
<FeatureStageBadge contentType="beta" size="sm" />
9088
</Stack>
9189
{Boolean(error) && <ErrorAlert error={error} />}
9290

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import type {
77
} from "api/typesGenerated";
88
import { EmptyState } from "components/EmptyState/EmptyState";
99
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
10-
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1110
import { Stack } from "components/Stack/Stack";
1211
import { ProvisionerGroup } from "modules/provisioners/ProvisionerGroup";
1312
import type { FC } from "react";
1413
import { docs } from "utils/docs";
14+
import { useOrganizationSettings } from "./ManagementSettingsLayout";
15+
import { Breadcrumbs, Crumb } from "components/Breadcrumbs/Breadcrumbs";
1516

1617
interface OrganizationProvisionersPageViewProps {
1718
/** Info about the version of coderd */
@@ -24,6 +25,7 @@ interface OrganizationProvisionersPageViewProps {
2425
export const OrganizationProvisionersPageView: FC<
2526
OrganizationProvisionersPageViewProps
2627
> = ({ buildInfo, provisioners }) => {
28+
const { organization } = useOrganizationSettings();
2729
const isEmpty = provisioners.every((group) => group.daemons.length === 0);
2830

2931
const provisionerGroupsCount = provisioners.length;
@@ -32,17 +34,27 @@ export const OrganizationProvisionersPageView: FC<
3234
0,
3335
);
3436

37+
if (!organization) return null;
38+
3539
return (
3640
<div>
3741
<Stack
3842
alignItems="baseline"
3943
direction="row"
4044
justifyContent="space-between"
4145
>
42-
<SettingsHeader
43-
title="Provisioners"
44-
badges={<FeatureStageBadge contentType="beta" size="lg" />}
45-
/>
46+
<Stack direction="row" spacing={2} alignItems="center">
47+
<Breadcrumbs>
48+
<Crumb>Organizations</Crumb>
49+
<Crumb href={`/organizations/${organization}`}>
50+
{organization.display_name || organization.name}
51+
</Crumb>
52+
<Crumb href={`/organizations/${organization}/groups`} active>
53+
Groups
54+
</Crumb>
55+
</Breadcrumbs>
56+
<FeatureStageBadge contentType="beta" size="sm" />
57+
</Stack>
4658
<Button
4759
endIcon={<OpenInNewIcon />}
4860
target="_blank"

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const OrganizationSettingsPage: FC = () => {
2323
const { organization: organizationName } = useParams() as {
2424
organization?: string;
2525
};
26-
const { organizations } = useOrganizationSettings();
26+
const { organizations, organization } = useOrganizationSettings();
2727
const feats = useFeatureVisibility();
2828

2929
const navigate = useNavigate();
@@ -35,10 +35,6 @@ const OrganizationSettingsPage: FC = () => {
3535
deleteOrganization(queryClient),
3636
);
3737

38-
const organization =
39-
organizations && organizationName
40-
? getOrganizationByName(organizations, organizationName)
41-
: undefined;
4238
const permissionsQuery = useQuery(
4339
organizationsPermissions(organizations?.map((o) => o.id)),
4440
);
@@ -111,10 +107,3 @@ const OrganizationSettingsPage: FC = () => {
111107
};
112108

113109
export default OrganizationSettingsPage;
114-
115-
const getOrganizationByName = (
116-
organizations: readonly Organization[],
117-
name: string,
118-
) => {
119-
return organizations.find((org) => org.name === name);
120-
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,14 @@ export const OrganizationSettingsPageView: FC<
6868

6969
return (
7070
<Stack spacing={4}>
71-
<Stack direction="row" spacing={1}>
71+
<Stack direction="row" spacing={2} alignItems="center">
7272
<Breadcrumbs>
7373
<Crumb>Organizations</Crumb>
7474
<Crumb href={`/organizations/${organization.name}`} active>
7575
{organization.display_name || organization.name}
7676
</Crumb>
77-
<FeatureStageBadge contentType="beta" size="lg" />
7877
</Breadcrumbs>
78+
<FeatureStageBadge contentType="beta" size="sm" />
7979
</Stack>
8080

8181
{Boolean(error) && !isApiValidationError(error) && (

0 commit comments

Comments
 (0)