Skip to content

feat: manage groups from deployment settings for single-org deployments #14016

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 8 commits into from
Jul 26, 2024
Merged

feat: manage groups from deployment settings for single-org deployments #14016

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4c840c7
feat: manage non-multi-org groups from deployment settings
aslilac Jul 25, 2024
5346d8e
🧹
aslilac Jul 25, 2024
29dffc5
of course
aslilac Jul 25, 2024
7999b92
require license, add key func
aslilac Jul 26, 2024
01371ec
add redirects and such
aslilac Jul 26, 2024
f29bae0
🧹
aslilac Jul 26, 2024
21ce367
:)
aslilac Jul 26, 2024
9ed77d4
ah, yes
aslilac Jul 26, 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
12 changes: 8 additions & 4 deletions site/src/api/queries/groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ import type {
PatchGroupRequest,
} from "api/typesGenerated";

const GROUPS_QUERY_KEY = ["groups"];
type GroupSortOrder = "asc" | "desc";

const getGroupQueryKey = (organizationId: string, groupName: string) => [
"organization",
organizationId,
"group",
groupName,
];

export const groups = (organizationId: string) => {
return {
queryKey: GROUPS_QUERY_KEY,
queryKey: ["organization", organizationId, "groups"],
queryFn: () => API.getGroups(organizationId),
} satisfies UseQueryOptions<Group[]>;
};
Expand Down Expand Up @@ -97,7 +97,11 @@ export const createGroup = (
mutationFn: (request: CreateGroupRequest) =>
API.createGroup(organizationId, request),
onSuccess: async () => {
await queryClient.invalidateQueries(GROUPS_QUERY_KEY);
await queryClient.invalidateQueries([
"organization",
organizationId,
"groups",
]);
},
};
};
Expand Down Expand Up @@ -146,7 +150,7 @@ export const invalidateGroup = (
groupId: string,
) =>
Promise.all([
queryClient.invalidateQueries(GROUPS_QUERY_KEY),
queryClient.invalidateQueries(["organization", organizationId, "groups"]),
queryClient.invalidateQueries(getGroupQueryKey(organizationId, groupId)),
]);

Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import CreateGroupPageView from "./CreateGroupPageView";
export const CreateGroupPage: FC = () => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const { organization } = useParams() as { organization: string };
const { organization = "default" } = useParams() as { organization: string };
const createGroupMutation = useMutation(
createGroup(queryClient, organization),
);
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import { isEveryoneGroup } from "utils/groups";
import { pageTitle } from "utils/page";

