@kartverket/backstage-plugin-risk-scorecard 1.0.8 → 1.0.10

package/dist/esm/{index-2ef3f54b.esm.js → index-32d8d9ac.esm.js}

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, createContext, useContext, Fragment, useRef } from 'react';
+import React, { useState, useEffect, useCallback, createContext, useContext, Fragment, useRef } from 'react';
 import { makeStyles, FormControl, FormLabel, FormHelperText, TextField as TextField$1, Grid, Typography, Box as Box$1, Paper, Button, Radio, CircularProgress, Dialog, DialogTitle, DialogActions, Stepper, Step, StepButton, Divider as Divider$1, Drawer, List, ListSubheader, ListItem, ListItemText as ListItemText$1, ClickAwayListener, Tooltip, DialogContent, DialogContentText, IconButton, Tab } from '@material-ui/core';
 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-0a8ff39c.esm.js';
+import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-aa781c2b.esm.js';
 import { useNavigate, useLocation, useParams } from 'react-router';
 import { useEffectOnce } from 'react-use';
 import { useSearchParams, Routes, Route } from 'react-router-dom';
@@ -25,8 +25,9 @@ import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import { nb } from 'date-fns/locale/nb';
 import Button$1 from '@mui/material/Button';
-import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
 import Alert from '@mui/material/Alert';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import Box$2 from '@mui/material/Box';
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
 import EditIcon from '@mui/icons-material/Edit';
@@ -470,19 +471,24 @@ const requiresNewApproval = (oldRiSc, updatedRiSc) => {
   return requiresApproval;
 };
 function formatNumber(cost, t) {
-  if (cost < 1e4) {
-    return formatNOK(cost);
-  } else {
-    let { threshold, unit } = [
-      { threshold: 1e6, unit: "thousand" },
-      { threshold: 1e9, unit: "million" },
-      { threshold: 1e12, unit: "billion" },
-      { threshold: 1e15, unit: "trillion" }
-    ].find(({ threshold: threshold2 }) => cost < threshold2);
+  function getTranslationWithCorrectUnit(costValue, threshold, unit) {
     return t(`riskMatrix.estimatedRisk.suffix.${unit}`, {
-      count: Number((cost / threshold * 1e3).toFixed(0))
+      count: Number((costValue / threshold * 1e3).toFixed(0))
     });
   }
+  if (cost < 1e4) {
+    return formatNOK(cost);
+  }
+  if (cost < 1e6) {
+    return getTranslationWithCorrectUnit(cost, 1e6, "thousand");
+  }
+  if (cost < 1e9) {
+    return getTranslationWithCorrectUnit(cost, 1e9, "million");
+  }
+  if (cost < 1e12) {
+    return getTranslationWithCorrectUnit(cost, 1e12, "billion");
+  }
+  return getTranslationWithCorrectUnit(cost, 1e15, "trillion");
 }
 
 function dtoToRiSc(riScDTO) {
@@ -749,7 +755,7 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
       setOriginalScenario(selectedScenario);
       setScenarioDrawerState(2 /* View */);
     }
-  }, [riSc, scenarioIdFromParams]);
+  }, [getRiScPath, isNewScenario, navigate, riSc, scenarioIdFromParams, setSearchParams]);
   const openScenario = (id) => {
     if (riSc) {
       navigate(getScenarioPath({ riScId: riSc.id, scenarioId: id }));
@@ -943,7 +949,7 @@ const useFetchRiScs = (riScIdFromParams) => {
         status: ProcessingStatus.ErrorWhenFetchingRiScs
       });
     }
