Task Added to Appeal no longer being displayed after merge. (#22771)

* mostly fixed

* fixed css issues on grey timeline.

* fixed missing key issue

* fixed labels and data shape.

* Fixed staged data to use real data.

* removed redundant prop

* Fixed task action dropdown

* fixed linting issue

* Kev ma/appeals 55015 (#22764)

* Typo fix

* Added safe navigation operator

* Remove permissions from ruby view props

* Update component to save value to state instead of from props

* rename hash key

* updated var ref to state

* Update for code spacing

* Bugfix for sticky checkbox logic

* Div/appeals 57463 (#22779)

* Added missing columns in the serializer prepareAppealForSearchStore function

* Removed console log

* Removed unused imports

---------

Co-authored-by: cacevesva <109166981+cacevesva@users.noreply.github.com>

* added polymorphic association to correspondence task Correspondence relation

* fixed null task issue

* updated serialized info and passed appeal into CorrespondenceTasksAdded instead of correspondence.

* setup way to load appeals into the Queue redux store to display task actions

* created logic to load serialized tasks into store (but they overwrite each other)

* created logic to add appeal tasks to the redux store.

* added TaskSnapshot to display appeal task actions

* pushed up fix that resolved routing crashes from correspondence

* removed wrapping class for task rows to meet UI/UX requirements. Also disabled the task action dropdown per requirements.

* Refactored component to use different name.

* fixed 6 failing tests

* fixed several failing tests.

* changed shape of mocked data in details test

* adding more data to staged props in test

* fixed task display for tasks added when empty

* reverted jest test files from their extreme size.

* added back in correspondenceAppeal map

* removed console log

* fixed dead import.

* fixed failing tests from div wrappers hiding task actions

* updated tests to be less flaky

---------

Co-authored-by: Kevma50287 <104021955+Kevma50287@users.noreply.github.com>
Co-authored-by: divyadasari-va <135847343+divyadasari-va@users.noreply.github.com>
Co-authored-by: cacevesva <109166981+cacevesva@users.noreply.github.com>
Co-authored-by: HunJerBAH <Jeremy.Hunton@va.gov>
Co-authored-by: HunJerBAH <99915461+HunJerBAH@users.noreply.github.com>

app/models/serializers/work_queue/correspondence_appeals_serializer.rb

@@ -31,21 +31,16 @@ class WorkQueue::CorrespondenceAppealsSerializer
     object.appeal.issues.length
   end
 
+  attribute :appeal do |object|
+    WorkQueue::AppealSerializer.new(object.appeal, params: { user: RequestStore[:current_user] })
+  end
+
   attribute :task_added_data do |object|
-    tasks = []
-    object.correspondences_appeals_tasks.each do |cor_app_task|
-      assigned_to = cor_app_task.task.assigned_to
-      assigned_to_text = assigned_to.is_a?(Organization) ? assigned_to.name : assigned_to.css_id
-      task_data = {
-        assigned_at: cor_app_task.task.assigned_at,
-        assigned_to: assigned_to_text,
-        assigned_to_type: cor_app_task.task.assigned_to_type,
-        instructions: cor_app_task.task.instructions,
-        type: cor_app_task.task.label
-      }
-      tasks << task_data
-    end
-    tasks
+    AmaAndLegacyTaskSerializer.create_and_preload_legacy_appeals(
+      params: { user: RequestStore[:current_user], role: "generic" },
+      tasks: object.tasks,
+      ama_serializer: WorkQueue::TaskSerializer
+    ).call
   end
 
   attribute :status do |object|

client/app/queue/components/QueueOrganizationDropdown.jsx

@@ -29,7 +29,7 @@ export default class QueueOrganizationDropdown extends React.Component {
 
     const organizationItems = organizations.map((org, index) => {
       // If the url is a specified path, use it over the organization route
-      const orgHref = org.url.includes('/') ? org.url : `/organizations/${org.url}`;
+      const orgHref = org.url?.includes('/') ? org.url : `/organizations/${org.url}`;
 
       const label = correspondenceTable(org) ?
         org.name : sprintf(COPY.CASE_LIST_TABLE_QUEUE_DROPDOWN_TEAM_CASES_LABEL, org.name);

client/app/queue/components/TaskRows.jsx

@@ -676,6 +676,7 @@ class TaskRows extends React.PureComponent {
       eventsFromAppeal
     );
 
+
     return (
       <React.Fragment key={appeal.externalId}>
         {sortedTimelineEvents.map((timelineEvent, index) => {

client/app/queue/correspondence/CorrespondenceTasksAdded.jsx → client/app/queue/correspondence/CorrespondenceAppealTasks.jsx

@@ -2,10 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CaseDetailsLink from '../CaseDetailsLink';
 import DocketTypeBadge from '../../components/DocketTypeBadge';
-import CorrespondenceCaseTimeline from './CorrespondenceCaseTimeline';
+import { appealWithDetailSelector, taskSnapshotTasksForAppeal } from '../selectors';
+import { useSelector } from 'react-redux';
+import TaskRows from '../components/TaskRows';
 
-const CorrespondenceTasksAdded = (props) => {
+const CorrespondenceAppealTasks = (props) => {
   const veteranFullName = props.correspondence.veteranFullName;
+  const appealId = props.appeal.external_id;
+  const appeal = useSelector((state) =>
+    appealWithDetailSelector(state, { appealId })
+  );
+
+  const tasks = useSelector((state) =>
+    taskSnapshotTasksForAppeal(state, { appealId })
+  );
 
   return (
     <>
@@ -46,15 +56,15 @@ const CorrespondenceTasksAdded = (props) => {
             <p>{props.task_added.assignedTo ? props.task_added.assignedTo.name : ''}</p>
           </div>
 
-        </div >
+        </div>
         <div className="tasks-added-details">
           <span className="tasks-added-text">Tasks added to appeal</span>
-          <div >
-            <CorrespondenceCaseTimeline
-              organizations={props.organizations}
-              userCssId={props.userCssId}
-              correspondence={props.task_added.correspondence}
-              tasksToDisplay={(props.task_added.taskAddedData)}
+          <div>
+            <TaskRows appeal={appeal}
+              taskList={tasks}
+              timeline={false}
+              editNodDateEnabled={false}
+              hideDropdown
             />
           </div>
         </div>
@@ -63,11 +73,12 @@ const CorrespondenceTasksAdded = (props) => {
   );
 };
 
-CorrespondenceTasksAdded.propTypes = {
+CorrespondenceAppealTasks.propTypes = {
   correspondence: PropTypes.object,
   task_added: PropTypes.object,
   organizations: PropTypes.array,
   userCssId: PropTypes.string,
+  appeal: PropTypes.object
 };
 
-export default CorrespondenceTasksAdded;
+export default CorrespondenceAppealTasks;

client/app/queue/correspondence/CorrespondenceTaskRows.jsx

@@ -43,7 +43,7 @@ class CorrespondenceTaskRows extends React.PureComponent {
     this.state = {
       taskInstructionsIsVisible: [],
       showEditNodDateModal: false,
-      activeTasks: [props.taskList],
+      activeTasks: props.taskList,
     };
   }
 
@@ -95,12 +95,12 @@ class CorrespondenceTaskRows extends React.PureComponent {
   };
 
   taskInstructionsWithLineBreaks = (task) => {
-    if (!task.instructions || !task.instructions.length) {
+    if (!task.instructions || !task.instructions?.length) {
       return <br />;
     }
 
     return (
-      <React.Fragment key={`${task.uniqueId} fragment`}>
+      <React.Fragment key={`${task.uniqueId} + ${task.instructions} fragment`}>
         {task.instructions.map((text) => (
           <div
             key={`${task.uniqueId} instructions`}
@@ -113,6 +113,10 @@ class CorrespondenceTaskRows extends React.PureComponent {
   };
 
   taskInstructionsListItem = (task) => {
+    if (!task.instructions || !task.instructions?.length > 0) {
+      return null;
+    }
+
     const taskInstructionsVisible = this.state.taskInstructionsIsVisible.includes(task.label);
 
     return (
@@ -146,7 +150,7 @@ class CorrespondenceTaskRows extends React.PureComponent {
   };
 
   showActionsListItem = (task, correspondence) => {
-    if (task.availableActions.length <= 0) {
+    if (task.availableActions?.length === 0) {
       return null;
     }
 
@@ -187,7 +191,7 @@ class CorrespondenceTaskRows extends React.PureComponent {
     const timelineTitle = isCancelled(task) ? `${task.type} cancelled` : task.timelineTitle;
 
     return (
-      <tr key={task.uniqueId}>
+      <tr key={task.uniqueId + task.instructions}>
         <td
           className={timeline ? 'taskTimeTimelineContainerStyling' : 'taskTimeContainerStyling'}
           role="cell"
@@ -201,8 +205,8 @@ class CorrespondenceTaskRows extends React.PureComponent {
         <td className={tdClassNamesforCorrespondence(timeline, task)}>
           {isCancelled(task) ? <CancelIcon /> : closedAtIcon(task, timeline)}
 
-          {((index < sortedTimelineEvents.length && timeline) ||
-            (index < this.state.activeTasks.length - 1 && !timeline)) && (
+          {((index < sortedTimelineEvents?.length && timeline) ||
+            (index < this.state.activeTasks?.length - 1 && !timeline)) && (
             <div className={['grayLineStyling', cancelGrayTimeLineStyle(timeline)].join(' ')} />
           )}
         </td>

client/app/queue/correspondence/details/CorrespondenceDetails.jsx

@@ -14,17 +14,20 @@ import {
 import CorrespondenceResponseLetters from './CorrespondenceResponseLetters';
 import COPY from '../../../../COPY';
 import CaseListTable from 'app/queue/CaseListTable';
-import CorrespondenceTasksAdded from '../CorrespondenceTasksAdded';
+import { prepareAppealForSearchStore, prepareAppealForStore, prepareTasksForStore } from 'app/queue/utils';
+import { onReceiveTasks, onReceiveAppealDetails } from '../../QueueActions';
 import moment from 'moment';
 import Pagination from 'app/components/Pagination/Pagination';
 import Table from 'app/components/Table';
 import { ExternalLinkIcon } from 'app/components/icons/ExternalLinkIcon';
 import { COLORS } from 'app/constants/AppConstants';
 import Checkbox from 'app/components/Checkbox';
 import CorrespondencePaginationWrapper from 'app/queue/correspondence/CorrespondencePaginationWrapper';
+
 import Button from '../../../components/Button';
 import Alert from '../../../components/Alert';
 import ApiUtil from '../../../util/ApiUtil';
+import CorrespondenceAppealTasks from '../CorrespondenceAppealTasks';
 
 const CorrespondenceDetails = (props) => {
   const dispatch = useDispatch();
@@ -337,6 +340,28 @@ const CorrespondenceDetails = (props) => {
   useEffect(() => {
     dispatch(loadCorrespondence(correspondence));
     dispatch(correspondenceInfo(correspondence));
+    // load appeals related to the correspondence into the store
+    const corAppealTasks = [];
+
+    props.correspondence.correspondenceAppeals.map((corAppeal) => {
+      dispatch(onReceiveAppealDetails(prepareAppealForStore([corAppeal.appeal.data])));
+
+      corAppeal.taskAddedData.data.map((taskData) => {
+        const formattedTask = {};
+
+        formattedTask[taskData.id] = taskData;
+
+        corAppealTasks.push(taskData);
+      });
+
+    });
+    // // load appeal tasks into the store
+    const preparedTasks = prepareTasksForStore(corAppealTasks);
+
+    dispatch(onReceiveTasks({
+      amaTasks: preparedTasks
+    }));
+
   }, []);
 
   const isTasksUnrelatedToAppealEmpty = () => {
@@ -411,11 +436,12 @@ const CorrespondenceDetails = (props) => {
             </AppSegment>
           )}
           {(props.correspondence.correspondenceAppeals.map((taskAdded) =>
-              taskAdded.correspondencesAppealsTasks?.length > 0 && <CorrespondenceTasksAdded
+            <CorrespondenceAppealTasks
               task_added={taskAdded}
               correspondence={props.correspondence}
               organizations={props.organizations}
               userCssId={props.userCssId}
+              appeal={taskAdded.appeal.data.attributes}
             />
           )
           )}

client/test/app/queue/correspondences/details/CorrespondenceDetails.test.js

@@ -350,7 +350,6 @@ describe('CorrespondenceDetails', () => {
 
     expect(document.getElementsByClassName('plus-symbol').length).toBe(1);
     // Existing Appeals Table and Columns
-    fireEvent.click(existingAppealButton);
     expect(screen.getByText('Existing Appeals')).toBeInTheDocument();
     expect(screen.getByText('Appellant Name')).toBeInTheDocument();
     expect(screen.getByText('Appeal Status')).toBeInTheDocument();

spec/feature/queue/correspondence/correspondence_details_task_actions_spec.rb

@@ -75,12 +75,19 @@
 
         it "Verify #{task_action[:name]} task with Assign to team action dropdown" do
           visit "/queue/correspondence/#{@correspondence.uuid}"
+          # find + dropdowns and click last one for tasks unrelated to appeal
+          dropdowns = page.all(".cf-btn-link")
+          dropdowns.last.click
+
           click_dropdown(prompt: "Select an action", text: "Assign to team")
           expect(page).to have_content("Assign Task")
           expect(page).to have_content("Select a team")
           click_dropdown(prompt: "Select or search", text: "Education")
           find(".cf-form-textarea", match: :first).fill_in with: "Assign task instructions"
           click_button "Assign-Task-button-id-1"
+          # find + dropdowns and click last one for tasks unrelated to appeal
+          dropdowns = page.all(".cf-btn-link")
+          dropdowns.last.click
           expect(page).to have_content("#{task_action[:name]} task has been assigned to Education.")
           expect(all(".cf-row-wrapper")[1].text).to include("Education")
           expect(all(".cf-row-wrapper")[2].text).to include(task_action[:name].to_s)
@@ -90,12 +97,18 @@
 
         it "Verify #{task_action[:name]} task with Change task type action dropdown" do
           visit "/queue/correspondence/#{@correspondence.uuid}"
+          # find + dropdowns and click last one for tasks unrelated to appeal
+          dropdowns = page.all(".cf-btn-link")
+          dropdowns.last.click
           click_dropdown(prompt: "Select an action", text: "Change task type")
           expect(page).to have_content("Change task type")
           expect(page).to have_content("Select another task type from the list of available options:")
           click_dropdown(prompt: "Select an action type", text: "CAVC Correspondence")
           find(".cf-form-textarea", match: :first).fill_in with: "Change task type instructions"
           click_button "Change-task-type-button-id-1"
+          # find + dropdowns and click last one for tasks unrelated to appeal
+          dropdowns = page.all(".cf-btn-link")
+          dropdowns.last.click
           expect(page).to have_content("You have changed the task type from #{task_action[:name]} " \
           "to CAVC Correspondence. These changes are now reflected in the tasks section below.")
           expect(all(".cf-row-wrapper")[2].find("dd").text).to eq("CAVC Correspondence")

spec/support/correspondece_task_actions_helpers.rb

@@ -91,9 +91,20 @@ def check_task_action(options = {})
     expected_message = options[:expected_message]
 
     visit "/queue/correspondence/#{correspondence.uuid}"
+    expect(page).to have_current_path("/queue/correspondence/#{correspondence.uuid}")
+
+    # find + dropdowns and click last one for tasks unrelated to appeal
+    dropdowns = page.all(".cf-btn-link")
+    dropdowns.last.click
+
     click_dropdown(prompt: "Select an action", text: action)
     find(".cf-form-textarea", match: :first).fill_in with: form_text
     click_button button_id
+    expect(page).to have_current_path("/queue/correspondence/#{correspondence.uuid}")
+    # find + dropdowns and click last one for tasks unrelated to appeal
+    dropdowns = page.all(".cf-btn-link")
+    dropdowns.last.click
+
     expect(page).to have_content("#{task_name} #{expected_message}")
   end
 end