diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/KPI-not-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/KPI-not-data-placeholder.svg new file mode 100644 index 00000000000..d6acbc984df --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/KPI-not-data-placeholder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/activity-feed-no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/activity-feed-no-data-placeholder.svg new file mode 100644 index 00000000000..4d897cc7fc6 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/activity-feed-no-data-placeholder.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcment-no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcment-no-data-placeholder.svg new file mode 100644 index 00000000000..2120051fc3f --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcment-no-data-placeholder.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/data-insight-no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/data-insight-no-data-placeholder.svg new file mode 100644 index 00000000000..eb0eb0bff9c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/data-insight-no-data-placeholder.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/following-no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/following-no-data-placeholder.svg new file mode 100644 index 00000000000..24aa818ceeb --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/following-no-data-placeholder.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/my-data-no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/my-data-no-data-placeholder.svg new file mode 100644 index 00000000000..aea721b0405 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/my-data-no-data-placeholder.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/recently-viewed-no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/recently-viewed-no-data-placeholder.svg new file mode 100644 index 00000000000..386c31d392c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/recently-viewed-no-data-placeholder.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx index 945d47cfe5f..c861b6c2ea9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx +++ b/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"> - ) : ( - - ) - } + icon={} type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> { +export const EmptyGraphPlaceholder = ({ icon }: { icon?: ReactElement }) => { const { t } = useTranslation(); return ( - + {t('message.adding-new-entity-is-easy-just-give-it-a-spin', { entity: t('label.data-insight'), @@ -33,11 +37,10 @@ export const EmptyGraphPlaceholder = () => { } values={{ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx index 647e631001d..d126d6e5c28 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx +++ b/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 (
- +
{t('message.adding-new-entity-is-easy-just-give-it-a-spin', { @@ -67,11 +69,10 @@ const EmptyPlaceholder = () => { } values={{ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx index 7f4af577623..0f00b865dfa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx @@ -17,12 +17,14 @@ 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'; @@ -30,6 +32,7 @@ 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) ? (
- - } - /> - + + } + type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> + + } + /> + +
) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/AnnouncementsWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/AnnouncementsWidget.tsx index bb8536f8bd8..bf23996e54a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/AnnouncementsWidget.tsx +++ b/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 (
- {t('message.no-entity-data-available', { - entity: t('label.announcement-lowercase'), - })} + + } + type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> + + {t('message.no-entity-data-available', { + entity: t('label.announcement-lowercase'), + })} + +
); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx index f488a4f17ac..120364c7e74 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx +++ b/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={ +
+ + } + type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> + + {t('message.not-followed-anything')} + + +
+ } testIDText="following" /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx index 91be2930ff0..5c7c56e3fe5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx +++ b/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 = ({ - + + } + /> ) : ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx index 2e2033a67c2..d63b3212ac6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx @@ -17,6 +17,8 @@ import { isEmpty, isUndefined } from 'lodash'; import React, { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; +import { ReactComponent as RecentlyViewedEmptyIcon } from '../../../assets/svg/recently-viewed-no-data-placeholder.svg'; +import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum'; import { EntityReference } from '../../../generated/type/entityReference'; import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface'; import { @@ -25,6 +27,7 @@ import { } from '../../../utils/CommonUtils'; import { getEntityName } from '../../../utils/EntityUtils'; import { getEntityIcon, getEntityLink } from '../../../utils/TableUtils'; +import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder'; import EntityListSkeleton from '../../Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component'; import './recently-viewed.less'; @@ -93,7 +96,18 @@ const RecentlyViewed = ({ {isEmpty(data) ? (
- {t('message.no-recently-viewed-date')} + + } + type={ERROR_PLACEHOLDER_TYPE.CUSTOM}> + + {t('message.no-recently-viewed-date')} + +
) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts b/openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts index a765bf55278..4b758c08259 100644 --- a/openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts +++ b/openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts @@ -12,6 +12,7 @@ */ export enum SIZE { + X_SMALL = '40', SMALL = '60', MEDIUM = '86', LARGE = '126',