Users management: Include Viewer role in the team members list

client/data/viewers/use-viewer-query.js

@@ -0,0 +1,13 @@
+import { useQuery } from 'react-query';
+import wpcom from 'calypso/lib/wp';
+
+const useViewerQuery = ( siteId, userId ) => {
+	return useQuery( [ 'viewer', userId ], () =>
+		wpcom.req.get( {
+			path: `/sites/${ siteId }/viewer/${ userId }?http_envelope=1`,
+			apiNamespace: 'rest/v1.1',
+		} )
+	);
+};
+
+export default useViewerQuery;

client/my-sites/people/controller.js

@@ -15,6 +15,7 @@ import PeopleInvites from './people-invites';
 import SubscriberDetails from './subscriber-details';
 import SubscribersTeam from './subscribers-team';
 import TeamInvite from './team-invite';
+import ViewerDetails from './viewer-details';
 
 export default {
 	redirectToTeam,
@@ -53,6 +54,10 @@ export default {
 		renderTeamMembers( context, next );
 	},
 
+	viewerTeamMember( context, next ) {
+		renderViewerTeamMember( context, next );
+	},
+
 	subscribers( context, next ) {
 		renderSubscribers( context, next );
 	},
@@ -230,3 +235,20 @@ function renderSingleTeamMember( context, next ) {
 	);
 	next();
 }
+
+function renderViewerTeamMember( context, next ) {
+	const SingleTeamMemberTitle = () => {
+		const translate = useTranslate();
+
+		return <DocumentHead title={ translate( 'View Team Member', { textOnly: true } ) } />;
+	};
+
+	context.primary = (
+		<>
+			<SingleTeamMemberTitle />
+			<ViewerDetails userId={ context.params.user_id } />
+		</>
+	);
+
+	next();
+}

client/my-sites/people/index.js

@@ -22,6 +22,16 @@ export default function () {
 		clientRender
 	);
 
