diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index 8bacd38a0..39c3aa55f 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -383,6 +383,7 @@ "rootPath": "Root path", "scheduled": "Scheduled", "select": "Select", + "section": "Section", "settingsAllowApps": "Allow reviewing applications without running an assessment first", "showLess": "Show less", "showMore": "Show more", diff --git a/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx b/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx index ca64b9df8..cc97ee7cd 100644 --- a/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx +++ b/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx @@ -32,6 +32,7 @@ import { Link } from "react-router-dom"; import { Paths } from "@app/Paths"; import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; import RiskIcon from "@app/components/risk-icon/risk-icon"; +import { FilterToolbar, FilterType } from "@app/components/FilterToolbar"; export interface IIdentifiedRisksTableProps { assessmentRefs?: IdRef[]; @@ -152,6 +153,7 @@ export const IdentifiedRisksTable: React.FC = ({ }, variant: "compact", isPaginationEnabled: true, + isFilterEnabled: true, isSortEnabled: true, hasActionsColumn: false, getSortValues: (item) => ({ @@ -173,6 +175,86 @@ export const IdentifiedRisksTable: React.FC = ({ ], isExpansionEnabled: true, expandableVariant: "single", + filterCategories: [ + { + key: "questionnaireName", + title: t("terms.questionnaire"), + type: FilterType.multiselect, + placeholderText: + t("actions.filterBy", { + what: t("terms.questionnaire").toLowerCase(), + }) + "...", + getItemValue: (item) => item.questionnaireName || "", + selectOptions: [ + ...new Set( + tableData.map((item) => item.questionnaireName).filter(Boolean) + ), + ].map((name) => ({ key: name, value: name })), + }, + { + key: "section", + title: t("terms.section"), + type: FilterType.multiselect, + placeholderText: + t("actions.filterBy", { + what: t("terms.section").toLowerCase(), + }) + "...", + getItemValue: (item) => item.section || "", + selectOptions: [ + ...new Set(tableData.map((item) => item.section).filter(Boolean)), + ].map((name) => ({ key: name, value: name })), + }, + { + key: "question", + title: t("terms.question"), + type: FilterType.multiselect, + placeholderText: + t("actions.filterBy", { + what: t("terms.question").toLowerCase(), + }) + "...", + getItemValue: (item) => item.question.text || "", + selectOptions: [ + ...new Set( + tableData.map((item) => item.question.text).filter(Boolean) + ), + ].map((name) => ({ key: name, value: name })), + }, + { + key: "answer", + title: t("terms.answer"), + type: FilterType.multiselect, + placeholderText: + t("actions.filterBy", { + what: t("terms.answer").toLowerCase(), + }) + "...", + getItemValue: (item) => item.answer.text || "", + selectOptions: [ + ...new Set(tableData.map((item) => item.answer.text).filter(Boolean)), + ].map((name) => ({ key: name, value: name })), + }, + { + key: "risk", + title: t("terms.risk"), + type: FilterType.multiselect, + placeholderText: + t("actions.filterBy", { what: t("terms.risk").toLowerCase() }) + + "...", + getItemValue: (item: ITableRowData) => { + const riskKey = item.answer.risk; + const riskValue = + riskLevelMapping[riskKey as keyof typeof riskLevelMapping]; + return riskValue.toString(); + }, + selectOptions: [ + { key: "3", value: "High" }, + { key: "2", value: "Medium" }, + { key: "1", value: "Low" }, + { key: "0", value: "Unknown" }, + ], + }, + ], + initialItemsPerPage: 10, + isSelectionEnabled: false, }); const { @@ -181,6 +263,7 @@ export const IdentifiedRisksTable: React.FC = ({ propHelpers: { toolbarProps, paginationToolbarItemProps, + filterToolbarProps, paginationProps, tableProps, getThProps, @@ -196,6 +279,8 @@ export const IdentifiedRisksTable: React.FC = ({ <> + {...filterToolbarProps} /> +