e2e: add cypress test for task flow (#12551)

* chore(ui): stay on the same page when the task is resolved

* chore: update filter on reject task

* chore: address comments

* fix: cypress test

* e2e: add cypress test for task flow

* refactor: minor changes

* fix: assignee option data test id

* test: add test for tags task

* fix: unit test

* fix: cypress test

* chore: address comment

* chore: address comments

openmetadata-ui/src/main/resources/ui/cypress/e2e/Flow/Task.spec.js

@@ -0,0 +1,202 @@
+/*
+ *  Copyright 2023 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+
+import {
+  descriptionBox,
+  interceptURL,
+  toastNotification,
+  verifyResponseStatusCode,
+  visitEntityDetailsPage,
+} from '../../common/common';
+import { SEARCH_ENTITY_TABLE } from '../../constants/constants';
+
+describe('Task flow should work', () => {
+  beforeEach(() => {
+    cy.login();
+    interceptURL('GET', '/api/v1/permissions/*/name/*', 'entityPermission');
+    interceptURL('GET', '/api/v1/feed/count?entityLink=*', 'entityFeed');
+    interceptURL('GET', '/api/v1/search/suggest?q=*', 'suggestApi');
+    interceptURL('PUT', '/api/v1/feed/tasks/*/resolve', 'taskResolve');
+    interceptURL(
+      'GET',
+      `/api/v1/search/query?q=*%20AND%20disabled%3Afalse&index=tag_search_index*`,
+      'suggestTag'
+    );
+  });
+
+  const assignee = 'admin';
+  const secondAssignee = 'aaron_johnson0';
+  const tag = 'Personal';
+
+  const editAssignee = () => {
+    interceptURL('PATCH', 'api/v1/feed/*', 'editAssignee');
+
+    cy.get('[data-testid="edit-assignees"]').click();
+
+    cy.get('[data-testid="select-assignee"] > .ant-select-selector').type(
+      secondAssignee
+    );
+    // select value from dropdown
+    verifyResponseStatusCode('@suggestApi', 200);
+
+    cy.get(`[data-testid="assignee-option-${secondAssignee}"]`)
+      .trigger('mouseover')
+      .trigger('click');
+
+    cy.clickOutside();
+
+    cy.get('[data-testid="inline-save-btn"]').click();
+
+    verifyResponseStatusCode('@editAssignee', 200);
+
+    cy.get(`[data-testid="assignee-${assignee}"]`).should('be.visible');
+  };
+
+  const verifyTaskDetails = (regexPattern) => {
+    cy.get('#task-panel').should('be.visible');
+    cy.get('[data-testid="task-title"]')
+      .invoke('text')
+      .then((textContent) => {
+        const matches = textContent.match(regexPattern);
+
+        expect(matches).to.not.be.null;
+      });
+
+    cy.get('[data-testid="owner-link"]').contains(assignee);
+
+    cy.get(`[data-testid="assignee-${assignee}"]`).should('be.visible');
+  };
+
+  const createDescriptionTask = (value) => {
+    interceptURL('POST', 'api/v1/feed', 'createTask');
+
+    cy.get('#title').should(
+      'have.value',
+      `Update description for table ${value.term}`
+    );
+
+    cy.get('[data-testid="select-assignee"] > .ant-select-selector').type(
+      assignee
+    );
+    // select value from dropdown
+    verifyResponseStatusCode('@suggestApi', 200);
+
+    cy.get(`[data-testid="assignee-option-${assignee}"]`)
+      .trigger('mouseover')
+      .trigger('click');
+
+    cy.clickOutside();
+
+    cy.get(descriptionBox).scrollIntoView().clear().type('Updated description');
+
+    cy.get('button[type="submit"]').click();
+    verifyResponseStatusCode('@createTask', 201);
+    toastNotification('Task created successfully.');
+
+    // verify the task details
+    verifyTaskDetails(/#(\d+) UpdateDescriptionfordescription/);
+
+    // edit task assignees
+    editAssignee();
+
+    // Accept the description suggestion which is created
+    cy.get('.ant-btn-compact-first-item').contains('Accept Suggestion').click();
+
+    verifyResponseStatusCode('@taskResolve', 200);
+
+    toastNotification('Task resolved successfully');
+
+    verifyResponseStatusCode('@entityFeed', 200);
+  };
+
+  const createTagTask = (value) => {
+    interceptURL('POST', 'api/v1/feed', 'createTask');
+
+    cy.get('#title').should(
+      'have.value',
+      `Request tags for table ${value.term}`
+    );
+
+    cy.get('[data-testid="select-assignee"] > .ant-select-selector').type(
+      assignee
+    );
+    // select value from dropdown
+    verifyResponseStatusCode('@suggestApi', 200);
+
+    cy.get(`[data-testid="assignee-option-${assignee}"]`)
+      .trigger('mouseover')
+      .trigger('click');
+
+    cy.clickOutside();
+
+    cy.get('[data-testid="tag-selector"]').click().type(tag);
+
+    verifyResponseStatusCode('@suggestTag', 200);
+    cy.get('[data-testid="tag-PersonalData.Personal"]').click();
+
+    cy.get('[data-testid="tags-label"]').click();
+
+    cy.get('button[type="submit"]').click();
+    verifyResponseStatusCode('@createTask', 201);
+    toastNotification('Task created successfully.');
+
+    // verify the task details
+    verifyTaskDetails(/#(\d+) RequestTagfortags/);
+
+    // edit task assignees
+    editAssignee();
+
+    // Accept the description suggestion which is created
+    cy.get('.ant-btn-compact-first-item').contains('Accept Suggestion').click();
+
+    verifyResponseStatusCode('@taskResolve', 200);
+
+    toastNotification('Task resolved successfully');
+
+    verifyResponseStatusCode('@entityFeed', 200);
+
+    cy.get('.toastui-editor-contents > p').contains(
+      'Resolved the Task with Tag(s) - PersonalData.Personal'
+    );
+  };
+
+  it('Task flow for table description', () => {
+    const value = SEARCH_ENTITY_TABLE.table_1;
+    interceptURL('GET', `/api/v1/${value.entity}/name/*`, 'getEntityDetails');
+
+    visitEntityDetailsPage(value.term, value.serviceName, value.entity);
+
+    cy.get('[data-testid="request-description"]').click();
+
+    verifyResponseStatusCode('@getEntityDetails', 200);
+
+    // create description task
+    createDescriptionTask(value);
+  });
+
+  it('Task flow for table tags', () => {
+    const value = SEARCH_ENTITY_TABLE.table_1;
+    interceptURL('GET', `/api/v1/${value.entity}/name/*`, 'getEntityDetails');
+
+    visitEntityDetailsPage(value.term, value.serviceName, value.entity);
+
+    cy.get('[data-testid="request-entity-tags"]').click();
+
+    verifyResponseStatusCode('@getEntityDetails', 200);
+
+    // create tag task
+    createTagTask(value);
+  });
+});

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Tags.spec.js

