feat(ui): Announcements in domains and data products (open-metadata#24089)

* commit progress

* commit progress

* add playwright

* minor styles adjustments

Author: karanh37

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts

@@ -64,7 +64,14 @@ import {
   verifyDataProductAssetsAfterDelete,
   verifyDomain,
 } from '../../utils/domain';
-import { followEntity, unFollowEntity } from '../../utils/entity';
+import {
+  createAnnouncement,
+  deleteAnnouncement,
+  editAnnouncement,
+  followEntity,
+  replyAnnouncement,
+  unFollowEntity,
+} from '../../utils/entity';
 import {
   settingClick,
   SettingOptionsType,
@@ -930,6 +937,80 @@ test.describe('Domains', () => {
       await afterAction();
     }
   });
+
+  test('Domain announcement create, edit & delete', async ({ page }) => {
+    test.slow(true);
+
+    const { afterAction, apiContext } = await getApiContext(page);
+    const domain = new Domain();
+
+    try {
+      await domain.create(apiContext);
+      await page.reload();
+      await sidebarClick(page, SidebarItem.DOMAIN);
+      await selectDomain(page, domain.data);
+
+      await createAnnouncement(
+        page,
+        {
+          title: 'Domain Announcement Test',
+          description: 'Domain Announcement Description',
+        },
+        false
+      );
+
+      await editAnnouncement(page, {
+        title: 'Edited Domain Announcement',
+        description: 'Updated Domain Announcement Description',
+      });
+
+      await replyAnnouncement(page);
+      await deleteAnnouncement(page);
+    } finally {
+      await domain.delete(apiContext);
+      await afterAction();
+    }
+  });
+
+  test('Data Product announcement create, edit & delete', async ({ page }) => {
+    test.slow(true);
+
+    const { afterAction, apiContext } = await getApiContext(page);
+    const domain = new Domain();
+    const dataProduct = new DataProduct([domain]);
+
+    try {
+      await domain.create(apiContext);
+      await page.reload();
+      await sidebarClick(page, SidebarItem.DOMAIN);
+      await selectDomain(page, domain.data);
+      await createDataProduct(page, dataProduct.data);
+
+      await sidebarClick(page, SidebarItem.DATA_PRODUCT);
+      await selectDataProduct(page, dataProduct.data);
+
+      await createAnnouncement(
+        page,
+        {
+          title: 'Data Product Announcement Test',
+          description: 'Data Product Announcement Description',
+        },
+        false
+      );
+
+      await editAnnouncement(page, {
+        title: 'Edited Data Product Announcement',
+        description: 'Updated Data Product Announcement Description',
+      });
+
+      await replyAnnouncement(page);
+      await deleteAnnouncement(page);
+    } finally {
+      await dataProduct.delete(apiContext);
+      await domain.delete(apiContext);
+      await afterAction();
+    }
+  });
 });
 
 test.describe('Domains Rbac', () => {

openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts

@@ -1096,7 +1096,8 @@ const announcementForm = async (
     startDate: string;
     endDate: string;
     description: string;
-  }
+  },
+  hideAlert = true
 ) => {
   await page.fill('#title', data.title);
 
@@ -1117,12 +1118,15 @@ const announcementForm = async (
   await page.click('#announcement-submit');
   await announcementSubmit;
   await page.click('[data-testid="announcement-close"]');
-  await page.click('[data-testid="alert-icon-close"]');
+  if (hideAlert) {
+    await page.click('[data-testid="alert-icon-close"]');
+  }
 };
 
 export const createAnnouncement = async (
   page: Page,
-  data: { title: string; description: string }
+  data: { title: string; description: string },
+  hideAlert?: boolean
 ) => {
   await page.getByTestId('manage-button').click();
   await page.getByTestId('announcement-button').click();
@@ -1142,7 +1146,7 @@ export const createAnnouncement = async (
     'Make an announcement'
   );
 
-  await announcementForm(page, { ...data, startDate, endDate });
+  await announcementForm(page, { ...data, startDate, endDate }, hideAlert);
   await page.reload();
   await page.waitForLoadState('networkidle');
   await page.waitForSelector('[data-testid="loader"]', {
@@ -1315,7 +1319,8 @@ export const editAnnouncement = async (
 
 export const createInactiveAnnouncement = async (
   page: Page,
-  data: { title: string; description: string }
+  data: { title: string; description: string },
+  hideAlert?: boolean
 ) => {
   await page.getByTestId('manage-button').click();
   await page.getByTestId('announcement-button').click();
@@ -1334,7 +1339,7 @@ export const createInactiveAnnouncement = async (
     'Make an announcement'
   );
 
-  await announcementForm(page, { ...data, startDate, endDate });
+  await announcementForm(page, { ...data, startDate, endDate }, hideAlert);
   await page.getByTestId('inActive-announcements').isVisible();
   await page.reload();
 };

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsDetailsPage/DataProductsDetailsPage.component.tsx

@@ -17,11 +17,12 @@ import ButtonGroup from 'antd/lib/button/button-group';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
-import { cloneDeep, toString } from 'lodash';
+import { cloneDeep, isEmpty, toString } from 'lodash';
 import { useSnackbar } from 'notistack';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { ReactComponent as IconAnnouncementsBlack } from '../../../assets/svg/announcements-black.svg';
 import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
 import { ReactComponent as DeleteIcon } from '../../../assets/svg/ic-delete.svg';
 import { ReactComponent as VersionIcon } from '../../../assets/svg/ic-version.svg';
@@ -42,13 +43,15 @@ import {
   ChangeDescription,
   DataProduct,
 } from '../../../generated/entity/domains/dataProduct';
+import { Thread } from '../../../generated/entity/feed/thread';
 import { Operation } from '../../../generated/entity/policies/policy';
 import { PageType } from '../../../generated/system/ui/page';
 import { Style } from '../../../generated/type/tagLabel';
 import { useCustomPages } from '../../../hooks/useCustomPages';
 import { useFqn } from '../../../hooks/useFqn';
 import { FeedCounts } from '../../../interface/feed.interface';
 import { QueryFilterInterface } from '../../../pages/ExplorePage/ExplorePage.interface';
+import { getActiveAnnouncement } from '../../../rest/feedsAPI';
 import { searchQuery } from '../../../rest/searchAPI';
 import {
   getEntityDeleteMessage,
@@ -63,7 +66,7 @@ import dataProductClassBase from '../../../utils/DataProduct/DataProductClassBas
 import { getDomainContainerStyles } from '../../../utils/DomainPageStyles';
 import { getQueryFilterToIncludeDomain } from '../../../utils/DomainUtils';
 import entityUtilClassBase from '../../../utils/EntityUtilClassBase';
-import { getEntityName } from '../../../utils/EntityUtils';
+import { getEntityFeedLink, getEntityName } from '../../../utils/EntityUtils';
 import { getEntityVersionByField } from '../../../utils/EntityVersionUtils';
 import { showNotistackError } from '../../../utils/NotistackUtils';
 import {
@@ -81,6 +84,8 @@ import type { BreadcrumbItem } from '../../common/atoms/navigation/useBreadcrumb
 import { useBreadcrumbs } from '../../common/atoms/navigation/useBreadcrumbs';
 import { CoverImage } from '../../common/CoverImage/CoverImage.component';
 import { EntityAvatar } from '../../common/EntityAvatar/EntityAvatar';
+import AnnouncementCard from '../../common/EntityPageInfos/AnnouncementCard/AnnouncementCard';
+import AnnouncementDrawer from '../../common/EntityPageInfos/AnnouncementDrawer/AnnouncementDrawer';
 import { AlignRightIconButton } from '../../common/IconButtons/EditIconButton';
 import Loader from '../../common/Loader/Loader';
 import { ManageButtonItemLabel } from '../../common/ManageButtonContentItem/ManageButtonContentItem.component';
@@ -136,6 +141,9 @@ const DataProductsDetailsPage = ({
   const [feedCount, setFeedCount] = useState<FeedCounts>(
     FEED_COUNT_INITIAL_DATA
   );
+  const [isAnnouncementDrawerOpen, setIsAnnouncementDrawerOpen] =
+    useState<boolean>(false);
+  const [activeAnnouncement, setActiveAnnouncement] = useState<Thread>();
 
   const handleFeedCount = useCallback((data: FeedCounts) => {
     setFeedCount(data);
@@ -157,6 +165,36 @@ const DataProductsDetailsPage = ({
     setIsAssetDrawerOpen(false);
   }, []);
 
+  const fetchActiveAnnouncement = async () => {
+    try {
+      const announcements = await getActiveAnnouncement(
+        getEntityFeedLink(
+          EntityType.DATA_PRODUCT,
+          dataProduct.fullyQualifiedName ?? ''
+        )
+      );
+      if (!isEmpty(announcements.data)) {
+        setActiveAnnouncement(announcements.data[0]);
+      } else {
+        setActiveAnnouncement(undefined);
+      }
+    } catch (error) {
+      showNotistackError(enqueueSnackbar, error as AxiosError, undefined, {
+        vertical: 'top',
+        horizontal: 'center',
+      });
+    }
+  };
+
+  const handleOpenAnnouncementDrawer = () => {
+    setIsAnnouncementDrawerOpen(true);
+  };
+
+  const handleCloseAnnouncementDrawer = () => {
+    setIsAnnouncementDrawerOpen(false);
+    fetchActiveAnnouncement();
+  };
+
   const breadcrumbItems = useMemo<BreadcrumbItem[]>(() => {
     const items: BreadcrumbItem[] = [];
 
@@ -278,6 +316,26 @@ const DataProductsDetailsPage = ({
   }, [dataProduct, enqueueSnackbar]);
 
   const manageButtonContent: ItemType[] = [
+    ...(editAllPermission
+      ? ([
+          {
+            label: (
+              <ManageButtonItemLabel
+                description={t('message.announcement-action-description')}
+                icon={IconAnnouncementsBlack}
+                id="announcement-button"
+                name={t('label.announcement-plural')}
+              />
+            ),
+            key: 'announcement-button',
+            onClick: (e) => {
+              e.domEvent.stopPropagation();
+              handleOpenAnnouncementDrawer();
+              setShowActions(false);
+            },
+          },
+        ] as ItemType[])
+      : []),
     ...(editDisplayNamePermission
       ? ([
           {
@@ -488,6 +546,7 @@ const DataProductsDetailsPage = ({
     fetchDataProductPermission();
     fetchDataProductAssets();
     getEntityFeedCount();
+    fetchActiveAnnouncement();
   }, [dataProductFqn]);
 
   const toggleTabExpanded = () => {
@@ -569,12 +628,13 @@ const DataProductsDetailsPage = ({
               titleColor={dataProduct.style?.color}
             />
           </Box>
-          <Box sx={{ width: '320px' }}>
+          <Box>
             <Box
               sx={{
                 display: 'flex',
                 gap: 3,
                 justifyContent: 'flex-end',
+                alignItems: 'center',
                 pb: '4px',
               }}>
               {!isVersionsView && dataProductPermission.Create && (
@@ -646,6 +706,13 @@ const DataProductsDetailsPage = ({
                   </Dropdown>
                 )}
               </ButtonGroup>
+
+              {activeAnnouncement && (
+                <AnnouncementCard
+                  announcement={activeAnnouncement}
+                  onClick={handleOpenAnnouncementDrawer}
+                />
+              )}
             </Box>
           </Box>
         </Box>
@@ -737,6 +804,15 @@ const DataProductsDetailsPage = ({
         onCancel={() => setIsStyleEditing(false)}
         onSubmit={onStyleSave}
       />
+
+      <AnnouncementDrawer
+        showToastInSnackbar
+        createPermission={editAllPermission}
+        entityFQN={dataProduct.fullyQualifiedName ?? ''}
+        entityType={EntityType.DATA_PRODUCT}
+        open={isAnnouncementDrawerOpen}
+        onClose={handleCloseAnnouncementDrawer}
+      />
     </>
   );
 

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsDetailsPage/data-products-details-page.less

@@ -16,4 +16,8 @@
   .ant-tabs-tabpane {
     min-height: 70vh;
   }
+
+  .announcement-card {
+    margin-top: 4px;
+  }
 }