Fix UI Issue : Made Testcase nodata description more descriptive and decrease the ic… (#7487)

* Made testcase nodata description more descriptive and decrease the icon size

* Changes as per comments

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx

@@ -34,6 +34,7 @@ import {
   PROFILER_FILTER_RANGE,
 } from '../../../constants/profiler.constant';
 import { CSMode } from '../../../enums/codemirror.enum';
+import { SIZE } from '../../../enums/common.enum';
 import {
   TestCaseParameterValue,
   TestCaseResult,
@@ -199,7 +200,7 @@ const TestSummary: React.FC<TestSummaryProps> = ({ data }) => {
       <Col span={14}>
         {isLoading ? (
           <Loader />
-        ) : results.length ? (
+        ) : (
           <div>
             <Space align="end" className="tw-w-full" direction="vertical">
               <Select
@@ -209,35 +210,41 @@ const TestSummary: React.FC<TestSummaryProps> = ({ data }) => {
                 onChange={handleTimeRangeChange}
               />
             </Space>
-            <ResponsiveContainer className="tw-bg-white" minHeight={300}>
-              <LineChart
-                data={chartData.data}
-                margin={{
-                  top: 8,
-                  bottom: 8,
-                  right: 8,
-                }}>
-                <XAxis dataKey="name" padding={{ left: 8, right: 8 }} />
-                <YAxis allowDataOverflow padding={{ top: 8, bottom: 8 }} />
-                <Tooltip />
-                <Legend />
-                {data.parameterValues?.length === 2 && referenceArea()}
-                {chartData?.information?.map((info, i) => (
-                  <Line
-                    dataKey={info.label}
-                    dot={updatedDot}
-                    key={i}
-                    stroke={info.color}
-                    type="monotone"
-                  />
-                ))}
-              </LineChart>
-            </ResponsiveContainer>
+
+            {results.length ? (
+              <ResponsiveContainer className="tw-bg-white" minHeight={300}>
+                <LineChart
+                  data={chartData.data}
+                  margin={{
+                    top: 8,
+                    bottom: 8,
+                    right: 8,
+                  }}>
+                  <XAxis dataKey="name" padding={{ left: 8, right: 8 }} />
+                  <YAxis allowDataOverflow padding={{ top: 8, bottom: 8 }} />
+                  <Tooltip />
+                  <Legend />
+                  {data.parameterValues?.length === 2 && referenceArea()}
+                  {chartData?.information?.map((info, i) => (
+                    <Line
+                      dataKey={info.label}
+                      dot={updatedDot}
+                      key={i}
+                      stroke={info.color}
+                      type="monotone"
+                    />
+                  ))}
+                </LineChart>
+              </ResponsiveContainer>
+            ) : (
+              <ErrorPlaceHolder classes="tw-mt-0" size={SIZE.MEDIUM}>
+                <Typography.Paragraph className="m-b-md">
+                  No Results Available. Try filtering by a different time
+                  period.
+                </Typography.Paragraph>
+              </ErrorPlaceHolder>
+            )}
           </div>
-        ) : (
-          <ErrorPlaceHolder classes="tw-mt-0">
-            <Typography.Text>No Result Available</Typography.Text>
-          </ErrorPlaceHolder>
         )}
       </Col>
       <Col span={10}>

openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx

@@ -15,6 +15,7 @@ import { Typography } from 'antd';
 import React from 'react';
 import AddPlaceHolder from '../../../assets/img/add-placeholder.svg';
 import NoDataFoundPlaceHolder from '../../../assets/img/no-data-placeholder.svg';
+import { SIZE } from '../../../enums/common.enum';
 
 type Props = {
   children?: React.ReactNode;
@@ -27,6 +28,7 @@ type Props = {
   buttonId?: string;
   description?: React.ReactNode;
   classes?: string;
+  size?: string;
 };
 
 const ErrorPlaceHolder = ({
@@ -37,6 +39,7 @@ const ErrorPlaceHolder = ({
   buttons,
   description,
   classes,
+  size = SIZE.LARGE,
 }: Props) => {
   const { Paragraph, Link } = Typography;
 
@@ -44,7 +47,7 @@ const ErrorPlaceHolder = ({
     <>
       <div className="flex-center flex-col tw-mt-24 " data-testid="error">
         {' '}
-        <img data-testid="no-data-image" src={AddPlaceHolder} width="100" />
+        <img data-testid="no-data-image" src={AddPlaceHolder} width={size} />
       </div>
       <div className="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-text-base tw-font-medium">
         {description ? (
@@ -75,7 +78,7 @@ const ErrorPlaceHolder = ({
         <img
           data-testid="no-data-image"
           src={NoDataFoundPlaceHolder}
-          width="100"
+          width={size}
         />
       </div>
       {children ? (

openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts

@@ -15,3 +15,9 @@ export enum ADMIN_ONLY_ACCESSIBLE_SECTION {
   TEAM = 'team',
   SERVICE = 'service',
 }
+
+export enum SIZE {
+  SMALL = '60',
+  MEDIUM = '80',
+  LARGE = '100',
+}