= ({
- threads,
- className,
- selectedThreadId,
- onThreadIdSelect,
- onThreadSelect,
- onConfirmation,
- postFeed,
- updateThreadHandler,
- editAnnouncementPermission,
-}) => {
- const { t } = useTranslation();
- const { updatedFeedList: updatedThreads } =
- getFeedListWithRelativeDays(threads);
-
- const toggleReplyEditor = (id: string) => {
- onThreadIdSelect(selectedThreadId === id ? '' : id);
- };
-
- const activeAnnouncements = updatedThreads.filter(
- (thread) =>
- thread.announcement &&
- isActiveAnnouncement(
- thread.announcement?.startTime,
- thread.announcement?.endTime
- )
- );
-
- const inActiveAnnouncements = updatedThreads.filter(
- (thread) =>
- !(
- thread.announcement &&
- isActiveAnnouncement(
- thread.announcement?.startTime,
- thread.announcement?.endTime
- )
- )
- );
-
- const getAnnouncements = (announcements: Thread[]) => {
- return announcements.map((thread, index) => {
- const mainFeed = {
- message: thread.message,
- postTs: thread.threadTs,
- from: thread.createdBy,
- id: thread.id,
- reactions: thread.reactions,
- } as Post;
-
- const postLength = thread?.posts?.length || 0;
- const replies = thread.postsCount ? thread.postsCount - 1 : 0;
- const repliedUsers = [
- ...new Set((thread?.posts || []).map((f) => f.from)),
- ];
- const repliedUniqueUsersList = repliedUsers.slice(
- 0,
- postLength >= 3 ? 2 : 1
- );
- const lastPost = thread?.posts?.[postLength - 1];
-
- return (
-
-
-
-
- );
- });
- };
-
- return (
- ;
+
+export interface AnnouncementThreadProp extends HTMLAttributes {
+ threadLink: string;
+ threadType?: ThreadType;
+ open?: boolean;
+ postFeedHandler: (value: string, id: string) => Promise;
+ createThread: (data: CreateThread) => Promise;
+ updateThreadHandler: ThreadUpdatedFunction;
+ onCancel?: () => void;
+ deletePostHandler?: (
+ threadId: string,
+ postId: string,
+ isThread: boolean
+ ) => Promise;
+}
+
+export interface AnnouncementThreadBodyProp
+ extends HTMLAttributes,
+ Pick<
+ AnnouncementThreadProp,
+ | 'threadLink'
+ | 'updateThreadHandler'
+ | 'postFeedHandler'
+ | 'deletePostHandler'
+ > {
+ refetchThread: boolean;
+ editPermission: boolean;
+}
+
+export interface AnnouncementThreadListProp
+ extends HTMLAttributes,
+ Pick {
+ editPermission: boolean;
+ threads: Thread[];
+ postFeed: (value: string, id: string) => Promise;
+ onConfirmation: (data: ConfirmState) => void;
+}
+
+export interface AnnouncementFeedCardProp {
+ feed: Post;
+ task: Thread;
+ editPermission: boolean;
+ onConfirmation: (data: ConfirmState) => void;
+ updateThreadHandler: ThreadUpdatedFunction;
+ postFeed: (value: string, id: string) => Promise;
+}
+
+export interface AnnouncementFeedCardBodyProp
+ extends HTMLAttributes {
+ feed: Post;
+ editPermission: boolean;
+ entityLink?: string;
+ isThread?: boolean;
+ task: Thread;
+ announcementDetails?: AnnouncementDetails;
+ showRepliesButton?: boolean;
+ isReplyThreadOpen?: boolean;
+ onReply?: () => void;
+ onConfirmation: (data: ConfirmState) => void;
+ showReplyThread?: () => void;
+ updateThreadHandler: ThreadUpdatedFunc;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCard.component.tsx
new file mode 100644
index 00000000000..48479fcf23b
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCard.component.tsx
@@ -0,0 +1,168 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Card, Col, Row } from 'antd';
+import { AxiosError } from 'axios';
+import { Operation } from 'fast-json-patch';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Post } from '../../generated/entity/feed/thread';
+import { getFeedById } from '../../rest/feedsAPI';
+import { showErrorToast } from '../../utils/ToastUtils';
+import ActivityFeedEditor from '../ActivityFeed/ActivityFeedEditor/ActivityFeedEditor';
+import AnnouncementBadge from '../ActivityFeed/Shared/AnnouncementBadge';
+import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
+import { AnnouncementFeedCardProp } from './Announcement.interface';
+import './announcement.less';
+import AnnouncementFeedCardBody from './AnnouncementFeedCardBody.component';
+
+const AnnouncementFeedCard = ({
+ feed,
+ task,
+ editPermission,
+ postFeed,
+ onConfirmation,
+ updateThreadHandler,
+}: AnnouncementFeedCardProp) => {
+ const { t } = useTranslation();
+ const [isReplyThreadVisible, setIsReplyThreadVisible] =
+ useState(false);
+ const [postFeedData, setPostFeedData] = useState([]);
+
+ const fetchAnnouncementThreadData = async () => {
+ try {
+ const res = await getFeedById(task.id);
+ setPostFeedData(res.data.posts ?? []);
+ } catch (err) {
+ showErrorToast(
+ err as AxiosError,
+ t('message.entity-fetch-error', {
+ entity: t('label.message-lowercase-plural'),
+ })
+ );
+ }
+ };
+
+ const handleUpdateThreadHandler = async (
+ threadId: string,
+ postId: string,
+ isThread: boolean,
+ data: Operation[]
+ ) => {
+ await updateThreadHandler(threadId, postId, isThread, data);
+
+ if (isReplyThreadVisible) {
+ fetchAnnouncementThreadData();
+ }
+ };
+
+ const handleSaveReply = async (value: string) => {
+ await postFeed(value, task.id);
+
+ if (isReplyThreadVisible) {
+ fetchAnnouncementThreadData();
+ }
+ };
+
+ const handleOpenReplyThread = () => {
+ fetchAnnouncementThreadData();
+ setIsReplyThreadVisible((prev) => !prev);
+ };
+
+ const postFeedReplies = useMemo(
+ () =>
+ postFeedData.map((reply) => (
+
+
+
+ {isReplyThreadVisible && (
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default AnnouncementFeedCard;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCard.test.tsx
new file mode 100644
index 00000000000..5ebbb589bc7
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCard.test.tsx
@@ -0,0 +1,165 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+ MOCK_ANNOUNCEMENT_DATA,
+ MOCK_ANNOUNCEMENT_FEED_DATA,
+} from '../../mocks/Announcement.mock';
+import { getFeedById } from '../../rest/feedsAPI';
+import AnnouncementFeedCard from './AnnouncementFeedCard.component';
+
+jest.mock('../../rest/feedsAPI', () => ({
+ getFeedById: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+jest.mock('./AnnouncementFeedCardBody.component', () =>
+ jest
+ .fn()
+ .mockImplementation(
+ ({ showReplyThread, updateThreadHandler, onConfirmation, onReply }) => (
+ <>
+ (null);
+ const [feedDetail, setFeedDetail] = useState(feed);
+
+ const [visible, setVisible] = useState(false);
+ const [isEditAnnouncement, setIsEditAnnouncement] = useState(false);
+ const [isEditPost, setIsEditPost] = useState(false);
+
+ const isAuthor = feedDetail.from === currentUser?.name;
+
+ const { id: threadId, type: feedType, posts } = task;
+
+ const repliesPostAvatarGroup = useMemo(() => {
+ return (
+
+ {(posts ?? []).map((u) => (
+
+ );
+ }, [posts]);
+
+ const onFeedUpdate = (data: Operation[]) => {
+ updateThreadHandler(
+ threadId ?? feedDetail.id,
+ feedDetail.id,
+ Boolean(isThread),
+ data
+ );
+ };
+
+ const onReactionSelect = (
+ reactionType: ReactionType,
+ reactionOperation: ReactionOperation
+ ) => {
+ let updatedReactions = feedDetail.reactions || [];
+ if (reactionOperation === ReactionOperation.ADD) {
+ const reactionObject = {
+ reactionType,
+ user: {
+ id: currentUser?.id as string,
+ },
+ };
+
+ updatedReactions = [...updatedReactions, reactionObject as Reaction];
+ } else {
+ updatedReactions = updatedReactions.filter(
+ (reaction) =>
+ !(
+ reaction.reactionType === reactionType &&
+ reaction.user.id === currentUser?.id
+ )
+ );
+ }
+
+ const patch = compare(
+ { ...feedDetail, reactions: [...(feedDetail.reactions || [])] },
+ {
+ ...feedDetail,
+ reactions: updatedReactions,
+ }
+ );
+
+ if (!isEmpty(patch)) {
+ onFeedUpdate(patch);
+ }
+ };
+
+ const handleAnnouncementUpdate = (
+ title: string,
+ announcement: AnnouncementDetails
+ ) => {
+ const existingAnnouncement = {
+ ...feedDetail,
+ announcement: announcementDetails,
+ };
+
+ const updatedAnnouncement = {
+ ...feedDetail,
+ message: title,
+ announcement,
+ };
+
+ const patch = compare(existingAnnouncement, updatedAnnouncement);
+
+ if (!isEmpty(patch)) {
+ onFeedUpdate(patch);
+ }
+ setIsEditAnnouncement(false);
+ };
+
+ const handlePostUpdate = (message: string) => {
+ const updatedPost = { ...feedDetail, message };
+
+ const patch = compare(feedDetail, updatedPost);
+
+ if (!isEmpty(patch)) {
+ onFeedUpdate(patch);
+ }
+ setIsEditPost(false);
+ };
+
+ const handleThreadEdit = () => {
+ if (announcementDetails) {
+ setIsEditAnnouncement(true);
+ } else {
+ setIsEditPost(true);
+ }
+ };
+
+ const handleVisibleChange = (newVisible: boolean) => setVisible(newVisible);
+
+ const onHide = () => setVisible(false);
+
+ useEffect(() => {
+ setFeedDetail(feed);
+ }, [feed]);
+
+ return (
+ ([]);
+ const [confirmationState, setConfirmationState] = useState(
+ confirmStateInitialValue
+ );
+ const [isThreadLoading, setIsThreadLoading] = useState(true);
+
+ const getThreads = async (after?: string) => {
+ setIsThreadLoading(true);
+
+ try {
+ const res = await getAllFeeds(
+ threadLink,
+ after,
+ ThreadType.Announcement,
+ FeedFilter.ALL
+ );
+
+ setThreads(res.data);
+ } catch (error) {
+ showErrorToast(
+ error as AxiosError,
+ t('server.entity-fetch-error', {
+ entity: t('label.thread-plural-lowercase'),
+ })
+ );
+ } finally {
+ setIsThreadLoading(false);
+ }
+ };
+
+ const loadNewThreads = () => {
+ setTimeout(() => {
+ getThreads();
+ }, 500);
+ };
+
+ const onDiscard = () => {
+ setConfirmationState(confirmStateInitialValue);
+ };
+
+ const onPostDelete = async (): Promise => {
+ if (confirmationState.postId && confirmationState.threadId) {
+ await deletePostHandler?.(
+ confirmationState.threadId,
+ confirmationState.postId,
+ confirmationState.isThread
+ );
+ }
+ onDiscard();
+ loadNewThreads();
+ };
+
+ const onConfirmation = (data: ConfirmState) => {
+ setConfirmationState(data);
+ };
+
+ const postFeed = async (value: string, id: string): Promise => {
+ await postFeedHandler?.(value, id);
+ loadNewThreads();
+ };
+
+ const onUpdateThread = async (
+ threadId: string,
+ postId: string,
+ isThread: boolean,
+ data: Operation[]
+ ): Promise => {
+ await updateThreadHandler(threadId, postId, isThread, data);
+ loadNewThreads();
+ };
+
+ useEffect(() => {
+ getThreads();
+ }, [threadLink, refetchThread]);
+
+ if (isEmpty(threads) && !isThreadLoading) {
+ return (
+
+
+ {t('message.no-announcement-message')}
+
+
+ );
+ }
+
+ return (
+ = ({
+ threads,
+ editPermission,
+ postFeed,
+ onConfirmation,
+ updateThreadHandler,
+}) => {
+ const { t } = useTranslation();
+ const { updatedFeedList: updatedThreads } =
+ getFeedListWithRelativeDays(threads);
+
+ const { activeAnnouncements, inActiveAnnouncements } = useMemo(() => {
+ return updatedThreads.reduce(
+ (
+ acc: {
+ activeAnnouncements: Thread[];
+ inActiveAnnouncements: Thread[];
+ },
+ cv: Thread
+ ) => {
+ if (
+ cv.announcement &&
+ isActiveAnnouncement(
+ cv.announcement?.startTime,
+ cv.announcement?.endTime
+ )
+ ) {
+ acc.activeAnnouncements.push(cv);
+ } else {
+ acc.inActiveAnnouncements.push(cv);
+ }
+
+ return acc;
+ },
+ {
+ activeAnnouncements: [],
+ inActiveAnnouncements: [],
+ }
+ );
+ }, [updatedThreads]);
+
+ const getAnnouncements = useCallback(
+ (announcements: Thread[]) => {
+ return announcements.map((thread) => {
+ const mainFeed = {
+ message: thread.message,
+ postTs: thread.threadTs,
+ from: thread.createdBy,
+ id: thread.id,
+ reactions: thread.reactions,
+ } as Post;
+
+ return (
+ = ({
open,
onCancel,
+ onSave,
entityType,
entityFQN,
}) => {
@@ -85,7 +87,7 @@ const AddAnnouncementModal: FC = ({
if (data) {
showSuccessToast(t('message.announcement-created-successfully'));
}
- onCancel();
+ onSave();
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.component.tsx
index c7838747342..66b3577708a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.component.tsx
@@ -40,7 +40,7 @@ import {
getImageWithResolutionAndFallback,
ImageQuality,
} from '../../../../utils/ProfilerUtils';
-import Avatar from '../../../common/AvatarComponent/Avatar';
+import ProfilePicture from '../../../common/ProfilePicture/ProfilePicture';
import './user-profile-icon.less';
type ListMenuItemProps = {
@@ -337,7 +337,7 @@ export const UserProfileIcon = () => {
onError={handleOnImageError}
/>
) : (
-
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.test.tsx
index de574f31cd3..416e4091965 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.test.tsx
@@ -40,8 +40,8 @@ jest.mock('../../../../utils/ProfilerUtils', () => ({
ImageQuality: jest.fn().mockReturnValue('6x'),
}));
-jest.mock('../../../common/AvatarComponent/Avatar', () =>
- jest.fn().mockReturnValue( = ({
@@ -45,11 +40,13 @@ const AnnouncementDrawer: FC = ({
onClose,
entityFQN,
entityType,
- createPermission,
+ createPermission = false,
}) => {
const { t } = useTranslation();
const { currentUser } = useApplicationStore();
- const [isAnnouncement, setIsAnnouncement] = useState(false);
+ const [isAddAnnouncementOpen, setIsAddAnnouncementOpen] =
+ useState(false);
+ const [refetchThread, setRefetchThread] = useState(false);
const title = (
= ({
);
- const createThread = async (data: CreateThread) => {
+ const deletePostHandler = async (
+ threadId: string,
+ postId: string,
+ isThread: boolean
+ ): Promise => {
+ await deletePost(threadId, postId, isThread);
+ };
+
+ const postFeedHandler = async (value: string, id: string): Promise => {
+ const data = {
+ message: value,
+ from: currentUser?.name,
+ } as Post;
+
try {
- await postThread(data);
+ await postFeedById(id, data);
} catch (err) {
showErrorToast(err as AxiosError);
}
};
- const deletePostHandler = (
- threadId: string,
- postId: string,
- isThread: boolean
- ) => {
- deletePost(threadId, postId, isThread);
- };
-
- const postFeedHandler = (value: string, id: string) => {
- const data = {
- message: value,
- from: currentUser?.name,
- } as Post;
- postFeedById(id, data).catch((err: AxiosError) => {
- showErrorToast(err);
- });
- };
-
- const updateThreadHandler = (
+ const updateThreadHandler = async (
threadId: string,
postId: string,
isThread: boolean,
data: Operation[]
- ) => {
+ ): Promise => {
const callback = () => {
return;
};
- updateThreadData(threadId, postId, isThread, data, callback);
+ await updateThreadData(threadId, postId, isThread, data, callback);
};
- return (
- <>
-
- onThreadSelect(thread.id)}
- />
-
- {postLength > 0 ? (
-
- {postLength > 1 ? (
-
- ) : null}
- {selectedThreadId === thread.id ? (
-
- {Boolean(lastPost) && }
-
- ) : null}
-
- onThreadSelect(thread.id)}
- />
-
-
- toggleReplyEditor(thread.id)}
- />
-
-
-
- ) : null}
-
- {getAnnouncements(activeAnnouncements)}
- {Boolean(inActiveAnnouncements.length) && (
- <>
-
- {t('label.inactive-announcement-plural')}
-
-
- );
-};
-
-export default AnnouncementThreads;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/announcement.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/announcement.less
deleted file mode 100644
index 5d044abea7c..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/announcement.less
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Copyright 2023 Collate.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import url('../../../styles/variables.less');
-
-.announcement-thread-card {
- margin-top: 20px;
- padding-top: 8px;
- border-radius: 8px;
- border: 1px solid @announcement-border;
- background: @announcement-background;
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx
index 3aeefb6ccca..e463e6b0257 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/AnnouncementBadge.tsx
@@ -11,6 +11,7 @@
* limitations under the License.
*/
+import Icon from '@ant-design/icons/lib/components/Icon';
import { Typography } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
@@ -22,11 +23,11 @@ const AnnouncementBadge = () => {
return (
-
+
{t('label.announcement')}
-
+
);
};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/task-badge.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/task-badge.less
index c56b55f93fd..514ff8f6d86 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/task-badge.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/task-badge.less
@@ -20,16 +20,23 @@
background: @announcement-background-dark;
border-radius: 4px;
border: 1px solid @announcement-border;
- padding: 0 8px;
+ padding: 3px 8px;
display: flex;
align-items: center;
justify-content: center;
-}
-.announcement-badge {
- width: 14px;
- height: 14px;
- color: @primary-color;
+ .announcement-badge {
+ width: 14px;
+ height: 14px;
+ color: @announcement-border;
+ }
+
+ .announcement-text {
+ margin-left: 4px;
+ color: @announcement-border;
+ font-size: 12px;
+ font-weight: 700;
+ }
}
.task-badge {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/Announcement.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/Announcement.interface.ts
new file mode 100644
index 00000000000..20cf0aecb2c
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/Announcement.interface.ts
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Operation } from 'fast-json-patch';
+import { HTMLAttributes } from 'react';
+import {
+ AnnouncementDetails,
+ CreateThread,
+ ThreadType,
+} from '../../generated/api/feed/createThread';
+import { Post, Thread } from '../../generated/entity/feed/thread';
+import { ThreadUpdatedFunc } from '../../interface/feed.interface';
+import { ConfirmState } from '../ActivityFeed/ActivityFeedCard/ActivityFeedCard.interface';
+
+export type ThreadUpdatedFunction = (
+ threadId: string,
+ postId: string,
+ isThread: boolean,
+ data: Operation[]
+) => Promise
+ {postFeedReplies}
+
+
+ AnnouncementFeedCardBody
+ + + + + + ) + ) +); + +jest.mock('../ActivityFeed/ActivityFeedEditor/ActivityFeedEditor', () => { + return jest.fn().mockImplementation(({ onSave }) => ( + <> +ActivityFeedEditor
+ + + )); +}); + +jest.mock('../ActivityFeed/Shared/AnnouncementBadge', () => { + return jest.fn().mockReturnValue(AnnouncementBadge
); +}); + +jest.mock('../common/ProfilePicture/ProfilePicture', () => { + return jest.fn().mockReturnValue(ProfilePicture
); +}); + +jest.mock('../../utils/ToastUtils', () => ({ + showErrorToast: jest.fn(), +})); + +const mockProps = { + feed: { + message: 'Cypress announcement', + postTs: 1714026576902, + from: 'admin', + id: '36ea94c9-7f12-489c-94df-56cbefe14b2f', + reactions: [], + }, + task: MOCK_ANNOUNCEMENT_DATA.data[0], + editPermission: true, + postFeed: jest.fn(), + onConfirmation: jest.fn(), + updateThreadHandler: jest.fn(), +}; + +describe('Test AnnouncementFeedCard Component', () => { + it('should render AnnouncementFeedCard component', () => { + render(
+
+
+
+
+ {isEditAnnouncement && announcementDetails && (
+ setIsEditAnnouncement(false)}
+ onConfirm={handleAnnouncementUpdate}
+ />
+ )}
+
+ );
+};
+
+export default AnnouncementFeedCardBody;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCardBody.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCardBody.test.tsx
new file mode 100644
index 00000000000..61eed6fea88
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementFeedCardBody.test.tsx
@@ -0,0 +1,180 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { ReactionOperation } from '../../enums/reactions.enum';
+import { Thread } from '../../generated/entity/feed/thread';
+import { ReactionType } from '../../generated/type/reaction';
+import { MOCK_ANNOUNCEMENT_DATA } from '../../mocks/Announcement.mock';
+import { mockUserData } from '../../mocks/MyDataPage.mock';
+import AnnouncementFeedCardBody from './AnnouncementFeedCardBody.component';
+
+jest.mock('../../utils/FeedUtils', () => ({
+ getEntityField: jest.fn(),
+ getEntityFQN: jest.fn(),
+ getEntityType: jest.fn(),
+}));
+
+jest.mock('../../hooks/useApplicationStore', () => ({
+ useApplicationStore: jest.fn(() => ({
+ currentUser: mockUserData,
+ })),
+}));
+
+jest.mock('../ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBody', () =>
+ jest.fn().mockImplementation(({ onPostUpdate, onReactionSelect }) => (
+ <>
+
+ setIsEditPost(false)}
+ onPostUpdate={handlePostUpdate}
+ onReactionSelect={onReactionSelect}
+ />
+ {!isEmpty(task.posts) && showRepliesButton ? (
+
+ ) : null}
+
+
+ FeedCardBody
+ + + + )) +); + +jest.mock( + '../ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader', + () => { + return jest.fn().mockReturnValue(FeedCardHeader
); + } +); + +jest.mock('../common/PopOverCard/UserPopOverCard', () => { + return jest.fn().mockImplementation(() =>UserPopOverCard
); +}); +jest.mock('../common/ProfilePicture/ProfilePicture', () => { + return jest.fn().mockImplementation(() =>ProfilePicture
); +}); + +jest.mock('../Modals/AnnouncementModal/EditAnnouncementModal', () => { + return jest.fn().mockImplementation(() =>EditAnnouncementModal
); +}); + +jest.mock('../ActivityFeed/ActivityFeedCard/PopoverContent', () => { + return jest.fn().mockImplementation(() =>PopoverContent
); +}); + +const mockFeedCardProps = { + feed: { + from: 'admin', + id: '36ea94c9-7f12-489c-94df-56cbefe14b2f', + message: 'Cypress announcement', + postTs: 1714026576902, + reactions: [], + }, + task: MOCK_ANNOUNCEMENT_DATA.data[0], + entityLink: + '<#E::database::cy-database-service-373851.cypress-database-1714026557974>', + isThread: true, + editPermission: true, + isReplyThreadOpen: false, + updateThreadHandler: jest.fn(), + onReply: jest.fn(), + onConfirmation: jest.fn(), + showReplyThread: jest.fn(), +}; + +describe('Test AnnouncementFeedCardBody Component', () => { + it('Check if AnnouncementFeedCardBody component has all child components', async () => { + render(
+
+ );
+};
+
+export default AnnouncementThreadBody;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementThreadBody.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementThreadBody.test.tsx
new file mode 100644
index 00000000000..3ef4d44a696
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementThreadBody.test.tsx
@@ -0,0 +1,276 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-test-renderer';
+import { MOCK_ANNOUNCEMENT_DATA } from '../../mocks/Announcement.mock';
+import { getAllFeeds } from '../../rest/feedsAPI';
+import AnnouncementThreadBody from './AnnouncementThreadBody.component';
+
+jest.mock('../../rest/feedsAPI', () => ({
+ getAllFeeds: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+jest.mock('./AnnouncementThreads', () =>
+ jest
+ .fn()
+ .mockImplementation(({ postFeed, updateThreadHandler, onConfirmation }) => (
+ <>
+ AnnouncementThreads
+ + + + + )) +); + +jest.mock('../Modals/ConfirmationModal/ConfirmationModal', () => + jest.fn().mockImplementation(({ visible, onConfirm, onCancel }) => ( + <> + {visible ? 'Confirmation Modal is open' : 'Confirmation Modal is close'} + + + + )) +); + +jest.mock('../common/ErrorWithPlaceholder/ErrorPlaceHolder', () => { + return jest.fn().mockReturnValue(ErrorPlaceHolder
); +}); + +jest.mock('../../utils/ToastUtils', () => ({ + showErrorToast: jest.fn(), +})); + +const mockProps = { + threadLink: 'threadLink', + refetchThread: false, + editPermission: true, + postFeedHandler: jest.fn(), + deletePostHandler: jest.fn(), + updateThreadHandler: jest.fn(), +}; + +describe('Test AnnouncementThreadBody Component', () => { + it('should call getAllFeeds when component is mount', async () => { + render(ActivityFeedCard
); -}); - -jest.mock('../ActivityFeedEditor/ActivityFeedEditor', () => { - return jest.fn().mockReturnValue(ActivityFeedEditor
); -}); - -jest.mock('../ActivityFeedCard/FeedCardFooter/FeedCardFooter', () => { - return jest.fn().mockReturnValue(FeedCardFooter
); +jest.mock('./AnnouncementFeedCard.component', () => { + return jest.fn().mockReturnValue(AnnouncementFeedCard
); }); describe('Test AnnouncementThreads Component', () => { @@ -52,7 +45,7 @@ describe('Test AnnouncementThreads Component', () => { wrapper: MemoryRouter, }); - const threads = await screen.findAllByTestId('announcement-card'); + const threads = await screen.findAllByText('AnnouncementFeedCard'); expect(threads).toHaveLength(2); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementThreads.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementThreads.tsx new file mode 100644 index 00000000000..4a7f76d26f7 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/AnnouncementThreads.tsx @@ -0,0 +1,112 @@ +/* + * Copyright 2022 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Divider, Typography } from 'antd'; +import React, { FC, useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Post, Thread } from '../../generated/entity/feed/thread'; +import { isActiveAnnouncement } from '../../utils/AnnouncementsUtils'; +import { getFeedListWithRelativeDays } from '../../utils/FeedUtils'; +import { AnnouncementThreadListProp } from './Announcement.interface'; +import './announcement.less'; +import AnnouncementFeedCard from './AnnouncementFeedCard.component'; + +const AnnouncementThreads: FC
+
+ {inActiveAnnouncements.length}{' '}
+ {t('label.inactive-announcement-plural')}
+
+
+ )}
+
+ {getAnnouncements(inActiveAnnouncements)}
+
+ );
+};
+
+export default AnnouncementThreads;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Announcement/announcement.less b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/announcement.less
new file mode 100644
index 00000000000..fe29111adfe
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Announcement/announcement.less
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import (reference) url('../../styles/variables.less');
+
+.announcement-thread-body {
+ margin-top: 16px;
+
+ .text-announcement {
+ color: @announcement-border;
+ }
+
+ .ant-card.announcement-thread-card {
+ margin-top: 20px;
+ padding-top: 8px;
+ border-radius: 8px;
+ border: 1px solid @announcement-border;
+ background: @announcement-background;
+
+ .avatar-column {
+ position: relative;
+
+ &::after {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 1px;
+ background: @announcement-border-light;
+ height: calc(100% - 10px);
+ z-index: 1;
+ }
+
+ .assignee-item {
+ margin: 0;
+ z-index: 10;
+ }
+
+ .ant-avatar-group {
+ z-index: 10;
+ }
+ }
+
+ .arrow-icon {
+ font-size: 10px;
+ }
+
+ .rotate-180 {
+ transform: rotate(180deg);
+ }
+ }
+}
+
+.feed-line {
+ margin-left: 8px;
+ background: @announcement-border-light;
+ width: 1px;
+ height: calc(100% - 10px);
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
index fe560737b9b..fc6a54bd895 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
@@ -147,7 +147,6 @@ const TableQueryRightPanel = ({
Avatar
)
+jest.mock('../../../common/ProfilePicture/ProfilePicture', () =>
+ jest.fn().mockReturnValue(ProfilePicture
)
);
jest.mock('react-router-dom', () => ({
@@ -84,7 +84,7 @@ describe('UserProfileIcon', () => {
const { queryByTestId, getByText } = render(ActivityThreadPanelBody
);
- }
-);
+jest.mock('../../../Announcement/AnnouncementThreadBody.component', () => {
+ return jest.fn().mockReturnValue(AnnouncementThreadBody
);
+});
jest.mock('../../../Modals/AnnouncementModal/AddAnnouncementModal', () => {
return jest.fn().mockReturnValue(AddAnnouncementModal
);
@@ -51,21 +48,31 @@ describe('Test Announcement drawer component', () => {
it('Should render the component', async () => {
render(
-
-
+ const handleSaveAnnouncement = useCallback(() => {
+ handleCloseAnnouncementModal();
+ setRefetchThread((prev) => !prev);
+ }, []);
+
+ return (
+
+ setIsAnnouncement(false)}
+ open={isAddAnnouncementOpen}
+ onCancel={handleCloseAnnouncementModal}
+ onSave={handleSaveAnnouncement}
/>
)}
-
+
);
};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx
index dd0c0a34d73..54b97c4a7b6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx
@@ -237,6 +237,7 @@ const UserPopOverCard: FC = ({
}) => {
const profilePicture = (
{
it('ProfilePicture component should render with Avatar', async () => {
const { container } = render(;
@@ -28,25 +28,28 @@ type UserData = Pick;
interface Props extends UserData {
width?: string;
type?: ImageShape;
- textClass?: string;
className?: string;
height?: string;
- profileImgClasses?: string;
isTeam?: boolean;
+ size?: number | 'small' | 'default' | 'large';
+ avatarType?: 'solid' | 'outlined';
}
const ProfilePicture = ({
name,
displayName,
className = '',
- textClass = '',
type = 'circle',
width = '36',
height,
- profileImgClasses,
isTeam = false,
+ size,
+ avatarType = 'solid',
}: Props) => {
const { permissions } = usePermissionProvider();
+ const { color, character, backgroundColor } = getRandomColor(
+ displayName ?? name
+ );
const viewUserPermission = useMemo(() => {
return userPermissions.hasViewPermissions(ResourceEntity.USER, permissions);
@@ -61,12 +64,17 @@ const ProfilePicture = ({
const getAvatarByName = () => {
return (
) => void
-) => {
+): Promise => {
if (isThread) {
- updateThread(threadId, data)
- .then((res) => {
- callback((prevData) => {
- return prevData.map((thread) => {
- if (isEqual(threadId, thread.id)) {
- return {
- ...thread,
- reactions: res.reactions,
- message: res.message,
- announcement: res?.announcement,
- };
- } else {
- return thread;
- }
- });
+ try {
+ const res = await updateThread(threadId, data);
+ callback((prevData) => {
+ return prevData.map((thread) => {
+ if (isEqual(threadId, thread.id)) {
+ return {
+ ...thread,
+ reactions: res.reactions,
+ message: res.message,
+ announcement: res?.announcement,
+ };
+ } else {
+ return thread;
+ }
});
- })
- .catch((err: AxiosError) => {
- showErrorToast(err);
});
+ } catch (error) {
+ showErrorToast(error as AxiosError);
+ }
} else {
- updatePost(threadId, postId, data)
- .then((res) => {
- callback((prevData) => {
- return prevData.map((thread) => {
- if (isEqual(threadId, thread.id)) {
- const updatedPosts = (thread.posts || []).map((post) => {
- if (isEqual(postId, post.id)) {
- return {
- ...post,
- reactions: res.reactions,
- message: res.message,
- };
- } else {
- return post;
- }
- });
+ try {
+ const res = await updatePost(threadId, postId, data);
+ callback((prevData) => {
+ return prevData.map((thread) => {
+ if (isEqual(threadId, thread.id)) {
+ const updatedPosts = (thread.posts || []).map((post) => {
+ if (isEqual(postId, post.id)) {
+ return {
+ ...post,
+ reactions: res.reactions,
+ message: res.message,
+ };
+ } else {
+ return post;
+ }
+ });
- return { ...thread, posts: updatedPosts };
- } else {
- return thread;
- }
- });
+ return { ...thread, posts: updatedPosts };
+ } else {
+ return thread;
+ }
});
- })
- .catch((err: AxiosError) => {
- showErrorToast(err);
});
+ } catch (error) {
+ showErrorToast(error as AxiosError);
+ }
}
};
-
-
-
-
+ const handleCloseAnnouncementModal = useCallback(
+ () => setIsAddAnnouncementOpen(false),
+ []
+ );
+ const handleOpenAnnouncementModal = useCallback(
+ () => setIsAddAnnouncementOpen(true),
+ []
+ );
-
+
+
+
- {isAnnouncement && (
+
- 
-
+