feat: update organization/members page (#6454)

* chore: remove owner dropdown, add remove-member modal to add members page

* chore: revert use of overlay due to context requirement [skip CI]

* chore: revert test change related to overlay

* chore: remove user role dropdown

* chore: reorder styles

* chore: correct email source, remove relative import

Author: wdoconnell

cypress/e2e/cloud/globalHeader.test.ts

@@ -64,9 +64,9 @@ describe('change-account change-org global header', () => {
           .click()
 
         cy.location('pathname').should('eq', `/orgs/${idpeOrgID}/members`)
-        cy.getByTestID('tabs--container')
+        cy.getByTestID('user-list-invite--form-heading')
           .should('be.visible')
-          .and('contain', 'Add a new user to your organization')
+          .and('contain', 'Add members to')
       })
 
       it('navigates to the org usage page', () => {

src/members/components/Members.tsx

@@ -54,7 +54,7 @@ class Members extends PureComponent<Props, State> {
         <TabbedPageHeader
           childrenLeft={
             <SearchWidget
-              placeholderText="Filter members..."
+              placeholderText="Search members"
               searchTerm={searchTerm}
               onSearch={this.handleFilterChange}
             />

src/shared/copy/notifications/categories/accounts-users-orgs.ts

@@ -108,9 +108,9 @@ export const invitationResentSuccessful = (): Notification => ({
   message: `Invitation Re-sent`,
 })
 
-export const inviteSent = (): Notification => ({
+export const inviteSent = ({email, orgName}): Notification => ({
   ...defaultSuccessNotification,
-  message: `Invitation Sent`,
+  message: `Invitation sent to ${email} to join ${orgName}`,
 })
 
 export const invitationWithdrawnFailed = (): Notification => ({

src/users/components/InviteListContextMenu.tsx

@@ -64,7 +64,7 @@ function InviteListContextMenu({invite}: Props) {
         <SquareButton
           titleText="Resend Invitation"
           icon={IconFont.Refresh_New}
-          color={ComponentColor.Secondary}
+          color={ComponentColor.Primary}
           onClick={handleResend}
           testID="resend-invite"
         />

src/users/components/InviteListItem.tsx

@@ -17,7 +17,7 @@ const getDate = datetime => {
   return new Date(datetime).toLocaleDateString()
 }
 
-const InviteListItem: FC<Props> = ({invite}) => {
+export const InviteListItem: FC<Props> = ({invite}) => {
   const {email, role, expiresAt} = invite
 
   return (
@@ -39,5 +39,3 @@ const InviteListItem: FC<Props> = ({invite}) => {
     </IndexList.Row>
   )
 }
-
-export default InviteListItem

src/users/components/UserInviteSubmit.tsx

@@ -13,7 +13,13 @@ import {UsersContext} from 'src/users/context/users'
 // Constants
 import {roles} from 'src/users/constants'
 
-const UserInviteSubmit: FC = () => {
+// Styles
+const buttonStyle = {
+  marginLeft: '10px',
+  maxWidth: '100px',
+}
+
+export const UserInviteSubmit: FC = () => {
   const {draftInvite} = useContext(UsersContext)
 
   const isRoleSelected = roles.includes(draftInvite.role)
@@ -37,14 +43,12 @@ const UserInviteSubmit: FC = () => {
   return (
     <Button
       icon={IconFont.Plus_New}
-      text="Add &amp; Invite"
+      text="Add"
       color={ComponentColor.Primary}
+      style={buttonStyle}
       type={ButtonType.Submit}
       titleText={getTitleText()}
-      className="user-list-invite--button"
       testID="user-list-invite--button"
     />
   )
 }
-
-export default UserInviteSubmit

src/users/components/UserList.scss

@@ -1,8 +1,13 @@
 .user-list-invite--form-panel {
   margin-bottom: $cf-space-l + $cf-space-3xs;
+  padding-bottom: 0px;
 
   .user-list-invite--form-heading {
     color: $c-neutrino;
+    font-size: $cf-text-base-3;
+    font-weight: 700;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
   }
 }
 
@@ -27,6 +32,11 @@
   }
 }
 
+.user-list-invite--instructions {
+  font-weight: 500 !important;
+  margin-bottom: $cf-space-xs !important;
+}
+
 .user-role--dropdown--button,
 .user-role--dropdown-item,
 .user-role--dropdown-item,

src/users/components/UserList.tsx

@@ -4,14 +4,14 @@ import React, {FC, useContext, useState} from 'react'
 // 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'
+import {UserListItem} from 'src/users/components/UserListItem'
+import {InviteListItem} from 'src/users/components/InviteListItem'
 
 // Utils
 import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
 import {filter} from 'src/users/utils/filter'
 
-const UserList: FC = () => {
+export const UserList: FC = () => {
   const {users, invites} = useContext(UsersContext)
 
   const [searchTerm, setSearchTerm] = useState('')
@@ -31,7 +31,7 @@ const UserList: FC = () => {
       <Grid.Row>
         <Grid.Column widthMD={Columns.Ten} widthLG={Columns.Six}>
           <SearchWidget
-            placeholderText="Filter members..."
+            placeholderText="Search members"
             searchTerm={searchTerm}
             onSearch={setSearchTerm}
           />
@@ -61,5 +61,3 @@ const UserList: FC = () => {
     </Grid>
   )
 }
-
-export default UserList

src/users/components/UserListContainer.tsx

@@ -3,8 +3,8 @@ import React, {FC} from 'react'
 import {Page} from '@influxdata/clockface'
 
 // Components
-import UserList from 'src/users/components/UserList'
-import UserListInviteForm from 'src/users/components/UserListInviteForm'
+import {UserList} from 'src/users/components/UserList'
+import {UserListInviteForm} from 'src/users/components/UserListInviteForm'
 import OrgHeader from 'src/organizations/components/OrgHeader'
 import OrgTabbedPage from 'src/organizations/components/OrgTabbedPage'
 

src/users/components/UserListInviteForm.tsx

@@ -1,13 +1,14 @@
 // Libraries
 import React, {ChangeEvent, FC, useContext, useState} from 'react'
+import {useSelector} from 'react-redux'
 
 // Components
 import {UsersContext} from 'src/users/context/users'
-import UserRoleDropdown from './UserRoleDropdown'
-import UserInviteSubmit from './UserInviteSubmit'
+import {UserInviteSubmit} from 'src/users/components/UserInviteSubmit'
 import {
   Columns,
   ComponentSize,
+  FlexBox,
   FontWeight,
   Form,
   Grid,
@@ -19,17 +20,21 @@ import {
 } from '@influxdata/clockface'
 import {gaEvent} from 'src/cloud/utils/reporting'
 
+// Selectors
+import {selectCurrentOrg} from 'src/identity/selectors'
+
 // Constants
 import {GTM_INVITE_SENT} from 'src/users/constants'
 
 interface InviteErrors {
   email?: string
 }
 
-const UserListInviteForm: FC = () => {
+export const UserListInviteForm: FC = () => {
   const [errors, setErrors] = useState<InviteErrors>({})
   const {draftInvite, handleEditDraftInvite, handleInviteUser} =
     useContext(UsersContext)
+  const org = useSelector(selectCurrentOrg)
 
   const onInviteUser = () => {
     handleInviteUser()
@@ -52,32 +57,31 @@ const UserListInviteForm: FC = () => {
                 weight={FontWeight.Light}
                 element={HeadingElement.H2}
                 className="user-list-invite--form-heading"
+                testID="user-list-invite--form-heading"
               >
-                Add a new user to your organization
+                Add members to {org.name}
               </Heading>
             </Panel.Header>
             <Panel.Body size={ComponentSize.Small}>
+              <FlexBox className="user-list-invite--instructions">
+                Members added will have "Owner" access to the organization's
+                resources.
+              </FlexBox>
               <Form onSubmit={onInviteUser} className="user-list-invite--form">
                 <Form.Element
-                  label="Enter user Email Address"
-                  className="element email--input"
+                  label="Email Address"
+                  className="email--input"
                   errorMessage={errors.email}
                 >
                   <Input
                     testID="email--input"
-                    placeholder="email address"
+                    placeholder="name@company.com"
                     onChange={onChangeInvitee}
                     value={draftInvite.email}
                     type={InputType.Email}
                     required={true}
                   />
                 </Form.Element>
-                <Form.Element
-                  label="Assign a Role"
-                  className="element role--dropdown"
-                >
-                  <UserRoleDropdown />
-                </Form.Element>
                 <Form.Element label="" className="element submit--button">
                   <UserInviteSubmit />
                 </Form.Element>
@@ -89,5 +93,3 @@ const UserListInviteForm: FC = () => {
     </Grid>
   )
 }
-
-export default UserListInviteForm