From f6b7af8c6e77f12c445c6600a964a0c044bd7ed5 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 21 Jul 2022 15:10:15 +0530
Subject: [PATCH] Fix #6242 Handle Pipeline without tasks on Pipeline view
 (#6243)

---
 .../PipelineDetails.component.tsx             |  7 ++--
 .../PipelineDetails/PipelineDetails.test.tsx  | 34 ++++++++++++++++++-
 .../PipelineDetailsPage.component.tsx         |  6 ++--
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
index e983f6d7914..b0bdbe5c355 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -12,6 +12,7 @@
  */
 
 import { compare } from 'fast-json-patch';
+import { isEmpty } from 'lodash';
 import { EntityTags, ExtraInfo } from 'Models';
 import React, { RefObject, useCallback, useEffect, useState } from 'react';
 import AppState from '../../AppState';
@@ -462,13 +463,15 @@ const PipelineDetails = ({
                   <div
                     className="tw-flex-grow tw-w-full tw-h-full"
                     style={{ height: 'calc(100% - 250px)' }}>
-                    {tasks ? (
+                    {!isEmpty(tasks) ? (
                       <TasksDAGView
                         selectedExec={selectedExecution}
                         tasks={tasks}
                       />
                     ) : (
-                      <div className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8">
+                      <div
+                        className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8"
+                        data-testid="no-tasks-data">
                         <span>No task data is available</span>
                       </div>
                     )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx
index 82784349d8a..52e8510a2cc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx
@@ -60,9 +60,30 @@ const mockUserTeam = [
   },
 ];
 
+const mockTasks = [
+  {
+    name: 'snowflake_task',
+    displayName: 'Snowflake Task',
+    description: 'Airflow operator to perform ETL on snowflake tables',
+    taskUrl:
+      'http://localhost:8080/taskinstance/list/?flt1_dag_id_equals=assert_table_exists',
+    downstreamTasks: ['assert_table_exists'],
+    taskType: 'SnowflakeOperator',
+  },
+  {
+    name: 'assert_table_exists',
+    displayName: 'Assert Table Exists',
+    description: 'Assert if a table exists',
+    taskUrl:
+      'http://localhost:8080/taskinstance/list/?flt1_dag_id_equals=assert_table_exists',
+    downstreamTasks: [],
+    taskType: 'HiveOperator',
+  },
+];
+
 const PipelineDetailsProps = {
   pipelineUrl: '',
-  tasks: [],
+  tasks: mockTasks,
   serviceType: '',
   users: [],
   pipelineDetails: {} as Pipeline,
@@ -216,6 +237,17 @@ describe('Test PipelineDetails component', () => {
     expect(pipelineStatus).toBeInTheDocument();
   });
 
+  it('Should render no tasks data placeholder is tasks list is empty', async () => {
+    const { findByTestId } = render(
+      <PipelineDetails {...PipelineDetailsProps} tasks={[]} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    expect(await findByTestId('no-tasks-data')).toBeInTheDocument();
+  });
+
   it('Check if active tab is activity feed', async () => {
     const { container } = render(
       <PipelineDetails {...PipelineDetailsProps} activeTab={2} />,
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
index e46431d794c..1e8fe25e4f9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
@@ -320,7 +320,7 @@ const PipelineDetailsPage = () => {
           });
 
           setPipelineUrl(pipelineUrl);
-          setTasks(tasks);
+          setTasks(tasks || []);
 
           setPipelineStatus(
             (pipelineStatus as Pipeline['pipelineStatus']) || []
@@ -329,7 +329,7 @@ const PipelineDetailsPage = () => {
           fetchServiceDetails(service.type, service.name)
             .then((hostPort: string) => {
               setPipelineUrl(hostPort + pipelineUrl);
-              const updatedTasks = (tasks as Task[]).map((task) => ({
+              const updatedTasks = ((tasks || []) as Task[]).map((task) => ({
                 ...task,
                 taskUrl: hostPort + task.taskUrl,
               }));
@@ -354,6 +354,8 @@ const PipelineDetailsPage = () => {
             jsonData['api-error-messages']['fetch-pipeline-details-error']
           );
         }
+      })
+      .finally(() => {
         setLoading(false);
       });
   };