export const GroupPage: FC = () => {
const { organization, groupName } = useParams() as {
const { organization = "default", groupName } = useParams() as {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the constant "default" used in multiple places. We should define it in a const.ts file for consistency. Makes sense?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

personally, I really dread adding imports like that which end up being more typing that the thing you could just say directly

organization: string;
groupName: string;
};
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { pageTitle } from "utils/page";
import GroupSettingsPageView from "./GroupSettingsPageView";

export const GroupSettingsPage: FC = () => {
const { organization, groupName } = useParams() as {
const { organization = "default", groupName } = useParams() as {
organization: string;
groupName: string;
};
Expand Down
7 changes: 3 additions & 4 deletions site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,22 @@ import Button from "@mui/material/Button";
import { type FC, useEffect } from "react";
import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
import { Link as RouterLink } from "react-router-dom";
import { Link as RouterLink, useParams } from "react-router-dom";
import { getErrorMessage } from "api/errors";
import { groups } from "api/queries/groups";
import { displayError } from "components/GlobalSnackbar/utils";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import { pageTitle } from "utils/page";
import { useOrganizationSettings } from "../ManagementSettingsLayout";
import GroupsPageView from "./GroupsPageView";

export const GroupsPage: FC = () => {
const { permissions } = useAuthenticated();
const { currentOrganizationId } = useOrganizationSettings();
const { createGroup: canCreateGroup } = permissions;
const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility();
const groupsQuery = useQuery(groups(currentOrganizationId!));
const { organization = "default" } = useParams() as { organization: string };
const groupsQuery = useQuery(groups(organization));

useEffect(() => {
if (groupsQuery.error) {
Expand Down
27 changes: 2 additions & 25 deletions site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createContext, type FC, Suspense, useContext } from "react";
import { useQuery } from "react-query";
import { Outlet, useLocation, useParams } from "react-router-dom";
import { Outlet } from "react-router-dom";
import { deploymentConfig } from "api/queries/deployment";
import { organizations } from "api/queries/organizations";
import type { Organization } from "api/typesGenerated";
Expand All @@ -15,7 +15,6 @@ import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayou
import { Sidebar } from "./Sidebar";

type OrganizationSettingsContextValue = {
currentOrganizationId?: string;
organizations: Organization[];
};

Expand All @@ -34,19 +33,13 @@ export const useOrganizationSettings = (): OrganizationSettingsContextValue => {
};

export const ManagementSettingsLayout: FC = () => {
const location = useLocation();
const { permissions } = useAuthenticated();
const { experiments } = useDashboard();
const { organization } = useParams() as { organization: string };
const deploymentConfigQuery = useQuery(deploymentConfig());
const organizationsQuery = useQuery(organizations());

const multiOrgExperimentEnabled = experiments.includes("multi-organization");

const inOrganizationSettings =
location.pathname.startsWith("/organizations") &&
location.pathname !== "/organizations/new";

if (!multiOrgExperimentEnabled) {
return <NotFoundPage />;
}
Expand All @@ -57,17 +50,7 @@ export const ManagementSettingsLayout: FC = () => {
<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
{organizationsQuery.data ? (
<OrganizationSettingsContext.Provider
value={{
currentOrganizationId: !inOrganizationSettings
? undefined
: !organization
? getOrganizationIdByDefault(organizationsQuery.data)
: getOrganizationIdByName(
organizationsQuery.data,
organization,
),
organizations: organizationsQuery.data,
}}
value={{ organizations: organizationsQuery.data }}
>
<Sidebar />
<main css={{ width: "100%" }}>
Expand All @@ -94,9 +77,3 @@ export const ManagementSettingsLayout: FC = () => {
</RequirePermission>
);
};

const getOrganizationIdByName = (organizations: Organization[], name: string) =>
organizations.find((org) => org.name === name)?.id;

const getOrganizationIdByDefault = (organizations: Organization[]) =>
organizations.find((org) => org.is_default)?.id;
23 changes: 17 additions & 6 deletions site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import type { FC } from "react";
import { useMutation, useQueryClient } from "react-query";
import { useNavigate } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import {
updateOrganization,
deleteOrganization,
} from "api/queries/organizations";
import type { Organization } from "api/typesGenerated";
import { EmptyState } from "components/EmptyState/EmptyState";
import { displaySuccess } from "components/GlobalSnackbar/utils";
import { useOrganizationSettings } from "./ManagementSettingsLayout";
import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView";

const OrganizationSettingsPage: FC = () => {
const navigate = useNavigate();
const { organization: organizationName } = useParams() as {
organization?: string;
};
const { organizations } = useOrganizationSettings();

const navigate = useNavigate();
const queryClient = useQueryClient();
const updateOrganizationMutation = useMutation(
updateOrganization(queryClient),
Expand All @@ -21,14 +26,14 @@ const OrganizationSettingsPage: FC = () => {
deleteOrganization(queryClient),
);

const { currentOrganizationId, organizations } = useOrganizationSettings();

const org = organizations.find((org) => org.id === currentOrganizationId);
const org = organizationName
? getOrganizationIdByName(organizations, organizationName)
: getOrganizationIdByDefault(organizations);

const error =
updateOrganizationMutation.error ?? deleteOrganizationMutation.error;

if (!currentOrganizationId || !org) {
if (!org) {
return <EmptyState message="Organization not found" />;
}

Expand All @@ -55,3 +60,9 @@ const OrganizationSettingsPage: FC = () => {
};

export default OrganizationSettingsPage;

const getOrganizationIdByDefault = (organizations: Organization[]) =>
organizations.find((org) => org.is_default);

const getOrganizationIdByName = (organizations: Organization[], name: string) =>
organizations.find((org) => org.name === name);
37 changes: 0 additions & 37 deletions site/src/pages/ManagementSettingsPage/OrganizationSettingsPlaceholder.tsx
View file
Open in desktop

This file was deleted.

63 changes: 43 additions & 20 deletions site/src/pages/ManagementSettingsPage/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,64 @@ import type { Interpolation, Theme } from "@emotion/react";
import AddIcon from "@mui/icons-material/Add";
import SettingsIcon from "@mui/icons-material/Settings";
import type { FC, ReactNode } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";
import { Link, NavLink, useLocation, useParams } from "react-router-dom";
import type { Organization } from "api/typesGenerated";
import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar";
import { Stack } from "components/Stack/Stack";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
import { type ClassName, useClassName } from "hooks/useClassName";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import { USERS_LINK } from "modules/navigation";
import { useOrganizationSettings } from "./ManagementSettingsLayout";

export const Sidebar: FC = () => {
const { currentOrganizationId, organizations } = useOrganizationSettings();
const { organization: organizationName = "default" } = useParams() as {
organization: string;
};
const { organizations } = useOrganizationSettings();
const { multiple_organizations: organizationsEnabled } =
useFeatureVisibility();

// TODO: Do something nice to scroll to the active org.

return (
<BaseSidebar>
<header css={styles.sidebarHeader}>Deployment</header>
<DeploymentSettingsNavigation />
<header css={styles.sidebarHeader}>Organizations</header>
<SidebarNavItem
active="auto"
href="/organizations/new"
icon={<AddIcon />}
>
New organization
</SidebarNavItem>
{organizations.map((organization) => (
<OrganizationSettingsNavigation
key={organization.id}
organization={organization}
active={organization.id === currentOrganizationId}
/>
))}
{organizationsEnabled && (
<header css={styles.sidebarHeader}>Deployment</header>
)}
<DeploymentSettingsNavigation
organizationsEnabled={organizationsEnabled}
/>
{organizationsEnabled && (
<>
<header css={styles.sidebarHeader}>Organizations</header>
<SidebarNavItem
active="auto"
href="/organizations/new"
icon={<AddIcon />}
>
New organization
</SidebarNavItem>
{organizations.map((organization) => (
<OrganizationSettingsNavigation
key={organization.id}
organization={organization}
active={organization.name === organizationName}
/>
))}
</>
)}
</BaseSidebar>
);
};

const DeploymentSettingsNavigation: FC = () => {
interface DeploymentSettingsNavigationProps {
organizationsEnabled?: boolean;
}

const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
organizationsEnabled,
}) => {
const location = useLocation();
const active = location.pathname.startsWith("/deployment");

Expand Down Expand Up @@ -81,6 +101,9 @@ const DeploymentSettingsNavigation: FC = () => {
<SidebarNavSubItem href={USERS_LINK.slice(1)}>
Users
</SidebarNavSubItem>
{!organizationsEnabled && (
<SidebarNavSubItem href="groups">Groups</SidebarNavSubItem>
)}
</Stack>
)}
</div>
Expand Down
Loading
Loading