@@ -359,7 +359,7 @@ describe('Tags page should work', () => {
 
     verifyResponseStatusCode('@taskResolve', 200);
     verifyResponseStatusCode('@databaseSchemasPage', 200);
-    cy.get('[data-testid="table"]').should('be.visible').click();
+    cy.get('[data-testid="table"]').click();
 
     cy.reload();
     verifyResponseStatusCode('@databaseSchemasPage', 200);

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

@@ -142,7 +142,7 @@ export const TaskTab = ({
   const isTaskTags = isTagsTask(taskDetails?.type as TaskType);
 
   const getTaskLinkElement = entityCheck && (
-    <Typography.Text className="font-medium text-md">
+    <Typography.Text className="font-medium text-md" data-testid="task-title">
       <span>{`#${taskDetails?.id} `}</span>
 
       <Typography.Text>{taskDetails?.type}</Typography.Text>
@@ -428,7 +428,7 @@ export const TaskTab = ({
                   profileWidth="24"
                   showUserName={false}
                 />
-                {isCreator || hasTaskUpdateAccess() ? (
+                {(isCreator || hasTaskUpdateAccess()) && !isTaskClosed ? (
                   <Button
                     className="flex-center p-0"
                     data-testid="edit-assignees"

openmetadata-ui/src/main/resources/ui/src/components/common/AssigneeList/AssigneeList.tsx

@@ -51,7 +51,7 @@ const AssigneeList: FC<Props> = ({
           userName={assignee.name || ''}>
           <span
             className="assignee-item d-flex m-xss m-t-0 cursor-pointer"
-            data-testid="assignee"
+            data-testid={`assignee-${assignee.name}`}
             onClick={(e) => handleClick(e, assignee)}>
             <ProfilePicture
               id=""

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx

@@ -60,12 +60,12 @@ describe('Test assignees component', () => {
 
     const container = await screen.findByRole('combobox');
 
-    fireEvent.change(container, { target: { value: 'a' } });
+    fireEvent.change(container, { target: { value: 'adam_matthews2' } });
 
-    const options = await screen.findAllByTestId('assignee-option');
+    const options = await screen.findByTestId(`assignee-option-adam_matthews2`);
 
     expect(container).toBeInTheDocument();
 
-    expect(options).toHaveLength(mockOptions.length);
+    expect(options).toBeInTheDocument();
   });
 });

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx

@@ -71,7 +71,7 @@ const Assignees: FC<Props> = ({
         options: groupByType.user.map((user) => ({
           ...user,
           label: (
-            <div data-testid="assignee-option">
+            <div data-testid={`assignee-option-${user.label}`}>
               <UserTag id={user.value} name={user.label} />
             </div>
           ),