-  }, [location]);
+  }, [location, setResponse]);
   useEffectOnce(() => {
     fetchRiScs(
       (res) => {
@@ -983,11 +989,13 @@ const useFetchRiScs = (riScIdFromParams) => {
       }
     }
   }, [riScs, riScIdFromParams]);
-  const resetRiScStatus = () => setUpdateRiScStatus({
-    isLoading: false,
-    isSuccess: false,
-    isError: false
-  });
+  const resetRiScStatus = useCallback(() => {
+    setUpdateRiScStatus({
+      isLoading: false,
+      isSuccess: false,
+      isError: false
+    });
+  }, []);
   const selectRiSc = (title) => {
     var _a;
     const riScId = (_a = riScs == null ? void 0 : riScs.find((riSc) => riSc.content.title === title)) == null ? void 0 : _a.id;
@@ -1542,6 +1550,7 @@ const ActionsStep = () => {
   )), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: actionSubtitle }, t("scenarioDrawer.measureTab.plannedMeasures")), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(
     ActionEdit,
     {
+      key: action.ID,
       action,
       index: index + 1,
       updateAction,
@@ -1663,11 +1672,11 @@ const RiskStep = ({ riskType, restEqualsInitial }) => {
   useEffect(() => {
     if (restEqualsInitial)
       setRemainingConsequence(getConsequenceLevel(scenario.risk));
-  }, [scenario.risk.consequence]);
+  }, [restEqualsInitial, scenario.risk, scenario.risk.consequence, setRemainingConsequence]);
   useEffect(() => {
     if (restEqualsInitial)
       setRemainingProbability(getProbabilityLevel(scenario.risk));
-  }, [scenario.risk.probability]);
+  }, [restEqualsInitial, scenario.risk, scenario.risk.probability, setRemainingProbability]);
   const setC = riskType === "initial" ? setConsequence : setRemainingConsequence;
   const setP = riskType === "initial" ? setProbability : setRemainingProbability;
   return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(Typography, { className: h2 }, t(`scenarioStepper.${resourceKey}.title`)), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t(`scenarioStepper.${resourceKey}.subtitle`))), /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("dictionary.probability")), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t(`scenarioStepper.${resourceKey}.probabilitySubtitle`))), /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(
@@ -1736,7 +1745,7 @@ const CloseConfirmation = ({
   return /* @__PURE__ */ React.createElement(Dialog, { open: isOpen }, /* @__PURE__ */ React.createElement(DialogTitle, null, t("scenarioDrawer.closeConfirmation")), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { style: { textTransform: "none" }, onClick: close }, t("dictionary.discardChanges")), /* @__PURE__ */ React.createElement(Button, { style: { textTransform: "none" }, onClick: save }, t("dictionary.save"))));
 };
 
