@kartverket/backstage-plugin-risk-scorecard 1.0.5 → 1.0.6

package/dist/esm/{index-fd361b7d.esm.js → index-153cf81f.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, Dialog, DialogTitle, DialogActions, Button, Paper, Radio, Stepper, Step, StepButton, CircularProgress, Tab, Divider as Divider$1, Drawer, List, ListSubheader, ListItem, ListItemText as ListItemText$1, ClickAwayListener, Tooltip, DialogContent, DialogContentText, IconButton } from '@material-ui/core';
-import { InfoCard, ContentHeader, SupportButton } from '@backstage/core-components';
+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-c43b6519.esm.js';
+import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-5b89cb4c.esm.js';
 import { useNavigate, useLocation, useParams } from 'react-router';
 import { useEffectOnce } from 'react-use';
 import { useSearchParams, Routes, Route } from 'react-router-dom';
@@ -19,31 +19,31 @@ import Select from '@material-ui/core/Select';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import Divider from '@mui/material/Divider';
 import Grid$1 from '@mui/material/Grid';
+import AddCircle from '@material-ui/icons/AddCircle';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import { nb } from 'date-fns/locale/nb';
-import AddCircle from '@material-ui/icons/AddCircle';
 import Button$1 from '@mui/material/Button';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
 import Alert from '@mui/material/Alert';
 import Box$2 from '@mui/material/Box';
-import TabContext from '@material-ui/lab/TabContext';
-import TabList from '@material-ui/lab/TabList/TabList';
-import KeyboardTabIcon from '@mui/icons-material/KeyboardTab';
-import DeleteIcon$1 from '@mui/icons-material/Delete';
-import TabPanel from '@material-ui/lab/TabPanel';
-import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
 import EditIcon from '@mui/icons-material/Edit';
+import Menu from '@material-ui/core/Menu';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import DeleteIcon$1 from '@mui/icons-material/Delete';
 import CircleIcon from '@material-ui/icons/FiberManualRecord';
 import InfoIcon from '@mui/icons-material/Info';
+import TabContext from '@material-ui/lab/TabContext';
+import TabList from '@material-ui/lab/TabList/TabList';
 import TableRow from '@mui/material/TableRow';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import CircleIcon$1 from '@mui/icons-material/Circle';
 import GitHubIcon from '@mui/icons-material/GitHub';
 
@@ -404,8 +404,8 @@ function getRiskMatrixColor(risiko) {
   const konsekvens = consequenceOptions.indexOf(risiko.consequence);
   return riskMatrix[4 - konsekvens][sannsynlighet];
 }
