From 67c4493892c1a68354de03cad4e240d9b008b3b7 Mon Sep 17 00:00:00 2001 From: Chirag Madlani Date: Wed, 29 Jun 2022 20:48:47 +0530 Subject: [PATCH] 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 --- .../components/MyData/MyData.component.tsx | 2 +- .../components/Users/Users.component.test.tsx | 3 +++ .../src/components/Users/Users.component.tsx | 13 +++------- .../src/components/Users/Users.interface.ts | 3 +++ .../pages/MyDataPage/MyDataPage.component.tsx | 3 ++- .../src/pages/UserPage/UserPage.component.tsx | 26 ++++++++++++++++--- .../ui/src/pages/UserPage/UserPage.test.tsx | 1 + 7 files changed, 36 insertions(+), 15 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx index f7b0c0fc20f..62443ff8b6a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx @@ -187,7 +187,7 @@ const MyData: React.FC = ({
); - }, [ownedData, followedData]); + }, [ownedData, followedData, pendingTaskCount]); const getLoader = () => { return isFeedLoading ? : null; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx index 60e49b9fdd5..09bdc77d209 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx +++ b/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', () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx index fe998edece7..2fe71d316f3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx +++ b/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( - (searchParams.get('feedFilter') as FeedFilter) ?? FeedFilter.ALL - ); - const threadType = useMemo(() => { - return activeTab === 2 ? ThreadType.Task : ThreadType.Conversation; - }, [activeTab]); const handleFilterDropdownChange = useCallback( (_e: React.MouseEvent, value?: string) => { @@ -610,7 +605,7 @@ const Users = ({
void; deletePostHandler?: (threadId: string, postId: string) => void; updateThreadHandler: ThreadUpdatedFunc; + feedFilter: FeedFilter; + setFeedFilter: (value: FeedFilter) => void; + threadType: ThreadType.Task | ThreadType.Conversation; } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx index 91d75fc42e4..bdd7ab61804 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx +++ b/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]); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx index b7f5487eeeb..1ffbd2fd9e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx +++ b/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({} as User); const [currentLoggedInUser, setCurrentLoggedInUser] = useState(); @@ -53,6 +56,14 @@ const UserPage = () => { const [entityThread, setEntityThread] = useState([]); const [isFeedLoading, setIsFeedLoading] = useState(false); const [paging, setPaging] = useState({} as Paging); + const [feedFilter, setFeedFilter] = useState( + (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 = () => { { 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([]); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx index d3f86948381..bdd2e09f0d9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx +++ b/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', () => {