diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
index d2bfabde9bfe..1e4adea5f126 100644
--- a/airbyte-webapp/src/packages/cloud/locales/en.json
+++ b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -102,6 +102,9 @@
"modals.addUser.button.addUser": "Add another user",
"modals.addUser.button.cancel": "Cancel",
"modals.addUser.button.submit": "Send invitation",
+ "modals.removeUser.text": "Are you sure you want to remove this user?",
+ "modals.removeUser.title": "Remove user",
+ "modals.removeUser.button.submit": "Remove",
"workspaces.viewAllWorkspaces": "View all workspaces",
"settings.accessManagement.roleViewers": "Viewers are in read-only and cannot edit or add connections.",
"settings.accessManagement.roleEditors": "Editors can edit connections",
diff --git a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.module.scss b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.module.scss
new file mode 100644
index 000000000000..1732004cb1c6
--- /dev/null
+++ b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.module.scss
@@ -0,0 +1,5 @@
+.header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
index e7122164352f..4fba32a03b70 100644
--- a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
@@ -2,29 +2,39 @@ import React from "react";
import { FormattedMessage } from "react-intl";
import { CellProps } from "react-table";
import { useToggle } from "react-use";
-import styled from "styled-components";
import { Button, H5, LoadingButton } from "components";
import Table from "components/Table";
+import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
import { useCurrentWorkspace } from "hooks/services/useWorkspace";
import { User } from "packages/cloud/lib/domain/users";
import { useAuthService } from "packages/cloud/services/auth/AuthService";
import { useListUsers, useUserHook } from "packages/cloud/services/users/UseUserHook";
import { InviteUsersModal } from "packages/cloud/views/users/InviteUsersModal";
-const Header = styled.div`
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
-`;
+import styles from "./UsersSettingsView.module.scss";
const RemoveUserSection: React.FC<{ workspaceId: string; email: string }> = ({ workspaceId, email }) => {
+ const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
const { removeUserLogic } = useUserHook();
const { isLoading, mutate: removeUser } = removeUserLogic;
+ const onRemoveUserButtonClick = () => {
+ openConfirmationModal({
+ text: `modals.removeUser.text`,
+ title: `modals.removeUser.title`,
+ submitButtonText: "modals.removeUser.button.submit",
+ onSubmit: async () => {
+ removeUser({ email, workspaceId });
+ closeConfirmationModal();
+ },
+ submitButtonDataId: "remove",
+ });
+ };
+
return (
- removeUser({ email, workspaceId })} isLoading={isLoading}>
+
);
@@ -83,14 +93,14 @@ export const UsersSettingsView: React.FC = () => {
return (
<>
-
+
-
+
{modalIsOpen && }
>