Add notification when users are invited

airbytehq · Sep 8, 2022 · 0975ec5 · 0975ec5
1 parent af630dc
commit 0975ec5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -118,6 +118,8 @@
   "settings.accessManagement.roleEditors": "<b>Editors</b> can edit connections",
   "settings.accessManagement.roleAdmin": "<b>Admin</b> can also manage users",
 
+  "addUsers.success.title": "{count, plural, one {Invitation} other {Invitations}} sent!",
+
   "credits.date": "Date",
   "credits.amount": "Credits",
 
@@ -151,6 +153,6 @@
 
   "webapp.cannotReachServer": "Cannot reach server.",
 
-  "inviteUsersHint.message": "Need help from a teammate to configure your {connector}?",
+  "inviteUsersHint.message": "Need a teammate to set up this {connector}?",
   "inviteUsersHint.cta": "Invite users"
 }
diff --git a/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx b/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx
@@ -9,6 +9,7 @@ import * as yup from "yup";
 import { Button, DropDown, H5, Input, LoadingButton, Modal } from "components";
 import { Cell, Header, Row } from "components/SimpleTableComponents";
 
+import { useNotificationService } from "hooks/services/Notification";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useUserHook } from "packages/cloud/services/users/UseUserHook";
 
@@ -62,6 +63,7 @@ export const InviteUsersModal: React.FC<{
   const { formatMessage } = useIntl();
   const { workspaceId } = useCurrentWorkspace();
   const { inviteUserLogic } = useUserHook();
+  const { registerNotification } = useNotificationService();
   const { mutateAsync: invite } = inviteUserLogic;
 
   const isRoleVisible = false; // Temporarily hiding roles because there's only 'Admin' in cloud.
@@ -81,10 +83,17 @@ export const InviteUsersModal: React.FC<{
           ],
         }}
         onSubmit={async (values) => {
+          const count = values.users.length;
           await invite(
             { users: values.users, workspaceId },
             {
-              onSuccess: () => props.onClose(),
+              onSuccess: () => {
+                registerNotification({
+                  title: formatMessage({ id: "addUsers.success.title" }, { count }),
+                  id: `invite-users-success-${count}`,
+                });
+                props.onClose();
+              },
             }
           );
         }}