feat: 'remove users first' block on deleting orgs in payg/contract accounts (#6459)

* chore: remove warning notification

* feat: show user count in delete org overlay

* test: update test to show user count in overlay

* feat: show warning for free users only

* fix: only show user count if > 0

* fix: add default value for userCount

Author: blegesse-w

cypress/e2e/cloud/about.test.ts

@@ -172,6 +172,14 @@ const displayRemoveUsersWarning = () => {
   cy.url().should('include', `/members`)
 }
 
+const displayOtherUsersWarning = () => {
+  cy.getByTestID('delete-org--button').should('be.visible').click()
+  cy.get('.org-delete-overlay--warning-message').within(() => {
+    cy.contains('a', 'users in this organization').click()
+    cy.url().should('include', `/members`)
+  })
+}
+
 const upgradeAccount = () => {
   cy.getByTestID('delete-org--button').should('be.visible').click()
   cy.getByTestID('popover--dialog')
@@ -291,15 +299,15 @@ describe('PAYG Account', () => {
     createOrg('pay_as_you_go')
   })
 
-  it('displays the `remove other users` popup if there are other orgs in the account, but the current org has other users in it', () => {
+  it('when deleting an org with multiple users in a multi-org payg account, delete org overlay shows how many other users the org has and clicking it takes user to /members page', () => {
     setupTest({
       accountType: 'pay_as_you_go',
       canCreateOrgs: false,
       orgHasOtherUsers: true,
       orgIsSuspendable: true,
     })
 
-    displayRemoveUsersWarning()
+    displayOtherUsersWarning()
   })
 
   it('allows the user to delete an org if there are other orgs in the account, and they are the only user in the current org', () => {
@@ -337,15 +345,15 @@ describe('Contract Account', () => {
     createOrg('contract')
   })
 
-  it('displays the `remove other users` popup if there are other orgs in the account, but the current org has other users in it', () => {
+  it('when deleting an org with multiple users in a multi-org contract account, delete org overlay shows how many other users the org has and clicking it takes user to /members page ', () => {
     setupTest({
       accountType: 'contract',
       canCreateOrgs: false,
       orgHasOtherUsers: true,
       orgIsSuspendable: true,
     })
 
-    displayRemoveUsersWarning()
+    displayOtherUsersWarning()
   })
 
   it('allows the user to delete an org if there are other orgs in the account, and they are the only user in the current org', () => {

src/organizations/components/OrgProfileTab/DeletePanel.tsx

@@ -20,20 +20,21 @@ import {UsersContext} from 'src/users/context/users'
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
 import {
+  selectCurrentAccount,
   selectCurrentIdentity,
   selectOrgCreationAllowance,
   selectOrgSuspendable,
 } from 'src/identity/selectors'
 
-// Notifications
-import {deleteOrgWarning} from 'src/shared/copy/notifications'
-import {notify} from 'src/shared/actions/notifications'
-
 // Constants
 import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
 
+// Notifications
+import {deleteOrgWarning} from 'src/shared/copy/notifications'
+import {notify} from 'src/shared/actions/notifications'
+
 // Types
 import {NotificationButtonElement} from 'src/types'
 
@@ -65,6 +66,7 @@ const DeleteOrgButton: FC = () => {
   const orgCanBeSuspended = useSelector(selectOrgSuspendable)
   const canCreateOrgs = useSelector(selectOrgCreationAllowance)
   const {users} = useContext(UsersContext)
+  const account = useSelector(selectCurrentAccount)
 
   const popoverRef = useRef()
 
@@ -84,18 +86,21 @@ const DeleteOrgButton: FC = () => {
     hidePopup()
   }
 
-  const shouldShowUsersWarning = users.length > 1
+  // only show warning for free accounts with multiple users
+  const freeAccountWithOtherUsers = account.type === 'free' && users.length > 1
 
   const handleSuspendOrg = () => {
     if (orgCanBeSuspended) {
-      if (shouldShowUsersWarning) {
+      if (freeAccountWithOtherUsers) {
         const buttonElement: NotificationButtonElement = onDismiss =>
           OrgUsersLink(`/orgs/${org.id}/members`, onDismiss)
         dispatch(notify(deleteOrgWarning(buttonElement)))
       } else {
         dispatch(
-          showOverlay('suspend-org-in-paid-account', null, () =>
-            dispatch(dismissOverlay())
+          showOverlay(
+            'suspend-org-in-paid-account',
+            {userCount: users.length || 0},
+            () => dispatch(dismissOverlay())
           )
         )
       }

src/organizations/components/OrgProfileTab/SuspendPaidOrgOverlay.tsx

@@ -1,6 +1,8 @@
 // Libraries
 import React, {FC, useContext, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
+import {Link} from 'react-router-dom'
+
 import {
   Alert,
   AlignItems,
@@ -77,7 +79,7 @@ export const SuspendPaidOrgOverlay: FC = () => {
   const org = useSelector(selectCurrentOrg)
   const user = useSelector(selectUser)
   const dispatch = useDispatch()
-  const {onClose} = useContext(OverlayContext)
+  const {onClose, params} = useContext(OverlayContext)
 
   const [deleteButtonStatus, setDeleteButtonStatus] = useState(
     ComponentStatus.Disabled
@@ -142,7 +144,7 @@ export const SuspendPaidOrgOverlay: FC = () => {
   return (
     <Overlay.Container
       className="org-delete-overlay"
-      maxWidth={600}
+      maxWidth={750}
       testID="create-org-overlay--container"
     >
       <Overlay.Header
@@ -158,6 +160,16 @@ export const SuspendPaidOrgOverlay: FC = () => {
         >
           You will be able to recover this organization's data for up to 7 days
           by contacting support. It will be unrecoverable afterwards.
+          {params.userCount > 1 && (
+            <>
+              <br />
+              <br />
+              <Link to={`/orgs/${org.id}/members`} onClick={onClickCancel}>
+                {params.userCount} users in this organization
+              </Link>{' '}
+              will lose access to all organization data immediately.
+            </>
+          )}
         </Alert>
         <br />
         <ul>