fix(ui): activity feed bugs (#9864)

* Fixed issue with activity feed on homepage where onboarding placeholder was shown if no feed data is present for 'My Data' filter

* improved message shown for no feed data found

* fixed key mismatch for localization file
This commit is contained in:
Aniket Katkar 2023-01-24 09:47:04 +05:30 committed by GitHub
parent f2fb0521c2
commit 3f5277ede9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 13 deletions

View File

@ -28,6 +28,7 @@ export interface ActivityFeedListProp extends HTMLAttributes<HTMLDivElement> {
hideFeedFilter?: boolean; hideFeedFilter?: boolean;
hideThreadFilter?: boolean; hideThreadFilter?: boolean;
refreshFeedCount?: number; refreshFeedCount?: number;
appliedFeedFilter?: FeedFilter;
stickyFilter?: boolean; stickyFilter?: boolean;
onRefreshFeeds?: () => void; onRefreshFeeds?: () => void;
postFeedHandler?: (value: string, id: string) => void; postFeedHandler?: (value: string, id: string) => void;

View File

@ -42,6 +42,7 @@ import FeedListSeparator from './FeedListSeparator';
const ActivityFeedList: FC<ActivityFeedListProp> = ({ const ActivityFeedList: FC<ActivityFeedListProp> = ({
className, className,
feedList, feedList,
appliedFeedFilter,
refreshFeedCount, refreshFeedCount,
onRefreshFeeds, onRefreshFeeds,
withSidePanel = false, withSidePanel = false,
@ -69,7 +70,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
const [fieldListVisible, setFieldListVisible] = useState<boolean>(false); const [fieldListVisible, setFieldListVisible] = useState<boolean>(false);
const [showThreadTypeList, setShowThreadTypeList] = useState<boolean>(false); const [showThreadTypeList, setShowThreadTypeList] = useState<boolean>(false);
const [feedFilter, setFeedFilter] = useState<FeedFilter>( const [feedFilter, setFeedFilter] = useState<FeedFilter>(
isEntityFeed ? FeedFilter.ALL : FeedFilter.OWNER isEntityFeed ? FeedFilter.ALL : appliedFeedFilter ?? FeedFilter.OWNER
); );
const [threadType, setThreadType] = useState<ThreadType>(); const [threadType, setThreadType] = useState<ThreadType>();
@ -77,7 +78,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
(_e: React.MouseEvent<HTMLElement, MouseEvent>, value?: string) => { (_e: React.MouseEvent<HTMLElement, MouseEvent>, value?: string) => {
const feedType = const feedType =
(value as FeedFilter) || (value as FeedFilter) ||
(isEntityFeed ? FeedFilter.ALL : FeedFilter.OWNER); (isEntityFeed ? FeedFilter.ALL : appliedFeedFilter ?? FeedFilter.OWNER);
setFeedFilter(feedType); setFeedFilter(feedType);
setFieldListVisible(false); setFieldListVisible(false);
@ -238,12 +239,19 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
}; };
}, []); }, []);
const showFilterDropdowns = useMemo(
() =>
feedList.length !== 0 ||
feedFilter !== FeedFilter.ALL ||
threadType ||
isFeedLoading,
[feedList, feedFilter, threadType, isFeedLoading]
);
return ( return (
<div className={classNames(className, 'feed-list-container')} id="feedData"> <div className={classNames(className, 'feed-list-container')} id="feedData">
<div className={stickyFilter ? 'filters-wrapper' : ''}> <div className={stickyFilter ? 'filters-wrapper' : ''}>
{feedList.length === 0 && feedFilter === FeedFilter.OWNER && !threadType {showFilterDropdowns && getFilterDropDown()}
? null
: getFilterDropDown()}
</div> </div>
{refreshFeedCount ? ( {refreshFeedCount ? (
<div className="tw-py-px tw-pt-3 tw-pb-3"> <div className="tw-py-px tw-pt-3 tw-pb-3">
@ -297,12 +305,12 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
</> </>
) : ( ) : (
!isFeedLoading && ( !isFeedLoading && (
<div className="h-min-50" data-testid="no-data-placeholder-container"> <div data-testid="no-data-placeholder-container">
{entityName && feedFilter === FeedFilter.ALL && !threadType ? ( {entityName && feedFilter === FeedFilter.ALL && !threadType ? (
<NoFeedPlaceholder entityName={entityName} /> <NoFeedPlaceholder entityName={entityName} />
) : !refreshFeedCount ? ( ) : !refreshFeedCount ? (
<ErrorPlaceHolder> <ErrorPlaceHolder>
{t('message.no-data-available-for-selected-filter')} {t('message.no-feed-available-for-selected-filter')}
</ErrorPlaceHolder> </ErrorPlaceHolder>
) : null} ) : null}
</div> </div>

View File

@ -14,7 +14,6 @@
import { Card } from 'antd'; import { Card } from 'antd';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { import React, {
Fragment,
RefObject, RefObject,
useCallback, useCallback,
useEffect, useEffect,
@ -218,21 +217,31 @@ const MyData: React.FC<MyDataProps> = ({
// Check if feedFilter or ThreadType filter is applied or not // Check if feedFilter or ThreadType filter is applied or not
const filtersApplied = useMemo( const filtersApplied = useMemo(
() => feedFilter === FeedFilter.OWNER && !threadType, () => feedFilter === FeedFilter.ALL && !threadType,
[feedFilter, threadType] [feedFilter, threadType]
); );
const showActivityFeedList = useMemo(
() =>
feedData?.length > 0 ||
!filtersApplied ||
newFeedsLength ||
isFeedLoading,
[feedData, filtersApplied, newFeedsLength, isFeedLoading]
);
return ( return (
<PageLayoutV1 leftPanel={getLeftPanel()} rightPanel={getRightPanel()}> <PageLayoutV1 leftPanel={getLeftPanel()} rightPanel={getRightPanel()}>
{error ? ( {error ? (
<ErrorPlaceHolderES errorMessage={error} type="error" /> <ErrorPlaceHolderES errorMessage={error} type="error" />
) : ( ) : (
<Fragment> <>
{feedData?.length > 0 || !filtersApplied || newFeedsLength ? ( {showActivityFeedList ? (
<> <>
<ActivityFeedList <ActivityFeedList
stickyFilter stickyFilter
withSidePanel withSidePanel
appliedFeedFilter={feedFilter}
deletePostHandler={deletePostHandler} deletePostHandler={deletePostHandler}
feedList={feedData} feedList={feedData}
isFeedLoading={isFeedLoading} isFeedLoading={isFeedLoading}
@ -255,7 +264,7 @@ const MyData: React.FC<MyDataProps> = ({
/> />
{/* Add spacer to work infinite scroll smoothly */} {/* Add spacer to work infinite scroll smoothly */}
<div className="tw-p-4" /> <div className="tw-p-4" />
</Fragment> </>
)} )}
</PageLayoutV1> </PageLayoutV1>
); );

View File

@ -722,13 +722,13 @@
"no-announcement-message": "No Announcements, Click on add announcement to add one.", "no-announcement-message": "No Announcements, Click on add announcement to add one.",
"no-closed-task": "No Closed Tasks", "no-closed-task": "No Closed Tasks",
"no-data-available": "No data available.", "no-data-available": "No data available.",
"no-data-available-for-selected-filter": "No data found. Try changing the filters.",
"no-entity-activity-message": "There is no activity on the {{entity}} yet. Start a conversation by clicking on the", "no-entity-activity-message": "There is no activity on the {{entity}} yet. Start a conversation by clicking on the",
"no-entity-available-with-name": "No {{entity}} available with name", "no-entity-available-with-name": "No {{entity}} available with name",
"no-entity-data-available": "No {{entity}} data available.", "no-entity-data-available": "No {{entity}} data available.",
"no-entity-found-for-name": "No {{entity}} found for {{name}}", "no-entity-found-for-name": "No {{entity}} found for {{name}}",
"no-execution-runs-found": "No execution runs found for the pipeline.", "no-execution-runs-found": "No execution runs found for the pipeline.",
"no-features-data-available": "No features data available", "no-features-data-available": "No features data available",
"no-feed-available-for-selected-filter": "No feed found. Try changing the filters.",
"no-ingestion-available": "No ingestion data available", "no-ingestion-available": "No ingestion data available",
"no-ingestion-description": "To view Ingestion Data, run the metadata ingestion. Please refer to this doc to schedule the", "no-ingestion-description": "To view Ingestion Data, run the metadata ingestion. Please refer to this doc to schedule the",
"no-inherited-roles-found": "No inherited roles found", "no-inherited-roles-found": "No inherited roles found",