diff --git a/.changeset/tidy-scissors-dream.md b/.changeset/tidy-scissors-dream.md new file mode 100644 index 000000000..50ec8e9ad --- /dev/null +++ b/.changeset/tidy-scissors-dream.md @@ -0,0 +1,5 @@ +--- +'@roadiehq/backstage-plugin-security-insights': patch +--- + +Fix Dependabot Alerts non-open alerts when the table defaults to only show open alerts. diff --git a/plugins/frontend/backstage-plugin-security-insights/src/components/DependabotAlertsTable/DependabotAlertsTable.tsx b/plugins/frontend/backstage-plugin-security-insights/src/components/DependabotAlertsTable/DependabotAlertsTable.tsx index 04b03e1c7..08de53b22 100644 --- a/plugins/frontend/backstage-plugin-security-insights/src/components/DependabotAlertsTable/DependabotAlertsTable.tsx +++ b/plugins/frontend/backstage-plugin-security-insights/src/components/DependabotAlertsTable/DependabotAlertsTable.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, useState } from 'react'; +import React, { FC, useMemo, useState } from 'react'; import { useAsync } from 'react-use'; import { Typography, @@ -99,38 +99,28 @@ const getDetailsUrl = ( return {packageName}; }; +const COLUMNS: TableColumn[] = [ + { title: 'Name', field: 'name' }, + { title: 'Created', field: 'createdAt' }, + { title: 'State', field: 'state' }, + { title: 'Severity', field: 'severity' }, + { title: 'Patched Version', field: 'patched_version' }, +]; + export const DenseTable: FC = ({ repository, detailsUrl }) => { const { entity } = useEntity(); const projectName = useProjectName(entity); - const [filteredTableData, setFilteredTableData] = useState( - repository.vulnerabilityAlerts.nodes, - ); const [stateFilter, setStateFilter] = useState('OPEN'); - const filterAlerts = (newStateFilter: StateFilter) => { - setStateFilter(newStateFilter); - + const filteredTableData = useMemo(() => { const issues = repository.vulnerabilityAlerts.nodes; - - if (newStateFilter === 'ALL') { - setFilteredTableData(issues); - } else { - setFilteredTableData( - issues.filter(node => node.state === newStateFilter), - ); + if (stateFilter === 'ALL') { + return issues; } - }; - - const columns: TableColumn[] = [ - { title: 'Name', field: 'name' }, - { title: 'Created', field: 'createdAt' }, - { title: 'State', field: 'state' }, - { title: 'Severity', field: 'severity' }, - { title: 'Patched Version', field: 'patched_version' }, - ]; - const tableData = filteredTableData.length > 0 ? filteredTableData : []; + return issues.filter(node => node.state === stateFilter); + }, [stateFilter, repository]); - const structuredData = tableData.map(node => { + const structuredData = filteredTableData.map(node => { return { createdAt: DateTime.fromISO(node.createdAt).toLocaleString(), state: capitalize(node.state), @@ -162,25 +152,25 @@ export const DenseTable: FC = ({ repository, detailsUrl }) => { > @@ -190,7 +180,7 @@ export const DenseTable: FC = ({ repository, detailsUrl }) => { } options={{ search: true, paging: true, padding: 'dense' }} - columns={columns} + columns={COLUMNS} data={structuredData} /> );