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

package/dist/esm/{index-af063c38.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 } from './index-4258fc5b.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';
@@ -16,34 +16,34 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
-import { createTranslationRef, createTranslationResource, useTranslationRef } from '@backstage/core-plugin-api/alpha';
+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,
     {
@@ -1362,431 +1332,28 @@ const Dropdown = ({
   ), error && /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, error));
 };
 
-const pluginRiScTranslationRef = createTranslationRef({
-  id: "plugin.riSc",
-  messages: {
-    contentHeader: {
-      title: "Risk scorecard",
-      createNewButton: "Create new scorecard"
-    },
-    dictionary: {
-      cancel: "Cancel",
-      close: "Close",
-      completed: "Completed",
-      confirm: "Confirm",
-      consequence: "Consequence",
-      // Severity, Impact, Effect or Consequence
-      deadline: "Deadline",
-      // Deadline or Due date
-      delete: "Delete",
-      description: "Description",
-      discardChanges: "Discard changes",
-      edit: "Edit",
-      estimatedRisk: "Estimated risk",
-      initialRisk: "Initial risk",
-      // Starting or Initial risk
-      measure: "Actions",
-      // Measure, Action or Initiative
-      measureOwner: "Responsible",
-      // Responsible? Measure owner? Initiative owner?
-      next: "Next",
-      planned: "Planned",
-      previous: "Previous",
-      probability: "Probability",
-      // Likelihood or Probability
-      restRisk: "Remaining risk",
-      // Residual or Remaining risk
-      risk: "Risk",
-      save: "Save",
-      saveAndClose: "Save and close",
-      saveError: "Could not save scenario. Please try again.",
-      scenario: "Scenario",
-      scope: "Scope",
-      status: "Status",
-      threatActors: "Threat actors",
-      title: "Title",
-      vulnerabilities: "Vulnerabilities"
-    },
-    rosStatus: {
-      statusBadge: {
-        missing: "Awaiting acceptance from risk owner",
-        // Mangler godkjenning av risikoeier
-        approved: "Accepted by risk owner",
-        // Godkjent av risikoeier
-        error: "Failed to retrieve status"
-        // Kunne ikke hente status
-      },
-      prStatus: "Pending PR approval in Github ",
-      // Avventer godkjenning av PR i Github
-      approveButton: "Accept risks"
-      // Godkjenn ROS
-    },
-    publishDialog: {
-      title: "Accept risks",
-      // Godkjenn ROS
-      checkboxLabel: "I confirm that I am the risk owner and accept the risks detailed in this risk scorecard."
-    },
-    scenarioTable: {
-      title: "Risk scenarios",
-      addScenarioButton: "Add scenario",
-      columns: {
-        measuresCount: "Actions",
-        consequenceChar: "C",
-        probabilityChar: "P",
-        completed: "complete"
-      }
-    },
-    riskMatrix: {
-      title: "Risk matrix",
-      // Risk matrix or Risk overview
-      estimatedRisk: {
-        title: "Estimated risk",
-        suffix: {
-          thousand: "{{count}} thousand",
-          million_one: "{{count}} million",
-          million_other: "{{count}} million",
-          billion_one: "{{count}} billion",
-          billion_other: "{{count}} billion",
-          trillion_one: "{{count}} trillion",
-          trillion_other: "{{count}} trillion"
-        },
-        unit: {
-          nokPerYear: "NOK/year"
-        }
-      },
-      tooltip: {
-        title: "Risk scenarios"
-      }
-    },
-    infoDialog: {
-      title: "Estimated risk",
-      description: "The estimated risk is a calculation based on the risks the different scenarios pose. If there is a high probability that a serious consequence will occur, this could potentially become a large cost for the organization. In other words, the cost is an attempt to make the risk value more tangible and is the sum of the estimated risk for all the risk scenarios in this risk scorecard.",
-      calculatedHowTitle: "How do we calculate the estimated risk?",
-      calculatedHow: "Consequence is measured in cost (in NOK) per incident and probability is measured in incidents per year. The estimated risk is calculated as C x P.",
-      consequenceTitle: "Consequence (NOK/incident)",
-      // incident, event or occurrence
-      probabilityTitle: "Probability (incidents/year)",
-      probabilityDescription: {
-        "0": "every 100 years",
-        // 100 year intervals?
-        "1": "every 10 years",
-        // 10 year intervals?
-        "2": "yearly",
-        // almost yearly?
-        "3": "weekly",
-        "4": "daily"
-      },
-      example: "A scenario with consequence 2 and probability 4 has an estimated risk of 30 000 NOK/incident x 50 incidents/year = 1 500 000 NOK/year."
-    },
-    rosDialog: {
-      titleNew: "New risk scorecard",
-      titleEdit: "Edit scorecard",
-      titleError: "The scorecard has to have a title",
-      scopeDescription: "Describe what the risk analysis will assess. Specify any key areas which are not part of the scope.",
-      scopeError: "The scorecard has to have a description of the scope"
-    },
-    scenarioStepper: {
-      initialRiskStep: {
-        title: "Initial risk",
-        subtitle: "The initial risk is defined by the consequence of the scenario and the probability of it occurring.",
-        consequenceSubtitle: "How severe is the potential impact? If the scenario can impact more than one category, choose the highest level of consequence.",
-        probabilitySubtitle: "How likely is it that this scenario will occur? If you are between two probability values, choose the higher one."
-      },
-      restRiskStep: {
-        title: "Remaining risk",
-        subtitle: "What is the risk reduced to when all the planned actions have been completed?",
-        consequenceSubtitle: "How severe is the consequence of this scenario after all actions are complete?",
-        probabilitySubtitle: "What is the likelihood of this scenario after all actions are complete?"
-      }
-    },
-    scenarioDrawer: {
-      title: "Risk scenario",
-      titleError: "Scenario title is required",
-      subtitle: "An unwanted incident that could potentially harm the component.",
-      // harm or affect negatively?
-      threatActorSubtitle: "Someone who attempts to access or abuse the system",
-      // system or component or both?
-      vulnerabilitySubtitle: "Weakness in the system that the threat actor can exploit",
-      consequenceTab: {
-        subtitle: "How severe is the potential impact? If the scenario can impact more than one category, choose the highest level of consequence."
-      },
-      probabilityTab: {
-        subtitle: "How likely is it that this scenario will occur? If you are between two probability values, choose the higher one."
-      },
-      measureTab: {
-        subtitle: "What actions should be taken to avoid or reduce the risk of this scenario?",
-        measureOwnerDescription: "Decide who will be responsible for completion of this action",
-        addMeasureButton: "Add planned action",
-        actionsTitle: "Planned actions",
-        plannedMeasures: "Planned actions",
-        existingMeasure: "Existing measures",
-        existingMeasureSubtitle: "Brief description of relevant measures that have already been implemented to reduce the risk of this scenario"
-      },
-      restRiskTab: {
-        subtitle: "Define the remaining risk for the scenario. Remaining risk is the consequence and probability for this scenario after all planned actions have been completed."
-      },
-      deleteScenarioButton: "Delete scenario",
-      deleteScenarioConfirmation: "Are you sure you want to delete this scenario?",
-      closeConfirmation: "Do you want to save your changes?"
-    },
-    consequenceTable: {
-      rows: {
-        "1": "Negligible",
-        // Insignificant, negligible (ubetydelig)
-        "2": "Small",
-        // Liten
-        "3": "Moderate",
-        "4": "Severe",
-        // Alvorlig
-        "5": "Critical"
-        // Catastrophic eller Critical
-      },
-      columns: {
-        health: "Life and health",
-        // Health and safety, Life and limb, Health and lives (Liv og helse)
-        economical: "Financial",
-        // Financial consequences, economic implications
-        privacy: "Privacy",
-        // Personvern
-        reputation: "Reputation and trust"
-        // Reputation and trust, confidence, faith (Omdømme og tillit)
-      },
-      cells: {
-        health: {
-          "1": "Impact on life and health cannot be rated less severe than 3",
-          // Liv og helse kan ikke være mindre alvorlig enn 3
-          "2": "Impact on life and health cannot be rated less severe than 3",
-          "3": "Temporary or less severe health implications",
-          // implications, effects or consequence? Midlertidig eller mindre alvorlige helsemessige konsekvenser
-          "4": "Permanent or severe health implications",
-          // implications, effects or consequence? Lasting or Permanent? Varige eller alvorlige helsemessige konsekvenser
-          "5": "Death or permanent severe health implications"
-          // implications, effects or consequence? Lasting or permanent? Død eller varige alvorlige helsemssige konsekvenser
-        },
-        economical: {
-          "1": "Temporary minor financial loss",
-          // TODO: Hvor kort er forbigående? Forbigående mindre økonomisk tap
-          "2": "Temporary financial loss",
-          // Forbigående økonomisk tap
-          "3": "Financial loss of some duration",
-          // Økonomisk tap av noe varighet
-          "4": "Financial loss of considerable duration for the organization and any third parties",
-          // Økonomisk tap av betydelig varighet for Kartverket og evt. tredjeparter
-          "5": "Permanent and severe financial loss"
-          // Varig og alvorlig økonomisk tap
-        },
-        privacy: {
-          "1": "The right to privacy is violated for a very short period and does not involve sensitive categories or vulnerable groups",
-          //særlige kategorier = sensitive kategorier? special/particular/sensitive categories
-          "2": "The right to privacy is violated for a longer period and involves sensitive categories or vulnerable groups",
-          "3": "The right to privacy is severely violated for a longer period and involves sensitive categories or vulnerable groups",
-          "4": "The right to privacy is being violated in a very serious manner",
-          // very severely violated?
-          "5": "Impact on privacy cannot be rated more severe than 4"
-        },
-        reputation: {
-          "1": "Temporary loss of reputation and little impact on trust",
-          "2": "Negative attention in national media that can reduce trust",
-          // articles, news, items, publicity, mentions, attention?
-          "3": "Lasting negative attention in national and international media that can reduce trust",
-          "4": "Impact on reputation and trust cannot be rated more severe than 3",
-          "5": "Impact on reputation and trust cannot be rated more severe than 3"
-        }
-      }
-    },
-    probabilityTable: {
-      rows: {
-        "1": "Very low",
-        // svært liten
-        "2": "Low",
-        // liten
-        "3": "Moderat",
-        // moderat
-        "4": "High",
-        // stor
-        "5": "Very high"
-        // svært stor
-      },
-      cells: {
-        "1": "The scenario is unlikely to occur. It occurs less often than every 100 years",
-        "2": "The scenario is unlikely to occur. It can occur every 10 years",
-        "3": "The scenario can occur. It can occur almost every year",
-        "4": "The scenario will very likely occur. It can occur almost weekly",
-        "5": "The scenario is almost guaranteed to occur. It can occur almost daily"
-      }
-    }
-  }
-});
-createTranslationResource({
-  ref: pluginRiScTranslationRef,
-  translations: {
-    no: () => Promise.resolve({
-      default: {
-        "contentHeader.title": "Risiko- og s\xE5rbarhetsanalyse",
-        "contentHeader.createNewButton": "Opprett ny analyse",
-        "dictionary.cancel": "Avbryt",
-        "dictionary.close": "Lukk",
-        "dictionary.completed": "Fullf\xF8rt",
-        "dictionary.confirm": "Bekreft",
-        "dictionary.consequence": "Konsekvens",
-        "dictionary.deadline": "Frist",
-        "dictionary.delete": "Slett",
-        "dictionary.description": "Beskrivelse",
-        "dictionary.discardChanges": "Forkast endringer",
-        "dictionary.edit": "Rediger",
-        "dictionary.estimatedRisk": "Estimert risiko",
-        "dictionary.initialRisk": "Startrisiko",
-        "dictionary.measure": "Tiltak",
-        "dictionary.measureOwner": "Tiltakseier",
-        "dictionary.next": "Neste",
-        "dictionary.planned": "Planlagt",
-        "dictionary.previous": "Forrige",
-        "dictionary.probability": "Sannsynlighet",
-        "dictionary.restRisk": "Restrisiko",
-        "dictionary.risk": "Risiko",
-        "dictionary.save": "Lagre",
-        "dictionary.saveAndClose": "Lagre og lukk",
-        "dictionary.saveError": "Noe gikk galt ved lagring. Venligst pr\xF8v igjen.",
-        "dictionary.scenario": "Scenario",
-        "dictionary.scope": "Omfang",
-        "dictionary.status": "Status",
-        "dictionary.threatActors": "Trusselakt\xF8rer",
-        "dictionary.title": "Tittel",
-        "dictionary.vulnerabilities": "S\xE5rbarheter",
-        "rosStatus.statusBadge.missing": "Venter p\xE5 godkjenning av risikoeier",
-        "rosStatus.statusBadge.approved": "Godkjent av risikoeier",
-        "rosStatus.statusBadge.error": "Kunne ikke hente status",
-        "rosStatus.prStatus": "Avventer godkjenning av PR i Github",
-        "rosStatus.approveButton": "Godkjenn ROS",
-        "publishDialog.title": "Godkjenn ROS-analyse",
-        "publishDialog.checkboxLabel": "Jeg bekrefter at jeg er risikoeier og godtar risikoen beskrevet i denne risiko- og s\xE5rbarhetsanalysen.",
-        "scenarioTable.title": "Risikoscenarioer",
-        "scenarioTable.addScenarioButton": "Legg til scenario",
-        "scenarioTable.columns.measuresCount": "Tiltak",
-        "scenarioTable.columns.consequenceChar": "K",
-        "scenarioTable.columns.probabilityChar": "S",
-        "scenarioTable.columns.completed": "fullf\xF8rt",
-        "riskMatrix.title": "Risikomatrise",
-        "riskMatrix.estimatedRisk.title": "Estimert risiko",
-        "riskMatrix.estimatedRisk.suffix.thousand": "{{count}} tusen",
-        "riskMatrix.estimatedRisk.suffix.million_one": "{{count}} million",
-        "riskMatrix.estimatedRisk.suffix.million_other": "{{count}} millioner",
-        "riskMatrix.estimatedRisk.suffix.billion_one": "{{count}} milliard",
-        "riskMatrix.estimatedRisk.suffix.billion_other": "{{count}} milliarder",
-        "riskMatrix.estimatedRisk.suffix.trillion_one": "{{count}} billion",
-        "riskMatrix.estimatedRisk.suffix.trillion_other": "{{count}} billioner",
-        "riskMatrix.estimatedRisk.unit.nokPerYear": "kr/\xE5r",
-        "riskMatrix.tooltip.title": "Risikoscenarioer",
-        "infoDialog.title": "Estimert risiko",
-        "infoDialog.description": "Den estimerte risikoen er basert p\xE5 hvor stor risiko de forskjellige scenariene utgj\xF8r. Hvis det er stor sannsynlighet for at en alvorlig konsekvens skjer er det h\xF8y risiko for at det kan bli en stor kostnad for Kartverket. Kostnaden er med andre ord et fors\xF8k p\xE5 \xE5 konkretisere verdien av risiko og er summen av den estimerte risikoen for alle risikoscenariene i denne ROS-analysen.",
-        "infoDialog.calculatedHowTitle": "Hvordan regner vi ut estimert risiko?",
-        "infoDialog.calculatedHow": "Konsekvens m\xE5les i kroner per hendelse og sannsynlighet m\xE5les i hendelser per \xE5r. Den estimerte risikoen blir da: K x S.",
-        "infoDialog.consequenceTitle": "Konsekvens (kr/hendelse)",
-        "infoDialog.probabilityTitle": "Sannsynlighet (hendelser/\xE5r)",
-        "infoDialog.probabilityDescription.0": "ca hvert 100. \xE5r",
-        "infoDialog.probabilityDescription.1": "ca hvert 10. \xE5r",
-        "infoDialog.probabilityDescription.2": "ca \xE5rlig",
-        "infoDialog.probabilityDescription.3": "ca ukentlig",
-        "infoDialog.probabilityDescription.4": "ca daglig",
-        "infoDialog.example": "Et risikoscenario med konsekvens 2 og sannsynlighet 4 har en estimert risiko p\xE5 30 000 kr/hendelse x 50 hendelser/\xE5r = 1 500 000 kr/\xE5r.",
-        "rosDialog.titleNew": "Ny risiko- og s\xE5rbarhetsanalyse",
-        "rosDialog.titleEdit": "Rediger tittel og omfang",
-        "rosDialog.titleError": "ROS-analysen m\xE5 ha en tittel",
-        "rosDialog.scopeDescription": "Beskriv hva analysen skal vurdere. Hva som ikke inng\xE5r som en del av omfanget m\xE5 ogs\xE5 defineres.",
-        //TODO
-        "rosDialog.scopeError": "ROS-analysen m\xE5 ha et omfang",
-        "scenarioStepper.initialRiskStep.title": "Startrisiko",
-        "scenarioStepper.initialRiskStep.subtitle": "Risikoen er kombinasjonen av konsekvensen av scenarioet og sannsynligheten for at det inntreffer.",
-        "scenarioStepper.initialRiskStep.consequenceSubtitle": "Hvor alvorlig er den potensielle konsekvensen? Hvis konsekvensen gjelder flere kategorier velg det h\xF8yeste konsekvensniv\xE5et av disse.",
-        "scenarioStepper.initialRiskStep.probabilitySubtitle": "Hvor stor sannsynlighet er det for at dette scenarioet vil forekomme. Dersom du er mellom to sannsynlighetsverdier velg den h\xF8yeste.",
-        "scenarioStepper.restRiskStep.title": "Restrisiko",
-        "scenarioStepper.restRiskStep.subtitle": "Hvordan endrer risikoen seg fra startrisikoen etter alle tiltakene er fullf\xF8rt?",
-        "scenarioStepper.restRiskStep.consequenceSubtitle": "Hva blir konsekvensen etter alle tiltakene er fullf\xF8rt?",
-        "scenarioStepper.restRiskStep.probabilitySubtitle": "Hva blir sannsynligheten etter alle tiltakene er fullf\xF8rt?",
-        "scenarioDrawer.title": "Risikoscenario",
-        "scenarioDrawer.titleError": "Scenarioet m\xE5 ha en tittel",
-        "scenarioDrawer.subtitle": "En u\xF8nsket hendelse som potensielt kan ramme komponenten",
-        "scenarioDrawer.threatActorSubtitle": "Noen som pr\xF8ver \xE5 f\xE5 tilgang til eller misbruke systemet",
-        "scenarioDrawer.vulnerabilitySubtitle": "Svakhet i systemet som kan utnyttes av trusselakt\xF8ren",
-        "scenarioDrawer.consequenceTab.subtitle": "Hvor alvorlig er den potensielle konsekvensen? Hvis scenarioet kan f\xE5 konsekvenser i flere kategorier velg det h\xF8yeste konsekvensniv\xE5et av disse.",
-        "scenarioDrawer.probabilityTab.subtitle": "Hvor stor sannsynlighet er det for at dette scenarioet vil forekomme. Dersom du er mellom to sannsynlighetsverdier velg den h\xF8yeste.",
-        "scenarioDrawer.measureTab.subtitle": "Hvilke tiltak b\xF8r gj\xF8res for \xE5 unng\xE5 scenarioet?",
-        "scenarioDrawer.measureTab.actionsTitle": "Planlagte tiltak",
-        "scenarioDrawer.measureTab.measureOwnerDescription": "De eller den som er ansvarlig for at tiltaket blir gjennomf\xF8rt",
-        "scenarioDrawer.measureTab.addMeasureButton": "Legg til tiltak",
-        "scenarioDrawer.measureTab.plannedMeasures": "Planlagte tiltak",
-        "scenarioDrawer.measureTab.existingMeasure": "Eksisterende tiltak",
-        "scenarioDrawer.measureTab.existingMeasureSubtitle": "Kort beskrivelse av relevante tiltak som allerede har blitt gjennomf\xF8rt",
-        "scenarioDrawer.restRiskTab.subtitle": "Sett restrisiko for scenarioet. Restrisiko er konsekvens og sannsynlighet for scenarioet etter at alle tiltak i listen er gjennomf\xF8rt.",
-        "scenarioDrawer.deleteScenarioButton": "Slett scenario",
-        "scenarioDrawer.deleteScenarioConfirmation": "Er du sikker p\xE5 at du vil slette scenario?",
-        "scenarioDrawer.closeConfirmation": "Vil du lagre endringene dine?",
-        "consequenceTable.rows.1": "Ubetydelig",
-        "consequenceTable.rows.2": "Liten",
-        "consequenceTable.rows.3": "Moderat",
-        "consequenceTable.rows.4": "Alvorlig",
-        "consequenceTable.rows.5": "Kritisk",
-        "consequenceTable.columns.health": "Liv og helse",
-        "consequenceTable.columns.economical": "\xD8konomisk",
-        "consequenceTable.columns.privacy": "Personvern",
-        "consequenceTable.columns.reputation": "Omd\xF8mme og tillit",
-        "consequenceTable.cells.health.1": "Liv og helse kan ikke v\xE6re mindre alvorlig enn 3",
-        "consequenceTable.cells.health.2": "Liv og helse kan ikke v\xE6re mindre alvorlig enn 3",
-        "consequenceTable.cells.health.3": "Midlertidig eller mindre alvorlige helsemessige konsekvenser",
-        "consequenceTable.cells.health.4": "Varige eller alvorlige helsemessige konsekvenser",
-        "consequenceTable.cells.health.5": "D\xF8d eller varige alvorlige helsemssige konsekvenser",
-        "consequenceTable.cells.economical.1": "Forbig\xE5ende mindre \xF8konomisk tap",
-        "consequenceTable.cells.economical.2": "Forbig\xE5ende \xF8konomisk tap",
-        "consequenceTable.cells.economical.3": "\xD8konomisk tap av noe varighet",
-        "consequenceTable.cells.economical.4": "\xD8konomisk tap av betydelig varighet for Kartverket og evt. tredjeparter",
-        "consequenceTable.cells.economical.5": "Varig og alvorlig \xF8konomisk tap",
-        "consequenceTable.cells.privacy.1": "Retten til personvern utfordres i en sv\xE6rt kort periode og involverer ikke s\xE6rlige kategorier/s\xE5rbare grupper",
-        "consequenceTable.cells.privacy.2": "Retten til personvern krenkes i en lengre periode eller involverer s\xE6rlige kategorier/s\xE5rbare grupper",
-        "consequenceTable.cells.privacy.3": "Retten til personvern krenkes alvorlig i en lengre periode og involverer s\xE6rlige kategorier/s\xE5rbare grupper",
-        "consequenceTable.cells.privacy.4": "Retten til personvern krenkes p\xE5 en sv\xE6rt alvorlig m\xE5te",
-        "consequenceTable.cells.privacy.5": "Personvern kan ikke v\xE6re mer alvorlig enn 4",
-        "consequenceTable.cells.reputation.1": "Midlertidig omd\xF8mmetap og liten innvirkning p\xE5 tillit",
-        "consequenceTable.cells.reputation.2": "Negative saker i nasjonale medier som kan redusere tillit",
-        "consequenceTable.cells.reputation.3": "Varig negativ oppmerksomhet i nasjonale og internasjonale medier som kan redusere tillit",
-        "consequenceTable.cells.reputation.4": "Omd\xF8mme og tillit kan ikke v\xE6re mer alvorlig enn 3",
-        "consequenceTable.cells.reputation.5": "Omd\xF8mme og tillit kan ikke v\xE6re mer alvorlig enn 3",
-        "probabilityTable.rows.1": "Sv\xE6rt liten",
-        "probabilityTable.rows.2": "Liten",
-        "probabilityTable.rows.3": "Moderat",
-        "probabilityTable.rows.4": "Stor",
-        "probabilityTable.rows.5": "Sv\xE6rt stor",
-        "probabilityTable.cells.1": "Scenarioet er usannsynlig \xE5 inntreffe. Det inntreffer sjeldnere enn hvert 100. \xE5r",
-        "probabilityTable.cells.2": "Scenarioet er lite sannsynlig \xE5 inntreffe. Det kan inntreffe hvert 10. \xE5r",
-        "probabilityTable.cells.3": "Scenarioet kan inntreffe. Det kan inntreffe n\xE6rmest \xE5rlig",
-        "probabilityTable.cells.4": "Scenarioet vil med stor sannsynlighet inntreffe. Det kan inntreffe n\xE6rmest ukentlig",
-        "probabilityTable.cells.5": "Scenarioet er nesten garantert \xE5 inntreffe. Det kan inntreffe n\xE6rmest daglig"
-      }
-    })
-  }
-});
-
 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,
