8000 feat: add warning dialog when removing member from organization by jaaydenh · Pull Request #14695 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: add warning dialog when removing member from organization #14695

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 5 commits into from
Sep 27, 2024
Merged

feat: add warning dialog when removing member from organization #14695

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2b2cd09
feat: add warning dialog when removing member from organization
jaaydenh Sep 16, 2024
cb6d1a6
chore: update copy
jaaydenh Sep 27, 2024
591bf5e
fix: fix test
jaaydenh Sep 27, 2024
396d987
chore: update copy
jaaydenh Sep 27, 2024
4e7b763
fix: review comments
jaaydenh Sep 27, 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
4 changes: 3 additions & 1 deletion site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@ export const CustomRolesPage: FC = () => {
onCancel={() => setRoleToDelete(undefined)}
onConfirm={async () => {
try {
await deleteRoleMutation.mutateAsync(roleToDelete!.name);
if (roleToDelete) {
await deleteRoleMutation.mutateAsync(roleToDelete.name);
}
setRoleToDelete(undefined);
await organizationRolesQuery.refetch();
displaySuccess("Custom role deleted successfully!");
Expand Down
5 changes: 4 additions & 1 deletion site/src/pages/ManagementSettingsPage/OrganizationMembersPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ const removeMember = async () => {

const removeButton = screen.getByText(/Remove/);
await user.click(removeButton);

const dialog = await within(document.body).findByRole("dialog");
await user.click(within(dialog).getByRole("button", { name: "Remove" }));
};

const updateUserRole = async (role: SlimRole) => {
Expand Down Expand Up @@ -83,7 +86,7 @@ describe("OrganizationMembersPage", () => {
it("shows a success message", async () => {
await renderPage();
await removeMember();
await screen.findByText("Member removed successfully.");
await screen.findByText("User removed from organization successfully!");
});
});
});
Expand Down
127 changes: 90 additions & 37 deletions site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
groupsByUserId,
groupsByUserIdInOrganization,
} from "api/queries/groups";
import type { Interpolation, Theme } from "@emotion/react";
import { getErrorMessage } from "api/errors";
import { groupsByUserIdInOrganization } from "api/queries/groups";
import {
addOrganizationMember,
organizationMembers,
Expand All @@ -11,9 +10,12 @@ import {
} from "api/queries/organizations";
import { organizationRoles } from "api/queries/roles";
import type { OrganizationMemberWithUserData, User } from "api/typesGenerated";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { Stack } from "components/Stack/Stack";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import type { FC } from "react";
import { type FC, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { useParams } from "react-router-dom";
import { useOrganizationSettings } from "./ManagementSettingsLayout";
Expand Down Expand Up @@ -52,45 +54,96 @@ const OrganizationMembersPage: FC = () => {
const organization = organizations?.find((o) => o.name === organizationName);
const permissionsQuery = useQuery(organizationPermissions(organization?.id));

const [memberToDelete, setMemberToDelete] =
useState<OrganizationMemberWithUserData>();

const permissions = permissionsQuery.data;
if (!permissions) {
return <Loader />;
}

return (
<OrganizationMembersPageView
allAvailableRoles={organizationRolesQuery.data}
canEditMembers={permissions.editMembers}
error={
membersQuery.error ??
addMemberMutation.error ??
removeMemberMutation.error ??
updateMemberRolesMutation.error
}
isAddingMember={addMemberMutation.isLoading}
isUpdatingMemberRoles={updateMemberRolesMutation.isLoading}
me={me}
members={members}
groupsByUserId={groupsByUserIdQuery.data}
addMember={async (user: User) => {
await addMemberMutation.mutateAsync(user.id);
void membersQuery.refetch();
}}
removeMember={async (member: OrganizationMemberWithUserData) => {
await removeMemberMutation.mutateAsync(member.user_id);
void membersQuery.refetch();
}}
updateMemberRoles={async (
member: OrganizationMemberWithUserData,
newRoles: string[],
) => {
await updateMemberRolesMutation.mutateAsync({
userId: member.user_id,
roles: newRoles,
});
}}
/>
<>
<OrganizationMembersPageView
allAvailableRoles={organizationRolesQuery.data}
canEditMembers={permissions.editMembers}
error={
membersQuery.error ??
addMemberMutation.error ??
removeMemberMutation.error ??
updateMemberRolesMutation.error
}
isAddingMember={addMemberMutation.isLoading}
isUpdatingMemberRoles={updateMemberRolesMutation.isLoading}
me={me}
members={members}
groupsByUserId={groupsByUserIdQuery.data}
addMember={async (user: User) => {
await addMemberMutation.mutateAsync(user.id);
void membersQuery.refetch();
}}
removeMember={setMemberToDelete}
updateMemberRoles={async (
member: OrganizationMemberWithUserData,
newRoles: string[],
) => {
await updateMemberRolesMutation.mutateAsync({
userId: member.user_id,
roles: newRoles,
});
}}
/>

<ConfirmDialog
type="delete"
open={memberToDelete !== undefined}
onClose={() => setMemberToDelete(undefined)}
title="Remove member"
confirmText="Remove"
onConfirm={async () => {
try {
if (memberToDelete) {
await removeMemberMutation.mutateAsync(memberToDelete?.user_id);
}
setMemberToDelete(undefined);
await membersQuery.refetch();
displaySuccess("User removed from organization successfully!");
} catch (error) {
setMemberToDelete(undefined);
displayError(
getErrorMessage(error, "Failed to remove user from organization"),
);
}
}}
description={
<Stack>
<p>
Removing this member will:
<ul>
<li>Remove the member from all groups in this organization</li>
<li>Remove all user role assignments</li>
<li>
Orphan all the member's workspaces associated with this
organization
</li>
</ul>
</p>

<p css={styles.test}>
Are you sure you want to remove{" "}
<strong>{memberToDelete?.username}</strong>?
</p>
Copy link
Member

Choose a reason for hiding this comment

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

any way we could fiddle the types so that memberToDelete isn't optional here? seeing "Are you sure you want to remove ?" would be weird

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I feels difficult to remove the undefined from memberToDelete without restructuring the pattern that ConfirmDialog uses. For now, maybe its safer to just not display the username here.

</Stack>
}
/>
</>
);
};

const styles = {
test: {
paddingBottom: 20,
},
} satisfies Record<string, Interpolation<Theme>>;

export default OrganizationMembersPage;
16 changes: 2 additions & 14 deletions site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ interface OrganizationMembersPageViewProps {
members: Array<OrganizationMemberTableEntry> | undefined;
groupsByUserId: GroupsByUserId | undefined;
addMember: (user: User) => Promise<void>;
removeMember: (member: OrganizationMemberWithUserData) => Promise<void>;
removeMember: (member: OrganizationMemberWithUserData) => void;
updateMemberRoles: (
member: OrganizationMemberWithUserData,
newRoles: string[],
Expand Down Expand Up @@ -134,19 +134,7 @@ export const OrganizationMembersPageView: FC<
<MoreMenuContent>
<MoreMenuItem
danger
onClick={async () => {
try {
await props.removeMember(member);
displaySuccess("Member removed successfully.");
} catch (error) {
displayError(
getErrorMessage(
error,< 1E0A /td>
"Failed to remove member.",
),
);
}
}}
onClick={() => props.removeMember(member)}
>
Remove
</MoreMenuItem>
Expand Down
Loading
0