fix(ui): #5731 fix filter issue on redirect to user profile task tab (#5738)

* fix(ui): #5731 fix filter issue on redirect to user profile task tab

* minor fix

* fix prettier

* fix pending task count

* fix failing tests

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx

@@ -187,7 +187,7 @@ const MyData: React.FC<MyDataProps> = ({
         <div className="tw-mt-5" />
       </div>
     );
-  }, [ownedData, followedData]);
+  }, [ownedData, followedData, pendingTaskCount]);
 
   const getLoader = () => {
     return isFeedLoading ? <Loader /> : null;

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx

@@ -15,6 +15,7 @@ import { findByTestId, queryByTestId, render } from '@testing-library/react';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { FeedFilter } from '../../enums/mydata.enum';
+import { ThreadType } from '../../generated/entity/feed/thread';
 import Users from './Users.component';
 
 const mockUserData = {
@@ -194,6 +195,8 @@ const mockProp = {
   isAuthDisabled: true,
   updateUserDetails,
   updateThreadHandler: jest.fn(),
+  setFeedFilter: jest.fn(),
+  threadType: 'Task' as ThreadType.Task,
 };
 
 describe('Test User Component', () => {

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -21,7 +21,6 @@ import React, {
   RefObject,
   useCallback,
   useEffect,
-  useMemo,
   useState,
 } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -83,6 +82,9 @@ const Users = ({
   updateThreadHandler,
   username,
   tab,
+  feedFilter,
+  setFeedFilter,
+  threadType,
 }: Props) => {
   const [activeTab, setActiveTab] = useState(getUserCurrentTab(tab));
   const [elementRef, isInView] = useInfiniteScroll(observerOptions);
@@ -99,13 +101,6 @@ const Users = ({
   const [showFilterList, setShowFilterList] = useState(false);
 
   const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const [feedFilter, setFeedFilter] = useState<FeedFilter>(
-    (searchParams.get('feedFilter') as FeedFilter) ?? FeedFilter.ALL
-  );
-  const threadType = useMemo(() => {
-    return activeTab === 2 ? ThreadType.Task : ThreadType.Conversation;
-  }, [activeTab]);
 
   const handleFilterDropdownChange = useCallback(
     (_e: React.MouseEvent<HTMLElement, MouseEvent>, value?: string) => {
@@ -610,7 +605,7 @@ const Users = ({
       <div className="user-profile-antd-card" data-testid="left-panel">
         <Card
           className="ant-card-feed tw-relative"
-          key="left-panel"
+          key="left-panel-card"
           style={{
             ...leftPanelAntCardStyle,
             marginTop: '12px',

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.interface.ts

@@ -51,4 +51,7 @@ export interface Props {
   postFeedHandler: (value: string, id: string) => void;
   deletePostHandler?: (threadId: string, postId: string) => void;
   updateThreadHandler: ThreadUpdatedFunc;
+  feedFilter: FeedFilter;
+  setFeedFilter: (value: FeedFilter) => void;
+  threadType: ThreadType.Task | ThreadType.Conversation;
 }

openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx

@@ -441,7 +441,7 @@ const MyDataPage = () => {
       undefined,
       ThreadType.Task
     ).then((res: AxiosResponse) => {
-      res.data && setPendingTaskCount(res.data.data.length);
+      res.data && setPendingTaskCount(res.data.paging.total);
     });
   }, [currentUser]);
 
@@ -486,6 +486,7 @@ const MyDataPage = () => {
 
     return () => {
       socket && socket.off(SOCKET_EVENTS.ACTIVITY_FEED);
+      socket && socket.off(SOCKET_EVENTS.TASK_CHANNEL);
     };
   }, [socket]);
 

openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx

@@ -15,8 +15,8 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { isEmpty } from 'lodash';
 import { observer } from 'mobx-react';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { getFeedsWithFilter, postFeedById } from '../../axiosAPIs/feedsAPI';
@@ -29,6 +29,7 @@ import {
   onErrorText,
   onUpdatedConversastionError,
 } from '../../constants/feed.constants';
+import { getUserCurrentTab } from '../../constants/usersprofile.constants';
 import { FeedFilter } from '../../enums/mydata.enum';
 import { Thread, ThreadType } from '../../generated/entity/feed/thread';
 import { User } from '../../generated/entity/teams/user';
@@ -44,8 +45,10 @@ import { showErrorToast } from '../../utils/ToastUtils';
 
 const UserPage = () => {
   const { username, tab } = useParams<{ [key: string]: string }>();
+  const { search } = useLocation();
   const { isAdminUser } = useAuth();
   const { isAuthDisabled } = useAuthContext();
+  const searchParams = new URLSearchParams(location.search);
   const [isLoading, setIsLoading] = useState(true);
   const [userData, setUserData] = useState<User>({} as User);
   const [currentLoggedInUser, setCurrentLoggedInUser] = useState<User>();
@@ -53,6 +56,14 @@ const UserPage = () => {
   const [entityThread, setEntityThread] = useState<Thread[]>([]);
   const [isFeedLoading, setIsFeedLoading] = useState<boolean>(false);
   const [paging, setPaging] = useState<Paging>({} as Paging);
+  const [feedFilter, setFeedFilter] = useState<FeedFilter>(
+    (searchParams.get('feedFilter') as FeedFilter) ?? FeedFilter.ALL
+  );
+  const threadType = useMemo(() => {
+    return getUserCurrentTab(tab) === 2
+      ? ThreadType.Task
+      : ThreadType.Conversation;
+  }, [tab]);
 
   const fetchUserData = () => {
     setUserData({} as User);
@@ -218,6 +229,7 @@ const UserPage = () => {
         <Users
           deletePostHandler={deletePostHandler}
           feedData={entityThread || []}
+          feedFilter={feedFilter}
           fetchFeedHandler={handleFeedFetchFromFeedList}
           isAdminUser={Boolean(isAdminUser)}
           isAuthDisabled={Boolean(isAuthDisabled)}
@@ -225,7 +237,9 @@ const UserPage = () => {
           isLoggedinUser={isLoggedinUser(username)}
           paging={paging}
           postFeedHandler={postFeedHandler}
+          setFeedFilter={setFeedFilter}
           tab={tab}
+          threadType={threadType}
           updateThreadHandler={updateThreadHandler}
           updateUserDetails={updateUserDetails}
           userData={userData}
@@ -246,9 +260,13 @@ const UserPage = () => {
     if (userData.id) {
       const threadType =
         tab === 'tasks' ? ThreadType.Task : ThreadType.Conversation;
-      getFeedData(threadType);
+      const newFeedFilter =
+        (searchParams.get('feedFilter') as FeedFilter) ?? FeedFilter.ALL;
+      setFeedFilter(newFeedFilter);
+      setEntityThread([]);
+      getFeedData(threadType, undefined, newFeedFilter);
     }
-  }, [userData, tab]);
+  }, [userData, tab, search]);
 
   useEffect(() => {
     setEntityThread([]);

openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx

@@ -101,6 +101,7 @@ jest.mock('../../authentication/auth-provider/AuthProvider', () => {
 
 jest.mock('react-router-dom', () => ({
   useParams: jest.fn().mockImplementation(() => ({ username: 'xyz' })),
+  useLocation: jest.fn().mockImplementation(() => new URLSearchParams()),
 }));
 
 jest.mock('../../components/Loader/Loader', () => {