-const getSannsynlighetLevel = (risiko) => probabilityOptions.indexOf(risiko.probability) + 1;
-const getKonsekvensLevel = (risiko) => consequenceOptions.indexOf(risiko.consequence) + 1;
+const getProbabilityLevel = (risiko) => probabilityOptions.indexOf(risiko.probability) + 1;
+const getConsequenceLevel = (risiko) => consequenceOptions.indexOf(risiko.consequence) + 1;
 const emptyRiSc = () => ({
   schemaVersion: "3.2",
   title: "",
@@ -432,7 +432,7 @@ const emptyScenario = () => ({
     consequence: 1e3
   }
 });
-const emptyTiltak = () => ({
+const emptyAction = () => ({
   ID: generateRandomId(),
   title: "",
   description: "",
@@ -461,14 +461,29 @@ const requiresNewApproval = (oldRiSc, updatedRiSc) => {
       requiresApproval = true;
     if (oldScenario.remainingRisk.consequence !== updatedScenario.remainingRisk.consequence)
       requiresApproval = true;
-    oldScenario.actions.map((oldTiltak, i) => {
-      const updatedTiltak = updatedScenario.actions[i];
-      if (oldTiltak.deadline !== updatedTiltak.deadline)
+    oldScenario.actions.map((oldAction, i) => {
+      const updatedAction = updatedScenario.actions[i];
+      if (oldAction.deadline !== updatedAction.deadline)
         requiresApproval = true;
     });
   });
   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);
+    return t(`riskMatrix.estimatedRisk.suffix.${unit}`, {
+      count: Number((cost / threshold * 1e3).toFixed(0))
+    });
+  }
+}
 
 function dtoToRiSc(riScDTO) {
   return {
@@ -692,7 +707,7 @@ var ScenarioDrawerState = /* @__PURE__ */ ((ScenarioDrawerState2) => {
   return ScenarioDrawerState2;
 })(ScenarioDrawerState || {});
 const emptyScenarioErrors = () => ({
-  tittel: false
+  title: false
 });
 const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
   const [scenarioDrawerState, setScenarioDrawerState] = useState(
@@ -750,6 +765,16 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
     setScenarioDrawerState(0 /* Closed */);
     setSearchParams({ step });
   };
+  const validateScenario = () => {
+    if (scenario.title === "") {
+      setScenarioErrors({
+        ...scenarioErrors,
+        title: true
+      });
+      return false;
+    }
+    return true;
+  };
   const saveScenario = () => {
     if (riSc) {
       if (validateScenario()) {
@@ -785,93 +810,78 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
       openScenario(s.ID);
     }
   };
-  const setTittel = (tittel) => {
+  const setTitle = (title) => {
     setScenarioErrors({
       ...scenarioErrors,
-      tittel: false
+      title: false
     });
     setScenario({
       ...scenario,
-      title: tittel
+      title
     });
   };
-  const setBeskrivelse = (beskrivelse) => {
+  const setDescription = (description) => {
     setScenario({
       ...scenario,
-      description: beskrivelse
+      description
     });
   };
-  const setTrusselakt\u00F8rer = (trusselakt\u00F8rer) => {
+  const setThreatActors = (threatActors) => {
     setScenario({
       ...scenario,
-      threatActors: trusselakt\u00F8rer
+      threatActors
     });
   };
-  const setS\u00E5rbarheter = (s\u00E5rbarheter) => {
+  const setVulnerabilities = (vulnerabilities) => {
     setScenario({
       ...scenario,
-      vulnerabilities: s\u00E5rbarheter
+      vulnerabilities
     });
   };
-  const setSannsynlighet = (sannsynlighetLevel) => setScenario({
+  const setProbability = (probabilityLevel) => setScenario({
     ...scenario,
     risk: {
       ...scenario.risk,
-      probability: probabilityOptions[sannsynlighetLevel - 1]
+      probability: probabilityOptions[probabilityLevel - 1]
     }
   });
-  const setKonsekvens = (konsekvensLevel) => setScenario({
+  const setConsequence = (consequenceLevel) => setScenario({
     ...scenario,
     risk: {
       ...scenario.risk,
-      consequence: consequenceOptions[konsekvensLevel - 1]
+      consequence: consequenceOptions[consequenceLevel - 1]
     }
   });
-  const setEksisterendeTiltak = (eksisterendeTiltak) => {
+  const setExistingActions = (existingActions) => {
     setScenario({
       ...scenario,
-      existingActions: eksisterendeTiltak
+      existingActions
     });
   };
-  const addTiltak = () => setScenario({ ...scenario, actions: [...scenario.actions, emptyTiltak()] });
-  const updateTiltak = (tiltak) => {
-    const updatedTiltak = scenario.actions.some((t) => t.ID === tiltak.ID) ? scenario.actions.map((t) => t.ID === tiltak.ID ? tiltak : t) : [...scenario.actions, tiltak];
-    setScenario({ ...scenario, actions: updatedTiltak });
+  const addAction = () => setScenario({ ...scenario, actions: [...scenario.actions, emptyAction()] });
+  const updateAction = (action) => {
+    const updatedAction = scenario.actions.some((a) => a.ID === action.ID) ? scenario.actions.map((a) => a.ID === action.ID ? action : a) : [...scenario.actions, action];
+    setScenario({ ...scenario, actions: updatedAction });
   };
-  const deleteTiltak = (tiltak) => {
-    const updatedTiltak = scenario.actions.filter((t) => t.ID !== tiltak.ID);
-    setScenario({ ...scenario, actions: updatedTiltak });
+  const deleteAction = (action) => {
+    const updatedAction = scenario.actions.filter((a) => a.ID !== action.ID);
+    setScenario({ ...scenario, actions: updatedAction });
   };
-  const updateRestrisiko = (restrisiko) => setScenario({ ...scenario, remainingRisk: restrisiko });
-  const setRestSannsynlighet = (sannsynlighetLevel) => setScenario({
+  const updateRemainingRisk = (remainingRisk) => setScenario({ ...scenario, remainingRisk });
+  const setRemainingProbability = (probabilityLevel) => setScenario({
     ...scenario,
     remainingRisk: {
       ...scenario.remainingRisk,
-      probability: probabilityOptions[sannsynlighetLevel - 1]
+      probability: probabilityOptions[probabilityLevel - 1]
     }
   });
-  const setRestKonsekvens = (konsekvensLevel) => setScenario({
+  const setRemainingConsequence = (consequenceLevel) => setScenario({
     ...scenario,
     remainingRisk: {
       ...scenario.remainingRisk,
-      consequence: consequenceOptions[konsekvensLevel - 1]
+      consequence: consequenceOptions[consequenceLevel - 1]
     }
   });
-  const validateScenario = () => {
-    if (scenario.title === "") {
-      setScenarioErrors({
-        ...scenarioErrors,
-        tittel: true
-      });
-      return false;
-    } else {
-      setScenarioErrors({
-        ...scenarioErrors,
-        tittel: false
-      });
-    }
-    return true;
-  };
   return {
     scenarioDrawerState,
     scenario,
@@ -888,19 +898,19 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
     openDeleteConfirmation,
     abortDeletion,
     confirmDeletion,
-    setTittel,
-    setBeskrivelse,
-    setTrusselakt\u00F8rer,
-    setS\u00E5rbarheter,
-    setSannsynlighet,
-    setKonsekvens,
-    setEksisterendeTiltak,
-    addTiltak,
-    updateTiltak,
-    deleteTiltak,
-    updateRestrisiko,
-    setRestSannsynlighet,
-    setRestKonsekvens
+    setTitle,
+    setDescription,
+    setThreatActors,
+    setVulnerabilities,
+    setProbability,
+    setConsequence,
+    setExistingActions,
+    addAction,
+    updateAction,
+    deleteAction,
+    updateRemainingRisk,
+    setRemainingProbability,
+    setRemainingConsequence
   };
 };
 const useFetchRiScs = (riScIdFromParams) => {
@@ -1140,57 +1150,6 @@ const menuProps = {
   },
   variant: "menu"
 };
-const useScenarioDrawerStyles = makeStyles((theme) => ({
-  paperEdit: {
-    padding: theme.spacing(4),
-    width: "65%"
-  },
-  paperView: {
-    padding: theme.spacing(4),
-    width: "50%",
-    [theme.breakpoints.down("sm")]: {
-      width: "90%",
-      padding: theme.spacing(2)
-    }
-  }
-}));
-const useScenarioDrawerContentStyles = makeStyles((theme) => ({
-  header: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  buttons: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing(2),
-    marginTop: theme.spacing(4)
-  },
-  risikoBadge: {
-    width: "20px",
-    height: "48px",
-    borderRadius: "20%"
-  },
-  titleAndButton: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  section: {
-    padding: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-    backgroundColor: theme.palette.type === "dark" ? "#555555" : "#e0e0e0"
-  },
-  measure: {
-    padding: theme.spacing(2),
-    marginBottom: theme.palette.type === "dark" ? theme.spacing(1) : "7px",
-    backgroundColor: theme.palette.type === "dark" ? "#55555519" : "#e0e0e019"
-  },
-  editIcon: {
-    color: theme.palette.type === "dark" ? "#fff" : "rgba(0, 0, 0, 0.54)"
-  }
-}));
 const useFontStyles = makeStyles((theme) => ({
   h1: {
     fontSize: theme.spacing(4),
@@ -1254,7 +1213,7 @@ const useFontStyles = makeStyles((theme) => ({
     fontWeight: 700,
     paddingTop: 0
   },
-  tiltakSubtitle: {
+  actionSubtitle: {
     fontSize: theme.spacing(2.25),
     fontWeight: 700,
     marginBottom: theme.spacing(2),
@@ -1283,6 +1242,19 @@ const useInputFieldStyles = makeStyles((theme) => ({
     }
   }
 }));
+const useSpinnerStyles = makeStyles({
+  container: {
+    display: "flex",
+    minWidth: "100wh",
+    height: "100vh",
+    justifyContent: "center",
+    alignItems: "flex-start"
+  },
+  spinner: {
+    display: "flex",
+    marginTop: "200px"
+  }
+});
 
 const TextField = ({
   label,
@@ -1325,9 +1297,7 @@ const Dropdown = ({
 }) => {
   const { formLabel, formControl } = useInputFieldStyles();
   const multiple = Array.isArray(selectedValues);
-  const onChange = (event) => {
-    handleChange(event.target.value);
-  };
+  const onChange = (event) => handleChange(event.target.value);
   const renderValue = (selected) => multiple ? /* @__PURE__ */ React.createElement(
     Box,
     {
@@ -1365,25 +1335,25 @@ const Dropdown = ({
 const ScenarioContext = createContext(null);
 
 const ScenarioStep = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { labelSubtitle, label, h2, subtitle2 } = useFontStyles();
   const {
     scenario,
     scenarioErrors,
-    setTittel,
-    setBeskrivelse,
-    setTrusselakt\u00F8rer,
-    setS\u00E5rbarheter
+    setTitle,
+    setDescription,
+    setThreatActors,
+    setVulnerabilities
   } = useContext(ScenarioContext);
-  const { labelSubtitle, label, h2, subtitle2 } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: h2 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t("scenarioDrawer.subtitle"))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     TextField,
     {
       label: t("dictionary.title"),
       value: scenario.title,
-      error: scenarioErrors.tittel ? t("scenarioDrawer.titleError") : "",
+      error: scenarioErrors.title ? t("scenarioDrawer.titleError") : "",
       required: true,
       minRows: 1,
-      handleChange: setTittel
+      handleChange: setTitle
     }
   )), /* @__PURE__ */ React.createElement(
     Grid,
@@ -1403,7 +1373,7 @@ const ScenarioStep = () => {
       {
         selectedValues: scenario.threatActors,
         options: threatActorsOptions,
-        handleChange: setTrusselakt\u00F8rer
+        handleChange: setThreatActors
       }
     )
   ), /* @__PURE__ */ React.createElement(
@@ -1424,7 +1394,7 @@ const ScenarioStep = () => {
       {
         selectedValues: scenario.vulnerabilities,
         options: vulnerabilitiesOptions,
-        handleChange: setS\u00E5rbarheter
+        handleChange: setVulnerabilities
       }
     )
   ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
@@ -1433,56 +1403,41 @@ const ScenarioStep = () => {
       label: t("dictionary.description"),
       value: scenario.description,
       minRows: 4,
-      handleChange: setBeskrivelse
+      handleChange: setDescription
     }
   )));
 };
 
-const CloseConfirmation = ({
-  isOpen,
-  close,
-  save
-}) => {
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  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 TiltakEdit = ({
-  tiltak,
+const ActionEdit = ({
+  action,
   index,
-  updateTiltak,
-  deleteTiltak
+  updateAction,
+  deleteAction
 }) => {
-  const setBeskrivelse = (beskrivelse) => {
-    updateTiltak({
-      ...tiltak,
-      description: beskrivelse
-    });
-  };
-  const setStatus = (status) => {
-    updateTiltak({
-      ...tiltak,
-      status
-    });
-  };
-  const setTiltaksfrist = (newValue) => {
-    if (newValue) {
-      const formattedDate = new Date(newValue).toISOString().split("T")[0];
-      updateTiltak({
-        ...tiltak,
-        deadline: formattedDate
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { paper, formControl } = useInputFieldStyles();
+  const { label, labelSubtitle } = useFontStyles();
+  const setDescription = (description) => updateAction({
+    ...action,
+    description
+  });
+  const setStatus = (status) => updateAction({
+    ...action,
+    status
+  });
+  const setDeadline = (deadline) => {
+    if (deadline) {
+      const formattedDeadline = new Date(deadline).toISOString().split("T")[0];
+      updateAction({
+        ...action,
+        deadline: formattedDeadline
       });
     }
   };
-  const setTiltakseier = (tiltakseier) => {
-    updateTiltak({
-      ...tiltak,
-      owner: tiltakseier
-    });
-  };
-  const { paper, formControl } = useInputFieldStyles();
-  const { label, labelSubtitle } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const setOwner = (owner) => updateAction({
+    ...action,
+    owner
+  });
   return /* @__PURE__ */ React.createElement(Paper, { className: paper }, /* @__PURE__ */ React.createElement(Grid, { container: true, style: { display: "flex", rowGap: "0.7rem" } }, /* @__PURE__ */ React.createElement(
     Grid,
     {
@@ -1500,8 +1455,7 @@ const TiltakEdit = ({
       {
         startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null),
         key: "dismiss",
-        title: "Slett tiltaket",
-        onClick: () => deleteTiltak(tiltak),
+        onClick: () => deleteAction(action),
         color: "primary"
       },
       t("dictionary.delete")
@@ -1510,8 +1464,8 @@ const TiltakEdit = ({
     TextField,
     {
       label: t("dictionary.description"),
-      value: tiltak.description,
-      handleChange: setBeskrivelse,
+      value: action.description,
+      handleChange: setDescription,
       minRows: 1
     }
   )), /* @__PURE__ */ React.createElement(
@@ -1527,14 +1481,7 @@ const TiltakEdit = ({
     },
     /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measureOwner")),
     /* @__PURE__ */ React.createElement(Typography, { className: labelSubtitle }, t("scenarioDrawer.measureTab.measureOwnerDescription")),
-    /* @__PURE__ */ React.createElement(
-      TextField,
-      {
-        value: tiltak.owner,
-        handleChange: setTiltakseier,
-        minRows: 1
-      }
-    )
+    /* @__PURE__ */ React.createElement(TextField, { value: action.owner, handleChange: setOwner, minRows: 1 })
   ), /* @__PURE__ */ React.createElement(
     Grid,
     {
@@ -1552,7 +1499,7 @@ const TiltakEdit = ({
       Dropdown,
       {
         options: actionStatusOptions,
-        selectedValues: tiltak.status,
+        selectedValues: action.status,
         handleChange: setStatus
       }
     )
@@ -1569,38 +1516,38 @@ const TiltakEdit = ({
       }
     },
     /* @__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: tiltak.deadline, onChange: setTiltaksfrist })))
+    /* @__PURE__ */ React.createElement(FormControl$1, { className: formControl }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: nb }, /* @__PURE__ */ React.createElement(DatePicker, { value: action.deadline, onChange: setDeadline })))
   )));
 };
 
-const InitiativesStep = () => {
+const ActionsStep = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { h2, subtitle2, actionSubtitle } = useFontStyles();
   const {
     scenario,
-    setEksisterendeTiltak,
-    updateTiltak,
-    deleteTiltak,
-    addTiltak
+    setExistingActions,
+    updateAction,
+    deleteAction,
+    addAction
   } = useContext(ScenarioContext);
-  const { h2, subtitle2, tiltakSubtitle } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { className: h2 }, t("dictionary.measure")), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t("scenarioDrawer.measureTab.subtitle")), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 12, style: { paddingTop: "1.5rem" } }, /* @__PURE__ */ React.createElement(
     TextField,
     {
       label: t("scenarioDrawer.measureTab.existingMeasure"),
       subtitle: t("scenarioDrawer.measureTab.existingMeasureSubtitle"),
       value: scenario.existingActions,
-      handleChange: setEksisterendeTiltak,
+      handleChange: setExistingActions,
       minRows: 3
     }
-  )), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: tiltakSubtitle }, t("scenarioDrawer.measureTab.plannedMeasures")), scenario.actions.map((tiltak, index) => /* @__PURE__ */ React.createElement(
-    TiltakEdit,
+  )), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: actionSubtitle }, t("scenarioDrawer.measureTab.plannedMeasures")), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(
+    ActionEdit,
     {
-      tiltak,
+      action,
       index: index + 1,
-      updateTiltak,
-      deleteTiltak
+      updateAction,
+      deleteAction
     }
-  )), /* @__PURE__ */ React.createElement(Button, { startIcon: /* @__PURE__ */ React.createElement(AddCircle, null), color: "primary", onClick: addTiltak }, t("scenarioDrawer.measureTab.addMeasureButton")));
+  )), /* @__PURE__ */ React.createElement(Button, { startIcon: /* @__PURE__ */ React.createElement(AddCircle, null), color: "primary", onClick: addAction }, t("scenarioDrawer.measureTab.addMeasureButton")));
 };
 
 const useTableStyles$1 = makeStyles((theme) => ({
@@ -1641,15 +1588,33 @@ const useTableStyles$1 = makeStyles((theme) => ({
     textTransform: "uppercase"
   }
 }));
+
+const ProbabilityTable = ({
+  selectedValue,
+  handleChange
+}) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { table, cell, radio } = useTableStyles$1();
+  const handleChangeRow = (row) => () => handleChange(row);
+  const radioCell = (row) => /* @__PURE__ */ React.createElement("th", { scope: "col" }, /* @__PURE__ */ React.createElement("div", { className: radio }, /* @__PURE__ */ React.createElement(
+    Radio,
+    {
+      checked: selectedValue === row,
+      onChange: handleChangeRow(row),
+      style: { padding: 0, color: "#9BC9FE" }
+    }
+  ), row, ": ", t(`probabilityTable.rows.${row}`)));
+  const contentCell = (row) => /* @__PURE__ */ React.createElement("td", { className: cell }, t(`probabilityTable.cells.${row}`));
+  return /* @__PURE__ */ React.createElement("table", { className: table }, /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, radioCell(1), radioCell(2), radioCell(3), radioCell(4), radioCell(5)), /* @__PURE__ */ React.createElement("tr", null, contentCell(1), contentCell(2), contentCell(3), contentCell(4), contentCell(5))));
+};
+
 const ConsequenceTable = ({
   selectedValue,
   handleChange
 }) => {
-  const { table, labelCell, cell, voidCell, radio } = useTableStyles$1();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const handleChangeRow = (row) => () => {
-    handleChange(row);
-  };
+  const { table, labelCell, cell, voidCell, radio } = useTableStyles$1();
+  const handleChangeRow = (row) => () => handleChange(row);
   const getRadioCell = (row) => {
     return /* @__PURE__ */ React.createElement("th", { scope: "col" }, /* @__PURE__ */ React.createElement("div", { className: radio }, /* @__PURE__ */ React.createElement(
       Radio,
@@ -1676,98 +1641,51 @@ const ConsequenceTable = ({
   return /* @__PURE__ */ React.createElement("table", { className: table }, /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { className: labelCell }), getRadioCell(1), getRadioCell(2), getRadioCell(3), getRadioCell(4), getRadioCell(5)), getRow("economical", [cell, cell, cell, cell, cell]), getRow("privacy", [cell, cell, cell, cell, voidCell]), getRow("reputation", [cell, cell, cell, voidCell, voidCell]), getRow("health", [voidCell, voidCell, cell, cell, cell])));
 };
 
-const ProbabilityTable = ({
-  selectedValue,
-  handleChange
-}) => {
-  const { table, cell, radio } = useTableStyles$1();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const handleChangeRow = (row) => () => {
-    handleChange(row);
-  };
-  const radioCell = (row) => /* @__PURE__ */ React.createElement("th", { scope: "col" }, /* @__PURE__ */ React.createElement("div", { className: radio }, /* @__PURE__ */ React.createElement(
-    Radio,
-    {
-      checked: selectedValue === row,
-      onChange: handleChangeRow(row),
-      style: { padding: 0, color: "#9BC9FE" }
-    }
-  ), row, ": ", t(`probabilityTable.rows.${row}`)));
-  const contentCell = (row) => /* @__PURE__ */ React.createElement("td", { className: cell }, t(`probabilityTable.cells.${row}`));
-  return /* @__PURE__ */ React.createElement("table", { className: table }, /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, radioCell(1), radioCell(2), radioCell(3), radioCell(4), radioCell(5)), /* @__PURE__ */ React.createElement("tr", null, contentCell(1), contentCell(2), contentCell(3), contentCell(4), contentCell(5))));
-};
-
-const useStyles$2 = makeStyles((theme) => ({
+const useRiskStepStyles = makeStyles((theme) => ({
   box: {
     paddingBottom: theme.spacing(2)
   }
 }));
+
 const RiskStep = ({ riskType, restEqualsInitial }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { h2, h3, subtitle2 } = useFontStyles();
+  const { box } = useRiskStepStyles();
   const {
     scenario,
-    setKonsekvens,
-    setSannsynlighet,
-    setRestKonsekvens,
-    setRestSannsynlighet
+    setConsequence,
+    setProbability,
+    setRemainingConsequence,
+    setRemainingProbability
   } = useContext(ScenarioContext);
-  const { h2, h3, subtitle2 } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const resourceKey = riskType === "initial" ? "initialRiskStep" : "restRiskStep";
   const risk = riskType === "initial" ? scenario.risk : scenario.remainingRisk;
-  const { box } = useStyles$2();
   useEffect(() => {
     if (restEqualsInitial)
-      setRestKonsekvens(getKonsekvensLevel(scenario.risk));
+      setRemainingConsequence(getConsequenceLevel(scenario.risk));
   }, [scenario.risk.consequence]);
   useEffect(() => {
     if (restEqualsInitial)
-      setRestSannsynlighet(getSannsynlighetLevel(scenario.risk));
+      setRemainingProbability(getProbabilityLevel(scenario.risk));
   }, [scenario.risk.probability]);
-  const setC = riskType === "initial" ? setKonsekvens : setRestKonsekvens;
-  const setP = riskType === "initial" ? setSannsynlighet : setRestSannsynlighet;
+  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(
     ProbabilityTable,
     {
-      selectedValue: getSannsynlighetLevel(risk),
+      selectedValue: getProbabilityLevel(risk),
       handleChange: setP
     }
   )), /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("dictionary.consequence")), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t(`scenarioStepper.${resourceKey}.consequenceSubtitle`))), /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(
     ConsequenceTable,
     {
-      selectedValue: getKonsekvensLevel(risk),
+      selectedValue: getConsequenceLevel(risk),
       handleChange: setC
     }
   )));
 };
 
-const useButtonStyles = makeStyles(() => ({
-  godkjennButton: {
-    borderRadius: "2px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  settingsButton: {
-    borderRadius: "2px",
-    minWidth: "80%",
-    padding: "5px 10px 5px 10px"
-  }
-}));
-const useLoadingStyles = makeStyles({
-  container: {
-    display: "flex",
-    minWidth: "100wh",
-    height: "100vh",
-    justifyContent: "center",
-    alignItems: "flex-start"
-  },
-  spinner: {
-    display: "flex",
-    marginTop: "200px"
-  }
-});
-
-const useStyle = makeStyles((theme) => ({
+const useWizardStyle = makeStyles((theme) => ({
   root: {
     display: "flex",
     justifyContent: "center",
@@ -1803,6 +1721,21 @@ const useStyle = makeStyles((theme) => ({
     gap: theme.spacing(2)
   }
 }));
+
+const Spinner = ({ size }) => {
+  const { container, spinner } = useSpinnerStyles();
+  return /* @__PURE__ */ React.createElement("div", { className: container }, /* @__PURE__ */ React.createElement(CircularProgress, { className: spinner, size }));
+};
+
+const CloseConfirmation = ({
+  isOpen,
+  close,
+  save
+}) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  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 = [
   "scenario",
   "initialRisk",
@@ -1817,7 +1750,6 @@ const ScenarioWizard = ({
   const wizardRef = useRef(null);
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { h1, label } = useFontStyles();
-  const classes = useLoadingStyles();
   const {
     root,
     container,
@@ -1827,7 +1759,7 @@ const ScenarioWizard = ({
     buttonContainer,
     buttonContainerRight,
     saveAndNextButtons
-  } = useStyle();
+  } = useWizardStyle();
   const {
     scenario,
     originalScenario,
@@ -1907,7 +1839,7 @@ const ScenarioWizard = ({
       t(`dictionary.${wizardStep}`),
       " "
     )))
-  ), /* @__PURE__ */ React.createElement(Divider, null), isFetching && /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(CircularProgress, { className: classes.spinner, size: 80 })), !isFetching && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: steps }, {
+  ), /* @__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(
       RiskStep,
@@ -1916,7 +1848,7 @@ const ScenarioWizard = ({
         restEqualsInitial
       }
     ),
-    [ScenarioWizardSteps[2]]: /* @__PURE__ */ React.createElement(InitiativesStep, null),
+    [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,
@@ -1958,362 +1890,53 @@ const ScenarioWizard = ({
   ));
 };
 
-const useTabsStyle = makeStyles((theme) => ({
-  tab: {
-    backgroundColor: "transparent",
-    color: theme.palette.type === "dark" ? "white" : "black",
-    "&:hover": {
-      backgroundColor: "transparent",
-      color: theme.palette.type === "dark" ? "white" : "black"
+const useScenarioDrawerStyles = makeStyles((theme) => ({
+  drawer: {
+    padding: theme.spacing(4),
+    width: "50%",
+    [theme.breakpoints.down("sm")]: {
+      width: "90%",
+      padding: theme.spacing(2)
     }
-  }
-}));
-
-const Tabs$1 = ({ setTab }) => {
-  const tabsStyle = useTabsStyle();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(Box$2, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React.createElement(
-    TabList,
-    {
-      onChange: (_, newValue) => setTab(newValue),
-      variant: "fullWidth",
-      indicatorColor: "primary"
-    },
-    /* @__PURE__ */ React.createElement(
-      Tab,
-      {
-        label: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", style: { fontWeight: "bold" } }, t("dictionary.consequence")),
-        value: "konsekvens",
-        className: tabsStyle.tab
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Tab,
-      {
-        label: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", style: { fontWeight: "bold" } }, t("dictionary.probability")),
-        value: "sannsynlighet",
-        className: tabsStyle.tab
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Tab,
-      {
-        label: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", style: { fontWeight: "bold" } }, t("dictionary.measure")),
-        value: "tiltak",
-        className: tabsStyle.tab
-      }
-    )
-  ));
-};
-
-const useTabsTiltakStyles = makeStyles((theme) => ({
-  arrow: {
+  },
+  header: {
     display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    marginTop: theme.spacing(3)
-  }
-}));
-const tabStyles = makeStyles((theme) => ({
-  tabPanel: {
-    padding: 0,
-    paddingTop: theme.spacing(3)
-  }
-}));
-
-const TabPanelKonsekvens = ({
-  setKonsekvens,
-  selected
-}) => {
-  const { tabPanel } = tabStyles();
-  const { headerSubtitle } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(TabPanel, { className: tabPanel, value: "konsekvens" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, t("dictionary.consequence")), /* @__PURE__ */ React.createElement(Typography, { className: headerSubtitle }, t("scenarioDrawer.consequenceTab.subtitle")), /* @__PURE__ */ React.createElement(ConsequenceTable, { selectedValue: selected, handleChange: setKonsekvens }));
-};
-
-const TabPanelSannsynlighet = ({
-  selected,
-  setSannsynlighet
-}) => {
-  const { tabPanel } = tabStyles();
-  const { headerSubtitle } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const handleChange = (value) => {
-    setSannsynlighet(value);
-  };
-  return /* @__PURE__ */ React.createElement(TabPanel, { className: tabPanel, value: "sannsynlighet" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, t("dictionary.probability")), /* @__PURE__ */ React.createElement(Typography, { className: headerSubtitle }, t("scenarioDrawer.probabilityTab.subtitle")), /* @__PURE__ */ React.createElement(ProbabilityTable, { selectedValue: selected, handleChange }));
-};
-
-const TabPanelTiltak = ({
-  scenario,
-  setEksisterendeTiltak,
-  updateTiltak,
-  deleteTiltak,
-  addTiltak,
-  updateRestrisiko,
-  options
-}) => {
-  const { arrow } = useTabsTiltakStyles();
-  const setRestKonsekvens = (restKonsekvensLevel) => {
-    updateRestrisiko({
-      ...scenario.remainingRisk,
-      consequence: consequenceOptions[restKonsekvensLevel - 1]
-    });
-  };
-  const setRestSannsynlighet = (restSannsynlighetLevel) => {
-    updateRestrisiko({
-      ...scenario.remainingRisk,
-      probability: probabilityOptions[restSannsynlighetLevel - 1]
-    });
-  };
-  const { tabPanel } = tabStyles();
-  const { body2, headerSubtitle, tiltakSubtitle } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(TabPanel, { value: "tiltak", className: tabPanel }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, t("dictionary.measure")), /* @__PURE__ */ React.createElement(Typography, { className: headerSubtitle }, t("scenarioDrawer.measureTab.subtitle")), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: t("scenarioDrawer.measureTab.existingMeasure"),
-      subtitle: t("scenarioDrawer.measureTab.existingMeasureSubtitle"),
-      value: scenario.existingActions,
-      handleChange: setEksisterendeTiltak,
-      minRows: 3
-    }
-  )), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: tiltakSubtitle }, t("scenarioDrawer.measureTab.plannedMeasures")), scenario.actions.map((tiltak, index) => /* @__PURE__ */ React.createElement(
-    TiltakEdit,
-    {
-      tiltak,
-      index: index + 1,
-      updateTiltak,
-      deleteTiltak
-    }
-  )), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      startIcon: /* @__PURE__ */ React.createElement(AddCircleOutlineIcon, null),
-      color: "primary",
-      onClick: addTiltak,
-      style: { textTransform: "none" }
-    },
-    t("scenarioDrawer.measureTab.addMeasureButton")
-  ), /* @__PURE__ */ React.createElement(Divider, { variant: "fullWidth", style: { paddingTop: "1.5rem" } }), /* @__PURE__ */ React.createElement(Grid$1, { container: true, style: { paddingTop: "1.5rem" }, columns: 9 }, /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, t("dictionary.restRisk")), /* @__PURE__ */ React.createElement(Typography, { className: headerSubtitle }, t("scenarioDrawer.restRiskTab.subtitle"))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, t("dictionary.initialRisk"))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 1 }), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, t("dictionary.restRisk"))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: t("dictionary.consequence"),
-      value: getKonsekvensLevel(scenario.risk)
-    }
-  )), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: t("dictionary.probability"),
-      value: getSannsynlighetLevel(scenario.risk)
-    }
-  )), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 1, className: arrow }, /* @__PURE__ */ React.createElement(KeyboardDoubleArrowRightIcon, { fontSize: "large" })), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
-    Dropdown,
-    {
-      label: t("dictionary.consequence"),
-      options,
-      selectedValues: getKonsekvensLevel(scenario.remainingRisk),
-      handleChange: setRestKonsekvens
-    }
-  )), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
-    Dropdown,
-    {
-      label: t("dictionary.probability"),
-      options,
-      selectedValues: getSannsynlighetLevel(scenario.remainingRisk),
-      handleChange: setRestSannsynlighet
-    }
-  ))));
-};
-
-const DeleteConfirmation = () => {
-  const { deleteConfirmationIsOpen, abortDeletion, confirmDeletion } = useContext(ScenarioContext);
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(Dialog, { open: deleteConfirmationIsOpen }, /* @__PURE__ */ React.createElement(DialogTitle, null, t("scenarioDrawer.deleteScenarioConfirmation")), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { style: { textTransform: "none" }, onClick: abortDeletion }, t("dictionary.cancel")), /* @__PURE__ */ React.createElement(Button, { style: { textTransform: "none" }, onClick: confirmDeletion }, t("scenarioDrawer.deleteScenarioButton"))));
-};
-
-const ScenarioDrawerEdit = () => {
-  const { header, buttons } = useScenarioDrawerContentStyles();
-  const { h1, headerSubtitle, labelSubtitle, button, label } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const {
-    scenario,
-    originalScenario,
-    saveScenario,
-    scenarioErrors,
-    openDeleteConfirmation,
-    setTittel,
-    setBeskrivelse,
-    setTrusselakt\u00F8rer,
-    setS\u00E5rbarheter,
-    setSannsynlighet,
-    setKonsekvens,
-    setEksisterendeTiltak,
-    addTiltak,
-    updateTiltak,
-    deleteTiltak,
-    updateRestrisiko,
-    closeScenario
-  } = useContext(ScenarioContext);
-  const [tab, setTab] = useState("konsekvens");
-  const [showCloseConfirmation, setShowCloseConfirmation] = useState(false);
-  const close = () => {
-    closeScenario();
-    setShowCloseConfirmation(false);
-  };
-  const saveAndClose = () => {
-    if (saveScenario()) {
-      close();
-    }
-  };
-  const handleCloseDrawer = () => {
-    if (JSON.stringify(scenario) !== JSON.stringify(originalScenario)) {
-      setShowCloseConfirmation(true);
-    } else {
-      close();
-    }
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box$2, { className: header }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: button,
-      variant: "outlined",
-      color: "primary",
-      onClick: handleCloseDrawer,
-      endIcon: /* @__PURE__ */ React.createElement(KeyboardTabIcon, null)
-    },
-    t("dictionary.close")
-  )), /* @__PURE__ */ React.createElement(Typography, { className: headerSubtitle }, t("scenarioDrawer.subtitle")), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: t("dictionary.title"),
-      value: scenario.title,
-      error: scenarioErrors.tittel,
-      required: true,
-      minRows: 1,
-      handleChange: setTittel
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.threatActors")), /* @__PURE__ */ React.createElement(Typography, { className: labelSubtitle }, t("scenarioDrawer.threatActorSubtitle")), /* @__PURE__ */ React.createElement(
-    Dropdown,
-    {
-      selectedValues: scenario.threatActors,
-      options: threatActorsOptions,
-      handleChange: setTrusselakt\u00F8rer
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.vulnerabilities")), /* @__PURE__ */ React.createElement(Typography, { className: labelSubtitle }, t("scenarioDrawer.vulnerabilitySubtitle")), /* @__PURE__ */ React.createElement(
-    Dropdown,
-    {
-      selectedValues: scenario.vulnerabilities,
-      options: vulnerabilitiesOptions,
-      handleChange: setS\u00E5rbarheter
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: t("dictionary.description"),
-      value: scenario.description,
-      minRows: 4,
-      handleChange: setBeskrivelse
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(TabContext, { value: tab }, /* @__PURE__ */ React.createElement(Tabs$1, { setTab }), /* @__PURE__ */ React.createElement(
-    TabPanelKonsekvens,
-    {
-      selected: getKonsekvensLevel(scenario.risk),
-      setKonsekvens
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TabPanelSannsynlighet,
-    {
-      selected: getSannsynlighetLevel(scenario.risk),
-      setSannsynlighet,
-      options: probabilityOptions.map(
-        (_, index) => (index + 1).toString()
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TabPanelTiltak,
-    {
-      scenario,
-      setEksisterendeTiltak,
-      updateTiltak,
-      deleteTiltak,
-      addTiltak,
-      updateRestrisiko,
-      options: consequenceOptions.map(
-        (_, index) => (index + 1).toString()
-      )
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: buttons, style: { paddingTop: "1rem" } }, /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", onClick: saveAndClose }, t("dictionary.save")), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "outlined",
-      color: "primary",
-      onClick: handleCloseDrawer
-    },
-    t("dictionary.cancel")
-  ), /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      item: true,
-      container: true,
-      xs: 12,
-      style: { display: "flex", justifyContent: "flex-end" }
-    },
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        startIcon: /* @__PURE__ */ React.createElement(DeleteIcon$1, null),
-        variant: "text",
-        color: "primary",
-        onClick: openDeleteConfirmation
-      },
-      t("scenarioDrawer.deleteScenarioButton")
-    )
-  ))), /* @__PURE__ */ React.createElement(DeleteConfirmation, null), /* @__PURE__ */ React.createElement(
-    CloseConfirmation,
-    {
-      isOpen: showCloseConfirmation,
-      close,
-      save: saveAndClose
-    }
-  ));
-};
-
-const useTiltakViewStyles = makeStyles((_) => ({
-  alignCenter: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  buttons: {
     display: "flex",
-    alignItems: "center"
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(4)
   },
-  justifyEnd: {
+  risikoBadge: {
+    width: "20px",
+    height: "48px",
+    borderRadius: "20%"
+  },
+  titleAndButton: {
     display: "flex",
-    justifyContent: "flex-end"
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  section: {
+    padding: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    backgroundColor: theme.palette.type === "dark" ? "#555555" : "#e0e0e0"
+  },
+  gridContainer: {
+    padding: theme.spacing(2),
+    marginBottom: theme.palette.type === "dark" ? theme.spacing(1) : "7px",
+    backgroundColor: theme.palette.type === "dark" ? "#55555519" : "#e0e0e019"
+  },
+  editIcon: {
+    color: theme.palette.type === "dark" ? "#fff" : "rgba(0, 0, 0, 0.54)"
   }
 }));
 
-const TiltakView = ({ tiltak, index }) => {
-  const { measure } = useScenarioDrawerContentStyles();
-  const { alignCenter, justifyEnd } = useTiltakViewStyles();
-  const { body2, label } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, className: measure }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: alignCenter }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measure"), " ", index)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, className: justifyEnd }, /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      label: tiltak.status,
-      size: "small",
-      style: {
-        margin: 0,
-        padding: 0,
-        backgroundColor: "#D9D9D9",
-        color: "#000000"
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, tiltak.description)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measureOwner")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, tiltak.owner)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.deadline")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, formatDate(tiltak.deadline))));
-};
-
-const RiskView = () => {
-  const { risikoBadge, titleAndButton, section, editIcon } = useScenarioDrawerContentStyles();
-  const { h3, body1, label, button } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
+const RiskSection = () => {
   const { scenario, editScenario } = useContext(ScenarioContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Box$2,
@@ -2324,53 +1947,14 @@ const RiskView = () => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: titleAndButton }, /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("dictionary.initialRisk")), /* @__PURE__ */ React.createElement(
-      Button,
+    /* @__PURE__ */ React.createElement(
+      RiskBox,
       {
-        className: button,
-        variant: "text",
-        color: "primary",
-        onClick: () => editScenario("initialRisk"),
-        startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
+        risk: scenario.risk,
+        riskType: "initialRisk",
+        editScenario
       }
-    )), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(
-      Grid,
-      {
-        item: true,
-        xs: 12,
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          gap: "0.5rem",
-          alignItems: "center"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        Box$2,
-        {
-          className: risikoBadge,
-          style: {
-            backgroundColor: getRiskMatrixColor(scenario.risk)
-          }
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Grid,
-        {
-          item: true,
-          xs: 12,
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "start"
-          }
-        },
-        /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.probability"), ":", " ", getSannsynlighetLevel(scenario.risk)),
-        /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.consequence"), ":", " ", getKonsekvensLevel(scenario.risk))
-      )
-    ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.estimatedRisk"))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingTop: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: body1 }, formatNOK(
-      scenario.risk.consequence * scenario.risk.probability
-    ), " ", t("riskMatrix.estimatedRisk.unit.nokPerYear"))))),
+    ),
     /* @__PURE__ */ React.createElement(
       Grid,
       {
@@ -2384,118 +1968,164 @@ const RiskView = () => {
       },
       /* @__PURE__ */ React.createElement(KeyboardDoubleArrowRightIcon, { fontSize: "large" })
     ),
-    /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: titleAndButton }, /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("dictionary.restRisk")), /* @__PURE__ */ React.createElement(
-      Button,
+    /* @__PURE__ */ React.createElement(
+      RiskBox,
       {
-        className: button,
-        variant: "text",
-        color: "primary",
-        onClick: () => editScenario("restRisk"),
-        startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
+        risk: scenario.risk,
+        riskType: "initialRisk",
+        editScenario
       }
-    )), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(
-      Grid,
-      {
-        item: true,
-        xs: 12,
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          gap: "0.5rem",
-          alignItems: "center"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        Box$2,
-        {
-          className: risikoBadge,
-          style: {
-            backgroundColor: getRiskMatrixColor(scenario.remainingRisk)
-          }
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Grid,
-        {
-          item: true,
-          xs: 12,
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "start"
-          }
-        },
-        /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.probability"), ":", " ", getSannsynlighetLevel(scenario.remainingRisk)),
-        /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.consequence"), ":", " ", getKonsekvensLevel(scenario.remainingRisk))
-      )
-    ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.estimatedRisk"))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingTop: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: body1 }, formatNOK(
-      scenario.remainingRisk.consequence * scenario.remainingRisk.probability
-    ), " ", t("riskMatrix.estimatedRisk.unit.nokPerYear")))))
+    )
   ));
 };
