@kartverket/backstage-plugin-risk-scorecard 1.0.7 → 1.0.9

package/dist/esm/{index-ef4b878a.esm.js → index-28348a2f.esm.js}

@@ -3,7 +3,7 @@ import { makeStyles, FormControl, FormLabel, FormHelperText, TextField as TextFi
 import { InfoCard, ContentHeader } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useRouteRef, useApi, googleAuthApiRef, identityApiRef, fetchApiRef, configApiRef } from '@backstage/core-plugin-api';
-import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-375f1d7e.esm.js';
+import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-558ec32a.esm.js';
 import { useNavigate, useLocation, useParams } from 'react-router';
 import { useEffectOnce } from 'react-use';
 import { useSearchParams, Routes, Route } from 'react-router-dom';
@@ -2146,7 +2146,7 @@ const ActionsSection = () => {
         startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
       }
     )
-  ), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  ), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(Fragment, { key: action.ID }, /* @__PURE__ */ React.createElement(
     ActionBox,
     {
       action,
@@ -2177,7 +2177,7 @@ const ScopeSection = () => {
       onClick: () => editScenario("scenario"),
       startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
     }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, scenario.title)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.description")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, scenario.description)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { variant: "fullWidth" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.threatActors")), scenario.threatActors.map((threatActor) => /* @__PURE__ */ React.createElement(Typography, { className: body2 }, threatActor))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.vulnerabilities")), scenario.vulnerabilities.map((vulnerability) => /* @__PURE__ */ React.createElement(Typography, { className: body2 }, vulnerability))))));
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, scenario.title)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.description")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, scenario.description)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { variant: "fullWidth" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.threatActors")), scenario.threatActors.map((threatActor) => /* @__PURE__ */ React.createElement(Typography, { key: threatActor, className: body2 }, threatActor))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.vulnerabilities")), scenario.vulnerabilities.map((vulnerability) => /* @__PURE__ */ React.createElement(Typography, { key: vulnerability, className: body2 }, vulnerability))))));
 };
 
 const ScenarioDrawer = () => {
@@ -2334,6 +2334,11 @@ const RiskMatrixScenarioCount = ({
     tooltipText
   } = useRiskMatrixStyles();
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const { openScenario } = useContext(ScenarioContext);
+  const handleScenarioClick = (ID) => {
+    setTooltipOpen(false);
+    openScenario(ID);
+  };
   const scenarios = riSc.scenarios.filter(
     (scenario) => probabilityOptions.indexOf(
       initialRisk ? scenario.risk.probability : scenario.remainingRisk.probability
@@ -2344,7 +2349,9 @@ const RiskMatrixScenarioCount = ({
   if (scenarios.length === 0) {
     return null;
   }
-  const tooltipList = /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(ListSubheader, { className: tooltipText }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: tooltipText }, t("riskMatrix.tooltip.title"))), scenarios.map((s) => /* @__PURE__ */ React.createElement(ListItem, { button: true, disableGutters: true, className: tooltipText }, /* @__PURE__ */ React.createElement(CircleIcon, { className: tooltipText, style: { width: "10px" } }), /* @__PURE__ */ React.createElement(
+  const tooltipList = /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(ListSubheader, { className: tooltipText }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: tooltipText }, t("riskMatrix.tooltip.title"))), scenarios.map((s) => /* @__PURE__ */ React.createElement(ListItem, { key: s.ID, button: true, disableGutters: true, className: tooltipText, onClick: () => {
+    handleScenarioClick(s.ID);
+  } }, /* @__PURE__ */ React.createElement(CircleIcon, { className: tooltipText, style: { width: "10px" } }), /* @__PURE__ */ React.createElement(
     ListItemText$1,
     {
       className: tooltipText,
@@ -2355,6 +2362,7 @@ const RiskMatrixScenarioCount = ({
   return /* @__PURE__ */ React.createElement(ClickAwayListener, { onClickAway: () => setTooltipOpen(false) }, /* @__PURE__ */ React.createElement(
     Tooltip,
     {
+      interactive: true,
       classes: { tooltip, arrow: tooltipArrow },
       title: tooltipList,
       placement: "right",
@@ -2392,7 +2400,7 @@ const EstimatedRiskInfoDialog = ({
 }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { paper, title, text } = useEstimatedRiskInfoDialogStyles();
-  return /* @__PURE__ */ React.createElement(Dialog, { open: isOpen, onClose, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(Paper, { className: paper }, /* @__PURE__ */ React.createElement(DialogTitle, { className: title }, t("infoDialog.title")), /* @__PURE__ */ React.createElement(DialogContent, { className: text, dividers: true }, /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, t("infoDialog.description")), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.calculatedHowTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, t("infoDialog.calculatedHow")), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.consequenceTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, consequenceOptions.map((option, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, index + 1, ": ", formatNOK(option), /* @__PURE__ */ React.createElement("br", null)))), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.probabilityTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, probabilityOptions.map((option, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, index + 1, ": ", option, ", ", t(`infoDialog.probabilityDescription.${index}`), /* @__PURE__ */ React.createElement("br", null)))), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, t("infoDialog.example")))));
+  return /* @__PURE__ */ React.createElement(Dialog, { open: isOpen, onClose, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(Paper, { className: paper }, /* @__PURE__ */ React.createElement(DialogTitle, { className: title }, t("infoDialog.title")), /* @__PURE__ */ React.createElement(DialogContent, { className: text, dividers: true }, /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, t("infoDialog.description")), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.calculatedHowTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, t("infoDialog.calculatedHow")), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.consequenceTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, consequenceOptions.map((option, index) => /* @__PURE__ */ React.createElement(Fragment, { key: option }, index + 1, ": ", formatNOK(option), /* @__PURE__ */ React.createElement("br", null)))), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.probabilityTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, probabilityOptions.map((option, index) => /* @__PURE__ */ React.createElement(Fragment, { key: option }, index + 1, ": ", option, ", ", t(`infoDialog.probabilityDescription.${index}`), /* @__PURE__ */ React.createElement("br", null)))), /* @__PURE__ */ React.createElement(DialogContentText, { className: text }, t("infoDialog.example")))));
 };
 
 const useAggregatedCostStyles = makeStyles({
@@ -2489,11 +2497,12 @@ const RiskMatrix = ({ riSc }) => {
       riSc,
       initialRisk: tab === "initialRisk" /* initialRisk */
     }
-  )), /* @__PURE__ */ React.createElement(Box$2, { className: gridWrapper }, /* @__PURE__ */ React.createElement(Box$2, { className: grid }, /* @__PURE__ */ React.createElement(Box$2, { className: konsekvens }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.consequence"))), riskMatrix.map((_, row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, 5 - row)), riskMatrix[0].map((_2, col) => /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Box$2, { className: gridWrapper }, /* @__PURE__ */ React.createElement(Box$2, { className: grid }, /* @__PURE__ */ React.createElement(Box$2, { className: konsekvens }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.consequence"))), riskMatrix.map((_, row) => /* @__PURE__ */ React.createElement(Fragment, { key: row }, /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, 5 - row)), riskMatrix[0].map((_2, col) => /* @__PURE__ */ React.createElement(
     Box$2,
     {
       className: `${square} ${centered}`,
-      style: { backgroundColor: riskMatrix[row][col] }
+      style: { backgroundColor: riskMatrix[row][col] },
+      key: col
     },
     /* @__PURE__ */ React.createElement(
       RiskMatrixScenarioCount,
@@ -2504,7 +2513,7 @@ const RiskMatrix = ({ riSc }) => {
         initialRisk: tab === "initialRisk" /* initialRisk */
       }
     )
-  )))), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), riskMatrix.map((_, col) => /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, col + 1))), /* @__PURE__ */ React.createElement(Box$2, { className: sannsynlighet }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.probability")))))));
+  )))), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), riskMatrix.map((_, col) => /* @__PURE__ */ React.createElement(Box$2, { className: centered, key: col }, /* @__PURE__ */ React.createElement(Typography, { className: text }, col + 1))), /* @__PURE__ */ React.createElement(Box$2, { className: sannsynlighet }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.probability")))))));
 };
 
 const useTableStyles = makeStyles((theme) => ({
@@ -2515,7 +2524,14 @@ const useTableStyles = makeStyles((theme) => ({
     padding: theme.spacing(1)
   },
   rowBackground: {
-    backgroundColor: theme.palette.type === "dark" ? "#424242" : "white",
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    border: "none",
+    padding: 0,
+    "&.MuiTableRow-root": {
+      backgroundColor: theme.palette.type === "dark" ? "#424242" : "white"
+    },
     transition: "background-color 0.3s",
     "&:hover": {
       backgroundColor: theme.palette.type === "dark" ? "#616161" : "#f5f5f5",
@@ -2552,18 +2568,11 @@ const ScenarioTableRow = ({
   const remainingActions = scenario.actions.filter(
     (a) => a.status !== "Completed"
   );
-  return /* @__PURE__ */ React.createElement(TableRow, { className: isLastRow ? void 0 : rowBorder }, /* @__PURE__ */ React.createElement(
-    "button",
+  return /* @__PURE__ */ React.createElement(
+    TableRow,
     {
-      className: rowBackground,
-      onClick: () => viewRow(scenario.ID),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        width: "100%",
-        border: "none",
-        padding: 0
-      }
+      className: `${isLastRow ? void 0 : rowBorder} ${rowBackground}`,
+      onClick: () => viewRow(scenario.ID)
     },
     /* @__PURE__ */ React.createElement(
       TableCell,
@@ -2595,7 +2604,7 @@ const ScenarioTableRow = ({
         }
       }
     ), t("scenarioTable.columns.probabilityChar"), ":", getProbabilityLevel(scenario.remainingRisk), " ", t("scenarioTable.columns.consequenceChar"), ":", getConsequenceLevel(scenario.remainingRisk))
-  ));
+  );
 };
 
 const ScenarioTable = ({ riSc }) => {
@@ -3159,4 +3168,4 @@ const RiScPlugin = () => {
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-ef4b878a.esm.js.map
+//# sourceMappingURL=index-28348a2f.esm.js.map