+	page(
+		'/people/:filter(viewers)/:site_id/:user_id',
+		peopleController.enforceSiteEnding,
+		siteSelection,
+		navigation,
+		peopleController.viewerTeamMember,
+		makeLayout,
+		clientRender
+	);
+
 	page( '/people/invites', siteSelection, sites, makeLayout, clientRender );
 
 	page(

client/my-sites/people/people-list-item/index.jsx

@@ -23,10 +23,12 @@ class PeopleListItem extends PureComponent {
 		site: PropTypes.object,
 		invite: PropTypes.object,
 		showStatus: PropTypes.bool,
+		clickableItem: PropTypes.bool,
 		RevokeClearBtn: PropTypes.elementType,
 	};
 
 	static defaultProps = {
+		clickableItem: true,
 		RevokeClearBtn: null,
 	};
 
@@ -60,7 +62,11 @@ class PeopleListItem extends PureComponent {
 	};
 
 	maybeGetCardLink = () => {
-		const { invite, site, type, user } = this.props;
+		const { invite, site, type, user, clickableItem } = this.props;
+
+		if ( ! clickableItem ) {
+			return false;
+		}
 
 		switch ( type ) {
 			case 'invite-details':
@@ -78,6 +84,9 @@ class PeopleListItem extends PureComponent {
 				);
 			}
 
+			case 'viewer':
+				return `/people/viewers/${ site.slug }/${ user.ID }`;
+
 			default:
 				return this.canLinkToProfile() && `/people/edit/${ site.slug }/${ user.login }`;
 		}

client/my-sites/people/people-profile/index.jsx

@@ -289,6 +289,17 @@ const PeopleProfile = ( { siteId, type, user, invite, showDate, showRole = true
 		);
 	};
 
+	const renderViewerRole = () => {
+		const role = 'viewer';
+		return (
+			<div className="people-profile__badges">
+				<div className={ classNames( 'people-profile__role-badge', getRoleBadgeClass( role ) ) }>
+					{ getRoleBadgeText( role ) }
+				</div>
+			</div>
+		);
+	};
+
 	const isFollowerType = () => {
 		return user && ! user.roles && user.date_subscribed;
 	};
@@ -307,6 +318,7 @@ const PeopleProfile = ( { siteId, type, user, invite, showDate, showRole = true
 				{ renderLogin() }
 				{ showDate && renderSubscribedDate() }
 				{ showRole && isFollowerType() ? renderSubscribedRole() : renderRole() }
+				{ type === 'viewer' && renderViewerRole() }
 			</div>
 		</div>
 	);

client/my-sites/people/subscriber-details/index.tsx

@@ -15,7 +15,7 @@ import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import PeopleListItem from 'calypso/my-sites/people/people-list-item';
 import { recordGoogleEvent } from 'calypso/state/analytics/actions';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
-import type { Follower } from 'calypso/my-sites/people/subscribers/types';
+import type { Member } from '../types';
 
 import './style.scss';
 
@@ -74,7 +74,7 @@ export default function SubscriberDetails( props: Props ) {
 		page.back( fallback );
 	}
 
-	function removeSubscriber( subscriber: Follower ) {
+	function removeSubscriber( subscriber: Member ) {
 		const listType = 'email' === subscriberType ? 'Email Follower' : 'Follower';
 		dispatch(
 			recordGoogleEvent( 'People', 'Clicked Remove Follower Button On ' + listType + ' list' )
@@ -115,7 +115,7 @@ export default function SubscriberDetails( props: Props ) {
 	}
 
 	return (
-		<Main className="people-subscriber-details">
+		<Main className="people-member-details">
 			<PageViewTracker path="/people/subscribers/:site/:id" title="People > User Details" />
 
 			<FormattedHeader
@@ -142,27 +142,27 @@ export default function SubscriberDetails( props: Props ) {
 			) }
 
 			{ templateState === 'default' && (
-				<Card className="subscriber-details">
+				<Card className="member-details">
 					<PeopleListItem
 						key={ `subscriber-details-${ subscriberId }` }
 						site={ site }
 						user={ subscriber }
 						onRemove={ onRemove }
 					/>
-					<div className="people-subscriber-details__meta">
+					<div className="people-member-details__meta">
 						{ subscriber?.date_subscribed && (
-							<div className="people-subscriber-details__meta-item">
+							<div className="people-member-details__meta-item">
 								<strong>{ _( 'Status' ) }</strong>
 								<div>
-									<span className="people-subscriber-details__meta-status-active">
+									<span className="people-member-details__meta-status-active">
 										{ _( 'Active' ) }
 									</span>
 								</div>
 							</div>
 						) }
 
 						{ subscriber?.date_subscribed && (
-							<div className="people-subscriber-details__meta-item">
+							<div className="people-member-details__meta-item">
 								<strong>{ _( 'Subscriber since' ) }</strong>
 								<div>
 									<span>{ moment( subscriber?.date_subscribed ).format( 'LLL' ) }</span>
@@ -171,7 +171,7 @@ export default function SubscriberDetails( props: Props ) {
 						) }
 
 						{ subscriber?.url && (
-							<div className="people-subscriber-details__meta-item">
+							<div className="people-member-details__meta-item">
 								<strong>{ _( 'Source' ) }</strong>
 								<div>
 									<span>{ subscriber.url }</span>

client/my-sites/people/subscriber-details/style.scss

@@ -1,15 +1,15 @@
-.subscriber-details {
+.member-details {
 	.people-list-item.card.is-compact {
 		padding: 0;
 	}
 
-	.people-subscriber-details__meta {
+	.people-member-details__meta {
 		border-top: 1px solid var(--color-border-subtle);
 		padding-top: 24px;
 		margin-top: 24px;
 	}
 
-	.people-subscriber-details__meta-item {
+	.people-member-details__meta-item {
 		margin-bottom: 1rem;
 		overflow: hidden;
 		white-space: nowrap;
@@ -19,7 +19,7 @@
 			color: var(--studio-gray-70);
 		}
 
-		.people-subscriber-details__meta-status {
+		.people-member-details__meta-status {
 			&-pending {
 				color: var(--color-warning);
 			}

client/my-sites/people/subscribers-team/index.tsx

@@ -13,7 +13,6 @@ import { getSelectedSite } from 'calypso/state/ui/selectors';
 import PeopleSectionNavCompact from '../people-section-nav-compact';
 import Subscribers from '../subscribers';
 import TeamInvites from '../team-invites';
-import TeamInvitesAccepted from '../team-invites-accepted';
 import TeamMembers from '../team-members';
 import type { FollowersQuery } from '../subscribers/types';
 import type { UsersQuery } from '../team-members/types';
@@ -29,12 +28,14 @@ function SubscribersTeam( props: Props ) {
 
 	// fetching data config
 	const followersFetchOptions = { search };
+	const defaultTeamFetchOptions = { include_viewers: true };
 	const teamFetchOptions = search
 		? {
 				search: `*${ search }*`,
-				search_columns: [ 'display_name', 'user_login' ],
+				search_columns: [ 'display_name', 'user_login', 'user_email' ],
+				...defaultTeamFetchOptions,
 		  }
-		: {};
+		: defaultTeamFetchOptions;
 
 	const followersQuery = useFollowersQuery(
 		site?.ID,
@@ -103,7 +104,6 @@ function SubscribersTeam( props: Props ) {
 
 									<TeamMembers search={ search } usersQuery={ usersQuery } />
 									<TeamInvites />
-									<TeamInvitesAccepted />
 								</>
 							);
 					}

client/my-sites/people/subscribers/index.tsx

@@ -12,7 +12,8 @@ import PeopleListItem from 'calypso/my-sites/people/people-list-item';
 import { recordGoogleEvent } from 'calypso/state/analytics/actions';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import PeopleListSectionHeader from '../people-list-section-header';
-import type { Follower, FollowersQuery } from './types';
+import type { Member } from '../types';
+import type { FollowersQuery } from './types';
 
 import './style.scss';
 
@@ -49,11 +50,11 @@ function Subscribers( props: Props ) {
 		);
 	}
 
-	function getFollowerRef( follower: Follower ) {
+	function getFollowerRef( follower: Member ) {
 		return 'follower-' + follower.ID;
 	}
 
-	function renderFollower( follower: Follower ) {
+	function renderFollower( follower: Member ) {
 		return (
 			<PeopleListItem
 				key={ follower?.ID }

client/my-sites/people/subscribers/types.ts

@@ -1,24 +1,10 @@
-export type Follower = {
-	ID: number | string;
-	url?: string;
-	label: string;
-	login: string;
-	avatar: string;
-	avatar_URL: string;
-	date_subscribed: string;
-	follow_data?: any;
-};
+import type { Member, UseQuery } from '../types';
 
 export type FollowersQueryData = {
-	followers: Follower[];
+	followers: Member[];
 	total: number;
 };
 
 export type FollowersQuery = {
 	data?: FollowersQueryData;
-	hasNextPage: boolean;
-	refetch: () => void;
-	fetchNextPage: () => void;
-	isLoading: boolean;
-	isFetchingNextPage: boolean;
-};
+} & UseQuery;

client/my-sites/people/team-invites/types.ts

@@ -1,11 +1,11 @@
-import { UserData as User } from 'calypso/lib/user/user';
+import type { Member } from '../types';
 
 export type Invite = {
 	key: string;
-	user: User;
+	user: Member;
 	role: string;
 	isPending: boolean;
-	invitedBy: User;
+	invitedBy: Member;
 	inviteDate: string;
 	acceptedDate?: string;
 };

client/my-sites/people/team-members/index.tsx

@@ -2,11 +2,11 @@ import { Card, Button } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import { useSelector } from 'react-redux';
 import InfiniteList from 'calypso/components/infinite-list';
-import { UserData as User } from 'calypso/lib/user/user';
 import NoResults from 'calypso/my-sites/no-results';
 import PeopleListItem from 'calypso/my-sites/people/people-list-item';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import PeopleListSectionHeader from '../people-list-section-header';
+import type { Member } from '../types';
 import type { UsersQuery } from './types';
 
 import './style.scss';
@@ -28,7 +28,7 @@ function TeamMembers( props: Props ) {
 
 	const addTeamMemberLink = `/people/new/${ site?.slug }`;
 
-	function getPersonRef( user: User ) {
+	function getPersonRef( user: Member ) {
 		return 'user-' + user?.ID;
 	}
 
@@ -49,8 +49,10 @@ function TeamMembers( props: Props ) {
 		return _( 'You have %(number)d team member', 'You have %(number)d team members', options );
 	}
 
-	function renderPerson( user: User ) {
-		return <PeopleListItem key={ user?.ID } user={ user } site={ site } type="email" />;
+	function renderPerson( user: Member ) {
+		const type = user.roles ? 'email' : 'viewer';
+
+		return <PeopleListItem key={ user?.ID } user={ user } site={ site } type={ type } />;
 	}
 
 	function renderLoadingPeople() {

client/my-sites/people/team-members/types.ts

@@ -1,15 +1,10 @@
-import { UserData as User } from 'calypso/lib/user/user';
+import type { Member, UseQuery } from '../types';
 
 export type UsersQueryData = {
-	users: User[];
+	users: Member[];
 	total: number;
 };
 
 export type UsersQuery = {
 	data?: UsersQueryData;
-	hasNextPage: boolean;
-	refetch: () => void;
-	fetchNextPage: () => void;
-	isLoading: boolean;
-	isFetchingNextPage: boolean;
-};
+} & UseQuery;