feat: update frontend can history query, add fiscal year to the CAN h…

…istory panel, and render the logs based on the selected year (#3457) * fix: sync fe and be def on can hist endpt * feat: load can history by selected fiscal year * test: add test data * feat: update dependencies * test: add e2e tests for history logs when fy changes * test: test loading * test: fix e2e handles history test * test: rm dot only * test: test can history e2e failing test on gha * test: test can history e2e failing test on gha second time * test: test can history e2e failing test on gha third time * test: test can history e2e failing test on gha fourth time * test: mimic other e2e syntax * test: spamming e2e workflow * test: spamming e2e workflow again * test: spamming e2e workflow once more * test: spamming e2e workflow once more again * test: gha wins
HHS · Feb 17, 2025 · 6eb4294 · 6eb4294
1 parent 67b13a1
commit 6eb4294
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 7 deletions.
diff --git a/backend/data_tools/data/can_data.json5 b/backend/data_tools/data/can_data.json5
@@ -948,5 +948,15 @@
       history_type: "CAN_NICKNAME_EDITED",
       fiscal_year: 2025
     },
-  ],
+    {
+      // 34
+      can_id: 501,
+      ops_event_id: 31,
+      history_title: "Nickname Edited",
+      history_message: "Nickname changed from IA to Interagency Agreement during FY 2024 data import",
+      timestamp: "2024-02-04T21:42:53.928887Z",
+      history_type: "CAN_NICKNAME_EDITED",
+      fiscal_year: 2024
+    }
+  ]
 }
diff --git a/backend/data_tools/data/ops_event.json5 b/backend/data_tools/data/ops_event.json5
@@ -2870,5 +2870,42 @@
       created_by: 526,
       created_on: "2025-02-04T14:43:53.928887Z",
     },
+    {
+      // 31
+      event_type: "UPDATE_CAN",
+      event_status: "SUCCESS",
+      event_details: {
+        can_updates: {
+          can_id: 501,
+          changes: {
+            nick_name: {
+              new_value: "IA",
+              old_value: "IAA-Incoming",
+            },
+          },
+          updated_by: 526,
+        },
+        "request.json": {
+          nick_name: "IA",
+        },
+        "request.values": {},
+        "request.headers": {
+          Host: "localhost:8080",
+          Accept: "*/*",
+          Connection: "keep-alive",
+          "User-Agent": "PostmanRuntime/7.43.0",
+          "Content-Type": "application/json",
+          Authorization: "Bearer token",
+          "Cache-Control": "no-cache",
+          "Postman-Token": "ffe942f3-5355-4651-bb5b-80f2cfc851bf",
+          "Content-Length": "48",
+          "Accept-Encoding": "gzip, deflate, br",
+        },
+        "request.remote_addr": "192.168.127.1",
+        "request.remote_user": null,
+      },
+      created_by: 526,
+      created_on: "2024-02-04T14:43:53.928887Z",
+    }
   ],
 }
diff --git a/frontend/cypress/e2e/canDetail.cy.js b/frontend/cypress/e2e/canDetail.cy.js
@@ -103,6 +103,36 @@ describe("CAN detail page", () => {
     it("handles history", () => {
         cy.visit("/cans/500/");
         checkCANHistory();
+
+        // test history logs for varying fiscal years
+        cy.visit("/cans/501/");
+        // select FY 2023 and confirm no history logs
+        cy.get("#fiscal-year-select").select("2023");
+        cy.get('[data-cy="can-history-container"]').should("not.exist");
+        cy.get('[data-cy="can-history-list"]').should("not.exist");
+        cy.get('[data-cy="history"]').should("contain", "No History");
+        // switch to select FY 2024 and confirm 1 history log
+        cy.get("#fiscal-year-select").select("2024");
+        cy.get('[data-cy="can-history-container"]').should("exist");
+        cy.get('[data-cy="history"]').should("exist");
+        cy.get('[data-cy="can-history-list"]').should("exist");
+        cy.get('[data-cy="can-history-list"] > :nth-child(1) > .flex-justify > [data-cy="log-item-title"]').should(
+            "contain",
+            "Nickname Edited"
+        );
+        // switch to select FY 2025 and confirm 2 history logs
+        cy.get("#fiscal-year-select").select("2025");
+        cy.get('[data-cy="can-history-container"]').should("exist");
+        cy.get('[data-cy="history"]').should("exist");
+        cy.get('[data-cy="can-history-list"]').should("exist");
+        cy.get('[data-cy="can-history-list"] > :nth-child(1) > .flex-justify > [data-cy="log-item-title"]').should(
+            "contain",
+            "Nickname Edited"
+        );
+        cy.get('[data-cy="can-history-list"] > :nth-child(2) > .flex-justify > [data-cy="log-item-title"]').should(
+            "contain",
+            "FY 2025 Data Import"
+        );
     });
 });
 

