fix(ui): fix the errorPlaceholder visible when component is in loading state (#11387)

* fix the errorPlaceholder visible when component is in loading state

* changes as per commets

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { PlusOutlined } from '@ant-design/icons';
 import {
   Button,
   Card,
@@ -21,6 +22,8 @@ import {
   Typography,
 } from 'antd';
 import { AxiosError } from 'axios';
+import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from 'enums/common.enum';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -276,27 +279,27 @@ const KPIChart: FC<Props> = ({ chartFilter, kpiList }) => {
         <Space
           className="w-full justify-center items-center"
           direction="vertical">
-          <Typography.Text>
+          <ErrorPlaceHolder
-            {t('message.no-kpi-available-add-new-one')}
+            button={
-          </Typography.Text>
               <AntdTooltip
-            title={
+                title={!isAdminUser && t('message.no-permission-for-action')}>
-              isAdminUser
-                ? t('label.add-entity', {
-                    entity: t('label.kpi-uppercase'),
-                  })
-                : t('message.no-permission-for-action')
-            }>
                 <Button
-              className="tw-border-primary tw-text-primary"
+                  ghost
-              disabled={!isAdminUser}
+                  icon={<PlusOutlined />}
-              type="default"
+                  type="primary"
                   onClick={handleAddKpi}>
                   {t('label.add-entity', {
                     entity: t('label.kpi-uppercase'),
                   })}
                 </Button>
               </AntdTooltip>
+            }
+            className="p-y-lg"
+            permission={isAdminUser}
+            size={SIZE.MEDIUM}
+            type={ERROR_PLACEHOLDER_TYPE.ASSIGN}>
+            {t('message.no-kpi-available-add-new-one')}
+          </ErrorPlaceHolder>
         </Space>
       )}
     </Card>

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

@@ -11,11 +11,14 @@
  *  limitations under the License.
  */
 
-import { CheckOutlined } from '@ant-design/icons';
+import { CheckOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Col, Popover, Row, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
+import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
 import cronstrue from 'cronstrue';
+import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
+import { isEmpty } from 'lodash';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
@@ -550,13 +553,44 @@ const TestSuitePipelineTab = () => {
     currTriggerId,
   ]);
 
+  const errorPlaceholder = useMemo(
+    () => (
+      <ErrorPlaceHolder
+        button={
+          <Button
+            ghost
+            className="p-x-lg"
+            data-testid="add-placeholder-button"
+            icon={<PlusOutlined />}
+            type="primary"
+            onClick={() => {
+              history.push(getTestSuiteIngestionPath(testSuiteFQN));
+            }}>
+            {t('label.add')}
+          </Button>
+        }
+        className="mt-24"
+        heading={t('label.pipeline')}
+        permission={createPermission}
+        type={ERROR_PLACEHOLDER_TYPE.ASSIGN}
+      />
+    ),
+    [testSuiteFQN]
+  );
+
   if (isLoading || isFetchingStatus) {
     return <Loader />;
   }
 
-  return !isAirflowAvailable ? (
+  if (!isAirflowAvailable) {
-    <ErrorPlaceHolderIngestion />
+    return <ErrorPlaceHolderIngestion />;
-  ) : (
+  }
+
+  if (isEmpty(testSuitePipelines)) {
+    return errorPlaceholder;
+  }
+
+  return (
     <TestCaseCommonTabContainer
       buttonName={t('label.add-entity', {
         entity: t('label.ingestion'),

openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx

@@ -159,7 +159,7 @@ const AlertsPage = () => {
     []
   );
 
-  if (isEmpty(alerts)) {
+  if (isEmpty(alerts) && !loading) {
     return (
       <ErrorPlaceHolder
         permission
@@ -200,7 +200,7 @@ const AlertsPage = () => {
             bordered
             columns={columns}
             dataSource={alerts}
-            loading={{ spinning: loading, indicator: <Loader /> }}
+            loading={{ spinning: loading, indicator: <Loader size="small" /> }}
             pagination={false}
             rowKey="id"
             size="middle"

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx

@@ -188,7 +188,7 @@ const KPIList = () => {
 
   if (isEmpty(kpiList)) {
     return (
-      <div className="mt-24 w-full">
+      <div className="m-t-lg w-full">
         <EmptyGraphPlaceholder />
       </div>
     );

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -331,6 +331,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
             entity: t('label.database-schema'),
           })
         );
+
         setError(errMsg);
         showErrorToast(errMsg);
       })
@@ -638,7 +639,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   const getSchemaTableList = () => {
     return (
       <Col span={24}>
-        {isEmpty(tableData) && !showDeletedTables ? (
+        {isEmpty(tableData) && !showDeletedTables && !tableDataLoading ? (
           <ErrorPlaceHolder
             className="mt-0-important"
             type={ERROR_PLACEHOLDER_TYPE.NO_DATA}
@@ -650,10 +651,6 @@ const DatabaseSchemaPage: FunctionComponent = () => {
             columns={tableColumn}
             data-testid="databaseSchema-tables"
             dataSource={tableData}
-            loading={{
-              spinning: tableDataLoading,
-              indicator: <Loader size="small" />,
-            }}
             locale={{
               emptyText: <FilterTablePlaceHolder />,
             }}
@@ -786,16 +783,20 @@ const DatabaseSchemaPage: FunctionComponent = () => {
     appState.inPageSearchText = '';
   }, []);
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
     return (
-    <Fragment>
-      {isLoading ? (
-        <Loader />
-      ) : error ? (
       <ErrorPlaceHolder>
         <p data-testid="error-message">{error}</p>
       </ErrorPlaceHolder>
-      ) : (
+    );
-        <>
+  }
+
+  return (
+    <Fragment>
       {databaseSchemaPermission.ViewAll ||
       databaseSchemaPermission.ViewBasic ? (
         <PageContainerV1>
@@ -864,6 +865,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
                 <Col className="p-y-md" span={24}>
                   {activeTab === 1 && (
                     <Card className="h-full">
+                      {tableDataLoading ? (
+                        <Loader />
+                      ) : (
                         <Row gutter={[16, 16]}>
                           <Col data-testid="description-container" span={24}>
                             <Description
@@ -888,6 +892,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
                           </Col>
                           {getSchemaTableList()}
                         </Row>
+                      )}
                     </Card>
                   )}
                   {activeTab === 2 && (
@@ -941,8 +946,6 @@ const DatabaseSchemaPage: FunctionComponent = () => {
           type={ERROR_PLACEHOLDER_TYPE.PERMISSION}
         />
       )}
-        </>
-      )}
     </Fragment>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx

@@ -68,7 +68,7 @@ const TestSuitePage = () => {
   const { isAdminUser } = useAuth();
   const { isAuthDisabled } = useAuthContext();
   const [testSuites, setTestSuites] = useState<Array<TestSuite>>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [testSuitePage, setTestSuitePage] = useState(INITIAL_PAGING_VALUE);
   const [testSuitePaging, setTestSuitePaging] = useState<Paging>(pagingObject);
   const [selectedTestSuite, setSelectedTestSuite] = useState<TestSuite>();
@@ -85,6 +85,7 @@ const TestSuitePage = () => {
   }, [permissions]);
 
   const handleShowDeleted = (checked: boolean) => {
+    setIsLoading(true);
     setShowDeleted(checked);
   };
 
@@ -232,11 +233,7 @@ const TestSuitePage = () => {
     [createPermission]
   );
 
-  if (isLoading) {
+  if (isEmpty(testSuites) && !showDeleted && !isLoading) {
-    return <Loader />;
-  }
-
-  if (isEmpty(testSuites) && !showDeleted) {
     return <PageContainerV1>{errorPlaceHolder}</PageContainerV1>;
   }
 
@@ -284,7 +281,10 @@ const TestSuitePage = () => {
               columns={columns}
               data-testid="test-suite-table"
               dataSource={testSuites}
-              loading={{ spinning: isLoading, indicator: <Loader /> }}
+              loading={{
+                spinning: isLoading,
+                indicator: <Loader size="small" />,
+              }}
               locale={{
                 emptyText: <FilterTablePlaceHolder />,
               }}
@@ -306,6 +306,7 @@ const TestSuitePage = () => {
           )}
         </Row>
         <DeleteWidgetModal
+          isRecursiveDelete
           afterDeleteAction={fetchTestSuites}
           allowSoftDelete={!showDeleted}
           entityId={selectedTestSuite?.id || ''}

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx

@@ -770,15 +770,65 @@ const DatabaseDetails: FunctionComponent = () => {
     setIsEditable(false);
   };
 
+  const databaseTable = useMemo(() => {
+    if (schemaDataLoading) {
+      return <Loader />;
+    } else if (!isEmpty(schemaData)) {
+      return (
+        <Col span={24}>
+          <Table
+            bordered
+            className="table-shadow"
+            columns={tableColumn}
+            data-testid="database-databaseSchemas"
+            dataSource={schemaData}
+            loading={{
+              spinning: schemaDataLoading,
+              indicator: <Loader size="small" />,
+            }}
+            pagination={false}
+            rowKey="id"
+            size="small"
+          />
+          {Boolean(
+            !isNil(databaseSchemaPaging.after) ||
+              !isNil(databaseSchemaPaging.before)
+          ) && (
+            <NextPrevious
+              currentPage={currentPage}
+              pageSize={PAGE_SIZE}
+              paging={databaseSchemaPaging}
+              pagingHandler={databaseSchemaPagingHandler}
+              totalCount={databaseSchemaPaging.total}
+            />
+          )}
+        </Col>
+      );
+    } else {
+      return <ErrorPlaceHolder />;
+    }
+  }, [
+    schemaDataLoading,
+    schemaData,
+    tableColumn,
+    databaseSchemaPaging,
+    currentPage,
+    databaseSchemaPagingHandler,
+  ]);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
     return (
-    <>
-      {isLoading ? (
-        <Loader />
-      ) : error ? (
       <ErrorPlaceHolder>
         <p data-testid="error-message">{error}</p>
       </ErrorPlaceHolder>
-      ) : (
+    );
+  }
+
+  return (
     <>
       {databasePermission.ViewAll || databasePermission.ViewBasic ? (
         <PageContainerV1>
@@ -825,11 +875,7 @@ const DatabaseDetails: FunctionComponent = () => {
                 </Col>
 
                 <Col className="m-t-xs" span={24}>
-                      <Space
+                  <Space wrap align="center" data-testid="extrainfo" size={4}>
-                        wrap
-                        align="center"
-                        data-testid="extrainfo"
-                        size={4}>
                     {extraInfo.map((info, index) => (
                       <span
                         className="tw-flex tw-items-center"
@@ -939,34 +985,8 @@ const DatabaseDetails: FunctionComponent = () => {
                             onThreadLinkSelect={onThreadLinkSelect}
                           />
                         </Col>
-                            <Col span={24}>
+
-                              <Table
+                        {databaseTable}
-                                bordered
-                                className="table-shadow"
-                                columns={tableColumn}
-                                data-testid="database-databaseSchemas"
-                                dataSource={schemaData}
-                                loading={{
-                                  spinning: schemaDataLoading,
-                                  indicator: <Loader size="small" />,
-                                }}
-                                pagination={false}
-                                rowKey="id"
-                                size="small"
-                              />
-                              {Boolean(
-                                !isNil(databaseSchemaPaging.after) ||
-                                  !isNil(databaseSchemaPaging.before)
-                              ) && (
-                                <NextPrevious
-                                  currentPage={currentPage}
-                                  pageSize={PAGE_SIZE}
-                                  paging={databaseSchemaPaging}
-                                  pagingHandler={databaseSchemaPagingHandler}
-                                  totalCount={databaseSchemaPaging.total}
-                                />
-                              )}
-                            </Col>
                       </Row>
                     </Card>
                   )}
@@ -1019,8 +1039,6 @@ const DatabaseDetails: FunctionComponent = () => {
         <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />
       )}
     </>
-      )}
-    </>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -159,6 +159,7 @@ const ServicePage: FunctionComponent = () => {
   const [serviceDetails, setServiceDetails] = useState<ServicesType>();
   const [data, setData] = useState<Array<ServicePageData>>([]);
   const [isLoading, setIsLoading] = useState(!isOpenMetadataService);
+  const [isServiceLoading, setIsServiceLoading] = useState(true);
   const [dataModel, setDataModel] = useState<Array<ServicePageData>>([]);
   const [dataModelPaging, setDataModelPaging] = useState<Paging>(pagingObject);
   const [paging, setPaging] = useState<Paging>(pagingObject);
@@ -230,6 +231,23 @@ const ServicePage: FunctionComponent = () => {
     },
   ];
 
+  const isTestingDisabled = useMemo(
+    () =>
+      !servicePermission.EditAll ||
+      (serviceCategory === ServiceCategory.METADATA_SERVICES &&
+        serviceFQN === OPEN_METADATA) ||
+      isUndefined(connectionDetails),
+    [servicePermission, serviceCategory, serviceFQN, connectionDetails]
+  );
+
+  const goToEditConnection = () => {
+    history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
+  };
+
+  const handleDelete = () => {
+    setDeleteWidgetVisible(true);
+  };
+
   const activeTabHandler = (tabValue: number) => {
     setActiveTab(tabValue);
     const currentTabIndex = tabValue - 1;
@@ -416,7 +434,7 @@ const ServicePage: FunctionComponent = () => {
   };
 
   const fetchDatabases = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getDatabases(
         serviceFQN,
@@ -431,12 +449,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchTopics = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getTopics(
         serviceFQN,
@@ -448,12 +466,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchDashboards = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getDashboards(
         serviceFQN,
@@ -465,12 +483,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchDashboardsDataModel = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getDataModels(
         serviceFQN,
@@ -482,12 +500,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchPipeLines = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getPipelines(
         serviceFQN,
@@ -499,12 +517,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchMlModal = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const { data, paging: resPaging } = await getMlModels(
         serviceFQN,
@@ -516,12 +534,12 @@ const ServicePage: FunctionComponent = () => {
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
   const fetchContainers = async (paging?: PagingWithoutTotal) => {
-    setIsLoading(true);
+    setIsServiceLoading(true);
     try {
       const response = await getContainers({
         service: serviceFQN,
@@ -536,7 +554,7 @@ const ServicePage: FunctionComponent = () => {
       setData([]);
       setPaging(pagingObject);
     } finally {
-      setIsLoading(false);
+      setIsServiceLoading(false);
     }
   };
 
@@ -836,7 +854,7 @@ const ServicePage: FunctionComponent = () => {
     setCurrentPage(activePage ?? 1);
   };
 
-  const getIngestionTab = () => {
+  const ingestionTab = useMemo(() => {
     if (!isAirflowAvailable) {
       return <ErrorPlaceHolderIngestion />;
     } else if (isUndefined(airflowEndpoint) || isUndefined(serviceDetails)) {
@@ -863,11 +881,90 @@ const ServicePage: FunctionComponent = () => {
         </div>
       );
     }
-  };
+  }, [
+    isAirflowAvailable,
+    airflowEndpoint,
+    serviceDetails,
+    deleteIngestionById,
+    deployIngestion,
+    handleEnableDisableIngestion,
+    ingestions,
+    ingestionPaging,
+    servicePermission,
+    serviceName,
+    serviceList,
+    serviceFQN,
+    triggerIngestionById,
+    getAllIngestionWorkflows,
+  ]);
 
-  const getDataModalTab = () => (
+  const dataModalTab = useMemo(
-    <DataModelTable data={dataModel} isLoading={isLoading} />
+    () => <DataModelTable data={dataModel} isLoading={isLoading} />,
+    [dataModel, isLoading]
   );
+
+  const testConnectionTab = useMemo(() => {
+    return (
+      <>
+        <Space className="w-full my-4 justify-end">
+          <Tooltip
+            title={
+              servicePermission.EditAll
+                ? t('label.edit-entity', {
+                    entity: t('label.connection'),
+                  })
+                : t('message.no-permission-for-action')
+            }>
+            <Button
+              ghost
+              data-testid="edit-connection-button"
+              disabled={!servicePermission.EditAll}
+              type="primary"
+              onClick={goToEditConnection}>
+              {t('label.edit-entity', {
+                entity: t('label.connection'),
+              })}
+            </Button>
+          </Tooltip>
+          {allowTestConn && isAirflowAvailable && (
+            <Tooltip
+              title={
+                servicePermission.EditAll
+                  ? t('label.test-entity', {
+                      entity: t('label.connection'),
+                    })
+                  : t('message.no-permission-for-action')
+              }>
+              <TestConnection
+                connectionType={serviceDetails?.serviceType ?? ''}
+                formData={connectionDetails as ConfigData}
+                isTestingDisabled={isTestingDisabled}
+                serviceCategory={serviceCategory as ServiceCategory}
+                serviceName={serviceDetails?.name}
+                // validation is not required as we have all the data available and not in edit mode
+                shouldValidateForm={false}
+                showDetails={false}
+              />
+            </Tooltip>
+          )}
+        </Space>
+        <ServiceConnectionDetails
+          connectionDetails={connectionDetails || {}}
+          serviceCategory={serviceCategory}
+          serviceFQN={serviceDetails?.serviceType || ''}
+        />
+      </>
+    );
+  }, [
+    servicePermission.EditAll,
+    allowTestConn,
+    isAirflowAvailable,
+    serviceDetails,
+    connectionDetails,
+    isTestingDisabled,
+    serviceCategory,
+  ]);
+
   useEffect(() => {
     if (
       servicePageTabs(getCountLabel(serviceName))[activeTab - 1].path !== tab
@@ -876,18 +973,6 @@ const ServicePage: FunctionComponent = () => {
     }
   }, [tab]);
 
-  const goToEditConnection = () => {
-    history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
-  };
-
-  const handleEditConnection = () => {
-    goToEditConnection();
-  };
-
-  const handleDelete = () => {
-    setDeleteWidgetVisible(true);
-  };
-
   useEffect(() => {
     if (!isOpenMetadataService) {
       fetchServicePermission();
@@ -960,18 +1045,53 @@ const ServicePage: FunctionComponent = () => {
     ];
   }, [serviceName]);
 
+  const entityServiceTab = useMemo(() => {
+    if (isServiceLoading) {
+      return <Loader />;
+    } else if (!isEmpty(data) && !isServiceLoading) {
+      return (
+        <div data-testid="table-container">
+          <Table
+            bordered
+            className="mt-4 table-shadow"
+            columns={tableColumn}
+            components={tableComponent}
+            data-testid="service-children-table"
+            dataSource={data}
+            pagination={false}
+            rowKey="id"
+            size="small"
+          />
+          {Boolean(!isNil(paging.after) || !isNil(paging.before)) && (
+            <NextPrevious
+              currentPage={currentPage}
+              pageSize={PAGE_SIZE}
+              paging={paging}
+              pagingHandler={pagingHandler}
+              totalCount={paging.total}
+            />
+          )}
+        </div>
+      );
+    } else {
+      return <ErrorPlaceHolder />;
+    }
+  }, [
+    isServiceLoading,
+    data,
+    paging,
+    tableColumn,
+    tableComponent,
+    currentPage,
+    pagingHandler,
+  ]);
+
   useEffect(() => {
     if (isAirflowAvailable && !isOpenMetadataService) {
       getAllIngestionWorkflows();
     }
   }, [isAirflowAvailable]);
 
-  const isTestingDisabled =
-    !servicePermission.EditAll ||
-    (serviceCategory === ServiceCategory.METADATA_SERVICES &&
-      serviceFQN === OPEN_METADATA) ||
-    isUndefined(connectionDetails);
-
   if (isLoading) {
     return (
       <PageContainerV1>
@@ -1077,96 +1197,10 @@ const ServicePage: FunctionComponent = () => {
                   tabs={tabs}
                 />
                 <Col span={24}>
-                  {activeTab === 1 &&
+                  {activeTab === 1 && entityServiceTab}
-                    (isEmpty(data) ? (
+                  {activeTab === 4 && dataModalTab}
-                      <ErrorPlaceHolder />
+                  {activeTab === 2 && ingestionTab}
-                    ) : (
+                  {activeTab === 3 && testConnectionTab}
-                      <div data-testid="table-container">
-                        <Table
-                          bordered
-                          className="mt-4 table-shadow"
-                          columns={tableColumn}
-                          components={tableComponent}
-                          data-testid="service-children-table"
-                          dataSource={data}
-                          loading={{
-                            spinning: isLoading,
-                            indicator: <Loader size="small" />,
-                          }}
-                          pagination={false}
-                          rowKey="id"
-                          size="small"
-                        />
-                        {Boolean(
-                          !isNil(paging.after) || !isNil(paging.before)
-                        ) && (
-                          <NextPrevious
-                            currentPage={currentPage}
-                            pageSize={PAGE_SIZE}
-                            paging={paging}
-                            pagingHandler={pagingHandler}
-                            totalCount={paging.total}
-                          />
-                        )}
-                      </div>
-                    ))}
-
-                  {activeTab === 4 && getDataModalTab()}
-                  {activeTab === 2 && getIngestionTab()}
-
-                  {activeTab === 3 && (
-                    <>
-                      <Space className="w-full my-4 justify-end">
-                        <Tooltip
-                          title={
-                            servicePermission.EditAll
-                              ? t('label.edit-entity', {
-                                  entity: t('label.connection'),
-                                })
-                              : t('message.no-permission-for-action')
-                          }>
-                          <Button
-                            ghost
-                            data-testid="edit-connection-button"
-                            disabled={!servicePermission.EditAll}
-                            type="primary"
-                            onClick={handleEditConnection}>
-                            {t('label.edit-entity', {
-                              entity: t('label.connection'),
-                            })}
-                          </Button>
-                        </Tooltip>
-                        {allowTestConn && isAirflowAvailable && (
-                          <Tooltip
-                            title={
-                              servicePermission.EditAll
-                                ? t('label.test-entity', {
-                                    entity: t('label.connection'),
-                                  })
-                                : t('message.no-permission-for-action')
-                            }>
-                            <TestConnection
-                              connectionType={serviceDetails?.serviceType ?? ''}
-                              formData={connectionDetails as ConfigData}
-                              isTestingDisabled={isTestingDisabled}
-                              serviceCategory={
-                                serviceCategory as ServiceCategory
-                              }
-                              serviceName={serviceDetails?.name}
-                              // validation is not required as we have all the data available and not in edit mode
-                              shouldValidateForm={false}
-                              showDetails={false}
-                            />
-                          </Tooltip>
-                        )}
-                      </Space>
-                      <ServiceConnectionDetails
-                        connectionDetails={connectionDetails || {}}
-                        serviceCategory={serviceCategory}
-                        serviceFQN={serviceDetails?.serviceType || ''}
-                      />
-                    </>
-                  )}
                 </Col>
               </Col>
             </Row>