-
-const ScenarioView = () => {
-  const { header, titleAndButton, section, editIcon } = useScenarioDrawerContentStyles();
-  const { h1, h3, body2, label, button } = useFontStyles();
-  const { scenario, editScenario } = useContext(ScenarioContext);
+const RiskBox = ({ risk, riskType, editScenario }) => {
+  const { risikoBadge, titleAndButton, section, editIcon } = useScenarioDrawerStyles();
+  const { h3, body1, label, button } = useFontStyles();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(Box$2, { className: header }, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: titleAndButton }, /* @__PURE__ */ React.createElement(Typography, { variant: "h3", className: h3 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: titleAndButton }, /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t(`dictionary.${riskType}`)), /* @__PURE__ */ React.createElement(
     Button,
     {
       className: button,
       variant: "text",
       color: "primary",
-      onClick: () => editScenario("scenario"),
+      onClick: () => editScenario(riskType),
       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))))));
-};
-
-const ScenarioDrawerView = () => {
-  const { buttons, titleAndButton, section, editIcon } = useScenarioDrawerContentStyles();
-  const { h3, button } = useFontStyles();
-  const {
-    scenario,
-    saveScenario,
-    openDeleteConfirmation,
-    closeScenario,
-    editScenario
-  } = useContext(ScenarioContext);
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const [showCloseConfirmation, setShowCloseConfirmation] = useState(false);
-  const close = () => {
-    closeScenario();
-    setShowCloseConfirmation(false);
-  };
-  const saveAndClose = () => {
-    if (saveScenario()) {
-      close();
-    }
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Box$2,
+  )), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(
+    Grid,
     {
-      className: buttons,
+      item: true,
+      xs: 12,
       style: {
-        marginBottom: "8px",
-        marginTop: "8px",
         display: "flex",
         flexDirection: "row",
         gap: "0.5rem",
-        justifyContent: "flex-end"
+        alignItems: "center"
       }
     },
     /* @__PURE__ */ React.createElement(
-      Button,
+      Box$2,
       {
-        className: button,
-        variant: "outlined",
-        color: "primary",
-        onClick: closeScenario
+        className: risikoBadge,
+        style: {
+          backgroundColor: getRiskMatrixColor(risk)
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Grid,
+      {
+        item: true,
+        xs: 12,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "start"
+        }
       },
-      t("dictionary.close")
+      /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.probability"), ": ", getProbabilityLevel(risk)),
+      /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.consequence"), ": ", getConsequenceLevel(risk))
     )
-  ), /* @__PURE__ */ React.createElement(ScenarioView, null), /* @__PURE__ */ React.createElement(RiskView, null), /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.estimatedRisk"))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingTop: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: body1 }, formatNOK(risk.consequence * risk.probability), " ", t("riskMatrix.estimatedRisk.unit.nokPerYear")))));
+};
+
+const useActionBoxStyles = makeStyles((_) => ({
+  alignCenter: {
+    display: "flex",
+    alignItems: "center"
+  },
+  justifyEnd: {
+    display: "flex",
+    justifyContent: "flex-end"
+  }
+}));
+
+const ChipDropdown = ({
+  options,
+  selectedValue,
+  handleChange
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const handleClick = (item) => {
+    setAnchorEl(null);
+    handleChange(item);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Chip,
+    {
+      style: {
+        margin: 0,
+        padding: 0,
+        backgroundColor: "#D9D9D9",
+        color: "#000000"
+      },
+      label: selectedValue,
+      onClick: (e) => {
+        setAnchorEl(e.currentTarget);
+        setMenuAnchorEl(e.currentTarget);
+      },
+      icon: /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, { style: { color: "#000000" } })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      anchorEl: menuAnchorEl,
+      open: Boolean(anchorEl),
+      onClose: () => setAnchorEl(null),
+      getContentAnchorEl: null,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      }
+    },
+    options.map((item) => /* @__PURE__ */ React.createElement(MenuItem, { key: item, onClick: () => handleClick(item) }, item))
+  ));
+};
+
+const ActionBox = ({
+  action,
+  index,
+  updateAction,
+  saveScenario
+}) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { body2, label } = useFontStyles();
+  const { gridContainer } = useScenarioDrawerStyles();
+  const { alignCenter, justifyEnd } = useActionBoxStyles();
+  const [previousAction, setPreviousAction] = useState(action);
+  useEffect(() => {
+    if (previousAction !== action) {
+      saveScenario();
+      setPreviousAction(action);
+    }
+  }, [action, saveScenario, previousAction]);
+  const setStatus = (status) => {
+    updateAction({
+      ...action,
+      status
+    });
+  };
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, className: gridContainer }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: alignCenter }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measure"), " ", index)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, className: justifyEnd }, /* @__PURE__ */ React.createElement(
+    ChipDropdown,
+    {
+      options: actionStatusOptions,
+      selectedValue: action.status,
+      handleChange: setStatus
+    }
+  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, action.description)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measureOwner")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, action.owner)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.deadline")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, formatDate(action.deadline))));
+};
+
+const ActionsSection = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { h3, button } = useFontStyles();
+  const { titleAndButton, section, editIcon } = useScenarioDrawerStyles();
+  const { scenario, editScenario, saveScenario, updateAction } = useContext(ScenarioContext);
+  return /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(
     Grid,
     {
       item: true,
@@ -2516,52 +2146,105 @@ const ScenarioDrawerView = () => {
         startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
       }
     )
-  ), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TiltakView, { tiltak: action, index: index + 1 }), index !== scenario.actions.length - 1 && /* @__PURE__ */ React.createElement(Divider$1, { variant: "fullWidth" }))))), /* @__PURE__ */ React.createElement(
-    Box$2,
+  ), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ActionBox,
     {
-      className: buttons,
-      style: {
-        display: "flex",
-        flexDirection: "row",
-        gap: "0.5rem",
-        justifyContent: "flex-start"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        startIcon: /* @__PURE__ */ React.createElement(DeleteIcon$1, null),
-        variant: "text",
-        color: "primary",
-        onClick: openDeleteConfirmation
-      },
-      t("scenarioDrawer.deleteScenarioButton")
-    )
-  ), /* @__PURE__ */ React.createElement(DeleteConfirmation, null), /* @__PURE__ */ React.createElement(
-    CloseConfirmation,
+      action,
+      index: index + 1,
+      updateAction,
+      saveScenario
+    }
+  ), index !== scenario.actions.length - 1 && /* @__PURE__ */ React.createElement(Divider$1, { variant: "fullWidth" })))));
+};
+
+const DeleteConfirmation = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { deleteConfirmationIsOpen, abortDeletion, confirmDeletion } = useContext(ScenarioContext);
+  return /* @__PURE__ */ React.createElement(Dialog, { open: deleteConfirmationIsOpen }, /* @__PURE__ */ React.createElement(DialogTitle, null, t("scenarioDrawer.deleteScenarioConfirmation")), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { style: { textTransform: "none" }, onClick: abortDeletion }, t("dictionary.cancel")), /* @__PURE__ */ React.createElement(Button, { style: { textTransform: "none" }, onClick: confirmDeletion }, t("scenarioDrawer.deleteScenarioButton"))));
+};
+
+const ScopeSection = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { h1, h3, body2, label, button } = useFontStyles();
+  const { header, titleAndButton, section, editIcon } = useScenarioDrawerStyles();
+  const { scenario, editScenario } = useContext(ScenarioContext);
+  return /* @__PURE__ */ React.createElement(Paper, { className: section, style: { padding: "1rem" } }, /* @__PURE__ */ React.createElement(Box$2, { className: header }, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: titleAndButton }, /* @__PURE__ */ React.createElement(Typography, { variant: "h3", className: h3 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(
+    Button,
     {
-      isOpen: showCloseConfirmation,
-      close,
-      save: saveAndClose
+      className: button,
+      variant: "text",
+      color: "primary",
+      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))))));
 };
 
 const ScenarioDrawer = () => {
-  const { paperEdit, paperView } = useScenarioDrawerStyles();
-  const { scenarioDrawerState, closeScenario } = useContext(ScenarioContext);
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { drawer, buttons } = useScenarioDrawerStyles();
+  const { button } = useFontStyles();
+  const { scenarioDrawerState, openDeleteConfirmation, closeScenario } = useContext(ScenarioContext);
   const isOpen = scenarioDrawerState !== ScenarioDrawerState.Closed;
-  const editMode = scenarioDrawerState === ScenarioDrawerState.Edit;
   return /* @__PURE__ */ React.createElement(
     Drawer,
     {
-      classes: { paper: editMode ? paperEdit : paperView },
+      classes: { paper: drawer },
       variant: "temporary",
       anchor: "right",
       open: isOpen,
       onClose: closeScenario
     },
-    editMode ? /* @__PURE__ */ React.createElement(ScenarioDrawerEdit, null) : /* @__PURE__ */ React.createElement(ScenarioDrawerView, null)
+    /* @__PURE__ */ React.createElement(
+      Box$2,
+      {
+        className: buttons,
+        style: {
+          marginBottom: "8px",
+          marginTop: "8px",
+          display: "flex",
+          flexDirection: "row",
+          gap: "0.5rem",
+          justifyContent: "flex-end"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          className: button,
+          variant: "outlined",
+          color: "primary",
+          onClick: closeScenario
+        },
+        t("dictionary.close")
+      )
+    ),
+    /* @__PURE__ */ React.createElement(ScopeSection, null),
+    /* @__PURE__ */ React.createElement(RiskSection, null),
+    /* @__PURE__ */ React.createElement(ActionsSection, null),
+    /* @__PURE__ */ React.createElement(
+      Box$2,
+      {
+        className: buttons,
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          gap: "0.5rem",
+          justifyContent: "flex-start"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ React.createElement(DeleteIcon$1, null),
+          variant: "text",
+          color: "primary",
+          onClick: openDeleteConfirmation
+        },
+        t("scenarioDrawer.deleteScenarioButton")
+      )
+    ),
+    /* @__PURE__ */ React.createElement(DeleteConfirmation, null)
   );
 };
 
