feat: transfer tasks and alerts when removing a team member (#6531)

wdoconnell · web-flow · commit b02ac99eb17b · 2023-01-27T14:24:46.000Z
* feat: transfer tasks and alerts when removing user

* chore: clean up types

* chore: add test ids

* chore: remove unnecessary redirect

* chore: remove unused import

* chore: change testid name

* chore: update user test to use remove user overlay
diff --git a/cypress/e2e/cloud/users.test.ts b/cypress/e2e/cloud/users.test.ts
@@ -59,16 +59,21 @@ describe('Users Page', () => {
     cy.getByTestIDSubStr('user-list-item').should('have.length', 2)
 
     cy.getByTestID(`user-list-item user@influxdata.com`).within(() => {
-      cy.getByTestID('delete-user--button').trigger('mouseover')
-      // TODO figure out how to have cypress handle hover events
-      // cy.getByTestID('delete-user--button').should('be.visible')
-      cy.getByTestID('delete-user--button').click()
+      // This won't be deemed visible due to Cypress's (lack of) hover handling.
+      // Just check for existence. https://docs.cypress.io/api/commands/hover
+      cy.getByTestID('delete-user--button').should('exist').click()
     })
 
-    cy.getByTestID('delete-user--confirm-button').should('be.visible')
-    cy.getByTestID('delete-user--confirm-button').click()
+    cy.getByTestID('remove-member-overlay--container').within(() => {
+      cy.getByTestID('dropdown--button').should('be.visible').click()
+      cy.getByTestID('dropdown-menu')
+        .should('be.visible')
+        .and('contain', 'josh@influxdata.com')
+        .click()
+      cy.getByTestID('remove-member-form--submit').should('be.visible').click()
+    })
 
-    cy.getByTestID('notification-success--dismiss').click()
+    cy.getByTestID('notification-success--dismiss').should('be.visible').click()
 
     cy.getByTestIDSubStr('user-list-item').should('have.length', 1)
   })
diff --git a/src/organizations/components/OrgProfileTab/LeaveOrg.tsx b/src/organizations/components/OrgProfileTab/LeaveOrg.tsx
@@ -1,36 +1,41 @@
 // Libraries
 import React, {FC, useContext} from 'react'
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 
 // Components
-import {
-  ButtonShape,
-  ComponentColor,
-  ConfirmationButton,
-  FlexBox,
-  IconFont,
-} from '@influxdata/clockface'
+import {Button, ComponentColor, FlexBox, IconFont} from '@influxdata/clockface'
 
 // Selector
 import {selectCurrentOrg, selectUser} from 'src/identity/selectors'
 
 // Providers
 import {UsersContext} from 'src/users/context/users'
 
-// Constants
-import {CLOUD_URL} from 'src/shared/constants'
+// Overlay
+import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
+
+// Types
+import {RemoveMemberOverlayParams} from 'src/users/components/RemoveMemberOverlay'
 
 // Styles
 import 'src/organizations/components/OrgProfileTab/style.scss'
 
 export const LeaveOrgButton: FC = () => {
   const org = useSelector(selectCurrentOrg)
+  const {users} = useContext(UsersContext)
   const currentUserId = useSelector(selectUser)?.id
   const {removeUser} = useContext(UsersContext)
+  const userToRemove = users.find(user => user.id === currentUserId)
+  const dispatch = useDispatch()
 
   const handleRemoveUser = () => {
-    removeUser(currentUserId)
-    window.location.href = CLOUD_URL
+    const params: RemoveMemberOverlayParams = {
+      removeUser,
+      users,
+      userToRemove,
+    }
+
+    dispatch(showOverlay('remove-member', params, () => dismissOverlay()))
   }
 
   return (
@@ -40,18 +45,15 @@ export const LeaveOrgButton: FC = () => {
         <p className="org-profile-tab--heading org-profile-tab--deleteHeading">
           Leave the <b>{org.name}</b> organization.
         </p>
-        <ConfirmationButton
+        <Button
           className="org-profile-tab--leaveOrgButton"
           color={ComponentColor.Default}
-          confirmationButtonColor={ComponentColor.Danger}
-          confirmationButtonText="Leave Organization"
-          confirmationLabel="This action will remove yourself from accessing this organization"
           icon={IconFont.Logout}
-          onConfirm={handleRemoveUser}
-          shape={ButtonShape.Square}
+          id={currentUserId}
+          onClick={handleRemoveUser}
           testID="delete-user"
           text="Leave Organization"
-          titleText="Leave Organization"
+          titleText="Remove member access"
         />
       </FlexBox.Child>
     </>
diff --git a/src/overlays/components/OverlayController.tsx b/src/overlays/components/OverlayController.tsx
@@ -48,10 +48,11 @@ import ConfirmationOverlay from 'src/support/components/ConfirmationOverlay'
 import {CreateOrganizationOverlay} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrganizationOverlay'
 import {MarketoAccountUpgradeOverlay} from 'src/identity/components/MarketoAccountUpgradeOverlay'
 import {SuspendPaidOrgOverlay} from 'src/organizations/components/OrgProfileTab/SuspendPaidOrgOverlay'
+import {ReplaceCertificateOverlay} from 'src/writeData/subscriptions/components/CertificateInput'
+import {RemoveMemberOverlay} from 'src/users/components/RemoveMemberOverlay'
 
 // Actions
 import {dismissOverlay} from 'src/overlays/actions/overlays'
-import {ReplaceCertificateOverlay} from 'src/writeData/subscriptions/components/CertificateInput'
 
 export interface OverlayContextType {
   onClose: () => void
@@ -189,6 +190,9 @@ export const OverlayController: FunctionComponent = () => {
       case 'suspend-org-in-paid-account':
         activeOverlay.current = <SuspendPaidOrgOverlay />
         break
+      case 'remove-member':
+        activeOverlay.current = <RemoveMemberOverlay />
+        break
       default:
         activeOverlay.current = null
         break
diff --git a/src/overlays/reducers/overlays.ts b/src/overlays/reducers/overlays.ts
@@ -40,6 +40,7 @@ export type OverlayID =
   | 'create-organization'
   | 'marketo-upgrade-account-overlay'
   | 'suspend-org-in-paid-account'
+  | 'remove-member'
 
 export interface OverlayState {
   id: OverlayID | null
diff --git a/src/users/components/RemoveMemberOverlay.tsx b/src/users/components/RemoveMemberOverlay.tsx
@@ -0,0 +1,147 @@
+// Libraries
+import React, {FC, useContext, useState} from 'react'
+import {useSelector} from 'react-redux'
+
+import {
+  Alert,
+  AlignItems,
+  Button,
+  ComponentColor,
+  ComponentStatus,
+  Dropdown,
+  FlexBox,
+  FlexDirection,
+  Form,
+  IconFont,
+  Overlay,
+  RemoteDataState,
+  SpinnerContainer,
+  TechnoSpinner,
+} from '@influxdata/clockface'
+
+// Contexts
+import {OverlayContext} from 'src/overlays/components/OverlayController'
+
+// Constants
+import {CLOUD_URL} from 'src/shared/constants'
+
+// Selectors
+import {selectUser} from 'src/identity/selectors'
+
+// Types
+import {User} from 'src/client/unityRoutes'
+import {UsersContextType} from 'src/users/context/users'
+
+export interface RemoveMemberOverlayParams {
+  removeUser: UsersContextType['removeUser']
+  users: User[]
+  userToRemove: User
+}
+
+export const RemoveMemberOverlay: FC = () => {
+  const {onClose, params} = useContext(OverlayContext)
+  const {removeUser, users, userToRemove} = params
+  const otherUsers = users.filter((user: User) => user.id !== userToRemove.id)
+  const [newTasksAlertsUser, setNewTasksAlertsUser] = useState(otherUsers[0])
+
+  const currentUserId = useSelector(selectUser).id
+  const removingSelf = userToRemove.id === currentUserId
+
+  const handleSelectTasksAlertsUser = (user: User) => {
+    setNewTasksAlertsUser(user)
+  }
+
+  const handleRemoveAndTransfer = () => {
+    removeUser(userToRemove.id, newTasksAlertsUser.id)
+
+    if (removingSelf) {
+      window.location.href = CLOUD_URL
+    } else {
+      onClose()
+    }
+  }
+
+  const usersLoadedStatus = Boolean(users.length)
+    ? RemoteDataState.Done
+    : RemoteDataState.Loading
+
+  return (
+    <Overlay.Container
+      className="remove-member-overlay"
+      maxWidth={650}
+      testID="remove-member-overlay--container"
+    >
+      <Overlay.Header
+        onDismiss={onClose}
+        testID="remove-member-overlay--header"
+        title={`Remove ${userToRemove.email}`}
+      />
+      <Overlay.Body>
+        <Alert
+          className="remove-member-overlay--warning-message"
+          color={ComponentColor.Danger}
+          icon={IconFont.AlertTriangle}
+        >
+          When you remove {removingSelf ? 'yourself' : 'a member'} from an
+          organization, you need to transfer tasks and alerts to another member
+          so that scripts are not interrupted.
+        </Alert>
+        <br />
+        <SpinnerContainer
+          loading={usersLoadedStatus}
+          spinnerComponent={<TechnoSpinner />}
+        >
+          <FlexBox
+            alignItems={AlignItems.FlexStart}
+            className="remove-member-overlay--form"
+            direction={FlexDirection.Row}
+          >
+            <Form.Element
+              label={`Transfer ${userToRemove.email}'s tasks and alerts to:`}
+              required={true}
+            >
+              <Dropdown
+                testID="remove-member--transfer-dropdown"
+                button={(active, onClick) => (
+                  <Dropdown.Button active={active} onClick={onClick}>
+                    <b>{newTasksAlertsUser.email}</b>
+                  </Dropdown.Button>
+                )}
+                menu={onCollapse => (
+                  <Dropdown.Menu onCollapse={onCollapse}>
+                    {otherUsers.map((user: User) => (
+                      <Dropdown.Item
+                        key={user.id}
+                        id={user.id}
+                        selected={user.id === newTasksAlertsUser.id}
+                        value={user}
+                        onClick={handleSelectTasksAlertsUser}
+                      >
+                        {user.email}
+                      </Dropdown.Item>
+                    ))}
+                  </Dropdown.Menu>
+                )}
+              />
+            </Form.Element>
+          </FlexBox>
+        </SpinnerContainer>
+      </Overlay.Body>
+      <Overlay.Footer>
+        <Button
+          color={ComponentColor.Default}
+          onClick={onClose}
+          testID="remove-member-form--cancel"
+          text="Cancel"
+        />
+        <Button
+          color={ComponentColor.Danger}
+          onClick={handleRemoveAndTransfer}
+          status={ComponentStatus.Default}
+          testID="remove-member-form--submit"
+          text="Remove and Transfer"
+        />
+      </Overlay.Footer>
+    </Overlay.Container>
+  )
+}
diff --git a/src/users/components/UserList.tsx b/src/users/components/UserList.tsx
@@ -1,31 +1,43 @@
 // Libraries
 import React, {FC, useContext, useState} from 'react'
+import {useDispatch} from 'react-redux'
 
 // Components
 import {Columns, Grid, IndexList} from '@influxdata/clockface'
 import {UsersContext} from 'src/users/context/users'
 import {UserListItem} from 'src/users/components/UserListItem'
 import {InviteListItem} from 'src/users/components/InviteListItem'
 
+// Overlays
+import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
+
+// Types
+import {RemoveMemberOverlayParams} from 'src/users/components/RemoveMemberOverlay'
+
 // Utils
 import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
 import {filter} from 'src/users/utils/filter'
 
 export const UserList: FC = () => {
-  const {users, invites} = useContext(UsersContext)
-
+  const {removeUser, users, invites} = useContext(UsersContext)
+  const dispatch = useDispatch()
   const [searchTerm, setSearchTerm] = useState('')
-
   const filteredUsers = filter(
     users,
     ['email', 'firstName', 'lastName', 'role'],
     searchTerm
   )
-
   const filteredInvites = filter(invites, ['email', 'role'], searchTerm)
 
   const isDeletable = users.length > 1
 
+  const handleRemoveUser = (evt: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const userToRemove = users.find(user => user.id === evt.currentTarget.id)
+    const params: RemoveMemberOverlayParams = {removeUser, users, userToRemove}
+
+    dispatch(showOverlay('remove-member', params, () => dismissOverlay()))
+  }
+
   return (
     <Grid>
       <Grid.Row>
@@ -51,6 +63,7 @@ export const UserList: FC = () => {
           ))}
           {filteredUsers.map(user => (
             <UserListItem
+              handleRemoveUser={handleRemoveUser}
               key={`user-${user.id}`}
               user={user}
               isDeletable={isDeletable}
diff --git a/src/users/components/UserListItem.tsx b/src/users/components/UserListItem.tsx
diff --git a/src/users/context/users.tsx b/src/users/context/users.tsx