@@ -1806,7 +1373,7 @@ const ScenarioStep = () => {
       {
         selectedValues: scenario.threatActors,
         options: threatActorsOptions,
-        handleChange: setTrusselakt\u00F8rer
+        handleChange: setThreatActors
       }
     )
   ), /* @__PURE__ */ React.createElement(
@@ -1827,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(
@@ -1836,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,
     {
@@ -1903,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")
@@ -1913,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(
@@ -1930,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,
     {
@@ -1955,7 +1499,7 @@ const TiltakEdit = ({
       Dropdown,
       {
         options: actionStatusOptions,
-        selectedValues: tiltak.status,
+        selectedValues: action.status,
         handleChange: setStatus
       }
     )
@@ -1972,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) => ({
@@ -2044,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,
@@ -2079,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",
@@ -2206,11 +1721,26 @@ const useStyle = makeStyles((theme) => ({
     gap: theme.spacing(2)
   }
 }));
-const ScenarioWizardSteps = [
-  "scenario",
-  "initialRisk",
-  "measure",
-  "restRisk"
+
+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",
+  "measure",
+  "restRisk"
 ];
 const ScenarioWizard = ({
   step,
@@ -2220,7 +1750,6 @@ const ScenarioWizard = ({
   const wizardRef = useRef(null);
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { h1, label } = useFontStyles();
-  const classes = useLoadingStyles();
   const {
     root,
     container,
@@ -2230,7 +1759,7 @@ const ScenarioWizard = ({
     buttonContainer,
     buttonContainerRight,
     saveAndNextButtons
-  } = useStyle();
+  } = useWizardStyle();
   const {
     scenario,
     originalScenario,
@@ -2310,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,
@@ -2319,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,
@@ -2361,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,
@@ -2727,178 +1947,185 @@ 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,
-      {
-        className: button,
-        variant: "text",
-        color: "primary",
-        onClick: () => editScenario("initialRisk"),
-        startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
-      }
-    )), /* @__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,
+      RiskBox,
       {
-        item: true,
-        xs: 2,
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }
-      },
-      /* @__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,
-      {
-        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(
+    ),
+    /* @__PURE__ */ React.createElement(
       Grid,
       {
         item: true,
-        xs: 12,
+        xs: 2,
         style: {
           display: "flex",
-          flexDirection: "row",
-          gap: "0.5rem",
+          justifyContent: "center",
           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")))))
+      /* @__PURE__ */ React.createElement(KeyboardDoubleArrowRightIcon, { fontSize: "large" })
+    ),
+    /* @__PURE__ */ React.createElement(
+      RiskBox,
+      {
+        risk: scenario.risk,
+        riskType: "initialRisk",
+        editScenario
+      }
+    )
   ));
 };
-
-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,
@@ -2919,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)
   );
 };
 
@@ -3041,8 +2321,9 @@ const RiskMatrixScenarioCount = ({
   riSc,
   probability,
   consequence,
-  startRisiko
+  initialRisk
 }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const {
     circle,
     centered,
@@ -3052,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,
@@ -3088,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"
   },
@@ -3105,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",
@@ -3125,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,
     {
@@ -3141,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,
     {
@@ -3171,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
       }
     ),
@@ -3179,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,
@@ -3198,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}`,
@@ -3213,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) => ({
@@ -3259,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",
     {
@@ -3300,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,
@@ -3310,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,
     {
@@ -3455,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()
   );
@@ -3462,9 +2749,6 @@ const RiScDialog = ({
     title: null,
     scope: null
   });
-  const classes = useRiScDialogStyles();
-  const { h1 } = useFontStyles();
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
   const handleCancel = () => {
     onClose();
     setNewRiSc(emptyRiSc());
@@ -3487,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
       }
@@ -3548,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")))
     )
   );
 };
@@ -3592,15 +2876,6 @@ const useStatusTextStyles = makeStyles(() => ({
     marginLeft: "2px"
   }
 }));
-makeStyles(() => ({
-  noApprovalBanner: {
-    backgroundColor: "#FCEBCD",
-    color: "#303030"
-  },
-  "MuiAlert-message": {
-    color: "#B2750B"
-  }
-}));
 
 const getChipColor = (status, classes) => {
   switch (status) {
@@ -3671,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(
@@ -3699,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")
     ))
@@ -3715,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();
@@ -3728,7 +3012,7 @@ const RiScStatusComponent = ({
       color: "primary",
       variant: "contained",
       onClick: () => setPublishRiScDialogIsOpen(!publishRiScDialogIsOpen),
-      className: statusComponentClasses.godkjennButton,
+      className: approveButton,
       fullWidth: true,
       disabled: selectedRiSc.status !== RiScStatus.Draft
     },
@@ -3750,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,
     {
@@ -3783,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
   );
@@ -3806,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(() => {
@@ -3821,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,
@@ -3876,4 +3159,4 @@ const RiScPlugin = () => {
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-af063c38.esm.js.map
+//# sourceMappingURL=index-153cf81f.esm.js.map