fix(ui): scope empty-state placeholder styling per caller and add regression tests

openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.component.tsx

@@ -190,7 +190,14 @@ const MetadataAgentsView: FC<MetadataAgentsViewProps> = ({
   }, [logsFor, rawText]);
 
   const emptyPlaceholder = useMemo(
-    () => getErrorPlaceHolder(agents.length, platform === DISABLED, theme),
+    () =>
+      getErrorPlaceHolder(
+        agents.length,
+        platform === DISABLED,
+        theme,
+        undefined,
+        'tw:bg-primary tw:border tw:border-secondary tw:rounded-xl'
+      ),
     [agents.length, platform, theme]
   );
 

openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.test.tsx

@@ -15,6 +15,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 import { ServiceCategory } from '../../../enums/service.enum';
 import { PipelineType } from '../../../generated/entity/services/ingestionPipelines/ingestionPipeline';
 import { ServicesType } from '../../../interface/service.interface';
+import { getErrorPlaceHolder } from '../../../utils/IngestionUtils';
 import { Agent } from '../AgentsPage.interface';
 import MetadataAgentsView from './MetadataAgentsView.component';
 
@@ -183,6 +184,16 @@ describe('MetadataAgentsView', () => {
     mockDeleteIngestionPipelineById.mockResolvedValue({});
   });
 
+  it('should request the empty placeholder with the agents card styling', () => {
+    renderView();
+
+    const lastCall = (getErrorPlaceHolder as jest.Mock).mock.calls.at(-1);
+
+    expect(lastCall?.[4]).toBe(
+      'tw:bg-primary tw:border tw:border-secondary tw:rounded-xl'
+    );
+  });
+
   it('should toggle the agent when the pause action is dispatched', () => {
     renderView();
 

openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.test.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../../../../mocks/IngestionListTable.mock';
 import { ENTITY_PERMISSIONS } from '../../../../../mocks/Permissions.mock';
 import { deleteIngestionPipelineById } from '../../../../../rest/ingestionPipelineAPI';
+import { getErrorPlaceHolder } from '../../../../../utils/IngestionUtils';
 import IngestionListTable from './IngestionListTable';
 
 const mockGetEntityPermissionByFqn = jest.fn();
@@ -166,6 +167,25 @@ describe('Ingestion', () => {
     expect(screen.getByText('ErrorPlaceholder')).toBeInTheDocument();
   });
 
+  it('should request the default empty placeholder with the ingestion table styling', async () => {
+    await act(async () => {
+      render(
+        <IngestionListTable
+          {...mockIngestionListTableProps}
+          extraTableProps={{ scroll: undefined }}
+          ingestionData={[]}
+        />,
+        {
+          wrapper: MemoryRouter,
+        }
+      );
+    });
+
+    const lastCall = (getErrorPlaceHolder as jest.Mock).mock.calls.at(-1);
+
+    expect(lastCall?.[4]).toBe('tw:relative tw:py-8');
+  });
+
   it('should not show the description column if showDescriptionCol is false', async () => {
     await act(async () => {
       render(

openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx

@@ -426,7 +426,8 @@ function IngestionListTable({
                 ingestionData.length,
                 isPlatFormDisabled,
                 theme,
-                pipelineType
+                pipelineType,
+                'tw:relative tw:py-8'
               ),
           }}
           pagination={false}

openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.test.tsx

@@ -11,8 +11,10 @@
  *  limitations under the License.
  */
 
+import { render } from '@testing-library/react';
 import { ServiceCategory } from '../enums/service.enum';
 import { PipelineType } from '../generated/api/services/ingestionPipelines/createIngestionPipeline';
+import { UIThemePreference } from '../generated/configuration/uiThemePreference';
 import { DatabaseServiceType } from '../generated/entity/services/databaseService';
 import { IngestionPipeline } from '../generated/entity/services/ingestionPipelines/ingestionPipeline';
 import { MetadataServiceType } from '../generated/entity/services/metadataService';
@@ -22,6 +24,15 @@ import {
   getIngestionTypes,
   getSupportedPipelineTypes,
 } from './IngestionConfigUtils';
+import { getErrorPlaceHolder } from './IngestionUtils';
+
+const mockTheme = {
+  primaryColor: '#000000',
+} as UIThemePreference['customTheme'];
+
+const AGENTS_CARD_CLASSNAME =
+  'tw:bg-primary tw:border tw:border-secondary tw:rounded-xl';
+const INGESTION_TABLE_CLASSNAME = 'tw:relative tw:py-8';
 
 describe('getSupportedPipelineTypes', () => {
   it('should return only return metadata pipeline types if config is undefined', () => {
@@ -199,3 +210,75 @@ describe('getIngestionTypes', () => {
     expect(result).toEqual([]);
   });
 });
+
+describe('getErrorPlaceHolder', () => {
+  it('should return null when ingestion data exists', () => {
+    const result = getErrorPlaceHolder(1, false, mockTheme);
+
+    expect(result).toBeNull();
+  });
+
+  it('should render the empty placeholder when there is no ingestion data', () => {
+    const { getByTestId } = render(
+      <>{getErrorPlaceHolder(0, false, mockTheme)}</>
+    );
+
+    expect(getByTestId('empty-placeholder')).toBeInTheDocument();
+  });
+
+  it('should forward the caller provided className to the placeholder', () => {
+    const { getByTestId } = render(
+      <>
+        {getErrorPlaceHolder(
+          0,
+          false,
+          mockTheme,
+          undefined,
+          INGESTION_TABLE_CLASSNAME
+        )}
+      </>
+    );
+    const placeholder = getByTestId('empty-placeholder');
+
+    expect(placeholder).toHaveClass('tw:relative', 'tw:py-8');
+    // Guards the visual regression: the agents card styling must never
+    // leak onto a caller that did not ask for it (e.g. the ingestion table).
+    expect(placeholder).not.toHaveClass(
+      'tw:bg-primary',
+      'tw:border-secondary',
+      'tw:rounded-xl'
+    );
+  });
+
+  it('should apply the agents card styling only when that className is passed', () => {
+    const { getByTestId } = render(
+      <>
+        {getErrorPlaceHolder(
+          0,
+          false,
+          mockTheme,
+          undefined,
+          AGENTS_CARD_CLASSNAME
+        )}
+      </>
+    );
+
+    expect(getByTestId('empty-placeholder')).toHaveClass(
+      'tw:bg-primary',
+      'tw:border-secondary',
+      'tw:rounded-xl'
+    );
+  });
+
+  it('should not apply any card styling when no className is provided', () => {
+    const { getByTestId } = render(
+      <>{getErrorPlaceHolder(0, false, mockTheme)}</>
+    );
+
+    expect(getByTestId('empty-placeholder')).not.toHaveClass(
+      'tw:bg-primary',
+      'tw:border-secondary',
+      'tw:rounded-xl'
+    );
+  });
+});

openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.tsx

@@ -129,12 +129,13 @@ export const getErrorPlaceHolder = (
   ingestionDataLength: number,
   isPlatFormDisabled: boolean,
   theme: UIThemePreference['customTheme'],
-  pipelineType?: PipelineType
+  pipelineType?: PipelineType,
+  className?: string
 ) => {
   if (ingestionDataLength === 0) {
     return (
       <EmptyPlaceholder
-        className="tw:bg-primary tw:border tw:border-secondary tw:rounded-xl"
+        className={className}
         description={getPipelineExtraInfo(
           isPlatFormDisabled,
           theme,