#13767: Remove ingestion pipeline action buttons and ingestion button if pipelineService is disabled

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

@@ -18,7 +18,9 @@ import { isEmpty, isUndefined, lowerCase } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ErrorPlaceHolderIngestion from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolderIngestion';
+import { DISABLED } from '../../constants/constants';
 import { IngestionPipeline } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
+import { useAirflowStatus } from '../../hooks/useAirflowStatus';
 import { showErrorToast } from '../../utils/ToastUtils';
 import Searchbar from '../common/SearchBarComponent/SearchBar.component';
 import EntityDeleteModal from '../Modals/EntityDeleteModal/EntityDeleteModal';
@@ -27,6 +29,7 @@ import {
   IngestionServicePermission,
   ResourceEntity,
 } from '../PermissionProvider/PermissionProvider.interface';
+import ButtonSkeleton from '../Skeleton/CommonSkeletons/ControlElements/ControlElements.component';
 import AddIngestionButton from './AddIngestionButton.component';
 import { IngestionProps, SelectedRowDetails } from './ingestion.interface';
 import IngestionListTable from './IngestionListTable.component';
@@ -55,6 +58,7 @@ const Ingestion: React.FC<IngestionProps> = ({
 }: IngestionProps) => {
   const { t } = useTranslation();
   const { getEntityPermissionByFqn } = usePermissionProvider();
+  const { isFetchingStatus, platform } = useAirflowStatus();
   const [searchText, setSearchText] = useState('');
   const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
   const [deleteSelection, setDeleteSelection] = useState<SelectedRowDetails>({
@@ -144,10 +148,48 @@ const Ingestion: React.FC<IngestionProps> = ({
     () =>
       isRequiredDetailsAvailable &&
       permissions.EditAll &&
+      displayAddIngestionButton &&
+      platform !== DISABLED,
+    [
+      isRequiredDetailsAvailable,
+      permissions,
       displayAddIngestionButton,
-    [isRequiredDetailsAvailable, permissions, displayAddIngestionButton]
+      platform,
+    ]
   );
 
+  const renderAddIngestionButton = useMemo(() => {
+    if (isFetchingStatus) {
+      return <ButtonSkeleton size="default" />;
+    }
+
+    if (showAddIngestionButton) {
+      return (
+        <AddIngestionButton
+          ingestionData={ingestionData}
+          ingestionList={ingestionList}
+          permissions={permissions}
+          pipelineType={pipelineType}
+          serviceCategory={serviceCategory}
+          serviceDetails={serviceDetails}
+          serviceName={serviceName}
+        />
+      );
+    }
+
+    return null;
+  }, [
+    isFetchingStatus,
+    showAddIngestionButton,
+    ingestionData,
+    ingestionList,
+    permissions,
+    pipelineType,
+    serviceCategory,
+    serviceDetails,
+    serviceName,
+  ]);
+
   useEffect(() => {
     getSearchedIngestions();
   }, [searchText, ingestionList]);
@@ -184,19 +226,7 @@ const Ingestion: React.FC<IngestionProps> = ({
               />
             ) : null}
           </div>
-          <div className="relative">
-            {showAddIngestionButton && (
-              <AddIngestionButton
-                ingestionData={ingestionData}
-                ingestionList={ingestionList}
-                permissions={permissions}
-                pipelineType={pipelineType}
-                serviceCategory={serviceCategory}
-                serviceDetails={serviceDetails}
-                serviceName={serviceName}
-              />
-            )}
-          </div>
+          <div className="relative">{renderAddIngestionButton}</div>
         </Col>
         <Col span={24}>
           <IngestionListTable

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

@@ -16,13 +16,15 @@ import {
   findByTestId,
   findByText,
   fireEvent,
+  getAllByText,
   queryByTestId,
   render,
 } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { ServiceCategory } from '../../enums/service.enum';
 import { IngestionPipeline } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
+import { useAirflowStatus } from '../../hooks/useAirflowStatus';
 import { OperationPermission } from '../PermissionProvider/PermissionProvider.interface';
 import Ingestion from './Ingestion.component';
 import { mockIngestionWorkFlow, mockService } from './Ingestion.mock';
@@ -88,6 +90,11 @@ jest.mock('./IngestionRecentRun/IngestionRecentRuns.component', () => ({
     .mockImplementation(() => <p>IngestionRecentRuns</p>),
 }));
 
+jest.mock(
+  '../Skeleton/CommonSkeletons/ControlElements/ControlElements.component',
+  () => jest.fn().mockImplementation(() => <div>ButtonSkeleton</div>)
+);
+
 jest.mock('../../components/PermissionProvider/PermissionProvider', () => ({
   usePermissionProvider: jest.fn().mockReturnValue({
     getEntityPermissionByFqn: jest.fn().mockReturnValue({
@@ -102,6 +109,15 @@ jest.mock('../../components/PermissionProvider/PermissionProvider', () => ({
   }),
 }));
 
+jest.mock('../../hooks/useAirflowStatus', () => ({
+  useAirflowStatus: jest.fn(() => {
+    return {
+      isFetchingStatus: false,
+      platform: 'airflow',
+    };
+  }),
+}));
+
 describe('Test Ingestion page', () => {
   it('Page Should render', async () => {
     const { container } = render(
@@ -414,4 +430,82 @@ describe('Test Ingestion page', () => {
       await findByText(container, /KillIngestionModal/i)
     ).toBeInTheDocument();
   });
+
+  it('should render button skeleton if airflow status is loading', async () => {
+    (useAirflowStatus as jest.Mock).mockImplementation(() => ({
+      isFetchingStatus: true,
+      platform: 'airflow',
+    }));
+
+    const { container } = render(
+      <Ingestion
+        isRequiredDetailsAvailable
+        airflowEndpoint=""
+        deleteIngestion={mockDeleteIngestion}
+        deployIngestion={mockDeployIngestion}
+        handleEnableDisableIngestion={handleEnableDisableIngestion}
+        ingestionList={
+          mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
+        }
+        paging={mockPaging}
+        permissions={mockPermissions}
+        serviceCategory={ServiceCategory.DASHBOARD_SERVICES}
+        serviceDetails={mockService}
+        serviceName=""
+        triggerIngestion={mockTriggerIngestion}
+        onIngestionWorkflowsUpdate={mockUpdateWorkflows}
+      />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    const addIngestionButton = queryByTestId(
+      container,
+      'add-new-ingestion-button'
+    );
+
+    const loadingButton = getAllByText(container, 'ButtonSkeleton');
+
+    expect(loadingButton).toHaveLength(2);
+
+    expect(addIngestionButton).not.toBeInTheDocument();
+  });
+
+  it('should not render add ingestion button if platform is disabled', async () => {
+    (useAirflowStatus as jest.Mock).mockImplementation(() => ({
+      isFetchingStatus: false,
+      platform: 'disabled',
+    }));
+
+    const { container } = render(
+      <Ingestion
+        isRequiredDetailsAvailable
+        airflowEndpoint=""
+        deleteIngestion={mockDeleteIngestion}
+        deployIngestion={mockDeployIngestion}
+        handleEnableDisableIngestion={handleEnableDisableIngestion}
+        ingestionList={
+          mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
+        }
+        paging={mockPaging}
+        permissions={mockPermissions}
+        serviceCategory={ServiceCategory.DASHBOARD_SERVICES}
+        serviceDetails={mockService}
+        serviceName=""
+        triggerIngestion={mockTriggerIngestion}
+        onIngestionWorkflowsUpdate={mockUpdateWorkflows}
+      />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    const addIngestionButton = queryByTestId(
+      container,
+      'add-new-ingestion-button'
+    );
+
+    expect(addIngestionButton).not.toBeInTheDocument();
+  });
 });

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

@@ -17,12 +17,15 @@ import cronstrue from 'cronstrue';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Table from '../../components/common/Table/Table';
+import { DISABLED, NO_DATA_PLACEHOLDER } from '../../constants/constants';
 import { IngestionPipeline } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
 import { usePaging } from '../../hooks/paging/usePaging';
+import { useAirflowStatus } from '../../hooks/useAirflowStatus';
 import { getEntityName } from '../../utils/EntityUtils';
 import { getErrorPlaceHolder } from '../../utils/IngestionUtils';
 import NextPrevious from '../common/NextPrevious/NextPrevious';
 import { PagingHandlerParams } from '../common/NextPrevious/NextPrevious.interface';
+import ButtonSkeleton from '../Skeleton/CommonSkeletons/ControlElements/ControlElements.component';
 import { IngestionListTableProps } from './IngestionListTable.interface';
 import { IngestionRecentRuns } from './IngestionRecentRun/IngestionRecentRuns.component';
 import PipelineActions from './PipelineActions.component';
@@ -47,6 +50,7 @@ function IngestionListTable({
   isLoading = false,
 }: IngestionListTableProps) {
   const { t } = useTranslation();
+  const { isFetchingStatus, platform } = useAirflowStatus();
 
   const {
     currentPage,
@@ -61,6 +65,8 @@ function IngestionListTable({
     handlePagingChange(paging);
   }, [paging]);
 
+  const isPlatFormDisabled = useMemo(() => platform === DISABLED, [platform]);
+
   const ingestionPagingHandler = useCallback(
     ({ cursorType, currentPage }: PagingHandlerParams) => {
       if (cursorType) {
@@ -99,6 +105,14 @@ function IngestionListTable({
   };
 
   const renderActionsField = (_: string, record: IngestionPipeline) => {
+    if (isFetchingStatus) {
+      return <ButtonSkeleton size="default" />;
+    }
+
+    if (isPlatFormDisabled) {
+      return NO_DATA_PLACEHOLDER;
+    }
+
     return (
       <PipelineActions
         deleteSelection={deleteSelection}
@@ -168,6 +182,8 @@ function IngestionListTable({
       handleIsConfirmationModalOpen,
       onIngestionWorkflowsUpdate,
       ingestionData,
+      isFetchingStatus,
+      isPlatFormDisabled,
     ]
   );
 
@@ -187,6 +203,7 @@ function IngestionListTable({
           emptyText: getErrorPlaceHolder(
             isRequiredDetailsAvailable,
             ingestionData.length,
+            isPlatFormDisabled,
             pipelineType
           ),
         }}

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

@@ -13,6 +13,8 @@
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { NO_DATA_PLACEHOLDER } from '../../constants/constants';
+import { useAirflowStatus } from '../../hooks/useAirflowStatus';
 import { mockIngestionListTableProps } from '../../mocks/IngestionListTable.mock';
 import IngestionListTable from './IngestionListTable.component';
 
@@ -22,6 +24,12 @@ jest.mock('../../components/common/NextPrevious/NextPrevious', () =>
 jest.mock('../../components/Loader/Loader', () =>
   jest.fn().mockImplementation(() => <div>loader</div>)
 );
+
+jest.mock(
+  '../Skeleton/CommonSkeletons/ControlElements/ControlElements.component',
+  () => jest.fn().mockImplementation(() => <div>ButtonSkeleton</div>)
+);
+
 jest.mock('./PipelineActions.component', () =>
   jest.fn().mockImplementation(() => <div>pipelineActions</div>)
 );
@@ -31,6 +39,15 @@ jest.mock('./IngestionRecentRun/IngestionRecentRuns.component', () => ({
     .mockImplementation(() => <div>ingestionRecentRuns</div>),
 }));
 
+jest.mock('../../hooks/useAirflowStatus', () => ({
+  useAirflowStatus: jest.fn(() => {
+    return {
+      isFetchingStatus: false,
+      platform: 'airflow',
+    };
+  }),
+}));
+
 describe('IngestionListTable tests', () => {
   it('Should display the loader if the isLoading is true', async () => {
     render(<IngestionListTable {...mockIngestionListTableProps} isLoading />);
@@ -107,4 +124,38 @@ describe('IngestionListTable tests', () => {
 
     expect(ingestionDagName).toBeInTheDocument();
   });
+
+  it('Should render pipeline action component if airflow platform is not disabled', () => {
+    render(<IngestionListTable {...mockIngestionListTableProps} />);
+
+    const actionButtons = screen.getByText('pipelineActions');
+
+    expect(actionButtons).toBeInTheDocument();
+  });
+
+  it('Should render noDataPlaceholder in ingestion table is airflow platform is disabled', () => {
+    (useAirflowStatus as jest.Mock).mockImplementation(() => ({
+      isFetchingStatus: false,
+      platform: 'disabled',
+    }));
+
+    render(<IngestionListTable {...mockIngestionListTableProps} />);
+
+    const noData = screen.getByText(NO_DATA_PLACEHOLDER);
+
+    expect(noData).toBeInTheDocument();
+  });
+
+  it('Should render loader in ingestion table is airflow status is fetching', () => {
+    (useAirflowStatus as jest.Mock).mockImplementation(() => ({
+      isFetchingStatus: true,
+      platform: 'disabled',
+    }));
+
+    render(<IngestionListTable {...mockIngestionListTableProps} />);
+
+    const loader = screen.getByText('ButtonSkeleton');
+
+    expect(loader).toBeInTheDocument();
+  });
 });