@@ -2638,8 +2321,9 @@ const RiskMatrixScenarioCount = ({
   riSc,
   probability,
   consequence,
-  startRisiko
+  initialRisk
 }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const {
     circle,
     centered,
@@ -2649,19 +2333,18 @@ const RiskMatrixScenarioCount = ({
     tooltipArrow,
     tooltipText
   } = useRiskMatrixStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const [tooltipOpen, setTooltipOpen] = useState(false);
-  const scenarier = riSc.scenarios.filter(
+  const scenarios = riSc.scenarios.filter(
     (scenario) => probabilityOptions.indexOf(
-      startRisiko ? scenario.risk.probability : scenario.remainingRisk.probability
+      initialRisk ? scenario.risk.probability : scenario.remainingRisk.probability
     ) === probability && consequenceOptions.indexOf(
-      startRisiko ? scenario.risk.consequence : scenario.remainingRisk.consequence
+      initialRisk ? scenario.risk.consequence : scenario.remainingRisk.consequence
     ) === consequence
   );
-  if (scenarier.length === 0) {
+  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"))), scenarier.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, { button: true, disableGutters: true, className: tooltipText }, /* @__PURE__ */ React.createElement(CircleIcon, { className: tooltipText, style: { width: "10px" } }), /* @__PURE__ */ React.createElement(
     ListItemText$1,
     {
       className: tooltipText,
@@ -2685,12 +2368,12 @@ const RiskMatrixScenarioCount = ({
         elevation: 10,
         onClick: () => setTooltipOpen(!tooltipOpen)
       },
-      /* @__PURE__ */ React.createElement(Typography, { className: `${circleText} ${text}` }, scenarier.length)
+      /* @__PURE__ */ React.createElement(Typography, { className: `${circleText} ${text}` }, scenarios.length)
     )
   ));
 };
 
-const useStyles$1 = makeStyles({
+const useEstimatedRiskInfoDialogStyles = makeStyles({
   paper: {
     backgroundColor: "white"
   },
@@ -2702,16 +2385,17 @@ const useStyles$1 = makeStyles({
     color: "black"
   }
 });
+
 const EstimatedRiskInfoDialog = ({
   isOpen,
   onClose
 }) => {
-  const classes = useStyles$1();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(Dialog, { open: isOpen, onClose, maxWidth: "xs" }, /* @__PURE__ */ React.createElement(Paper, { className: classes.paper }, /* @__PURE__ */ React.createElement(DialogTitle, { className: classes.title }, t("infoDialog.title")), /* @__PURE__ */ React.createElement(DialogContent, { className: classes.text, dividers: true }, /* @__PURE__ */ React.createElement(DialogContentText, { className: classes.text }, t("infoDialog.description")), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.calculatedHowTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: classes.text }, t("infoDialog.calculatedHow")), /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: "bold" } }, t("infoDialog.consequenceTitle")), /* @__PURE__ */ React.createElement(DialogContentText, { className: classes.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: classes.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: classes.text }, t("infoDialog.example")))));
+  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")))));
 };
 
-const useStyles = makeStyles({
+const useAggregatedCostStyles = makeStyles({
   outerBox: {
     display: "flex",
     flexDirection: "column",
@@ -2722,14 +2406,15 @@ const useStyles = makeStyles({
     alignItems: "center"
   }
 });
+
 const AggregatedCost = ({ riSc, initialRisk }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { outerBox, innerBox } = useAggregatedCostStyles();
+  const { label2, body2 } = useFontStyles();
+  const [showDialog, setShowDialog] = useState(false);
   const cost = riSc.scenarios.map(
     (scenario) => initialRisk ? scenario.risk.probability * scenario.risk.consequence : scenario.remainingRisk.probability * scenario.remainingRisk.consequence
   ).reduce((a, b) => a + b, 0);
-  const [showDialog, setShowDialog] = useState(false);
-  const { outerBox, innerBox } = useStyles();
-  const { label2, body2 } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   return /* @__PURE__ */ React.createElement(Box$1, { className: outerBox }, /* @__PURE__ */ React.createElement(Typography, { className: label2 }, t("riskMatrix.estimatedRisk.title")), /* @__PURE__ */ React.createElement(Box$1, { className: innerBox }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, formatNumber(cost, t), " ", t("riskMatrix.estimatedRisk.unit.nokPerYear")), /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => setShowDialog(true) }, /* @__PURE__ */ React.createElement(InfoIcon, null))), /* @__PURE__ */ React.createElement(
     EstimatedRiskInfoDialog,
     {
@@ -2738,25 +2423,21 @@ const AggregatedCost = ({ riSc, initialRisk }) => {
     }
   ));
 };
-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);
-    return t(`riskMatrix.estimatedRisk.suffix.${unit}`, {
-      count: Number((cost / threshold * 1e3).toFixed(0))
-    });
+
+const useTabsStyle = makeStyles((theme) => ({
+  tab: {
+    backgroundColor: "transparent",
+    color: theme.palette.type === "dark" ? "white" : "black",
+    "&:hover": {
+      backgroundColor: "transparent",
+      color: theme.palette.type === "dark" ? "white" : "black"
+    }
   }
-}
+}));
 
 const Tabs = ({ setTab }) => {
-  const tabsStyle = useTabsStyle();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const tabsStyle = useTabsStyle();
   return /* @__PURE__ */ React.createElement(Box$2, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React.createElement(
     TabList,
     {
@@ -2768,7 +2449,7 @@ const Tabs = ({ setTab }) => {
       Tab,
       {
         label: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", style: { fontWeight: "bold" } }, t("dictionary.initialRisk")),
-        value: "startrisiko",
+        value: RiskMatrixTabs.initialRisk,
         className: tabsStyle.tab
       }
     ),
@@ -2776,15 +2457,21 @@ const Tabs = ({ setTab }) => {
       Tab,
       {
         label: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", style: { fontWeight: "bold" } }, t("dictionary.restRisk")),
-        value: "restrisiko",
+        value: RiskMatrixTabs.remainingRisk,
         className: tabsStyle.tab
       }
     )
   ));
 };
 
+var RiskMatrixTabs = /* @__PURE__ */ ((RiskMatrixTabs2) => {
+  RiskMatrixTabs2["initialRisk"] = "initialRisk";
+  RiskMatrixTabs2["remainingRisk"] = "remainingRisk";
+  return RiskMatrixTabs2;
+})(RiskMatrixTabs || {});
 const RiskMatrix = ({ riSc }) => {
-  const indices = [0, 1, 2, 3, 4];
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { label2 } = useFontStyles();
   const {
     riskSummary,
     grid,
@@ -2795,10 +2482,14 @@ const RiskMatrix = ({ riSc }) => {
     text,
     centered
   } = useRiskMatrixStyles();
-  const { label2 } = useFontStyles();
-  const [tab, setTab] = useState("startrisiko");
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: t("riskMatrix.title") }, /* @__PURE__ */ React.createElement(TabContext, { value: tab }, /* @__PURE__ */ React.createElement(Tabs, { setTab }), riSc.scenarios.length > 0 && /* @__PURE__ */ React.createElement(Box$2, { className: riskSummary }, /* @__PURE__ */ React.createElement(AggregatedCost, { riSc, initialRisk: tab === "startrisiko" })), /* @__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"))), indices.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, 5 - row)), indices.map((col) => /* @__PURE__ */ React.createElement(
+  const [tab, setTab] = useState("initialRisk" /* initialRisk */);
+  return /* @__PURE__ */ React.createElement(InfoCard, { title: t("riskMatrix.title") }, /* @__PURE__ */ React.createElement(TabContext, { value: tab }, /* @__PURE__ */ React.createElement(Tabs, { setTab }), riSc.scenarios.length > 0 && /* @__PURE__ */ React.createElement(Box$2, { className: riskSummary }, /* @__PURE__ */ React.createElement(
+    AggregatedCost,
+    {
+      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(
     Box$2,
     {
       className: `${square} ${centered}`,
@@ -2810,10 +2501,10 @@ const RiskMatrix = ({ riSc }) => {
         riSc,
         probability: col,
         consequence: 4 - row,
-        startRisiko: tab === "startrisiko"
+        initialRisk: tab === "initialRisk" /* initialRisk */
       }
     )
-  )))), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), indices.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 }, /* @__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) => ({
@@ -2856,15 +2547,11 @@ const ScenarioTableRow = ({
   viewRow,
   isLastRow
 }) => {
-  const sannsynlighet = probabilityOptions.indexOf(scenario.risk.probability) + 1;
-  const konsekvens = consequenceOptions.indexOf(scenario.risk.consequence) + 1;
-  const restSannsynlighet = probabilityOptions.indexOf(scenario.remainingRisk.probability) + 1;
-  const restKonsekvens = consequenceOptions.indexOf(scenario.remainingRisk.consequence) + 1;
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { riskColor, rowBackground, rowBorder, tableCell } = useTableStyles();
   const remainingActions = scenario.actions.filter(
     (a) => a.status !== "Completed"
   );
-  const { riskColor, rowBackground, rowBorder, tableCell } = useTableStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   return /* @__PURE__ */ React.createElement(TableRow, { className: isLastRow ? void 0 : rowBorder }, /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -2897,7 +2584,7 @@ const ScenarioTableRow = ({
           backgroundColor: getRiskMatrixColor(scenario.risk)
         }
       }
-    ), t("scenarioTable.columns.probabilityChar"), ":", sannsynlighet, " ", t("scenarioTable.columns.consequenceChar"), ":", konsekvens),
+    ), 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(
       Paper,
@@ -2907,14 +2594,14 @@ const ScenarioTableRow = ({
           backgroundColor: getRiskMatrixColor(scenario.remainingRisk)
         }
       }
-    ), t("scenarioTable.columns.probabilityChar"), ":", restSannsynlighet, " ", t("scenarioTable.columns.consequenceChar"), ":", restKonsekvens)
+    ), t("scenarioTable.columns.probabilityChar"), ":", getProbabilityLevel(scenario.remainingRisk), " ", t("scenarioTable.columns.consequenceChar"), ":", getConsequenceLevel(scenario.remainingRisk))
   ));
 };
 
 const ScenarioTable = ({ riSc }) => {
-  const { newScenario, openScenario } = useContext(ScenarioContext);
-  const { titleBox, rowBorder, tableCell } = useTableStyles();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { titleBox, rowBorder, tableCell } = 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,
     {
@@ -3052,6 +2739,9 @@ const RiScDialog = ({
   riSc,
   ...props
 }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { paper, content, buttons } = useRiScDialogStyles();
+  const { h1 } = useFontStyles();
   const [newRiSc, setNewRiSc] = useState(
     dialogState === 1 /* Edit */ ? riSc.content : emptyRiSc()
   );
@@ -3059,9 +2749,6 @@ const RiScDialog = ({
     title: null,
     scope: null
   });
-  const classes = useRiScDialogStyles();
-  const { h1 } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const handleCancel = () => {
     onClose();
     setNewRiSc(emptyRiSc());
@@ -3084,53 +2771,53 @@ const RiScDialog = ({
     }
     handleCancel();
   };
-  const setTittel = (tittel) => {
+  const setTitle = (title) => {
     setNewRiScError({
       ...newRiScError,
       title: null
     });
     setNewRiSc({
       ...newRiSc,
-      title: tittel
+      title
     });
   };
-  const setOmfang = (omfang) => {
+  const setScope = (scope) => {
     setNewRiScError({
       ...newRiScError,
       scope: null
     });
     setNewRiSc({
       ...newRiSc,
-      scope: omfang
+      scope
     });
   };
   const header = dialogState === 2 /* Create */ ? t("rosDialog.titleNew") : t("rosDialog.titleEdit");
   return /* @__PURE__ */ React.createElement(
     Dialog,
     {
-      classes: { paper: classes.paper },
+      classes: { paper },
       open: dialogState !== 0 /* Closed */,
       onClose: handleSave,
       ...props
     },
-    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, header), /* @__PURE__ */ React.createElement(Box$1, { className: classes.content }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, header), /* @__PURE__ */ React.createElement(Box$1, { className: content }, /* @__PURE__ */ React.createElement(
       TextField,
       {
         label: t("dictionary.title"),
         value: newRiSc.title,
         minRows: 1,
-        handleChange: setTittel,
+        handleChange: setTitle,
         error: newRiScError.title,
         required: true
       }
-    )), /* @__PURE__ */ React.createElement(Box$1, { className: classes.content }, /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(Box$1, { className: content }, /* @__PURE__ */ React.createElement(
       TextField,
       {
         label: t("dictionary.scope"),
         subtitle: t("rosDialog.scopeDescription"),
         value: newRiSc.scope,
         minRows: 4,
-        handleChange: setOmfang,
+        handleChange: setScope,
         error: newRiScError.scope,
         required: true
       }
@@ -3145,7 +2832,7 @@ const RiScDialog = ({
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React.createElement(Box$1, { className: classes.buttons }, /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", onClick: handleSave }, t("dictionary.save")), /* @__PURE__ */ React.createElement(Button, { variant: "outlined", color: "primary", onClick: handleCancel }, t("dictionary.cancel")))
+      /* @__PURE__ */ React.createElement(Box$1, { className: buttons }, /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", onClick: handleSave }, t("dictionary.save")), /* @__PURE__ */ React.createElement(Button, { variant: "outlined", color: "primary", onClick: handleCancel }, t("dictionary.cancel")))
     )
   );
 };
@@ -3189,15 +2876,6 @@ const useStatusTextStyles = makeStyles(() => ({
     marginLeft: "2px"
   }
 }));
-makeStyles(() => ({
-  noApprovalBanner: {
-    backgroundColor: "#FCEBCD",
-    color: "#303030"
-  },
-  "MuiAlert-message": {
-    color: "#B2750B"
-  }
-}));
 
 const getChipColor = (status, classes) => {
   switch (status) {
@@ -3268,22 +2946,31 @@ const StatusChip = ({ currentRiScStatus }) => {
   );
 };
 
+const useButtonStyles = makeStyles(() => ({
+  approveButton: {
+    borderRadius: "2px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }
+}));
+
 const RiScPublishDialog = ({
   openDialog,
   handleCancel,
   handlePublish
 }) => {
-  const classes = useRiScDialogStyles();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const [userIsRisikoEierAndApproves, setUserIsRisikoEierAndApproves] = useState(false);
+  const { buttons } = useRiScDialogStyles();
+  const [riskOwnerApproves, setRiskOwnerApproves] = useState(false);
   const handleCheckboxInput = (event) => {
-    setUserIsRisikoEierAndApproves(event.target.checked);
+    setRiskOwnerApproves(event.target.checked);
   };
   return /* @__PURE__ */ React.createElement(Dialog, { open: openDialog }, /* @__PURE__ */ React.createElement(DialogTitle, null, t("publishDialog.title")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Alert, { severity: "info", icon: false }, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React.createElement(
     Checkbox,
     {
       color: "primary",
-      checked: userIsRisikoEierAndApproves,
+      checked: riskOwnerApproves,
       onChange: handleCheckboxInput
     }
   )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 8 }, t("publishDialog.checkboxLabel"))))), /* @__PURE__ */ React.createElement(
@@ -3296,13 +2983,13 @@ const RiScPublishDialog = ({
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React.createElement(Box$1, { className: classes.buttons }, /* @__PURE__ */ React.createElement(Button, { variant: "outlined", color: "primary", onClick: handleCancel }, t("dictionary.cancel")), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box$1, { className: buttons }, /* @__PURE__ */ React.createElement(Button, { variant: "outlined", color: "primary", onClick: handleCancel }, t("dictionary.cancel")), /* @__PURE__ */ React.createElement(
       Button,
       {
         variant: "contained",
         color: "primary",
         onClick: handlePublish,
-        disabled: !userIsRisikoEierAndApproves
+        disabled: !riskOwnerApproves
       },
       t("dictionary.confirm")
     ))
@@ -3312,8 +2999,8 @@ const RiScStatusComponent = ({
   selectedRiSc,
   publishRiScFn
 }) => {
-  const statusComponentClasses = useButtonStyles();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { approveButton } = useButtonStyles();
   const [publishRiScDialogIsOpen, setPublishRiScDialogIsOpen] = useState(false);
   const handleApproveAndPublish = () => {
     publishRiScFn();
@@ -3325,7 +3012,7 @@ const RiScStatusComponent = ({
       color: "primary",
       variant: "contained",
       onClick: () => setPublishRiScDialogIsOpen(!publishRiScDialogIsOpen),
-      className: statusComponentClasses.godkjennButton,
+      className: approveButton,
       fullWidth: true,
       disabled: selectedRiSc.status !== RiScStatus.Draft
     },
@@ -3347,9 +3034,9 @@ const useRiScInfoStyles = makeStyles(() => ({
 }));
 
 const RiScInfo = ({ riSc, approveRiSc, edit }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { label, body2 } = useFontStyles();
   const { infoCard } = useRiScInfoStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(
     Grid,
     {
@@ -3380,6 +3067,7 @@ const RiScInfo = ({ riSc, approveRiSc, edit }) => {
 const Plugin = () => {
   var _a, _b;
   const params = useParams();
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const [RiScDialogState, setRiScDialogState] = useState(
     RiScDialogStates.Closed
   );
@@ -3403,8 +3091,6 @@ const Plugin = () => {
     updateRiSc,
     params.scenarioId
   );
-  const classes = useLoadingStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const [searchParams] = useSearchParams();
   const scenarioWizardStep = searchParams.get("step") || null;
   useEffect(() => {
@@ -3418,7 +3104,7 @@ const Plugin = () => {
       isFetching,
       updateStatus: updateRiScStatus
     }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("contentHeader.title") }, /* @__PURE__ */ React.createElement(SupportButton, null, "Kul plugin ass!")), isFetching && /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(CircularProgress, { className: classes.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") }), 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,
@@ -3473,4 +3159,4 @@ const RiScPlugin = () => {
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-fd361b7d.esm.js.map
+//# sourceMappingURL=index-153cf81f.esm.js.map