MINOR: fix the sample data value displayed on UI (#14571)

* fix the sample data value displayed on UI

* empty string should fallback to no-data-placeholder

* changes as per commments

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

@@ -41,7 +41,7 @@ describe('Test RowData Component', () => {
     expect(await findByTestId('schema-modal')).toBeInTheDocument();
   });
 
-  it('Should render string data if data is not a tyeopf object', async () => {
+  it('Should render string data if data is not a typeof object', async () => {
     const { findByTestId } = render(<RowData data="data" />, {
       wrapper: MemoryRouter,
     });
@@ -51,6 +51,16 @@ describe('Test RowData Component', () => {
     expect(stringData).toBeInTheDocument();
   });
 
+  it('Should render string data if data value is 0', async () => {
+    const { findByTestId } = render(<RowData data={0} />, {
+      wrapper: MemoryRouter,
+    });
+
+    const stringData = await findByTestId('string-data');
+
+    expect(stringData).toBeInTheDocument();
+  });
+
   it('Should render fallback data if no data is there', async () => {
     const { findByTestId } = render(<RowData data={null} />, {
       wrapper: MemoryRouter,
@@ -60,4 +70,14 @@ describe('Test RowData Component', () => {
 
     expect(emptyData).toBeInTheDocument();
   });
+
+  it('Should render fallback data if the data is empty string', async () => {
+    const { findByTestId } = render(<RowData data="" />, {
+      wrapper: MemoryRouter,
+    });
+
+    const emptyData = await findByTestId('empty-data');
+
+    expect(emptyData).toBeInTheDocument();
+  });
 });

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

@@ -11,34 +11,47 @@
  *  limitations under the License.
  */
 
-import React, { Fragment, useState } from 'react';
+import { Typography } from 'antd';
+import { isNil, isObject } from 'lodash';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import { NO_DATA_PLACEHOLDER } from '../../constants/constants';
 import SchemaModal from '../Modals/SchemaModal/SchemaModal';
 import { SampleDataType } from './SampleData.interface';
 
 export const RowData = ({ data }: { data: SampleDataType }) => {
   const [isFullView, setIsFullView] = useState<boolean>(false);
 
-  const onClose = () => setIsFullView(false);
-  const onOpen = () => setIsFullView(true);
+  const onClose = useCallback(() => setIsFullView(false), []);
+  const onOpen = useCallback(() => setIsFullView(true), []);
 
-  const getDataElement = (rowValue: SampleDataType) => {
-    if (typeof rowValue === 'object') {
+  const dataElementRenderer = useMemo(() => {
+    if (isNil(data) || data === '') {
       return (
-        <p
+        <Typography.Text data-testid="empty-data">
+          {NO_DATA_PLACEHOLDER}
+        </Typography.Text>
+      );
+    } else if (isObject(data)) {
+      return (
+        <Typography.Text
           className="w-52 truncate cursor-pointer"
           data-testid="json-object"
           onClick={onOpen}>
-          {JSON.stringify(rowValue)}
-        </p>
+          {JSON.stringify(data)}
+        </Typography.Text>
+      );
+    } else {
+      return (
+        <Typography.Text data-testid="string-data">
+          {data.toString()}
+        </Typography.Text>
       );
     }
-
-    return <p data-testid="string-data">{rowValue.toString()}</p>;
-  };
+  }, [data, onOpen]);
 
   return (
     <Fragment>
-      {data ? getDataElement(data) : <p data-testid="empty-data">--</p>}
+      {dataElementRenderer}
       {isFullView && (
         <SchemaModal data={data} visible={isFullView} onClose={onClose} />
       )}