Sivakesh/appeals 58115

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

@@ -53,6 +53,7 @@ const CorrespondenceDetails = (props) => {
   const [originalStates, setOriginalStates] = useState({});
   const [sortedPriorMail, setSortedPriorMail] = useState([]);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isTasksUnrelatedSectionExpanded, setIsTasksUnrelatedSectionExpanded] = useState(false);
 
   // Initialize checkbox states
   useEffect(() => {
@@ -74,6 +75,10 @@ const CorrespondenceDetails = (props) => {
     setIsExpanded((prev) => !prev);
   };
 
+  const toggleTasksUnrelatedSection = () => {
+    setIsTasksUnrelatedSectionExpanded((prev) => !prev);
+  };
+
   // Function to handle checkbox changes
   const handleCheckboxChange = (mailId) => {
     setCheckboxStates((prevState) => {
@@ -421,15 +426,31 @@ const CorrespondenceDetails = (props) => {
   const correspondenceAndAppealTaskComponents = <>
     {correspondenceTasks()}
 
-    <section className="task-not-related-title">Tasks not related to an appeal</section>
-    <div className="correspondence-case-timeline-container">
-      <CorrespondenceCaseTimeline
-        organizations={props.organizations}
-        userCssId={props.userCssId}
-        correspondence={props.correspondence}
-        tasksToDisplay={props.correspondence.tasksUnrelatedToAppeal}
-      />
+    <div className="correspondence-existing-appeals">
+      <div className="left-section">
+        <h2>Tasks not related to an appeal</h2>
+      </div>
+      <div className="toggleButton-plus-or-minus">
+        <Button
+          onClick={toggleTasksUnrelatedSection}
+          linkStyling
+          aria-label="Toggle section"
+          aria-expanded={isTasksUnrelatedSectionExpanded}
+        >
+          {isTasksUnrelatedSectionExpanded ? '_' : <span className="plus-symbol">+</span>}
+        </Button>
+      </div>
     </div>
+    {isTasksUnrelatedSectionExpanded && (
+      <div className="correspondence-case-timeline-container">
+        <CorrespondenceCaseTimeline
+          organizations={props.organizations}
+          userCssId={props.userCssId}
+          correspondence={props.correspondence}
+          tasksToDisplay={props.correspondence.tasksUnrelatedToAppeal}
+        />
+      </div>
+    )}
   </>;
 
   const correspondencePackageDetails = () => {

client/app/styles/queue/_correspondence.scss

@@ -1444,7 +1444,7 @@ $color-bg-hsl-a: hsl(0, 0%, 80%);
 }
 
 .correspondence-case-timeline-container {
-  border: 1px solid $color-gray-darker;
+  border: 1px solid $color-gray-lighter;
   min-height: 200px;
   padding-left: 30px;
 

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

@@ -328,7 +328,7 @@ describe('CorrespondenceDetails', () => {
 
     expect(userNameCount).toBeGreaterThan(0);
     const packageDetailsTab = screen.getByText('Package Details');
-    const existingAppealButton = screen.getByText('+');
+    const existingAppealButton = document.getElementsByClassName('plus-symbol')[0];
     // const responseLettersTab = screen.getByText('Response Letters');
     const associatedPriorMailTab = screen.getByText('Associated Prior Mail');
 
@@ -343,6 +343,12 @@ describe('CorrespondenceDetails', () => {
     expect(screen.getByText('Task 1')).toBeInTheDocument();
     expect(screen.getByText('Task 2')).toBeInTheDocument();
 
+    let collapsibleButtons = document.getElementsByClassName('plus-symbol');
+
+    expect(collapsibleButtons.length).toBe(2);
+    fireEvent.click(collapsibleButtons[0]);
+
+    expect(document.getElementsByClassName('plus-symbol').length).toBe(1);
     // Existing Appeals Table and Columns
     fireEvent.click(existingAppealButton);
     expect(screen.getByText('Existing Appeals')).toBeInTheDocument();
@@ -354,6 +360,11 @@ describe('CorrespondenceDetails', () => {
     expect(screen.getByText('Appeal Location')).toBeInTheDocument();
     expect(screen.getByText('View veteran documents')).toBeInTheDocument();
 
+    collapsibleButtons = document.getElementsByClassName('plus-symbol');
+    fireEvent.click(collapsibleButtons[0]);
+
+    expect(document.getElementsByClassName('plus-symbol').length).toBe(0);
+
     // Appeals related
     const existingAppeals = screen.getAllByText('Tasks added to appeal').length;
 

spec/feature/queue/correspondence/correspondence_details_spec.rb

@@ -189,8 +189,8 @@
     it "checks the Existing Appeal section" do
       visit "/queue/correspondence/#{correspondence.uuid}"
       expect(page).to have_button("+", class: "cf-submit cf-btn-link usa-button")
-      button = find_button("+", class: "cf-submit cf-btn-link usa-button")
-      button.click
+      buttons = all("button.cf-submit.cf-btn-link.usa-button", text: "+")
+      buttons.first.click
       expect(page).to have_button("_", class: "cf-submit cf-btn-link usa-button")
     end
   end