Added confirmation message after selecting "Remove" in Access Management

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": "<b>Viewers</b> are in read-only and cannot edit or add connections.",
   "settings.accessManagement.roleEditors": "<b>Editors</b> can edit connections",

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;
+}

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 (
-    <LoadingButton secondary onClick={() => removeUser({ email, workspaceId })} isLoading={isLoading}>
+    <LoadingButton secondary onClick={onRemoveUserButtonClick} isLoading={isLoading}>
       <FormattedMessage id="userSettings.user.remove" />
     </LoadingButton>
   );
@@ -83,14 +93,14 @@ export const UsersSettingsView: React.FC = () => {
 
   return (
     <>
-      <Header>
+      <div className={styles.header}>
         <H5>
           <FormattedMessage id="userSettings.table.title" />
         </H5>
         <Button onClick={toggleModal} data-testid="userSettings.button.addNewUser">
           + <FormattedMessage id="userSettings.button.addNewUser" />
         </Button>
-      </Header>
+      </div>
       <Table data={users ?? []} columns={columns} />
       {modalIsOpen && <InviteUsersModal onClose={toggleModal} />}
     </>