From 2a03cb0c7c54d117637d03b40e6ca30d2b434c5a Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 21 Jul 2023 10:23:06 +0530
Subject: [PATCH] chore(ui): ingestion workflow improvement (#12524)

---
 .../DataAssetsHeader.component.tsx            | 32 +++++++++++--------
 .../Ingestion/Ingestion.component.tsx         | 12 +++----
 .../IngestionListTable.component.tsx          |  6 ++--
 .../Ingestion/IngestionListTable.interface.ts |  2 +-
 .../Ingestion/PipelineActions.component.tsx   | 10 +++---
 .../Ingestion/PipelineActions.interface.ts    |  2 +-
 .../common/success-screen/SuccessScreen.tsx   | 22 ++++++++-----
 .../ServiceDetailsPage/ServiceDetailsPage.tsx | 13 +++++---
 8 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
index 3788aaae565..0d2d2dbe9d1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
@@ -130,18 +130,22 @@ export const DataAssetsHeader = ({
   );
   const [copyTooltip, setCopyTooltip] = useState<string>();
 
-  const excludeEntityService = [
-    EntityType.DATABASE,
-    EntityType.DATABASE_SCHEMA,
-    EntityType.DATABASE_SERVICE,
-    EntityType.DASHBOARD_SERVICE,
-    EntityType.MESSAGING_SERVICE,
-    EntityType.PIPELINE_SERVICE,
-    EntityType.MLMODEL_SERVICE,
-    EntityType.METADATA_SERVICE,
-    EntityType.STORAGE_SERVICE,
-    ...SERVICE_CATEGORIES,
-  ].includes(entityType);
+  const excludeEntityService = useMemo(
+    () =>
+      [
+        EntityType.DATABASE,
+        EntityType.DATABASE_SCHEMA,
+        EntityType.DATABASE_SERVICE,
+        EntityType.DASHBOARD_SERVICE,
+        EntityType.MESSAGING_SERVICE,
+        EntityType.PIPELINE_SERVICE,
+        EntityType.MLMODEL_SERVICE,
+        EntityType.METADATA_SERVICE,
+        EntityType.STORAGE_SERVICE,
+        ...SERVICE_CATEGORIES,
+      ].includes(entityType),
+    [entityType]
+  );
   const hasFollowers = 'followers' in dataAsset;
 
   const { entityName, tier, isFollowing, version, followers } = useMemo(
@@ -226,7 +230,7 @@ export const DataAssetsHeader = ({
   };
 
   useEffect(() => {
-    if (dataAsset.fullyQualifiedName && !isTourPage) {
+    if (dataAsset.fullyQualifiedName && !isTourPage && !excludeEntityService) {
       fetchActiveAnnouncement();
       fetchTaskCount();
     }
@@ -234,7 +238,7 @@ export const DataAssetsHeader = ({
       const asset = dataAsset as Container;
       fetchContainerParent(asset.parent?.fullyQualifiedName ?? '');
     }
-  }, [dataAsset]);
+  }, [dataAsset, excludeEntityService, isTourPage]);
 
   const { extraInfo, breadcrumbs }: DataAssetHeaderInfo = useMemo(
     () =>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
index a6276b438f6..ceac99b387f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
@@ -80,10 +80,10 @@ const Ingestion: React.FC<IngestionProps> = ({
 
   const [ingestionData, setIngestionData] =
     useState<Array<IngestionPipeline>>(ingestionList);
-  const [servicePermission, setServicePermission] =
+  const [ingestionPipelinesPermission, setIngestionPipelinesPermission] =
     useState<IngestionServicePermission>();
 
-  const fetchServicePermission = async () => {
+  const fetchIngestionPipelinesPermission = async () => {
     try {
       const promises = ingestionList.map((item) =>
         getEntityPermissionByFqn(ResourceEntity.INGESTION_PIPELINE, item.name)
@@ -98,7 +98,7 @@ const Ingestion: React.FC<IngestionProps> = ({
         };
       }, {});
 
-      setServicePermission(permissionData);
+      setIngestionPipelinesPermission(permissionData);
     } catch (error) {
       showErrorToast(error as AxiosError);
     }
@@ -154,8 +154,8 @@ const Ingestion: React.FC<IngestionProps> = ({
   }, [searchText, ingestionList]);
 
   useEffect(() => {
-    fetchServicePermission();
-  }, []);
+    fetchIngestionPipelinesPermission();
+  }, [ingestionList]);
 
   const getIngestionTab = () => {
     return (
@@ -207,6 +207,7 @@ const Ingestion: React.FC<IngestionProps> = ({
           handleEnableDisableIngestion={handleEnableDisableIngestion}
           handleIsConfirmationModalOpen={handleIsConfirmationModalOpen}
           ingestionData={ingestionData}
+          ingestionPipelinesPermission={ingestionPipelinesPermission}
           isRequiredDetailsAvailable={isRequiredDetailsAvailable}
           paging={paging}
           permissions={permissions}
@@ -214,7 +215,6 @@ const Ingestion: React.FC<IngestionProps> = ({
           pipelineType={pipelineType}
           serviceCategory={serviceCategory}
           serviceName={serviceName}
-          servicePermission={servicePermission}
           triggerIngestion={triggerIngestion}
           onIngestionWorkflowsUpdate={onIngestionWorkflowsUpdate}
         />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.component.tsx
index 34233ac6651..6cf8fe57282 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.component.tsx
@@ -36,7 +36,7 @@ function IngestionListTable({
   paging,
   handleEnableDisableIngestion,
   onIngestionWorkflowsUpdate,
-  servicePermission,
+  ingestionPipelinesPermission,
   serviceCategory,
   serviceName,
   handleDeleteSelection,
@@ -112,11 +112,11 @@ function IngestionListTable({
         handleDeleteSelection={handleDeleteSelection}
         handleEnableDisableIngestion={handleEnableDisableIngestion}
         handleIsConfirmationModalOpen={handleIsConfirmationModalOpen}
+        ingestionPipelinesPermission={ingestionPipelinesPermission}
         isRequiredDetailsAvailable={isRequiredDetailsAvailable}
         record={record}
         serviceCategory={serviceCategory}
         serviceName={serviceName}
-        servicePermission={servicePermission}
         triggerIngestion={triggerIngestion}
         onIngestionWorkflowsUpdate={onIngestionWorkflowsUpdate}
       />
@@ -166,7 +166,7 @@ function IngestionListTable({
       triggerIngestion,
       isRequiredDetailsAvailable,
       handleEnableDisableIngestion,
-      servicePermission,
+      ingestionPipelinesPermission,
       serviceName,
       deleteSelection,
       handleDeleteSelection,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.interface.ts
index a34f09fcf0f..929d4b7430a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/IngestionListTable.interface.ts
@@ -32,7 +32,7 @@ export interface IngestionListTableProps {
   pipelineNameColWidth?: number;
   serviceCategory: ServiceCategory;
   serviceName: string;
-  servicePermission?: IngestionServicePermission;
+  ingestionPipelinesPermission?: IngestionServicePermission;
   deployIngestion: (id: string) => Promise<void>;
   handleDeleteSelection: (row: SelectedRowDetails) => void;
   handleEnableDisableIngestion: (id: string) => void;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.component.tsx
index b31650538dd..5e6d8bfcb45 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.component.tsx
@@ -26,7 +26,7 @@ import { PipelineActionsProps } from './PipelineActions.interface';
 
 function PipelineActions({
   record,
-  servicePermission,
+  ingestionPipelinesPermission,
   triggerIngestion,
   deployIngestion,
   deleteSelection,
@@ -47,7 +47,7 @@ function PipelineActions({
   const [selectedPipeline, setSelectedPipeline] = useState<IngestionPipeline>();
 
   const getEditPermission = (service: string): boolean =>
-    !servicePermission?.[service]?.EditAll;
+    !ingestionPipelinesPermission?.[service]?.EditAll;
 
   const handleTriggerIngestion = async (id: string, displayName: string) => {
     try {
@@ -89,7 +89,7 @@ function PipelineActions({
     );
   };
 
-  const ConfirmDelete = (id: string, name: string) => {
+  const handleConfirmDelete = (id: string, name: string) => {
     handleDeleteSelection({
       id,
       name,
@@ -192,9 +192,9 @@ function PipelineActions({
         <Button
           className="p-x-xss"
           data-testid="delete"
-          disabled={!servicePermission?.[record.name]?.Delete}
+          disabled={!ingestionPipelinesPermission?.[record.name]?.Delete}
           type="link"
-          onClick={() => ConfirmDelete(record.id as string, record.name)}>
+          onClick={() => handleConfirmDelete(record.id as string, record.name)}>
           {getDeleteButton()}
         </Button>
         <Divider className="border-gray" type="vertical" />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.interface.ts
index 50ae19b2565..effa8c558d1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/PipelineActions.interface.ts
@@ -18,7 +18,7 @@ import { SelectedRowDetails } from './ingestion.interface';
 
 export interface PipelineActionsProps {
   record: IngestionPipeline;
-  servicePermission?: IngestionServicePermission;
+  ingestionPipelinesPermission?: IngestionServicePermission;
   isRequiredDetailsAvailable: boolean;
   serviceCategory: ServiceCategory;
   serviceName: string;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/success-screen/SuccessScreen.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/success-screen/SuccessScreen.tsx
index f95a4ca2332..9abfce98987 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/success-screen/SuccessScreen.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/success-screen/SuccessScreen.tsx
@@ -119,14 +119,20 @@ const SuccessScreen = ({
           </Typography.Paragraph>
         </Space>
       </Card>
-      {!isAirflowAvailable && (
-        <>
-          <AirflowMessageBanner className="m-t-sm" />
-          <Card className="m-t-sm">
-            {isFetchingStatus ? <Loader /> : <>{messageElement}</>}
-          </Card>
-        </>
-      )}
+      <div className="m-t-sm">
+        {isFetchingStatus ? (
+          <Loader size="small" />
+        ) : (
+          <>
+            {!isAirflowAvailable && (
+              <>
+                <AirflowMessageBanner />
+                <Card className="m-t-sm">{messageElement}</Card>
+              </>
+            )}
+          </>
+        )}
+      </div>
 
       <div className="mt-7 text-center">
         <Button
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
index 6a5e81bac41..5d672896032 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
@@ -244,12 +244,9 @@ const ServiceDetailsPage: FunctionComponent = () => {
         // Error
       } finally {
         setIsLoading(false);
-        if (!airflowEndpoint) {
-          await getAirflowEndpoint();
-        }
       }
     },
-    [serviceFQN, paging, airflowEndpoint, getAirflowEndpoint]
+    [serviceFQN, paging]
   );
 
   const updateCurrentSelectedIngestion = useCallback(
@@ -342,6 +339,13 @@ const ServiceDetailsPage: FunctionComponent = () => {
         setIngestionPipelines((pipelines) =>
           pipelines.filter((ing) => ing.id !== id)
         );
+        /**
+         * update the paging total count to reflect on tab count
+         */
+        setIngestionPaging((prevData) => ({
+          ...prevData,
+          total: prevData.total > 0 ? prevData.total - 1 : 0,
+        }));
       } catch (error) {
         showErrorToast(
           error as AxiosError,
@@ -875,6 +879,7 @@ const ServiceDetailsPage: FunctionComponent = () => {
   useEffect(() => {
     if (isAirflowAvailable && !isOpenMetadataService) {
       getAllIngestionWorkflows();
+      getAirflowEndpoint();
     }
   }, [isAirflowAvailable]);