-const ScenarioWizardSteps = [
+const scenarioWizardSteps = [
   "scenario",
   "initialRisk",
   "measure",
@@ -1775,6 +1784,10 @@ const ScenarioWizard = ({
     if (step === "restRisk")
       setRestEqualsInitial(false);
   }, [step]);
+  const close = useCallback(() => {
+    closeScenario();
+    setShowCloseConfirmation(false);
+  }, [closeScenario]);
   useEffect(() => {
     if (updateStatus.isSuccess) {
       close();
@@ -1782,11 +1795,7 @@ const ScenarioWizard = ({
       setShowCloseConfirmation(false);
       wizardRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
     }
-  }, [updateStatus]);
-  const close = () => {
-    closeScenario();
-    setShowCloseConfirmation(false);
-  };
+  }, [close, updateStatus]);
   const saveAndClose = () => {
     saveScenario();
   };
@@ -1800,32 +1809,32 @@ const ScenarioWizard = ({
   const nextStep = () => {
     const isValidScenario = validateScenario();
     if (isValidScenario) {
-      const currentIndex = ScenarioWizardSteps.indexOf(step);
-      if (currentIndex < ScenarioWizardSteps.length - 1) {
-        editScenario(ScenarioWizardSteps[currentIndex + 1]);
+      const currentIndex = scenarioWizardSteps.indexOf(step);
+      if (currentIndex < scenarioWizardSteps.length - 1) {
+        editScenario(scenarioWizardSteps[currentIndex + 1]);
       }
     }
   };
   const previousStep = () => {
-    const currentIndex = ScenarioWizardSteps.indexOf(step);
+    const currentIndex = scenarioWizardSteps.indexOf(step);
     if (currentIndex > 0) {
-      editScenario(ScenarioWizardSteps[currentIndex - 1]);
+      editScenario(scenarioWizardSteps[currentIndex - 1]);
     }
   };
   const isFirstStep = () => {
-    return ScenarioWizardSteps.indexOf(step) === 0;
+    return scenarioWizardSteps.indexOf(step) === 0;
   };
   const isLastStep = () => {
-    return ScenarioWizardSteps.indexOf(step) === ScenarioWizardSteps.length - 1;
+    return scenarioWizardSteps.indexOf(step) === scenarioWizardSteps.length - 1;
   };
   return /* @__PURE__ */ React.createElement("div", { ref: wizardRef }, /* @__PURE__ */ React.createElement(Box, { className: root }, /* @__PURE__ */ React.createElement(Box, { className: container }, /* @__PURE__ */ React.createElement(Box, { className: header }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(Button$1, { variant: "outlined", onClick: handleCloseStepper }, t("dictionary.cancel"))), /* @__PURE__ */ React.createElement(
     Stepper,
     {
       className: stepper,
-      activeStep: ScenarioWizardSteps.indexOf(step),
+      activeStep: scenarioWizardSteps.indexOf(step),
       alternativeLabel: true
     },
-    ScenarioWizardSteps.map((wizardStep) => /* @__PURE__ */ React.createElement(Step, { key: wizardStep, completed: false }, /* @__PURE__ */ React.createElement(
+    scenarioWizardSteps.map((wizardStep) => /* @__PURE__ */ React.createElement(Step, { key: wizardStep, completed: false }, /* @__PURE__ */ React.createElement(
       StepButton,
       {
         disabled: false,
@@ -1840,16 +1849,16 @@ const ScenarioWizard = ({
       " "
     )))
   ), /* @__PURE__ */ React.createElement(Divider, null), isFetching ? /* @__PURE__ */ React.createElement(Spinner, { size: 80 }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: steps }, {
-    [ScenarioWizardSteps[0]]: /* @__PURE__ */ React.createElement(ScenarioStep, null),
-    [ScenarioWizardSteps[1]]: /* @__PURE__ */ React.createElement(
+    [scenarioWizardSteps[0]]: /* @__PURE__ */ React.createElement(ScenarioStep, null),
+    [scenarioWizardSteps[1]]: /* @__PURE__ */ React.createElement(
       RiskStep,
       {
         riskType: "initial",
         restEqualsInitial
       }
     ),
-    [ScenarioWizardSteps[2]]: /* @__PURE__ */ React.createElement(ActionsStep, null),
-    [ScenarioWizardSteps[3]]: /* @__PURE__ */ React.createElement(RiskStep, { riskType: "rest" })
+    [scenarioWizardSteps[2]]: /* @__PURE__ */ React.createElement(ActionsStep, null),
+    [scenarioWizardSteps[3]]: /* @__PURE__ */ React.createElement(RiskStep, { riskType: "rest" })
   }[step]), updateStatus.isError && /* @__PURE__ */ React.createElement(Alert, { style: { marginBottom: "1rem" }, severity: "error" }, /* @__PURE__ */ React.createElement(Typography, null, t("dictionary.saveError"))), /* @__PURE__ */ React.createElement(
     Box,
     {
@@ -2146,7 +2155,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 +2186,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 +2343,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 +2358,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 +2371,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 +2409,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,22 +2506,23 @@ 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, rowIndex) => /* @__PURE__ */ React.createElement(Fragment, { key: rowIndex }, /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, 5 - rowIndex)), row.map((col, colIndex) => /* @__PURE__ */ React.createElement(
     Box$2,
     {
       className: `${square} ${centered}`,
-      style: { backgroundColor: riskMatrix[row][col] }
+      style: { backgroundColor: col },
+      key: colIndex
     },
     /* @__PURE__ */ React.createElement(
       RiskMatrixScenarioCount,
       {
         riSc,
-        probability: col,
-        consequence: 4 - row,
+        probability: colIndex,
+        consequence: 4 - rowIndex,
         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) => ({
@@ -2512,7 +2530,9 @@ const useTableStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: theme.spacing(1)
+    padding: theme.spacing(1),
+    width: theme.spacing(1),
+    height: theme.spacing(1)
   },
   rowBackground: {
     display: "flex",
@@ -2521,7 +2541,8 @@ const useTableStyles = makeStyles((theme) => ({
     border: "none",
     padding: 0,
     "&.MuiTableRow-root": {
-      backgroundColor: theme.palette.type === "dark" ? "#424242" : "white"
+      backgroundColor: theme.palette.type === "dark" ? "#424242" : "white",
+      border: "none"
     },
     transition: "background-color 0.3s",
     "&:hover": {
@@ -2537,15 +2558,37 @@ const useTableStyles = makeStyles((theme) => ({
   rowBorder: {
     display: "flex",
     alignItems: "center",
-    borderBottom: theme.palette.type === "dark" ? "1px solid #616161" : "1px solid #0000001f"
+    "&.MuiTableRow-root": {
+      borderBottom: theme.palette.type === "dark" ? "1px solid #616161" : "1px solid #0000001f"
+    }
   },
   tableCell: {
+    minWidth: "120px",
+    padding: "20px 10px 20px 16px",
+    width: "15%",
+    gap: "0.4rem",
+    "&.MuiTableCell-root": {
+      fontSize: theme.spacing(2),
+      color: theme.palette.type === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)",
+      border: "none"
+    }
+  },
+  tableCellTitle: {
     display: "flex",
-    width: "20%",
     minWidth: "120px",
     padding: "20px 10px 20px 16px",
     gap: "0.4rem",
-    fontSize: theme.spacing(2)
+    width: "55%",
+    "&.MuiTableCell-root": {
+      fontSize: theme.spacing(2),
+      color: theme.palette.type === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)",
+      border: "none"
+    }
+  },
+  tableCellContainer: {
+    display: "flex",
+    gap: theme.spacing(1),
+    alignItems: "center"
   }
 }));
 
@@ -2555,7 +2598,14 @@ const ScenarioTableRow = ({
   isLastRow
 }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { riskColor, rowBackground, rowBorder, tableCell } = useTableStyles();
+  const {
+    riskColor,
+    rowBackground,
+    rowBorder,
+    tableCell,
+    tableCellTitle,
+    tableCellContainer
+  } = useTableStyles();
   const remainingActions = scenario.actions.filter(
     (a) => a.status !== "Completed"
   );
@@ -2565,18 +2615,8 @@ const ScenarioTableRow = ({
       className: `${isLastRow ? void 0 : rowBorder} ${rowBackground}`,
       onClick: () => viewRow(scenario.ID)
     },
-    /* @__PURE__ */ React.createElement(
-      TableCell,
-      {
-        className: tableCell,
-        style: {
-          width: "40%",
-          minWidth: "200px"
-        }
-      },
-      /* @__PURE__ */ React.createElement(Typography, { color: "primary", style: { fontWeight: 600 } }, scenario.title)
-    ),
-    /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(TableCell, { className: tableCellTitle }, /* @__PURE__ */ React.createElement(Typography, { color: "primary", style: { fontWeight: 600 } }, scenario.title)),
+    /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement("div", { className: tableCellContainer }, /* @__PURE__ */ React.createElement(
       Paper,
       {
         className: riskColor,
@@ -2584,9 +2624,9 @@ const ScenarioTableRow = ({
           backgroundColor: getRiskMatrixColor(scenario.risk)
         }
       }
-    ), t("scenarioTable.columns.probabilityChar"), ":", getProbabilityLevel(scenario.risk), " ", t("scenarioTable.columns.consequenceChar"), ":", getConsequenceLevel(scenario.risk)),
-    /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, remainingActions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, remainingActions.length, " ", t("dictionary.planned").toLowerCase()) : t("dictionary.completed")),
-    /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
+    ), t("scenarioTable.columns.probabilityChar"), ":", getProbabilityLevel(scenario.risk), " ", t("scenarioTable.columns.consequenceChar"), ":", getConsequenceLevel(scenario.risk))),
+    /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement("div", { className: tableCellContainer }, remainingActions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, remainingActions.length, " ", t("dictionary.planned").toLowerCase()) : t("dictionary.completed"))),
+    /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement("div", { className: tableCellContainer }, /* @__PURE__ */ React.createElement(
       Paper,
       {
         className: riskColor,
@@ -2594,13 +2634,13 @@ const ScenarioTableRow = ({
           backgroundColor: getRiskMatrixColor(scenario.remainingRisk)
         }
       }
-    ), t("scenarioTable.columns.probabilityChar"), ":", getProbabilityLevel(scenario.remainingRisk), " ", t("scenarioTable.columns.consequenceChar"), ":", getConsequenceLevel(scenario.remainingRisk))
+    ), t("scenarioTable.columns.probabilityChar"), ":", getProbabilityLevel(scenario.remainingRisk), " ", t("scenarioTable.columns.consequenceChar"), ":", getConsequenceLevel(scenario.remainingRisk)))
   );
 };
 
 const ScenarioTable = ({ riSc }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { titleBox, rowBorder, tableCell } = useTableStyles();
+  const { titleBox, rowBorder, tableCell, tableCellTitle } = useTableStyles();
   const { newScenario, openScenario } = useContext(ScenarioContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(Box$1, { className: titleBox }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", style: { padding: "1rem" } }, t("scenarioTable.title")), riSc.scenarios.length > 0 && /* @__PURE__ */ React.createElement(
     Box$1,
@@ -2646,24 +2686,14 @@ const ScenarioTable = ({ riSc }) => {
       },
       t("scenarioTable.addScenarioButton")
     )
-  ) : /* @__PURE__ */ React.createElement(TableContainer, { style: { overflow: "auto" }, component: Paper }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, { className: rowBorder }, /* @__PURE__ */ React.createElement(
-    TableCell,
+  ) : /* @__PURE__ */ React.createElement(TableContainer, { style: { overflow: "auto" }, component: Paper }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, { className: rowBorder }, /* @__PURE__ */ React.createElement(TableCell, { className: tableCellTitle }, /* @__PURE__ */ React.createElement(
+    Typography,
     {
-      className: tableCell,
-      style: {
-        width: "40%",
-        minWidth: "200px"
-      }
+      variant: "subtitle1",
+      style: { fontWeight: "bold", textTransform: "uppercase" }
     },
-    /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "subtitle1",
-        style: { fontWeight: "bold", textTransform: "uppercase" }
-      },
-      t("dictionary.title")
-    )
-  ), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
+    t("dictionary.title")
+  )), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
     Typography,
     {
       variant: "subtitle1",
@@ -2681,7 +2711,10 @@ const ScenarioTable = ({ riSc }) => {
     Typography,
     {
       variant: "subtitle1",
-      style: { fontWeight: "bold", textTransform: "uppercase" }
+      style: {
+        fontWeight: "bold",
+        textTransform: "uppercase"
+      }
     },
     t("dictionary.restRisk")
   )))), /* @__PURE__ */ React.createElement(TableBody, null, riSc.scenarios.map((scenario, idx) => /* @__PURE__ */ React.createElement(
@@ -2888,7 +2921,7 @@ const getChipColor = (status, classes) => {
       return classes.riScDraft;
   }
 };
-const chipText = (status) => {
+const useChipText = (status) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   switch (status) {
     case RiScStatus.Draft:
@@ -2900,11 +2933,15 @@ const chipText = (status) => {
       return t("rosStatus.statusBadge.error");
   }
 };
-const getChipTextStatus = (status) => {
+function ChipTextStatus({ status }) {
   const { statusChipText } = useStatusChipStyles();
-  return /* @__PURE__ */ React.createElement("span", { className: statusChipText }, chipText(status));
-};
-const getPRStatus = (status, classes) => {
+  const chipText = useChipText(status);
+  return /* @__PURE__ */ React.createElement("span", { className: statusChipText }, chipText);
+}
+function PRStatus({
+  status,
+  classes
+}) {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   switch (status) {
     case RiScStatus.SentForApproval:
@@ -2914,7 +2951,7 @@ const getPRStatus = (status, classes) => {
     default:
       return null;
   }
-};
+}
 const StatusChip = ({ currentRiScStatus }) => {
   const chipClasses = useStatusChipStyles();
   const textClasses = useStatusTextStyles();
@@ -2937,12 +2974,12 @@ const StatusChip = ({ currentRiScStatus }) => {
         color: "primary",
         size: "medium",
         variant: "outlined",
-        label: getChipTextStatus(currentRiScStatus),
+        label: /* @__PURE__ */ React.createElement(ChipTextStatus, { status: currentRiScStatus }),
         icon: /* @__PURE__ */ React.createElement(CircleIcon$1, { className: chipClasses.statusIcon }),
         className: [chipColorClass, chipClasses.statusChip].join(" ")
       }
     )),
-    /* @__PURE__ */ React.createElement(Grid, { item: true }, getPRStatus(currentRiScStatus, textClasses))
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(PRStatus, { status: currentRiScStatus, classes: textClasses }))
   );
 };
 
@@ -3096,7 +3133,7 @@ const Plugin = () => {
   useEffect(() => {
     if (scenarioWizardStep !== null)
       resetRiScStatus();
-  }, [scenarioWizardStep]);
+  }, [resetRiScStatus, scenarioWizardStep]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScenarioContext.Provider, { value: scenario }, response && /* @__PURE__ */ React.createElement(Alert, { severity: getAlertSeverity(response.status) }, /* @__PURE__ */ React.createElement(Typography, null, response.statusMessage)), scenarioWizardStep !== null ? /* @__PURE__ */ React.createElement(
     ScenarioWizard,
     {
@@ -3159,4 +3196,4 @@ const RiScPlugin = () => {
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-2ef3f54b.esm.js.map
+//# sourceMappingURL=index-32d8d9ac.esm.js.map