[48399][52129] - Fix permalink and navigation issues between teams (#22934)

* Fix permalink issues with timestamp and navigation between teams

* fix types

* update teamurl

---------

Co-authored-by: Nevyana Angelova <nevyangelova@Nevyanas-MacBook-Pro.local>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/post/index.tsx

@@ -13,7 +13,7 @@ import {
     getBool,
     isCollapsedThreadsEnabled,
 } from 'mattermost-redux/selectors/entities/preferences';
-import {getCurrentTeam, getCurrentTeamId, getTeam, getTeamMemberships} from 'mattermost-redux/selectors/entities/teams';
+import {getCurrentTeam, getTeam, getTeamMemberships} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
 
 import {Emoji} from '@mattermost/types/emojis';
@@ -48,7 +48,6 @@ interface OwnProps {
     post?: Post | UserActivityPost;
     previousPostId?: string;
     postId?: string;
-    teamId?: string;
     shouldHighlight?: boolean;
     location: keyof typeof Locations;
 }
@@ -120,7 +119,6 @@ function makeMapStateToProps() {
         const config = getConfig(state);
         const enableEmojiPicker = config.EnableEmojiPicker === 'true';
         const enablePostUsernameOverride = config.EnablePostUsernameOverride === 'true';
-        const teamId = ownProps.teamId || getCurrentTeamId(state);
         const channel = state.entities.channels.channels[post.channel_id];
         const shortcutReactToLastPostEmittedFrom = getShortcutReactToLastPostEmittedFrom(state);
 
@@ -148,6 +146,7 @@ function makeMapStateToProps() {
         }
 
         const currentTeam = getCurrentTeam(state);
+        const team = getTeam(state, channel.team_id);
         let teamName = currentTeam.name;
         let teamDisplayName = '';
 
@@ -159,7 +158,6 @@ function makeMapStateToProps() {
             !isDMorGM && // Not show for DM or GMs since they don't belong to a team
             memberships && Object.values(memberships).length > 1 // Not show if the user only belongs to one team
         ) {
-            const team = getTeam(state, channel.team_id);
             teamDisplayName = team?.display_name;
             teamName = team?.name || currentTeam.name;
         }
@@ -186,7 +184,6 @@ function makeMapStateToProps() {
             enablePostUsernameOverride,
             isEmbedVisible: isEmbedVisible(state, post.id),
             isReadOnly: false,
-            teamId,
             currentUserId: getCurrentUserId(state),
             isFirstReply: previousPost ? isFirstReply(post, previousPost) : false,
             hasReplies: getReplyCount(state, post) > 0,
@@ -200,7 +197,8 @@ function makeMapStateToProps() {
             compactDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
             colorizeUsernames: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLORIZE_USERNAMES, Preferences.COLORIZE_USERNAMES_DEFAULT) === 'true',
             shouldShowActionsMenu: shouldShowActionsMenu(state, post),
-
+            currentTeam,
+            team,
             shortcutReactToLastPostEmittedFrom,
             isBot,
             collapsedThreadsEnabled: isCollapsedThreadsEnabled(state),

webapp/channels/src/components/post/post_component.tsx

@@ -50,10 +50,12 @@ import {Emoji} from '@mattermost/types/emojis';
 
 import PostUserProfile from './user_profile';
 import PostOptions from './post_options';
+import {Team} from '@mattermost/types/teams';
 
 export type Props = {
     post: Post;
-    teamId: string;
+    currentTeam: Team;
+    team?: Team;
     currentUserId: string;
     compactDisplay?: boolean;
     colorizeUsernames?: boolean;
@@ -123,6 +125,7 @@ const PostComponent = (props: Props): JSX.Element => {
     const isRHS = props.location === Locations.RHS_ROOT || props.location === Locations.RHS_COMMENT || props.location === Locations.SEARCH;
     const postRef = useRef<HTMLDivElement>(null);
     const postHeaderRef = useRef<HTMLDivElement>(null);
+    const teamId = props.team?.id || props.currentTeam.id;
 
     const [hover, setHover] = useState(false);
     const [a11yActive, setA11y] = useState(false);
@@ -355,7 +358,15 @@ const PostComponent = (props: Props): JSX.Element => {
             return;
         }
         props.actions.selectPostFromRightHandSideSearch(post);
-    }, [post, props.actions]);
+    }, [post, props.actions, props.actions.selectPostFromRightHandSideSearch]);
+
+    const handleThreadClick = useCallback((e: React.MouseEvent) => {
+        if (props.currentTeam.id === props.team?.id) {
+            handleCommentClick(e);
+        } else {
+            handleJumpClick(e);
+        }
+    }, [handleCommentClick, handleJumpClick]);
 
     const postClass = classNames('post__body', {'post--edited': PostUtils.isEdited(post), 'search-item-snippet': isSearchResultItem});
 
@@ -435,7 +446,7 @@ const PostComponent = (props: Props): JSX.Element => {
     const threadFooter = props.location !== Locations.RHS_ROOT && props.isCollapsedThreadsEnabled && !post.root_id && (props.hasReplies || post.is_following) ? (
         <ThreadFooter
             threadId={post.id}
-            replyClick={handleCommentClick}
+            replyClick={handleThreadClick}
         />
     ) : null;
     const currentPostDay = getDateForUnixTicks(post.create_at);
@@ -538,6 +549,7 @@ const PostComponent = (props: Props): JSX.Element => {
                                 {((!hideProfilePicture && props.location === Locations.CENTER) || hover || props.location !== Locations.CENTER) &&
                                     <PostTime
                                         isPermalink={!(Posts.POST_DELETED === post.state || isPostPendingOrFailed(post))}
+                                        teamName={props.team?.name}
                                         eventTime={post.create_at}
                                         postId={post.id}
                                         location={props.location}
@@ -577,6 +589,7 @@ const PostComponent = (props: Props): JSX.Element => {
                             {!props.isPostBeingEdited &&
                             <PostOptions
                                 {...props}
+                                teamId={teamId}
                                 setActionsMenuInitialisationState={props.actions.setActionsMenuInitialisationState}
                                 handleDropdownOpened={handleDropdownOpened}
                                 handleCommentClick={handleCommentClick}

webapp/channels/src/components/threading/channel_threads/thread_footer/thread_footer.tsx

@@ -70,7 +70,7 @@ function ThreadFooter({
         trackEvent('crt', 'replied_using_footer');
         e.stopPropagation();
         dispatch(selectPost({id: threadId, channel_id: channelId} as Post));
-    }, [dispatch, replyClick, threadId, channelId]);
+    }, [replyClick, threadId, channelId]);
 
     const handleFollowing = useCallback((e) => {
         e.stopPropagation();

webapp/channels/src/components/threading/virtualized_thread_viewer/index.ts

@@ -52,7 +52,6 @@ function makeMapStateToProps() {
             directTeammate,
             lastPost,
             replyListIds,
-            teamId: channel.team_id,
         };
     };
 }

webapp/channels/src/components/threading/virtualized_thread_viewer/reply/reply.tsx

@@ -16,7 +16,6 @@ type Props = {
     onCardClick: (post: Post) => void;
     post: Post;
     previousPostId: string;
-    teamId: string;
     timestampProps?: Partial<TimestampProps>;
     id?: Post['id'];
 }
@@ -27,7 +26,6 @@ function Reply({
     onCardClick,
     post,
     previousPostId,
-    teamId,
     timestampProps,
 }: Props) {
     return (
@@ -37,7 +35,6 @@ function Reply({
             isLastPost={isLastPost}
             post={post}
             previousPostId={previousPostId}
-            teamId={teamId}
             timestampProps={timestampProps}
             location={Locations.RHS_COMMENT}
         />

webapp/channels/src/components/threading/virtualized_thread_viewer/thread_viewer_row.tsx

@@ -25,7 +25,6 @@ type Props = {
     listId: string;
     onCardClick: (post: Post) => void;
     previousPostId: string;
-    teamId: string;
     timestampProps?: Partial<TimestampProps>;
 };
 
@@ -38,7 +37,6 @@ function ThreadViewerRow({
     listId,
     onCardClick,
     previousPostId,
-    teamId,
     timestampProps,
 }: Props) {
     switch (true) {
@@ -61,7 +59,6 @@ function ThreadViewerRow({
                 postId={listId}
                 isLastPost={isLastPost}
                 handleCardClick={onCardClick}
-                teamId={teamId}
                 timestampProps={timestampProps}
                 location={Locations.RHS_ROOT}
             />
@@ -87,7 +84,6 @@ function ThreadViewerRow({
                 isLastPost={isLastPost}
                 onCardClick={onCardClick}
                 previousPostId={previousPostId}
-                teamId={teamId}
                 timestampProps={timestampProps}
             />
         );

webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx

@@ -34,7 +34,6 @@ type Props = {
     onCardClick: (post: Post) => void;
     replyListIds: string[];
     selected: Post | FakePost;
-    teamId: string;
     useRelativeTimestamp: boolean;
     isThreadView: boolean;
 }
@@ -401,7 +400,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
                     listId={itemId}
                     onCardClick={this.props.onCardClick}
                     previousPostId={getPreviousPostId(data, index)}
-                    teamId={this.props.teamId}
                     timestampProps={this.props.useRelativeTimestamp ? THREADING_TIME : undefined}
                 />
             </div>