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}
/>
);