diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
index beff71098fbac..5a6b33f170f58 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
@@ -90,7 +90,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!");
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
index 9edd091ec6dac..e4b5b67b94637 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
@@ -1,7 +1,5 @@
-import {
- groupsByUserId,
- groupsByUserIdInOrganization,
-} from "api/queries/groups";
+import { getErrorMessage } from "api/errors";
+import { groupsByUserIdInOrganization } from "api/queries/groups";
import {
addOrganizationMember,
organizationMembers,
@@ -11,9 +9,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";
@@ -52,44 +53,89 @@ const OrganizationMembersPage: FC = () => {
const organization = organizations?.find((o) => o.name === organizationName);
const permissionsQuery = useQuery(organizationPermissions(organization?.id));
+ const [memberToDelete, setMemberToDelete] =
+ useState
+ Removing this member will also:
+
+
+
+ Are you sure you want to remove{" "} + {memberToDelete?.username}? +
+ + } + /> + > ); }; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index a714d480cc702..98aef769f64cb 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -44,7 +44,7 @@ interface OrganizationMembersPageViewProps { members: Array