diff --git a/changes/fix-2996-schedule-dropdown b/changes/issue-2996-schedule-dropdown similarity index 100% rename from changes/fix-2996-schedule-dropdown rename to changes/issue-2996-schedule-dropdown diff --git a/changes/issue-3154-teams-software-card b/changes/issue-3154-teams-software-card new file mode 100644 index 0000000000..cbef710b0d --- /dev/null +++ b/changes/issue-3154-teams-software-card @@ -0,0 +1 @@ +* Fix dashboard software card not filtering by team and improve load states \ No newline at end of file diff --git a/frontend/pages/Homepage/Homepage.tsx b/frontend/pages/Homepage/Homepage.tsx index ba927cd952..3dce4d2725 100644 --- a/frontend/pages/Homepage/Homepage.tsx +++ b/frontend/pages/Homepage/Homepage.tsx @@ -177,6 +177,7 @@ const Homepage = (): JSX.Element => { }} > diff --git a/frontend/pages/Homepage/cards/Software/Software.tsx b/frontend/pages/Homepage/cards/Software/Software.tsx index 9e932b4c63..092ee09f1f 100644 --- a/frontend/pages/Homepage/cards/Software/Software.tsx +++ b/frontend/pages/Homepage/cards/Software/Software.tsx @@ -21,6 +21,7 @@ interface ITableQueryProps { } interface ISoftwareCardProps { + currentTeamId?: number; isModalOpen: boolean; setIsSoftwareModalOpen: (isOpen: boolean) => void; } @@ -96,6 +97,7 @@ const EmptySoftware = (message: string): JSX.Element => { }; const Software = ({ + currentTeamId, isModalOpen, setIsSoftwareModalOpen, }: ISoftwareCardProps): JSX.Element => { @@ -113,69 +115,89 @@ const Software = ({ setIsModalSoftwareVulnerable, ] = useState(false); const [navTabIndex, setNavTabIndex] = useState(0); + const [isLoadingSoftware, setIsLoadingSoftware] = useState(true); + const [ + isLoadingVulnerableSoftware, + setIsLoadingVulnerableSoftware, + ] = useState(false); + const [isLoadingModalSoftware, setIsLoadingModalSoftware] = useState( + false + ); - const { data: software, isLoading: isLoadingSoftware } = useQuery< - ISoftware[], - Error - >( - ["software", softwarePageIndex], - () => - softwareAPI.load({ + const { data: software } = useQuery( + ["software", softwarePageIndex, currentTeamId], + () => { + setIsLoadingSoftware(true); + return softwareAPI.load({ page: softwarePageIndex, perPage: PAGE_SIZE, orderKey: "name,id", orderDir: "asc", - }), + teamId: currentTeamId && currentTeamId, + }); + }, { enabled: navTabIndex === 0, - refetchOnWindowFocus: false, + // If keepPreviousData is enabled, + // useQuery no longer returns isLoading when making new calls after load + // So we manage our own load states keepPreviousData: true, + onSuccess: () => { + setIsLoadingSoftware(false); + }, } ); - const { - data: vulnerableSoftware, - isLoading: isLoadingVulnerableSoftware, - } = useQuery( - ["vSoftware", vSoftwarePageIndex], - () => - softwareAPI.load({ + const { data: vulnerableSoftware } = useQuery( + ["vSoftware", vSoftwarePageIndex, currentTeamId], + () => { + setIsLoadingVulnerableSoftware(true); + return softwareAPI.load({ page: vSoftwarePageIndex, perPage: PAGE_SIZE, orderKey: "name,id", orderDir: "asc", vulnerable: true, - }), + teamId: currentTeamId && currentTeamId, + }); + }, { enabled: navTabIndex === 1, refetchOnWindowFocus: false, keepPreviousData: true, + onSuccess: () => { + setIsLoadingVulnerableSoftware(false); + }, } ); - const { data: modalSoftware, isLoading: isLoadingModalSoftware } = useQuery< - ISoftware[], - Error - >( + const { data: modalSoftware } = useQuery( [ "modalSoftware", modalSoftwarePageIndex, modalSoftwareSearchText, isModalSoftwareVulnerable, + currentTeamId, ], - () => - softwareAPI.load({ + () => { + setIsLoadingModalSoftware(true); + return softwareAPI.load({ page: modalSoftwarePageIndex, perPage: MODAL_PAGE_SIZE, query: modalSoftwareSearchText, orderKey: "id", orderDir: "desc", vulnerable: isModalSoftwareVulnerable, - }), + teamId: currentTeamId && currentTeamId, + }); + }, { enabled: isModalOpen, refetchOnWindowFocus: false, keepPreviousData: true, + onSuccess: () => { + setIsLoadingModalSoftware(false); + }, } ); diff --git a/frontend/pages/Homepage/cards/Software/_styles.scss b/frontend/pages/Homepage/cards/Software/_styles.scss index f36fb93d15..98cbb1986d 100644 --- a/frontend/pages/Homepage/cards/Software/_styles.scss +++ b/frontend/pages/Homepage/cards/Software/_styles.scss @@ -9,6 +9,9 @@ vertical-align: middle; } } + .table-container { + min-height: 435px; + } .data-table__wrapper { overflow-x: auto; } diff --git a/frontend/services/entities/software.ts b/frontend/services/entities/software.ts index e7134d2dd1..e44099bfa6 100644 --- a/frontend/services/entities/software.ts +++ b/frontend/services/entities/software.ts @@ -9,7 +9,7 @@ interface IGetSoftwareProps { orderDir: "asc" | "desc"; query: string; vulnerable: boolean; - teamId: boolean; + teamId?: number; } interface ISoftwareResponse {