feat(OrgProfileTab): add Leave Org button in Org settings page (#6437)

* chore: remove Leave Account btn from AccountPage

* feat: add Leave Org btn to OrgProfileTab

* fix: display delete org and leave org btns in row

* chore: removed comments

* chore: update name of leaveOrg component

* chore: add Leave org button back in Account page

* feat: create a component for Leave Org

* chore: update self removal condition

* fix: spelling fix

* fix: replace idpe selectors with identity selectors

* fix: prettier

* chore:  update removeUser function name

* chore: update removeUser context name

Author: blegesse-w

src/accounts/AccountPage.tsx

@@ -1,22 +1,19 @@
 // Libraries
 import React, {ChangeEvent, FC, useContext, useEffect, useState} from 'react'
-import {useSelector} from 'react-redux'
 
 import {
   Button,
-  ButtonShape,
-  ComponentColor,
   ComponentSize,
-  ConfirmationButton,
   FlexBox,
   FlexDirection,
   Input,
   InputType,
   Overlay,
   Page,
 } from '@influxdata/clockface'
+import {LeaveOrgButton} from 'src/organizations/components/OrgProfileTab/LeaveOrg'
 
-import {getMe} from 'src/me/selectors'
+// Context
 import {UsersContext, UsersProvider} from 'src/users/context/users'
 
 // Utils
@@ -31,19 +28,12 @@ import CancelServiceProvider from 'src/billing/components/PayAsYouGo/CancelServi
 
 // Styles
 import './AccountPageStyles.scss'
-import {CLOUD_URL} from 'src/shared/constants'
-
-const leaveBtnStyle = {
-  width: 'auto',
-  marginTop: 32,
-  paddingLeft: '8px',
-  paddingRight: '8px',
-}
 
 const AccountAboutPage: FC = () => {
   const {userAccounts, handleRenameActiveAccount} =
     useContext(UserAccountContext)
-  const {users, handleRemoveUser} = useContext(UsersContext)
+
+  const {users} = useContext(UsersContext)
 
   const [isDeactivateAccountVisible, setDeactivateAccountVisible] =
     useState(false)
@@ -61,32 +51,8 @@ const AccountAboutPage: FC = () => {
     setActiveAcctName(evt.target.value)
   }
 
-  const currentUserId = useSelector(getMe)?.id
-
-  const handleRemove = () => {
-    handleRemoveUser(currentUserId)
-    window.location.href = CLOUD_URL
-  }
-
-  const allowSelfRemoval = users.length > 1
-
-  const leaveAcctBtn = (
-    <ConfirmationButton
-      confirmationLabel="This action will remove yourself from accessing this organization"
-      confirmationButtonText="Leave Account"
-      titleText="Leave Account"
-      text="Leave Account"
-      confirmationButtonColor={ComponentColor.Danger}
-      color={ComponentColor.Default}
-      shape={ButtonShape.Square}
-      onConfirm={handleRemove}
-      testID="delete-user"
-      style={leaveBtnStyle}
-    />
-  )
-
   const inputStyle = {width: 250}
-  const labelStyle = {marginBottom: 8, maxWidth: '500px'}
+  const labelStyle = {marginBottom: '10px', maxWidth: '500px'}
   const dividerStyle = {marginTop: '32px', maxWidth: '500px'}
   const actionButtonStyle = {marginTop: '24px'}
 
@@ -103,7 +69,8 @@ const AccountAboutPage: FC = () => {
   }
 
   const showDeactivateAccountSection = isFlagEnabled('freeAccountCancellation')
-  const showLeaveAcctBtn = !isFlagEnabled('createDeleteOrgs')
+  const showLeaveOrgButton = !isFlagEnabled('createDeleteOrgs')
+  const allowSelfRemoval = users.length > 1
 
   return (
     <AccountTabContainer activeTab="settings">
@@ -131,7 +98,12 @@ const AccountAboutPage: FC = () => {
             text="Save"
           />
         </FlexBox>
-        {allowSelfRemoval && showLeaveAcctBtn && leaveAcctBtn}
+        {allowSelfRemoval && showLeaveOrgButton && (
+          <>
+            <hr style={dividerStyle} />
+            <LeaveOrgButton />
+          </>
+        )}
         {showDeactivateAccountSection && (
           <>
             <hr style={dividerStyle} />

src/accounts/AccountPageStyles.scss

@@ -1,3 +1,3 @@
 .account-settings--header {
-  margin-bottom: 16px;
+  margin-bottom: 25px;
 }

src/organizations/components/OrgProfileTab/DeletePanel.tsx

@@ -187,8 +187,6 @@ const DeleteOrgButton: FC = () => {
           Delete the <b>{org.name}</b> organization and remove any data that you
           have loaded.
         </p>
-      </FlexBox.Child>
-      <FlexBox.Child>
         <>
           {!orgCanBeSuspended && (
             <Popover

src/organizations/components/OrgProfileTab/LeaveOrg.tsx

@@ -0,0 +1,59 @@
+// Libraries
+import React, {FC, useContext} from 'react'
+import {useSelector} from 'react-redux'
+
+// Components
+import {
+  ButtonShape,
+  ComponentColor,
+  ConfirmationButton,
+  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'
+
+// Styles
+import 'src/organizations/components/OrgProfileTab/style.scss'
+
+export const LeaveOrgButton: FC = () => {
+  const org = useSelector(selectCurrentOrg)
+  const currentUserId = useSelector(selectUser)?.id
+  const {removeUser} = useContext(UsersContext)
+
+  const handleRemoveUser = () => {
+    removeUser(currentUserId)
+    window.location.href = CLOUD_URL
+  }
+
+  return (
+    <>
+      <FlexBox.Child>
+        <h4>Leave Organization</h4>
+        <p className="org-profile-tab--heading org-profile-tab--deleteHeading">
+          Leave the <b>{org.name}</b> organization.
+        </p>
+        <ConfirmationButton
+          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}
+          testID="delete-user"
+          text="Leave Organization"
+          titleText="Leave Organization"
+        />
+      </FlexBox.Child>
+    </>
+  )
+}

src/organizations/components/OrgProfileTab/index.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useEffect, useState} from 'react'
+import React, {FC, useContext, useEffect, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
 // Components
@@ -13,13 +13,14 @@ import {
 import LabeledData from 'src/organizations/components/OrgProfileTab/LabeledData'
 import CopyableLabeledData from 'src/organizations/components/OrgProfileTab/CopyableLabeledData'
 import {DeletePanel} from 'src/organizations/components/OrgProfileTab/DeletePanel'
+import {LeaveOrgButton} from 'src/organizations/components/OrgProfileTab/LeaveOrg'
 
 // Notifications
 import {orgDetailsFetchError} from 'src/shared/copy/notifications'
 import {notify} from 'src/shared/actions/notifications'
 
 // Providers
-import UsersProvider from 'src/users/context/users'
+import {UsersContext, UsersProvider} from 'src/users/context/users'
 
 // Selectors
 import {getMe} from 'src/me/selectors'
@@ -35,6 +36,9 @@ import {RemoteDataState} from 'src/types'
 // Constants
 import {CLOUD} from 'src/shared/constants'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 // Styles
 import 'src/organizations/components/OrgProfileTab/style.scss'
 
@@ -43,6 +47,7 @@ const OrgProfileTab: FC = () => {
   const org = useSelector(getOrg)
   const quartzOrg = useSelector(selectCurrentOrg)
   const dispatch = useDispatch()
+  const {users} = useContext(UsersContext)
 
   // Data about the user's organization is intentionally re-fetched when this component mounts again.
   const [orgDetailsStatus, setOrgDetailsStatus] = useState(
@@ -73,6 +78,8 @@ const OrgProfileTab: FC = () => {
     retrieveOrgDetails()
   }, [dispatch, orgDetailsStatus, quartzOrg.id])
 
+  const allowSelfRemoval = users.length > 1
+  const showLeaveOrgButton = isFlagEnabled('createDeleteOrgs')
   const hasFetchedOrgDetails = orgDetailsStatus === RemoteDataState.Done
 
   const OrgProfile = () => (
@@ -134,10 +141,10 @@ const OrgProfileTab: FC = () => {
 
   return (
     <FlexBox
-      direction={FlexDirection.Column}
       alignItems={AlignItems.FlexStart}
-      testID="organization-profile--panel"
+      direction={FlexDirection.Column}
       margin={ComponentSize.Large}
+      testID="organization-profile--panel"
     >
       <FlexBox
         direction={FlexDirection.Row}
@@ -149,11 +156,18 @@ const OrgProfileTab: FC = () => {
       </FlexBox>
 
       {CLOUD && orgDetailsLoaded && (
-        <FlexBox.Child className="org-profile-tab--section">
+        <FlexBox
+          className="org-profile-tab--section"
+          direction={FlexDirection.Row}
+          stretchToFitWidth={true}
+        >
           <UsersProvider>
-            <DeletePanel />
+            <>
+              {allowSelfRemoval && showLeaveOrgButton && <LeaveOrgButton />}
+              <DeletePanel />
+            </>
           </UsersProvider>
-        </FlexBox.Child>
+        </FlexBox>
       )}
     </FlexBox>
   )

src/organizations/components/OrgProfileTab/style.scss

@@ -19,8 +19,15 @@
   margin-bottom: $cf-space-l;
   margin-right: $cf-space-3xl;
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .org-profile-tab--copyableText {
   min-width: 500px;
 }
+
+.org-profile-tab--leaveOrgButton {
+  width: auto !important;
+  padding-left: 8px;
+  padding-right: 8px;
+}

src/users/components/UserListItem.tsx

@@ -41,7 +41,7 @@ const formatName = (firstName: string | null, lastName: string | null) => {
 
 const UserListItem: FC<Props> = ({user, isDeletable}) => {
   const {email, firstName, lastName, role} = user
-  const {handleRemoveUser, removeUserStatus} = useContext(UsersContext)
+  const {removeUser, removeUserStatus} = useContext(UsersContext)
 
   const [revealOnHover, toggleRevealOnHover] = useState(true)
 
@@ -54,7 +54,7 @@ const UserListItem: FC<Props> = ({user, isDeletable}) => {
   }
 
   const handleRemove = () => {
-    handleRemoveUser(user.id)
+    removeUser(user.id)
   }
 
   let status = ComponentStatus.Default

src/users/context/users.tsx

@@ -43,7 +43,7 @@ export interface UsersContextType {
   draftInvite: DraftInvite
   handleEditDraftInvite: (_: DraftInvite) => void
   handleInviteUser: () => void
-  handleRemoveUser: (userId: string) => void
+  removeUser: (userId: string) => void
   handleResendInvite: (inviteId: number) => void
   handleWithdrawInvite: (inviteId: number) => void
   invites: Invite[]
@@ -62,7 +62,7 @@ export const DEFAULT_CONTEXT: UsersContextType = {
   draftInvite: draft,
   handleEditDraftInvite: (_draftInvite: DraftInvite) => {},
   handleInviteUser: () => {},
-  handleRemoveUser: (_userId: string) => {},
+  removeUser: (_userId: string) => {},
   handleResendInvite: (_inviteId: number) => {},
   handleWithdrawInvite: (_inviteId: number) => {},
   invites: [],
@@ -207,7 +207,7 @@ export const UsersProvider: FC<Props> = React.memo(({children}) => {
     [dispatch, invites, orgId]
   )
 
-  const handleRemoveUser = useCallback(
+  const removeUser = useCallback(
     async (userId: string) => {
       try {
         setRemoveUserStatus({
@@ -250,7 +250,7 @@ export const UsersProvider: FC<Props> = React.memo(({children}) => {
         draftInvite,
         handleEditDraftInvite,
         handleInviteUser,
-        handleRemoveUser,
+        removeUser,
         handleResendInvite,
         handleWithdrawInvite,
         invites,