Fix the UI breaking in case of any failures during json parsing of feed data (#26553)

* Fix the UI breaking in case of any failures during json parsing of feed data

* Worked on comments

Author: aniketkatkar97

openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.test.tsx

@@ -10,13 +10,16 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { EntityType } from '../../../../enums/entity.enum';
 import {
+  APPROVAL_TASK_FEED,
   TASK_FEED,
   TASK_FEED_RECOGNIZER_FEEDBACK,
 } from '../../../../mocks/Task.mock';
+import { TaskTabProps } from './TaskTab.interface';
 import { TaskTabNew } from './TaskTabNew.component';
 
 jest.mock('react-router-dom', () => ({
@@ -162,7 +165,7 @@ jest.mock(
   }
 );
 
-const mockProps = {
+const mockProps: TaskTabProps = {
   taskThread: TASK_FEED,
   owners: [],
   entityType: EntityType.TABLE,
@@ -518,4 +521,26 @@ describe('TaskTabNew Component', () => {
 
     expect(screen.getByTestId('feed-replies')).toBeInTheDocument();
   });
+
+  it('should display the task information for approval tasks with suggestion data', async () => {
+    const {
+      isTagsTask,
+      isDescriptionTask,
+    } = require('../../../../utils/TasksUtils');
+    isTagsTask.mockReturnValue(false);
+    isDescriptionTask.mockReturnValue(false);
+
+    await act(async () => {
+      render(<TaskTabNew {...mockProps} taskThread={APPROVAL_TASK_FEED} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+
+    expect(
+      screen.getByText('message.request-approval-message')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('entity-link')).toHaveTextContent('entityName');
+    expect(screen.getByText('label.created-by')).toBeInTheDocument();
+    expect(screen.getByText('label.assignee-plural')).toBeInTheDocument();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.tsx

@@ -174,18 +174,21 @@ export const TaskTabNew = ({
 
   const showAddSuggestionButton = useMemo(() => {
     const taskType = taskDetails?.type ?? ('' as TaskType);
-    const parsedSuggestion = [
-      TaskType.UpdateDescription,
-      TaskType.RequestDescription,
-    ].includes(taskType)
-      ? taskDetails?.suggestion
-      : JSON.parse(taskDetails?.suggestion || '[]');
+    let parsedSuggestion: string | TagLabel[] = taskDetails?.suggestion ?? '';
+
+    if (isTaskTags) {
+      try {
+        parsedSuggestion = JSON.parse(taskDetails?.suggestion || '[]');
+      } catch {
+        parsedSuggestion = [];
+      }
+    }
 
     return (
       [TaskType.RequestTag, TaskType.RequestDescription].includes(taskType) &&
       isEmpty(parsedSuggestion)
     );
-  }, [taskDetails]);
+  }, [taskDetails, isTaskTags]);
 
   const noSuggestionTaskMenuOptions = useMemo(() => {
     let label;
@@ -815,14 +818,22 @@ export const TaskTabNew = ({
         taskDetails?.suggestion ?? taskDetails?.oldValue ?? '';
 
       return { description };
-    } else {
-      const updatedTags = JSON.parse(
-        taskDetails?.suggestion ?? taskDetails?.oldValue ?? '[]'
-      );
+    } else if (isTaskTags) {
+      let updatedTags: TagLabel[] = [];
+
+      try {
+        updatedTags = JSON.parse(
+          taskDetails?.suggestion ?? taskDetails?.oldValue ?? '[]'
+        );
+      } catch {
+        updatedTags = [];
+      }
 
       return { updatedTags };
     }
-  }, [taskDetails, isTaskDescription]);
+
+    return {};
+  }, [taskDetails, isTaskDescription, isTaskTags]);
 
   const handleAssigneeUpdate = async () => {
     setIsAssigneeLoading(true);

openmetadata-ui/src/main/resources/ui/src/mocks/Task.mock.ts

@@ -16,7 +16,10 @@ import {
   DataType,
 } from '../generated/entity/data/container';
 import {
+  CardStyle,
   FeedbackType,
+  FieldOperation,
+  GeneratedBy,
   Post,
   RecognizerFeedback,
   TaskType,
@@ -60,6 +63,52 @@ export const TASK_FEED: Thread = {
   },
 };
 
+export const APPROVAL_TASK_FEED: Thread = {
+  id: '4569705b-78b9-448f-8d1a-060401f03d9d',
+  type: ThreadType.Task,
+  href: 'https://nbndatacatalogue-np.getcollate.io//v1/feed/4569705b-78b9-448f-8d1a-060401f03d9d',
+  threadTs: 1773708257515,
+  about:
+    '<#E::table::starburst.cdl.sharp_incnet.v_incnet_location::columns::location_id>',
+  entityRef: {
+    id: '1bf67076-346e-46a6-b7ad-4914d89f7a3a',
+    type: 'table',
+    name: 'v_incnet_location',
+    fullyQualifiedName: 'starburst.cdl.sharp_incnet.v_incnet_location',
+    displayName: 'v_incnet_location',
+    deleted: false,
+  },
+  domains: ['19cf92da-baa0-4000-84a1-3b8b25da8d01'],
+  generatedBy: GeneratedBy.User,
+  cardStyle: CardStyle.Default,
+  fieldOperation: FieldOperation.Updated,
+  createdBy: 'calebknight',
+  updatedAt: 1773708257515,
+  updatedBy: 'calebknight',
+  resolved: false,
+  message: 'this is a test, I am a very good programmer',
+  postsCount: 0,
+  posts: [],
+  reactions: [],
+  task: {
+    id: 1803,
+    type: TaskType.RequestApproval,
+    assignees: [
+      {
+        id: 'ce782180-36f6-4d4a-9fbe-ee6103d4146f',
+        type: 'user',
+        name: 'calebknight',
+        fullyQualifiedName: 'calebknight',
+        displayName: 'Caleb Knight',
+        deleted: false,
+      },
+    ],
+    status: ThreadTaskStatus.Open,
+    oldValue: 'this is a test suggestion',
+    suggestion: 'this is a different test suggestion2',
+  },
+};
+
 export const TASK_POST: Post = {
   message: 'Request tags for table dim.shop columns/shop_id',
   postTs: 1701686127533,