updated the no data placeholders for landing page widgets (#13939)

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx

@@ -14,8 +14,7 @@ import { Typography } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as ActivityFeedIcon } from '../../../assets/svg/activity-feed.svg';
-import { ReactComponent as TaskIcon } from '../../../assets/svg/ic-task.svg';
+import { ReactComponent as FeedEmptyIcon } from '../../../assets/svg/activity-feed-no-data-placeholder.svg';
 import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Loader from '../../../components/Loader/Loader';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
@@ -74,13 +73,7 @@ const ActivityFeedListV1 = ({
       data-testid="no-data-placeholder-container"
       id="feedData">
       <ErrorPlaceHolder
-        icon={
-          isTaskTab ? (
-            <TaskIcon height={24} width={24} />
-          ) : (
-            <ActivityFeedIcon height={SIZE.MEDIUM} width={SIZE.MEDIUM} />
-          )
-        }
+        icon={<FeedEmptyIcon height={SIZE.X_SMALL} width={SIZE.X_SMALL} />}
         type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
         <Typography.Paragraph
           className="tw-max-w-md"

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx

@@ -12,18 +12,22 @@
  */
 
 import { Typography } from 'antd';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { DATA_INSIGHT_DOCS } from '../../constants/docs.constants';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../enums/common.enum';
 import { Transi18next } from '../../utils/CommonUtils';
 import ErrorPlaceHolder from '../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 
-export const EmptyGraphPlaceholder = () => {
+export const EmptyGraphPlaceholder = ({ icon }: { icon?: ReactElement }) => {
   const { t } = useTranslation();
 
   return (
-    <ErrorPlaceHolder size={SIZE.MEDIUM} type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+    <ErrorPlaceHolder
+      icon={icon}
+      size={SIZE.MEDIUM}
+      type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
       <Typography.Paragraph style={{ marginBottom: '0' }}>
         {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
           entity: t('label.data-insight'),
@@ -33,11 +37,10 @@ export const EmptyGraphPlaceholder = () => {
         <Transi18next
           i18nKey="message.refer-to-our-doc"
           renderElement={
-            <a
-              href={DATA_INSIGHT_DOCS}
+            <Link
               rel="noreferrer"
-              style={{ color: '#1890ff' }}
               target="_blank"
+              to={{ pathname: DATA_INSIGHT_DOCS }}
             />
           }
           values={{

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

@@ -17,6 +17,7 @@ import { AxiosError } from 'axios';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import {
   CartesianGrid,
   Line,
@@ -25,13 +26,14 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { ReactComponent as KPIIcon } from '../../assets/svg/ic-kpi.svg';
+import { ReactComponent as KPIEmptyIcon } from '../../assets/svg/KPI-not-data-placeholder.svg';
 import {
   CHART_WIDGET_DAYS_DURATION,
   GRAPH_BACKGROUND_COLOR,
 } from '../../constants/constants';
 import { KPI_WIDGET_GRAPH_COLORS } from '../../constants/DataInsight.constants';
 import { DATA_INSIGHT_DOCS } from '../../constants/docs.constants';
+import { SIZE } from '../../enums/common.enum';
 import { WidgetWidths } from '../../enums/CustomizablePage.enum';
 import { Kpi, KpiResult } from '../../generated/dataInsight/kpi/kpi';
 import { UIKpiResult } from '../../interface/data-insight.interface';
@@ -56,7 +58,7 @@ const EmptyPlaceholder = () => {
 
   return (
     <div className="flex-center flex-col h-full p-t-sm">
-      <KPIIcon width={80} />
+      <KPIEmptyIcon width={SIZE.X_SMALL} />
       <div className="m-t-xs text-center">
         <Typography.Paragraph style={{ marginBottom: '0' }}>
           {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
@@ -67,11 +69,10 @@ const EmptyPlaceholder = () => {
           <Transi18next
             i18nKey="message.refer-to-our-doc"
             renderElement={
-              <a
-                href={DATA_INSIGHT_DOCS}
+              <Link
                 rel="noreferrer"
-                style={{ color: '#1890ff' }}
                 target="_blank"
+                to={{ pathname: DATA_INSIGHT_DOCS }}
               />
             }
             values={{

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

@@ -17,19 +17,22 @@ import { observer } from 'mobx-react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { ReactComponent as MyDataEmptyIcon } from '../../../assets/svg/my-data-no-data-placeholder.svg';
 import {
   getUserPath,
   INITIAL_PAGING_VALUE,
   PAGE_SIZE,
   ROUTES,
 } from '../../../constants/constants';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { SearchIndex } from '../../../enums/search.enum';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import { searchData } from '../../../rest/miscAPI';
 import { Transi18next } from '../../../utils/CommonUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { getEntityIcon, getEntityLink } from '../../../utils/TableUtils';
 import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { SourceType } from '../../SearchedData/SearchedData.interface';
 import EntityListSkeleton from '../../Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import './my-data-widget.less';
@@ -127,12 +130,20 @@ const MyDataWidgetInternal = ({
         loading={Boolean(isLoading)}>
         {isEmpty(data) ? (
           <div className="flex-center h-full">
-            <span className="text-center">
-              <Transi18next
-                i18nKey="message.no-owned-data"
-                renderElement={<Link to={ROUTES.EXPLORE} />}
-              />
-            </span>
+            <ErrorPlaceHolder
+              icon={
+                <MyDataEmptyIcon height={SIZE.X_SMALL} width={SIZE.X_SMALL} />
+              }
+              type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+              <Typography.Paragraph
+                className="tw-max-w-md"
+                style={{ marginBottom: '0' }}>
+                <Transi18next
+                  i18nKey="message.no-owned-data"
+                  renderElement={<Link to={ROUTES.EXPLORE} />}
+                />
+              </Typography.Paragraph>
+            </ErrorPlaceHolder>
           </div>
         ) : (
           <div className="entity-list-body">

openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/AnnouncementsWidget.tsx

@@ -16,10 +16,13 @@ import { isEmpty, isUndefined } from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as AnnouncementIcon } from '../../../assets/svg/announcements-v1.svg';
+import { ReactComponent as AnnouncementsEmptyIcon } from '../../../assets/svg/announcment-no-data-placeholder.svg';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { Thread } from '../../../generated/entity/feed/thread';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import FeedCardBodyV1 from '../../ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBodyV1';
 import FeedCardHeaderV1 from '../../ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeaderV1';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Loader from '../../Loader/Loader';
 import './announcements-widget.less';
 
@@ -49,9 +52,20 @@ function AnnouncementsWidget({
     if (isEmpty(announcements)) {
       return (
         <div className="flex-center h-full">
-          {t('message.no-entity-data-available', {
-            entity: t('label.announcement-lowercase'),
-          })}
+          <ErrorPlaceHolder
+            icon={
+              <AnnouncementsEmptyIcon
+                height={SIZE.X_SMALL}
+                width={SIZE.X_SMALL}
+              />
+            }
+            type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+            <Typography.Paragraph>
+              {t('message.no-entity-data-available', {
+                entity: t('label.announcement-lowercase'),
+              })}
+            </Typography.Paragraph>
+          </ErrorPlaceHolder>
         </div>
       );
     }

openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx

@@ -11,15 +11,18 @@
  *  limitations under the License.
  */
 import { CloseOutlined, DragOutlined } from '@ant-design/icons';
-import { Card, Space } from 'antd';
+import { Card, Space, Typography } from 'antd';
 import { isUndefined } from 'lodash';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { ReactComponent as FollowingEmptyIcon } from '../../../assets/svg/following-no-data-placeholder.svg';
 import { getUserPath } from '../../../constants/constants';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { EntityReference } from '../../../generated/entity/type';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { EntityListWithV1 } from '../../Entity/EntityList/EntityList';
 import './following-widget.less';
 
@@ -78,7 +81,22 @@ function FollowingWidget({
         }
         headerTextLabel={t('label.following')}
         loading={isLoadingOwnedData}
-        noDataPlaceholder={t('message.not-followed-anything')}
+        noDataPlaceholder={
+          <div className="flex-center h-full">
+            <ErrorPlaceHolder
+              icon={
+                <FollowingEmptyIcon
+                  height={SIZE.X_SMALL}
+                  width={SIZE.X_SMALL}
+                />
+              }
+              type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+              <Typography.Paragraph>
+                {t('message.not-followed-anything')}
+              </Typography.Paragraph>
+            </ErrorPlaceHolder>
+          </div>
+        }
         testIDText="following"
       />
     </Card>

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

@@ -31,8 +31,10 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { ReactComponent as TotalDataAssetsEmptyIcon } from '../../assets/svg/data-insight-no-data-placeholder.svg';
 import { CHART_WIDGET_DAYS_DURATION } from '../../constants/constants';
 import { TOTAL_ENTITY_CHART_COLOR } from '../../constants/DataInsight.constants';
+import { SIZE } from '../../enums/common.enum';
 import { WidgetWidths } from '../../enums/CustomizablePage.enum';
 import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart';
 import {
@@ -134,7 +136,14 @@ const TotalDataAssetsWidget = ({
             </Typography.Text>
           </Col>
           <Col className="h-95" span={24}>
-            <EmptyGraphPlaceholder />
+            <EmptyGraphPlaceholder
+              icon={
+                <TotalDataAssetsEmptyIcon
+                  height={SIZE.X_SMALL}
+                  width={SIZE.X_SMALL}
+                />
+              }
+            />
           </Col>
         </Row>
       ) : (