Migrate actions/views/profile_popover to TS (#23663)

* Migrate actions/views/profile_popover to TS

* Fix typing

webapp/channels/src/actions/views/profile_popover.test.ts

@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {getChannelMember} from 'mattermost-redux/actions/channels';
+import {getTeamMember} from 'mattermost-redux/actions/teams';
+
+import testConfigureStore from 'tests/test_store';
+
+import {getMembershipForEntities} from './profile_popover';
+
+jest.mock('mattermost-redux/actions/channels', () => ({
+    getChannelMember: jest.fn(() => ({type: 'GET_CHANNEL_MEMBER'})),
+}));
+jest.mock('mattermost-redux/actions/teams', () => ({
+    getTeamMember: jest.fn(() => ({type: 'GET_TEAM_MEMBER'})),
+}));
+
+describe('getMembershipForEntities', () => {
+    const baseState = {
+        entities: {
+            channels: {
+                membersInChannel: {},
+            },
+            teams: {
+                membersInTeam: {},
+            },
+        },
+    };
+
+    const userId = 'userId';
+    const teamId = 'teamId';
+    const channelId = 'channelId';
+
+    const getChannelMemberMock = getChannelMember as jest.Mock;
+    const getTeamMemberMock = getTeamMember as jest.Mock;
+
+    test('should only fetch team member in a DM/GM', () => {
+        const store = testConfigureStore(baseState);
+
+        store.dispatch(getMembershipForEntities(teamId, userId, ''));
+
+        expect(getChannelMemberMock).not.toHaveBeenCalled();
+        expect(getTeamMemberMock).toHaveBeenCalledWith(teamId, userId);
+    });
+
+    test('should fetch both team and channel member for regular channels', () => {
+        const store = testConfigureStore(baseState);
+
+        store.dispatch(getMembershipForEntities(teamId, userId, channelId));
+
+        expect(getChannelMemberMock).toHaveBeenCalledWith(channelId, userId);
+        expect(getTeamMemberMock).toHaveBeenCalledWith(teamId, userId);
+    });
+});

webapp/channels/src/actions/views/profile_popover.ts

@@ -4,8 +4,10 @@
 import {getTeamMember} from 'mattermost-redux/actions/teams';
 import {getChannelMember} from 'mattermost-redux/actions/channels';
 
-export function getMembershipForEntities(teamId, userId, channelId) {
-    return async (dispatch) => {
+import {DispatchFunc} from 'mattermost-redux/types/actions';
+
+export function getMembershipForEntities(teamId: string, userId: string, channelId?: string) {
+    return (dispatch: DispatchFunc) => {
         return Promise.all([
             dispatch(getTeamMember(teamId, userId)),
             channelId && dispatch(getChannelMember(channelId, userId)),

webapp/channels/src/components/profile_popover/index.ts

@@ -11,13 +11,13 @@ import {
     getTeamMember,
 } from 'mattermost-redux/selectors/entities/teams';
 import {
-    getChannelMembersInChannels,
     canManageAnyChannelMembersInCurrentTeam,
     getCurrentChannelId,
     getChannelByName,
+    getChannelMember,
 } from 'mattermost-redux/selectors/entities/channels';
 import {getCallsConfig, getCalls} from 'mattermost-redux/selectors/entities/common';
-import {Action} from 'mattermost-redux/types/actions';
+import {GenericAction} from 'mattermost-redux/types/actions';
 import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentTimezone, isTimezoneEnabled} from 'mattermost-redux/selectors/entities/timezone';
 
@@ -75,7 +75,7 @@ function makeMapStateToProps() {
         const teamMember = getTeamMember(state, team.id, userId);
 
         const isTeamAdmin = Boolean(teamMember && teamMember.scheme_admin);
-        const channelMember = getChannelMembersInChannels(state)?.[channelId]?.[userId];
+        const channelMember = getChannelMember(state, channelId, userId);
 
         let isChannelAdmin = false;
         if (getRhsState(state) !== 'search' && channelMember != null && channelMember.scheme_admin) {
@@ -135,9 +135,9 @@ type Actions = {
     getMembershipForEntities: (teamId: string, userId: string, channelId?: string) => Promise<void>;
 }
 
-function mapDispatchToProps(dispatch: Dispatch) {
+function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
     return {
-        actions: bindActionCreators<ActionCreatorsMapObject<Action>, Actions>({
+        actions: bindActionCreators<ActionCreatorsMapObject, Actions>({
             closeModal,
             openDirectChannelToUserId,
             openModal,

webapp/channels/src/components/profile_popover/profile_popover.tsx

@@ -50,7 +50,7 @@ import BotTag from '../widgets/tag/bot_tag';
 import GuestTag from '../widgets/tag/guest_tag';
 import Tag from '../widgets/tag/tag';
 
-interface ProfilePopoverProps extends Omit<React.ComponentProps<typeof Popover>, 'id'> {
+export interface ProfilePopoverProps extends Omit<React.ComponentProps<typeof Popover>, 'id'> {
 
     /**
      * Source URL from the image to display in the popover

webapp/channels/src/packages/mattermost-redux/src/selectors/entities/channels.ts

@@ -143,6 +143,10 @@ export function getChannelMembersInChannels(state: GlobalState): RelationOneToOn
     return state.entities.channels.membersInChannel;
 }
 
+export function getChannelMember(state: GlobalState, channelId: string, userId: string): ChannelMembership | undefined {
+    return getChannelMembersInChannels(state)[channelId]?.[userId];
+}
+
 // makeGetChannel returns a selector that returns a channel from the store with the following filled in for DM/GM channels:
 // - The display_name set to the other user(s) names, following the Teammate Name Display setting
 // - The teammate_id for DM channels

webapp/channels/src/packages/mattermost-redux/src/selectors/entities/teams.ts

@@ -190,13 +190,8 @@ export const getMembersInCurrentTeam: (state: GlobalState) => RelationOneToOne<U
     },
 );
 
-export function getTeamMember(state: GlobalState, teamId: string, userId: string) {
-    const members = getMembersInTeams(state)[teamId];
-    if (members) {
-        return members[userId];
-    }
-
-    return null;
+export function getTeamMember(state: GlobalState, teamId: string, userId: string): TeamMembership | undefined {
+    return getMembersInTeams(state)[teamId]?.[userId];
 }
 
 export const getListableTeamIds: (state: GlobalState) => Array<Team['id']> = createIdsSelector(