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

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

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, 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 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, useTheme, 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, SupportButton } 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-558ec32a.esm.js';
+import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-f0f7d618.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;
@@ -1363,8 +1371,7 @@ const ScenarioStep = () => {
       xs: 12,
       style: {
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between"
+        flexDirection: "column"
       }
     },
     /* @__PURE__ */ React.createElement(Box$1, null, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.threatActors")), /* @__PURE__ */ React.createElement(Typography, { className: labelSubtitle }, t("scenarioDrawer.threatActorSubtitle"))),
@@ -1384,8 +1391,7 @@ const ScenarioStep = () => {
       xs: 12,
       style: {
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between"
+        flexDirection: "column"
       }
     },
     /* @__PURE__ */ React.createElement(Box$1, null, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.vulnerabilities")), /* @__PURE__ */ React.createElement(Typography, { className: labelSubtitle }, t("scenarioDrawer.vulnerabilitySubtitle"))),
@@ -1417,6 +1423,7 @@ const ActionEdit = ({
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { paper, formControl } = useInputFieldStyles();
   const { label, labelSubtitle } = useFontStyles();
+  const theme = useTheme();
   const setDescription = (description) => updateAction({
     ...action,
     description
@@ -1516,7 +1523,29 @@ const ActionEdit = ({
       }
     },
     /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.deadline")),
-    /* @__PURE__ */ React.createElement(FormControl$1, { className: formControl }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: nb }, /* @__PURE__ */ React.createElement(DatePicker, { value: action.deadline, onChange: setDeadline })))
+    /* @__PURE__ */ React.createElement(FormControl$1, { className: formControl }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: nb }, /* @__PURE__ */ React.createElement(
+      DatePicker,
+      {
+        value: action.deadline,
+        onChange: setDeadline,
+        sx: {
+          ".MuiInputBase-root": {
+            color: theme.palette.type === "dark" ? "white" : "black"
+          },
+          ".MuiOutlinedInput-notchedOutline": {
+            borderColor: theme.palette.type === "dark" ? "#616161" : "#0000003b"
+          },
+          ".MuiOutlinedInput-root": {
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.palette.type === "dark" ? "white" : "black"
+            }
+          },
+          ".MuiIconButton-root": {
+            color: theme.palette.type === "dark" ? "white" : "black"
+          }
+        }
+      }
+    )))
   )));
 };
 
@@ -1542,6 +1571,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 +1693,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 +1766,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 +1805,10 @@ const ScenarioWizard = ({
     if (step === "restRisk")
       setRestEqualsInitial(false);
   }, [step]);
+  const close = useCallback(() => {
+    closeScenario();
+    setShowCloseConfirmation(false);
+  }, [closeScenario]);
   useEffect(() => {
     if (updateStatus.isSuccess) {
       close();
@@ -1782,11 +1816,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 +1830,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 +1870,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,
     {
@@ -2497,19 +2527,19 @@ 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(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(
+  )), /* @__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] },
-      key: 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 */
       }
     )
@@ -2521,7 +2551,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",
@@ -2530,7 +2562,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": {
@@ -2546,15 +2579,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"
   }
 }));
 
@@ -2564,7 +2619,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"
   );
@@ -2574,18 +2636,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,
@@ -2593,9 +2645,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,
@@ -2603,13 +2655,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,
@@ -2655,24 +2707,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",
@@ -2690,7 +2732,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(
@@ -2878,9 +2923,9 @@ const useStatusTextStyles = makeStyles(() => ({
     wrap: "wrap"
   },
   prIcon: {
-    fontSize: "12px",
     margin: "0px",
     padding: "0px",
+    marginBottom: "-1px",
     marginRight: "2px",
     marginLeft: "2px"
   }
@@ -2897,7 +2942,7 @@ const getChipColor = (status, classes) => {
       return classes.riScDraft;
   }
 };
-const chipText = (status) => {
+const useChipText = (status) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   switch (status) {
     case RiScStatus.Draft:
@@ -2909,21 +2954,22 @@ 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:
-      return /* @__PURE__ */ React.createElement(Typography, { className: classes.prStatus }, /* @__PURE__ */ React.createElement(GitHubIcon, { className: classes.prIcon }), t("rosStatus.prStatus"));
+      return /* @__PURE__ */ React.createElement(Typography, { className: classes.prStatus }, /* @__PURE__ */ React.createElement(GitHubIcon, { fontSize: "inherit", className: classes.prIcon }), t("rosStatus.prStatus"));
     case RiScStatus.Draft:
     case RiScStatus.Published:
     default:
       return null;
   }
-};
+}
 const StatusChip = ({ currentRiScStatus }) => {
   const chipClasses = useStatusChipStyles();
   const textClasses = useStatusTextStyles();
@@ -2946,12 +2992,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 }))
   );
 };
 
@@ -3105,7 +3151,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,
     {
@@ -3113,7 +3159,7 @@ const Plugin = () => {
       isFetching,
       updateStatus: updateRiScStatus
     }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("contentHeader.title") }), isFetching && /* @__PURE__ */ React.createElement(Spinner, { size: 80 }), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, riScs !== null && riScs.length !== 0 && /* @__PURE__ */ React.createElement(
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("contentHeader.title") }, /* @__PURE__ */ React.createElement(SupportButton, null)), isFetching && /* @__PURE__ */ React.createElement(Spinner, { size: 80 }), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, riScs !== null && riScs.length !== 0 && /* @__PURE__ */ React.createElement(
     Grid,
     {
       item: true,
@@ -3168,4 +3214,4 @@ const RiScPlugin = () => {
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-28348a2f.esm.js.map
+//# sourceMappingURL=index-55c3e55b.esm.js.map