Improvement #6656 : Edited the text in sample data tab when no data is available (#6843)

* Improvement #6656 : Edited the text in sample data tab when no data is available

* Used antd Empty component to show for no data

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

@@ -16,7 +16,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Space } from 'antd';
+import { Empty, Space } from 'antd';
 import classNames from 'classnames';
 import { lowerCase } from 'lodash';
 import React, {
@@ -26,6 +26,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { Link } from 'react-router-dom';
 import { TableData } from '../../generated/entity/data/table';
 import { withLoader } from '../../hoc/withLoader';
 import { isEven } from '../../utils/CommonUtils';
@@ -151,7 +152,26 @@ const SampleDataTable: FunctionComponent<Props> = ({ sampleData }: Props) => {
           </table>
         ) : (
           <div className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8">
-            No sample data available
+            <Empty
+              description={
+                <>
+                  <p>No sample data available</p>
+                  <p className="tw-mt-2">
+                    To view Sample Data, run the Profiler Ingestion. Please
+                    refer to this doc to schedule the{' '}
+                    <Link
+                      className="tw-ml-1"
+                      target="_blank"
+                      to={{
+                        pathname:
+                          'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler',
+                      }}>
+                      Profiler Ingestion
+                    </Link>
+                  </p>
+                </>
+              }
+            />
           </div>
         )}
       </div>

openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.test.tsx

@@ -37,6 +37,10 @@ const mockSampleData = {
   ],
 };
 
+jest.mock('react-router-dom', () => ({
+  Link: jest.fn().mockImplementation(({ children }) => <span>{children}</span>),
+}));
+
 describe('Test SampleDataTable Component', () => {
   it('Renders all the data that was sent to the component', () => {
     const { container } = render(

openmetadata-ui/src/main/resources/ui/src/components/SampleDataTopic/SampleDataTopic.test.tsx

@@ -20,6 +20,10 @@ const mockSampleData = {
   messages: ['{"email":"data","name":"job"}'],
 };
 
+jest.mock('react-router-dom', () => ({
+  Link: jest.fn().mockImplementation(({ children }) => <span>{children}</span>),
+}));
+
 describe('Test SampleData Component', () => {
   it('Should render message cards', () => {
     const { getAllByTestId } = render(

openmetadata-ui/src/main/resources/ui/src/components/SampleDataTopic/SampleDataTopic.tsx

@@ -12,8 +12,10 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Empty } from 'antd';
 import { isUndefined } from 'lodash';
 import React, { FC, HTMLAttributes, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { TopicSampleData } from '../../generated/entity/data/topic';
 import { withLoader } from '../../hoc/withLoader';
 import SchemaEditor from '../schema-editor/SchemaEditor';
@@ -82,7 +84,26 @@ const SampleDataTopic: FC<SampleDataTopicProp> = ({ sampleData }) => {
       <div
         className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8"
         data-testid="no-data">
-        No sample data available
+        <Empty
+          description={
+            <>
+              <p>No sample data available</p>
+              <p className="tw-mt-2">
+                To view Sample Data, run the MetaData Ingestion. Please refer to
+                this doc to schedule the{' '}
+                <Link
+                  className="tw-ml-1"
+                  target="_blank"
+                  to={{
+                    pathname:
+                      'https://docs.open-metadata.org/openmetadata/ingestion/workflows/metadata',
+                  }}>
+                  MetaData Ingestion
+                </Link>
+              </p>
+            </>
+          }
+        />
       </div>
     );
   }