diff --git a/frontend/src/api/opsAPI.js b/frontend/src/api/opsAPI.js
@@ -289,14 +289,20 @@ export const opsApi = createApi({
             providesTags: ["Cans", "CanFunding"]
         }),
         getCanHistory: builder.query({
-            query: ({ canId, offset, limit }) => {
+            query: ({ canId, offset, limit, fiscalYear, sort }) => {
                 const queryParams = [];
                 if (limit) {
                     queryParams.push(`limit=${limit}`);
                 }
                 if (offset) {
                     queryParams.push(`offset=${offset}`);
                 }
+                if (fiscalYear) {
+                    queryParams.push(`fiscal_year=${fiscalYear}`);
+                }
+                if (sort) {
+                    queryParams.push(`sort_asc=${sort}`);
+                }
                 return `/can-history/?can_id=${canId}&${queryParams.join("&")}`;
             },
             providesTags: ["Cans"]

diff --git a/frontend/src/components/CANs/CANDetailView/CANDetailView.jsx b/frontend/src/components/CANs/CANDetailView/CANDetailView.jsx
@@ -12,6 +12,7 @@ import CanHistoryPanel from "../CANHistoryPanel";
  * @property {string} divisionDirectorFullName
  * @property {string} divisionName
  * @property {number} canId
+ * @property {number} fiscalYear
  */
 /**
  * This component needs to wrapped in a <dl> element.
@@ -27,7 +28,8 @@ const CANDetailView = ({
     portfolioName,
     teamLeaders,
     divisionDirectorFullName,
-    divisionName
+    divisionName,
+    fiscalYear
 }) => {
     return (
         <div
@@ -47,7 +49,10 @@ const CANDetailView = ({
                 </dl>
                 <section data-cy="history">
                     <h3 className="text-base-dark margin-top-3 text-normal font-12px">History</h3>
-                    <CanHistoryPanel canId={canId} />
+                    <CanHistoryPanel
+                        canId={canId}
+                        fiscalYear={fiscalYear}
+                    />
                 </section>
             </div>
             {/* // NOTE: Right Column */}

diff --git a/frontend/src/components/CANs/CANHistoryPanel/CANHistoryPanel.jsx b/frontend/src/components/CANs/CANHistoryPanel/CANHistoryPanel.jsx
@@ -6,13 +6,14 @@ import LogItem from "../../UI/LogItem";
 /**
  * @typedef {Object} CanHistoryPanelProps
  * @property {number} canId
+ * @property {number} fiscalYear
  */
 
 /**
  * @param {CanHistoryPanelProps} props
  */
 
-const CanHistoryPanel = ({ canId }) => {
+const CanHistoryPanel = ({ canId, fiscalYear }) => {
     const [offset, setOffset] = useState(0);
     const [stopped, setStopped] = useState(false);
     /**
@@ -33,9 +34,16 @@ const CanHistoryPanel = ({ canId }) => {
     } = useGetCanHistoryQuery({
         canId,
         limit: 5,
-        offset: offset
+        offset: offset,
+        fiscalYear: fiscalYear
     });
 
+    useEffect(() => {
+        setOffset(0);
+        setStopped(false);
+        setCanHistory(initialHistory);
+    }, [fiscalYear]);
+
     useEffect(() => {
         if (canHistoryItems && canHistoryItems.length > 0) {
             setCanHistory([...canHistory, ...canHistoryItems]);
@@ -46,7 +54,7 @@ const CanHistoryPanel = ({ canId }) => {
         if (isError) {
             setStopped(true);
         }
-    }, [canHistoryItems]);
+    }, [canHistoryItems, isLoading, isError]);
 
     const fetchMoreData = () => {
         if (stopped) return;

diff --git a/frontend/src/pages/cans/detail/CanDetail.jsx b/frontend/src/pages/cans/detail/CanDetail.jsx
@@ -92,6 +92,7 @@ const CanDetail = ({
                     teamLeaders={teamLeaders}
                     divisionDirectorFullName={divisionDirectorFullName}
                     divisionName={divisionName}
+                    fiscalYear={fiscalYear}
                 />
             )}
         </article>