diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.component.tsx index ec8458615e69..84d7bc76e969 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.component.tsx @@ -190,7 +190,14 @@ const MetadataAgentsView: FC = ({ }, [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] ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.test.tsx index 499f867cdd24..1ec9204f86f9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/MetadataAgentsView.test.tsx +++ b/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(); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.test.tsx index 159d4b956ef3..3e9d61b3abef 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.test.tsx +++ b/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( + , + { + 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( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx index e0fd6312aa5c..39cc003c6860 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx +++ b/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} diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.test.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.test.tsx index 3ab740c245b0..79a187f30efe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.test.tsx +++ b/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' + ); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.tsx index e05e775cc0b8..d6c64a4281e4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/IngestionUtils.tsx +++ b/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 (