-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3345 from HHS/OPS-2680/3342_can_history
feat: adds can history query and renders to can details page
- Loading branch information
Showing
11 changed files
with
276 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,40 @@ | ||
| import { describe, it, expect } from "vitest"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import CANDetailView from "./CANDetailView"; | ||
| import { Provider } from "react-redux"; | ||
| import store from "../../../store"; | ||
|
|
||
| const mockProps = { | ||
| canId: 500, | ||
| description: "Test CAN Description", | ||
| number: "CAN-123", | ||
| nickname: "Test Nickname", | ||
| portfolioName: "Test Portfolio", | ||
| teamLeaders: [ | ||
| { id: 1, full_name: "John Doe" }, | ||
| { id: 2, full_name: "Jane Smith" } | ||
| { id: 1, full_name: "John Doe", email: "[email protected]" }, | ||
| { id: 2, full_name: "Jane Smith", email: "[email protected]" } | ||
| ], | ||
| divisionDirectorFullName: "Director Name", | ||
| divisionName: "Test Division" | ||
| divisionName: "Test Division", | ||
| canHistoryItems: [ | ||
| { | ||
| id: 1, | ||
| can_id: 500, | ||
| ops_event_id: 1, | ||
| history_title: "Test History Title", | ||
| history_message: "Test History Message", | ||
| timestamp: "2021-01-01T00:00:00Z", | ||
| history_type: "Test History Type" | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| describe("CANDetailView", () => { | ||
| it("renders all CAN details correctly", () => { | ||
| render( | ||
| <dl> | ||
| <Provider store={store}> | ||
| <CANDetailView {...mockProps} /> | ||
| </dl> | ||
| </Provider> | ||
| ); | ||
|
|
||
| // Check for basic text content | ||
|
|
@@ -40,23 +54,23 @@ describe("CANDetailView", () => { | |
|
|
||
| it("renders history section", () => { | ||
| render( | ||
| <dl> | ||
| <Provider store={store}> | ||
| <CANDetailView {...mockProps} /> | ||
| </dl> | ||
| </Provider> | ||
| ); | ||
|
|
||
| expect(screen.getByText("History")).toBeInTheDocument(); | ||
| expect(screen.getByText("Not yet implemented")).toBeInTheDocument(); | ||
| // TODO: Add more specific tests for history section | ||
| }); | ||
|
|
||
| it("renders without team leaders", () => { | ||
| render( | ||
| <dl> | ||
| <Provider store={store}> | ||
| <CANDetailView | ||
| {...mockProps} | ||
| teamLeaders={[]} | ||
| /> | ||
| </dl> | ||
| </Provider> | ||
| ); | ||
|
|
||
| // Verify other content still renders | ||
|
|
||
99 changes: 99 additions & 0 deletions
99
frontend/src/components/CANs/CANHistoryPanel/CANHistoryPanel.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import InfiniteScroll from "../../Agreements/AgreementDetails/InfiniteScroll"; | ||
| import { useGetCanHistoryQuery } from "../../../api/opsAPI"; | ||
| import LogItem from "../../UI/LogItem"; | ||
|
|
||
| /** | ||
| * @typedef {Object} CanHistoryPanelProps | ||
| * @property {number} canId | ||
| */ | ||
|
|
||
| /** | ||
| * @param {CanHistoryPanelProps} props | ||
| */ | ||
|
|
||
| const CanHistoryPanel = ({ canId }) => { | ||
| const [offset, setOffset] = useState(0); | ||
| const [stopped, setStopped] = useState(false); | ||
| /** | ||
| * @type {CanHistoryItem[]} | ||
| */ | ||
| const initialHistory = []; | ||
| /** | ||
| * @typedef {import('../../CANs/CANTypes').CanHistoryItem} CanHistoryItem | ||
| * @type {[CanHistoryItem[], React.Dispatch<React.SetStateAction<CanHistoryItem[]>>]} | ||
| */ | ||
| const [cantHistory, setCanHistory] = useState(initialHistory); | ||
|
|
||
| const { | ||
| data: canHistoryItems, | ||
| isError, | ||
| isLoading, | ||
| isFetching | ||
| } = useGetCanHistoryQuery({ | ||
| canId, | ||
| limit: 5, | ||
| offset: offset | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (canHistoryItems && canHistoryItems.length > 0) { | ||
| setCanHistory([...cantHistory, ...canHistoryItems]); | ||
| } | ||
| if (!isLoading && canHistoryItems && canHistoryItems.length === 0) { | ||
| setStopped(true); | ||
| } | ||
| if (isError) { | ||
| setStopped(true); | ||
| } | ||
| }, [canHistoryItems]); | ||
|
|
||
| const fetchMoreData = () => { | ||
| if (stopped) return; | ||
| if (!isFetching) { | ||
| setOffset(offset + 5); | ||
| } | ||
| return Promise.resolve(); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {cantHistory.length > 0 ? ( | ||
| <div | ||
| className="overflow-y-scroll force-show-scrollbars" | ||
| style={{ height: "15rem" }} | ||
| data-cy="can-history-container" | ||
| role="region" | ||
| aria-live="polite" | ||
| aria-label="CAN History" | ||
| // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex | ||
| tabIndex={0} | ||
| > | ||
| <ul | ||
| className="usa-list--unstyled" | ||
| data-cy="can-history-list" | ||
| > | ||
| {cantHistory.map((item) => ( | ||
| <LogItem | ||
| key={item.id} | ||
| title={item.history_title} | ||
| createdOn={item.timestamp} | ||
| message={item.history_message} | ||
| /> | ||
| ))} | ||
| </ul> | ||
| {!stopped && ( | ||
| <InfiniteScroll | ||
| fetchMoreData={fetchMoreData} | ||
| isLoading={isFetching} | ||
| /> | ||
| )} | ||
| </div> | ||
| ) : ( | ||
| <p>No History</p> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CanHistoryPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from "./CANHistoryPanel"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.