@kartverket/backstage-plugin-risk-scorecard 1.0.14 → 1.1.0

package/dist/esm/{index-b5d09407.esm.js → index-99d0fef8.esm.js}

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useCallback, createContext, useContext, Fragment, useRef } from 'react';
-import { makeStyles, FormControl, FormLabel, FormHelperText, TextField as TextField$1, Grid, Typography, Box as Box$1, useTheme, Paper, Button, Radio, CircularProgress, Dialog, DialogTitle, DialogActions, Stepper, Step, StepButton, Divider as Divider$1, Drawer, List, ListSubheader, ListItem, ListItemText as ListItemText$1, ClickAwayListener, Tooltip, DialogContent, DialogContentText, IconButton, Tab, LinearProgress } from '@material-ui/core';
+import React, { useState, useEffect, useCallback, Fragment, useRef, forwardRef } from 'react';
+import { makeStyles, FormControl, FormLabel, FormHelperText, TextField as TextField$1, Grid, Typography, Box as Box$1, Paper, Button, useTheme, Radio, CircularProgress, Dialog, DialogTitle, DialogActions, Stepper, Step, StepButton, List, ListSubheader, ListItem, ListItemText as ListItemText$2, ClickAwayListener, Tooltip, DialogContent, DialogContentText, IconButton as IconButton$1, Tab, Link as Link$1, LinearProgress } from '@material-ui/core';
 import { InfoCard, ContentHeader, SupportButton } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useRouteRef, useApi, googleAuthApiRef, identityApiRef, fetchApiRef, configApiRef } from '@backstage/core-plugin-api';
-import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-d8d91dc1.esm.js';
-import { useNavigate, useLocation, useParams } from 'react-router';
+import { r as riScRouteRef, s as scenarioRouteRef, p as pluginRiScTranslationRef } from './index-c11a7a42.esm.js';
+import { useLocation, useNavigate, useParams } from 'react-router';
 import { useEffectOnce } from 'react-use';
 import { useSearchParams, Routes, Route } from 'react-router-dom';
 import Box from '@material-ui/core/Box';
@@ -15,25 +15,38 @@ import FormLabel$1 from '@material-ui/core/FormLabel';
 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 Select$1 from '@material-ui/core/Select';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import Divider from '@mui/material/Divider';
 import Grid$1 from '@mui/material/Grid';
 import AddCircle from '@material-ui/icons/AddCircle';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { nb } from 'date-fns/locale/nb';
 import Button$1 from '@mui/material/Button';
 import Alert from '@mui/material/Alert';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import Box$2 from '@mui/material/Box';
+import Paper$1 from '@mui/material/Paper';
+import Typography$1 from '@mui/material/Typography';
 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 Chip$1 from '@mui/material/Chip';
+import Link from '@mui/material/Link';
 import DeleteIcon$1 from '@mui/icons-material/Delete';
+import Dialog$1 from '@mui/material/Dialog';
+import DialogTitle$1 from '@mui/material/DialogTitle';
+import DialogActions$1 from '@mui/material/DialogActions';
+import { useController, useFieldArray, useForm } from 'react-hook-form';
+import FormControl$2 from '@mui/material/FormControl';
+import FormHelperText$1 from '@mui/material/FormHelperText';
+import FormLabel$2 from '@mui/material/FormLabel';
+import MUISelect from '@mui/material/Select';
+import Checkbox$1 from '@mui/material/Checkbox';
+import MenuItem$1 from '@mui/material/MenuItem';
+import ListItemText$1 from '@mui/material/ListItemText';
+import TextField$2 from '@mui/material/TextField';
+import { AddCircle as AddCircle$1 } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Drawer from '@mui/material/Drawer';
 import CircleIcon from '@material-ui/icons/FiberManualRecord';
 import InfoIcon from '@mui/icons-material/Info';
 import TabContext from '@material-ui/lab/TabContext';
@@ -45,8 +58,10 @@ 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';
+import CheckIcon from '@mui/icons-material/Check';
+import EditIcon from '@mui/icons-material/Edit';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
 
 var RiScStatus = /* @__PURE__ */ ((RiScStatus2) => {
   RiScStatus2["Draft"] = "Draft";
@@ -78,7 +93,7 @@ var ContentStatus = /* @__PURE__ */ ((ContentStatus2) => {
 })(ContentStatus || {});
 
 var $schema = "https://json-schema.org/draft/2020-12/schema";
-var $id = "https://kartverket.github.io/backstage-plugin-risk-scorecard-backend/risc_schema_en_v3_2.json";
+var $id = "https://kartverket.github.io/backstage-plugin-risk-scorecard-backend/risc_schema_en_v3_3.json";
 var title = "Risk Scorecard (RiSc)";
 var description = "Schema for risk scorecard";
 var type = "object";
@@ -86,7 +101,7 @@ var properties = {
 	schemaVersion: {
 		description: "Schema version",
 		type: "string",
-		"default": "'3.2'"
+		"default": "'3.3'"
 	},
 	title: {
 		description: "Title of the risk scorecard",
@@ -390,13 +405,6 @@ const formatter = new Intl.NumberFormat("nb-NO", {
 function formatNOK(amount) {
   return formatter.format(amount);
 }
-function formatDate(date) {
-  return new Date(date).toLocaleDateString("nb-NO", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  });
-}
 function getAlertSeverity(status) {
   switch (status) {
     case ProcessingStatus.UpdatedRiSc:
@@ -415,39 +423,12 @@ function getRiskMatrixColor(risiko) {
 const getProbabilityLevel = (risiko) => probabilityOptions.indexOf(risiko.probability) + 1;
 const getConsequenceLevel = (risiko) => consequenceOptions.indexOf(risiko.consequence) + 1;
 const emptyRiSc = () => ({
-  schemaVersion: "3.2",
+  schemaVersion: "3.3",
   title: "",
   scope: "",
   valuations: [],
   scenarios: []
 });
-const emptyScenario = () => ({
-  ID: generateRandomId(),
-  title: "",
-  description: "",
-  threatActors: [],
-  vulnerabilities: [],
-  risk: {
-    summary: "",
-    probability: 0.01,
-    consequence: 1e3
-  },
-  existingActions: "",
-  actions: [],
-  remainingRisk: {
-    summary: "",
-    probability: 0.01,
-    consequence: 1e3
-  }
-});
-const emptyAction = () => ({
-  ID: generateRandomId(),
-  title: "",
-  description: "",
-  owner: "",
-  deadline: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
-  status: "Not started"
-});
 const requiresNewApproval = (oldRiSc, updatedRiSc) => {
   if (oldRiSc.scenarios.length !== updatedRiSc.scenarios.length) {
     return true;
@@ -505,8 +486,8 @@ function formatNumber(cost, t) {
 function dtoToRiSc(riScDTO) {
   return {
     ...riScDTO,
-    // TODO implementere løsning for migrering, kan bumpe fra 3.1 til 3.2 på denne måten manuelt ved å åpne og lagre riscen:
-    // skjemaVersjon: '3.2',
+    // TODO implementere løsning for migrering, kan bumpe fra 3.2 til 3.3 på denne måten manuelt ved å åpne og lagre riscen:
+    // skjemaVersjon: '3.3',
     scenarios: riScDTO.scenarios.map(dtoToScenario)
   };
 }
@@ -573,7 +554,8 @@ function actionToDTO(action) {
       description: action.description,
       owner: action.owner,
       deadline: action.deadline,
-      status: action.status
+      status: action.status,
+      url: action.url
     }
   };
 }
@@ -651,7 +633,7 @@ const useFetch = () => {
     if (onError)
       onError();
     setResponse({
-      statusMessage: "Failed to fetch JSON schema. Fallback value 3.2 for schema version used",
+      statusMessage: "Failed to fetch JSON schema. Fallback value 3.3 for schema version used",
       status: ProcessingStatus.ErrorWhenFetchingJSONSchema
     });
   });
@@ -717,223 +699,6 @@ const useFetch = () => {
     fetchLatestJSONSchema
   };
 };
-var ScenarioDrawerState = /* @__PURE__ */ ((ScenarioDrawerState2) => {
-  ScenarioDrawerState2[ScenarioDrawerState2["Closed"] = 0] = "Closed";
-  ScenarioDrawerState2[ScenarioDrawerState2["Edit"] = 1] = "Edit";
-  ScenarioDrawerState2[ScenarioDrawerState2["View"] = 2] = "View";
-  return ScenarioDrawerState2;
-})(ScenarioDrawerState || {});
-const emptyScenarioErrors = () => ({
-  title: false
-});
-const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
-  const [scenarioDrawerState, setScenarioDrawerState] = useState(
-    0 /* Closed */
-  );
-  const [isNewScenario, setIsNewScenario] = useState(false);
-  const [scenario, setScenario] = useState(emptyScenario());
-  const [originalScenario, setOriginalScenario] = useState(emptyScenario());
-  const [deleteConfirmationIsOpen, setDeleteConfirmationIsOpen] = useState(false);
-  const [, setSearchParams] = useSearchParams();
-  const [scenarioErrors, setScenarioErrors] = useState(emptyScenarioErrors());
-  const navigate = useNavigate();
-  const getScenarioPath = useRouteRef(scenarioRouteRef);
-  const getRiScPath = useRouteRef(riScRouteRef);
-  useEffect(() => {
-    if (riSc) {
-      if (!scenarioIdFromParams) {
-        setScenarioDrawerState(0 /* Closed */);
-        const s = emptyScenario();
-        setScenario(s);
-        setOriginalScenario(s);
-        setScenarioErrors(emptyScenarioErrors());
-        return;
-      }
-      if (isNewScenario) {
-        return;
-      }
-      const selectedScenario = riSc.content.scenarios.find(
-        (s) => s.ID === scenarioIdFromParams
-      );
-      if (!selectedScenario) {
-        navigate(getRiScPath({ riScId: riSc.id }), {
-          state: "Risikoscenarioet du pr\xF8ver \xE5 \xE5pne eksisterer ikke"
-        });
-        return;
-      }
-      setScenario(selectedScenario);
-      setOriginalScenario(selectedScenario);
-      setScenarioDrawerState(2 /* View */);
-    }
-  }, [riSc, scenarioIdFromParams, getRiScPath, navigate, isNewScenario]);
-  const openScenario = (id) => {
-    if (riSc) {
-      navigate(getScenarioPath({ riScId: riSc.id, scenarioId: id }));
-    }
-  };
-  const openNewScenarioWizard = (id, step) => {
-    if (riSc) {
-      navigate(`${getScenarioPath({ riScId: riSc.id, scenarioId: id })}?step=${step}`);
-    }
-  };
-  const closeScenario = () => {
-    if (riSc) {
-      setIsNewScenario(false);
-      navigate(getRiScPath({ riScId: riSc.id }));
-    }
-  };
-  const editScenario = (step) => {
-    setScenarioDrawerState(0 /* Closed */);
-    setSearchParams({ step });
-  };
-  const validateScenario = () => {
-    if (scenario.title === "") {
-      setScenarioErrors({
-        ...scenarioErrors,
-        title: true
-      });
-      return false;
-    }
-    return true;
-  };
-  const saveScenario = () => {
-    if (riSc) {
-      if (validateScenario()) {
-        const updatedScenarios = riSc.content.scenarios.some(
-          (s) => s.ID === scenario.ID
-        ) ? riSc.content.scenarios.map(
-          (s) => s.ID === scenario.ID ? scenario : s
-        ) : riSc.content.scenarios.concat(scenario);
-        updateRiSc({ ...riSc.content, scenarios: updatedScenarios });
-        return true;
-      }
-    }
-    return false;
-  };
-  const openDeleteConfirmation = () => setDeleteConfirmationIsOpen(true);
-  const abortDeletion = () => setDeleteConfirmationIsOpen(false);
-  const confirmDeletion = () => {
-    if (riSc) {
-      setDeleteConfirmationIsOpen(false);
-      closeScenario();
-      const updatedScenarios = riSc.content.scenarios.filter(
-        (s) => s.ID !== scenario.ID
-      );
-      updateRiSc({ ...riSc.content, scenarios: updatedScenarios });
-    }
-  };
-  const newScenario = () => {
-    if (riSc) {
-      setIsNewScenario(true);
-      const s = emptyScenario();
-      setScenario(s);
-      setOriginalScenario(s);
-      openNewScenarioWizard(s.ID, "scenario");
-    }
-  };
-  const setTitle = (title) => {
-    setScenarioErrors({
-      ...scenarioErrors,
-      title: false
-    });
-    setScenario({
-      ...scenario,
-      title
-    });
-  };
-  const setDescription = (description) => {
-    setScenario({
-      ...scenario,
-      description
-    });
-  };
-  const setThreatActors = (threatActors) => {
-    setScenario({
-      ...scenario,
-      threatActors
-    });
-  };
-  const setVulnerabilities = (vulnerabilities) => {
-    setScenario({
-      ...scenario,
-      vulnerabilities
-    });
-  };
-  const setProbability = (probabilityLevel) => setScenario({
-    ...scenario,
-    risk: {
-      ...scenario.risk,
-      probability: probabilityOptions[probabilityLevel - 1]
-    }
-  });
-  const setConsequence = (consequenceLevel) => setScenario({
-    ...scenario,
-    risk: {
-      ...scenario.risk,
-      consequence: consequenceOptions[consequenceLevel - 1]
-    }
-  });
-  const setExistingActions = (existingActions) => {
-    setScenario({
-      ...scenario,
-      existingActions
-    });
-  };
-  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 deleteAction = (action) => {
-    const updatedAction = scenario.actions.filter((a) => a.ID !== action.ID);
-    setScenario({ ...scenario, actions: updatedAction });
-  };
-  const updateRemainingRisk = (remainingRisk) => setScenario({ ...scenario, remainingRisk });
-  const setRemainingProbability = (probabilityLevel) => setScenario({
-    ...scenario,
-    remainingRisk: {
-      ...scenario.remainingRisk,
-      probability: probabilityOptions[probabilityLevel - 1]
-    }
-  });
-  const setRemainingConsequence = (consequenceLevel) => setScenario({
-    ...scenario,
-    remainingRisk: {
-      ...scenario.remainingRisk,
-      consequence: consequenceOptions[consequenceLevel - 1]
-    }
-  });
-  return {
-    scenarioDrawerState,
-    scenario,
-    originalScenario,
-    newScenario,
-    saveScenario,
-    editScenario,
-    isNewScenario,
-    openScenario,
-    closeScenario,
-    scenarioErrors,
-    validateScenario,
-    deleteConfirmationIsOpen,
-    openDeleteConfirmation,
-    abortDeletion,
-    confirmDeletion,
-    setTitle,
-    setDescription,
-    setThreatActors,
-    setVulnerabilities,
-    setProbability,
-    setConsequence,
-    setExistingActions,
-    addAction,
-    updateAction,
-    deleteAction,
-    updateRemainingRisk,
-    setRemainingProbability,
-    setRemainingConsequence
-  };
-};
 const useFetchRiScs = (riScIdFromParams) => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -975,7 +740,8 @@ const useFetchRiScs = (riScIdFromParams) => {
           return {
             id: riScDTO.riScId,
             content,
-            status: riScDTO.riScStatus
+            status: riScDTO.riScStatus,
+            pullRequestUrl: riScDTO.pullRequestUrl
           };
         });
         setRiScs(fetchedRiScs);
@@ -1043,7 +809,7 @@ const useFetchRiScs = (riScIdFromParams) => {
         );
         const newRiSc = {
           ...riSc,
-          schemaVersion: schemaVersion ? schemaVersion : "3.2"
+          schemaVersion: schemaVersion ? schemaVersion : "3.3"
         };
         postRiScs(
           newRiSc,
@@ -1070,7 +836,7 @@ const useFetchRiScs = (riScIdFromParams) => {
         );
       },
       () => {
-        const fallBackSchemaVersion = "3.2";
+        const fallBackSchemaVersion = "3.3";
         const newRiSc = {
           ...riSc,
           schemaVersion: fallBackSchemaVersion
@@ -1172,53 +938,314 @@ const useFetchRiScs = (riScIdFromParams) => {
   };
 };
 
-const menuProps = {
-  PaperProps: {
-    style: {
-      maxHeight: 255
-    }
-  },
-  getContentAnchorEl: null,
-  anchorOrigin: {
-    vertical: "bottom",
-    horizontal: "center"
-  },
-  transformOrigin: {
-    vertical: "top",
-    horizontal: "center"
-  },
-  variant: "menu"
-};
-const useFontStyles = makeStyles((theme) => ({
-  h1: {
-    fontSize: theme.spacing(4),
-    fontWeight: 700
-  },
-  h2: {
-    fontSize: theme.spacing(3.5),
-    fontWeight: 500
-  },
-  h3: {
-    fontSize: theme.spacing(2.5),
-    fontWeight: 500
-  },
-  body1: {
-    fontSize: theme.spacing(2),
-    fontWeight: 700
+const emptyAction = () => ({
+  ID: generateRandomId(),
+  title: "",
+  description: "",
+  owner: "",
+  deadline: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+  status: "Not started",
+  url: ""
+});
+const emptyScenario = () => ({
+  ID: generateRandomId(),
+  title: "",
+  description: "",
+  threatActors: [],
+  vulnerabilities: [],
+  risk: {
+    summary: "",
+    probability: 0.01,
+    consequence: 1e3
+  },
+  existingActions: "",
+  actions: [],
+  remainingRisk: {
+    summary: "",
+    probability: 0.01,
+    consequence: 1e3
+  }
+});
+const ScenarioContext = React.createContext(
+  void 0
+);
+const ScenarioProvider = ({
+  riSc,
+  updateRiSc,
+  scenarioIdFromParams,
+  children
+}) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isNewScenario, setIsNewScenario] = useState(false);
+  const [formErrors, _setFormErrors] = useState({});
+  const [scenario, setScenario] = useState(emptyScenario());
+  const [originalScenario, setOriginalScenario] = useState(emptyScenario());
+  const [deleteConfirmationIsOpen, setDeleteConfirmationIsOpen] = useState(false);
+  const [, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const getScenarioPath = useRouteRef(scenarioRouteRef);
+  const getRiScPath = useRouteRef(riScRouteRef);
+  useEffect(() => {
+    if (riSc) {
+      if (!scenarioIdFromParams) {
+        setIsDrawerOpen(false);
+        const s = emptyScenario();
+        setScenario(s);
+        setOriginalScenario(s);
+        return;
+      }
+      if (isNewScenario) {
+        return;
+      }
+      const selectedScenario = riSc.content.scenarios.find(
+        (s) => s.ID === scenarioIdFromParams
+      );
+      if (!selectedScenario) {
+        navigate(getRiScPath({ riScId: riSc.id }), {
+          state: "Risikoscenarioet du pr\xF8ver \xE5 \xE5pne eksisterer ikke"
+        });
+        return;
+      }
+      setScenario(selectedScenario);
+      setOriginalScenario(selectedScenario);
+      setIsDrawerOpen(true);
+    }
+  }, [riSc, scenarioIdFromParams, getRiScPath, navigate, isNewScenario]);
+  const openScenario = (id) => {
+    if (riSc) {
+      navigate(getScenarioPath({ riScId: riSc.id, scenarioId: id }));
+    }
+  };
+  const openNewScenarioWizard = (id, step) => {
+    if (riSc) {
+      navigate(
+        `${getScenarioPath({ riScId: riSc.id, scenarioId: id })}?step=${step}`
+      );
+    }
+  };
+  const closeScenario = () => {
+    if (riSc) {
+      setIsNewScenario(false);
+      navigate(getRiScPath({ riScId: riSc.id }));
+    }
+  };
+  const editScenario = (step) => {
+    setSearchParams({ step });
+  };
+  const validateScenario = () => {
+    if (scenario.title === "") {
+      return false;
+    }
+    return true;
+  };
+  const saveScenario = () => {
+    if (riSc) {
+      if (validateScenario()) {
+        const updatedScenarios = riSc.content.scenarios.some(
+          (s) => s.ID === scenario.ID
+        ) ? riSc.content.scenarios.map(
+          (s) => s.ID === scenario.ID ? scenario : s
+        ) : riSc.content.scenarios.concat(scenario);
+        updateRiSc({ ...riSc.content, scenarios: updatedScenarios });
+        return true;
+      }
+    }
+    return false;
+  };
+  const submitEditedScenarioToRiSc = (editedScenario) => {
+    if (riSc) {
+      updateRiSc({
+        ...riSc.content,
+        scenarios: riSc.content.scenarios.map(
+          (s) => s.ID === editedScenario.ID ? editedScenario : s
+        )
+      });
+    }
+  };
+  const openDeleteConfirmation = () => setDeleteConfirmationIsOpen(true);
+  const abortDeletion = () => setDeleteConfirmationIsOpen(false);
+  const confirmDeletion = () => {
+    if (riSc) {
+      setDeleteConfirmationIsOpen(false);
+      closeScenario();
+      const updatedScenarios = riSc.content.scenarios.filter(
+        (s) => s.ID !== scenario.ID
+      );
+      updateRiSc({ ...riSc.content, scenarios: updatedScenarios });
+    }
+  };
+  const newScenario = () => {
+    if (riSc) {
+      setIsNewScenario(true);
+      const s = emptyScenario();
+      setScenario(s);
+      setOriginalScenario(s);
+      openNewScenarioWizard(s.ID, "scenario");
+    }
+  };
+  const setScenarioValue = (key, value2) => {
+    setScenario({
+      ...scenario,
+      [key]: value2
+    });
+  };
+  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 deleteAction = (action) => {
+    const updatedAction = scenario.actions.filter((a) => a.ID !== action.ID);
+    setScenario({ ...scenario, actions: updatedAction });
+  };
+  const setProbability = (probabilityLevel) => setScenario({
+    ...scenario,
+    risk: {
+      ...scenario.risk,
+      probability: probabilityOptions[probabilityLevel - 1]
+    }
+  });
+  const setConsequence = (consequenceLevel) => setScenario({
+    ...scenario,
+    risk: {
+      ...scenario.risk,
+      consequence: consequenceOptions[consequenceLevel - 1]
+    }
+  });
+  const setRemainingProbability = (probabilityLevel) => setScenario({
+    ...scenario,
+    remainingRisk: {
+      ...scenario.remainingRisk,
+      probability: probabilityOptions[probabilityLevel - 1]
+    }
+  });
+  const setRemainingConsequence = (consequenceLevel) => setScenario({
+    ...scenario,
+    remainingRisk: {
+      ...scenario.remainingRisk,
+      consequence: consequenceOptions[consequenceLevel - 1]
+    }
+  });
+  const setProbabilityAndRemainingProbability = (probabilityLevel) => setScenario({
+    ...scenario,
+    risk: {
+      ...scenario.risk,
+      probability: probabilityOptions[probabilityLevel - 1]
+    },
+    remainingRisk: {
+      ...scenario.remainingRisk,
+      probability: probabilityOptions[probabilityLevel - 1]
+    }
+  });
+  const setConsequenceAndRemainingConsequence = (consequenceLevel) => setScenario({
+    ...scenario,
+    risk: {
+      ...scenario.risk,
+      consequence: consequenceOptions[consequenceLevel - 1]
+    },
+    remainingRisk: {
+      ...scenario.remainingRisk,
+      consequence: consequenceOptions[consequenceLevel - 1]
+    }
+  });
+  const setFormError = (key) => {
+    _setFormErrors({ ...formErrors, [key]: true });
+  };
+  const removeFormError = (key) => {
+    delete formErrors[key];
+    _setFormErrors({ ...formErrors });
+  };
+  const formFieldHasErrors = (key) => Object.keys(formErrors).includes(key);
+  const hasFormErrors = () => Object.keys(formErrors).length > 0;
+  const value = {
+    isDrawerOpen,
+    scenario,
+    originalScenario,
+    newScenario,
+    saveScenario,
+    editScenario,
+    isNewScenario,
+    submitEditedScenarioToRiSc,
+    openScenario,
+    closeScenario,
+    validateScenario,
+    deleteConfirmationIsOpen,
+    openDeleteConfirmation,
+    abortDeletion,
+    confirmDeletion,
+    setScenarioValue,
+    addAction,
+    updateAction,
+    deleteAction,
+    setProbability,
+    setConsequence,
+    setRemainingProbability,
+    setRemainingConsequence,
+    setProbabilityAndRemainingProbability,
+    setConsequenceAndRemainingConsequence,
+    setFormError,
+    hasFormErrors,
+    removeFormError,
+    formFieldHasErrors
+  };
+  return /* @__PURE__ */ React.createElement(ScenarioContext.Provider, { value }, children);
+};
+const useScenario = () => {
+  const context = React.useContext(ScenarioContext);
+  if (context === void 0) {
+    throw new Error("useScenario must be used within a ScenarioProvider");
+  }
+  return context;
+};
+
+const menuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: 255
+    }
+  },
+  getContentAnchorEl: null,
+  anchorOrigin: {
+    vertical: "bottom",
+    horizontal: "center"
+  },
+  transformOrigin: {
+    vertical: "top",
+    horizontal: "center"
+  },
+  variant: "menu"
+};
+const useFontStyles = makeStyles((theme) => ({
+  h1: {
+    fontSize: theme.spacing(4),
+    fontWeight: 700
+  },
+  h2: {
+    fontSize: theme.spacing(3.5),
+    fontWeight: 500
+  },
+  h3: {
+    fontSize: theme.spacing(2.5),
+    fontWeight: 500
+  },
+  body1: {
+    fontSize: theme.spacing(2),
+    fontWeight: 500
   },
   body2: {
     fontSize: theme.spacing(2),
-    fontWeight: 400
+    fontWeight: 400,
+    whiteSpace: "pre-line"
   },
   label: {
     fontSize: theme.spacing(1.75),
-    fontWeight: 500,
+    fontWeight: 700,
     textTransform: "uppercase",
     color: theme.palette.type === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)",
     paddingBottom: "0.4rem"
   },
   labelSubtitle: {
-    fontSize: theme.spacing(1.5),
+    fontSize: theme.spacing(1.75),
     fontWeight: 400,
     color: theme.palette.type === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)",
     paddingBottom: "0.4rem",
@@ -1244,9 +1271,6 @@ const useFontStyles = makeStyles((theme) => ({
     paddingBottom: "1rem",
     marginTop: "-0.2rem"
   },
-  button: {
-    textTransform: "none"
-  },
   risikoLevel: {
     fontSize: theme.spacing(2.25),
     fontWeight: 700,
@@ -1299,14 +1323,40 @@ const TextField = ({
   label,
   subtitle,
   value,
-  error,
   required,
   minRows = 1,
-  handleChange
+  handleChange,
+  validateInput,
+  errorMessage,
+  errorKey
 }) => {
+  const [hasError, setHasError] = useState(false);
+  const { setFormError, removeFormError, formFieldHasErrors } = useScenario();
   const { formLabel, formControl, root } = useInputFieldStyles();
   const { labelSubtitle } = useFontStyles();
-  const onChange = (event) => handleChange && handleChange(event.target.value);
+  const onChange = (event) => {
+    if (handleChange) {
+      handleChange(event.target.value);
+    }
+  };
+  const onBlur = (event) => {
+    if (!validateInput && !required) {
+      return;
+    }
+    const isValid = validateInput ? validateInput(event.target.value) : true;
+    const requiredValid = required ? event.target.value.length > 0 : true;
+    const validationResult = isValid && requiredValid;
+    setHasError(!validationResult);
+    if (!errorKey) {
+      return;
+    }
+    if (validationResult) {
+      removeFormError(errorKey);
+    } else {
+      setFormError(errorKey);
+    }
+  };
+  const fieldError = hasError || (errorKey ? formFieldHasErrors(errorKey) : false);
   return /* @__PURE__ */ React.createElement(FormControl, { className: formControl }, label && /* @__PURE__ */ React.createElement(FormLabel, { className: formLabel, required }, label), subtitle && /* @__PURE__ */ React.createElement(FormHelperText, { className: labelSubtitle }, subtitle), /* @__PURE__ */ React.createElement(
     TextField$1,
     {
@@ -1319,10 +1369,11 @@ const TextField = ({
       minRows,
       variant: "outlined",
       onChange,
-      error: !!error,
+      error: fieldError,
+      onBlur,
       InputProps: { className: root }
     }
-  ), error && /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, error));
+  ), fieldError && /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, errorMessage));
 };
 
 const Dropdown = ({
@@ -1363,7 +1414,7 @@ const Dropdown = ({
     selected.map((value) => /* @__PURE__ */ React.createElement(Chip, { key: value, label: renderSelectedValueHandler(value) }))
   ) : selected;
   return /* @__PURE__ */ React.createElement(FormControl$1, { className: formControl }, label && /* @__PURE__ */ React.createElement(FormLabel$1, { className: formLabel, required }, label), /* @__PURE__ */ React.createElement(
-    Select,
+    Select$1,
     {
       multiple,
       value: selectedValues,
@@ -1380,23 +1431,19 @@ const Dropdown = ({
         }
       } : {}
     },
-    options.map((name) => /* @__PURE__ */ React.createElement(MenuItem, { key: getOptionsValue(name), value: getOptionsValue(name) }, multiple && /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Checkbox, { checked: selectedValues.indexOf(getOptionsValue(name)) > -1 })), /* @__PURE__ */ React.createElement(ListItemText, { primary: getOptionsRenderValue(name) })))
+    options.map((name) => /* @__PURE__ */ React.createElement(MenuItem, { key: getOptionsValue(name), value: getOptionsValue(name) }, multiple && /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        checked: selectedValues.indexOf(getOptionsValue(name)) > -1
+      }
+    )), /* @__PURE__ */ React.createElement(ListItemText, { primary: getOptionsRenderValue(name) })))
   ), error && /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, error));
 };
 
-const ScenarioContext = createContext(null);
-
 const ScenarioStep = () => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { labelSubtitle, label, h2, subtitle2 } = useFontStyles();
-  const {
-    scenario,
-    scenarioErrors,
-    setTitle,
-    setDescription,
-    setThreatActors,
-    setVulnerabilities
-  } = useContext(ScenarioContext);
+  const { scenario, setScenarioValue } = useScenario();
   const translatedThreatActors = threatActorsOptions.map((threatActor) => {
     return {
       value: threatActor,
@@ -1404,22 +1451,25 @@ const ScenarioStep = () => {
       renderedValue: t(`threatActors.${threatActor}`)
     };
   });
-  const translatedVulnerabilities = vulnerabilitiesOptions.map((vulnerability) => {
-    return {
-      value: vulnerability,
-      /* @ts-ignore Because ts can't typecheck strings agains our keys */
-      renderedValue: t(`vulnerabilities.${vulnerability}`)
-    };
-  });
+  const translatedVulnerabilities = vulnerabilitiesOptions.map(
+    (vulnerability) => {
+      return {
+        value: vulnerability,
+        /* @ts-ignore Because ts can't typecheck strings agains our keys */
+        renderedValue: t(`vulnerabilities.${vulnerability}`)
+      };
+    }
+  );
   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.title ? t("scenarioDrawer.titleError") : "",
+      errorMessage: t("scenarioDrawer.titleError"),
+      errorKey: "scenario-title",
       required: true,
       minRows: 1,
-      handleChange: setTitle
+      handleChange: (value) => setScenarioValue("title", value)
     }
   )), /* @__PURE__ */ React.createElement(
     Grid,
@@ -1438,7 +1488,7 @@ const ScenarioStep = () => {
       {
         selectedValues: scenario.threatActors,
         options: translatedThreatActors,
-        handleChange: setThreatActors,
+        handleChange: (value) => setScenarioValue("threatActors", value),
         renderSelectedValue: (value) => {
           return t(`threatActors.${value}`);
         }
@@ -1461,7 +1511,7 @@ const ScenarioStep = () => {
       {
         selectedValues: scenario.vulnerabilities,
         options: translatedVulnerabilities,
-        handleChange: setVulnerabilities,
+        handleChange: (value) => setScenarioValue("vulnerabilities", value),
         renderSelectedValue: (value) => {
           return t(`vulnerabilities.${value}`);
         }
@@ -1473,7 +1523,7 @@ const ScenarioStep = () => {
       label: t("dictionary.description"),
       value: scenario.description,
       minRows: 4,
-      handleChange: setDescription
+      handleChange: (value) => setScenarioValue("description", value)
     }
   )));
 };
@@ -1485,30 +1535,13 @@ const ActionEdit = ({
   deleteAction
 }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { paper, formControl } = useInputFieldStyles();
-  const { label, labelSubtitle } = useFontStyles();
-  const theme = useTheme();
-  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 { paper } = useInputFieldStyles();
+  const { label } = useFontStyles();
+  const setActionField = (field, value) => updateAction({ ...action, [field]: value });
+  const validateUrl = (value) => {
+    const urlRegex = /^https?:\/\/[a-z\d.-]+\.[a-z]{2,6}(\/[\w .-]*)*\/?$/;
+    return urlRegex.test(value);
   };
-  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,
     {
@@ -1536,24 +1569,24 @@ const ActionEdit = ({
     {
       label: t("dictionary.description"),
       value: action.description,
-      handleChange: setDescription,
-      minRows: 1
+      handleChange: (value) => setActionField("description", value),
+      errorMessage: t("scenarioDrawer.action.descriptionError"),
+      errorKey: `${index}-action-description`,
+      minRows: 1,
+      required: true
     }
-  )), /* @__PURE__ */ React.createElement(
-    Grid,
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 9, xs: 12 }, /* @__PURE__ */ React.createElement(
+    TextField,
     {
-      item: true,
-      md: 6,
-      xs: 12,
-      style: {
-        display: "flex",
-        flexDirection: "column"
-      }
-    },
-    /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measureOwner")),
-    /* @__PURE__ */ React.createElement(Typography, { className: labelSubtitle }, t("scenarioDrawer.measureTab.measureOwnerDescription")),
-    /* @__PURE__ */ React.createElement(TextField, { value: action.owner, handleChange: setOwner, minRows: 1 })
-  ), /* @__PURE__ */ React.createElement(
+      label: t("dictionary.url"),
+      value: action.url,
+      handleChange: (value) => setActionField("url", value),
+      validateInput: validateUrl,
+      errorMessage: t("scenarioDrawer.action.urlError"),
+      minRows: 1,
+      errorKey: `${index}-action-url`
+    }
+  )), /* @__PURE__ */ React.createElement(
     Grid,
     {
       item: true,
@@ -1561,75 +1594,33 @@ const ActionEdit = ({
       xs: 12,
       style: {
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-end"
+        flexDirection: "column"
       }
     },
-    /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.status")),
     /* @__PURE__ */ React.createElement(
       Dropdown,
       {
-        options: actionStatusOptions,
-        selectedValues: action.status,
-        handleChange: setStatus
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      item: true,
-      md: 3,
-      xs: 12,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-end"
-      }
-    },
-    /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.deadline")),
-    /* @__PURE__ */ React.createElement(FormControl$1, { className: formControl }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: nb }, /* @__PURE__ */ React.createElement(
-      DatePicker,
-      {
-        value: action.deadline,
-        onChange: setDeadline,
-        sx: {
-          ".MuiInputBase-root": {
-            color: theme.palette.type === "dark" ? "white" : "black"
-          },
-          ".MuiOutlinedInput-notchedOutline": {
-            borderColor: theme.palette.type === "dark" ? "#616161" : "#0000003b"
-          },
-          ".MuiOutlinedInput-root": {
-            "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: theme.palette.type === "dark" ? "white" : "black"
-            }
-          },
-          ".MuiIconButton-root": {
-            color: theme.palette.type === "dark" ? "white" : "black"
-          }
-        }
+        options: actionStatusOptions,
+        selectedValues: action.status,
+        handleChange: (value) => setActionField("status", value),
+        label: t("dictionary.status"),
+        required: true
       }
-    )))
+    )
   )));
 };
 
 const ActionsStep = () => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { h2, subtitle2, actionSubtitle } = useFontStyles();
-  const {
-    scenario,
-    setExistingActions,
-    updateAction,
-    deleteAction,
-    addAction
-  } = useContext(ScenarioContext);
+  const { scenario, setScenarioValue, updateAction, deleteAction, addAction } = useScenario();
   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: setExistingActions,
+      handleChange: (value) => setScenarioValue("existingActions", value),
       minRows: 3
     }
   )), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: actionSubtitle }, t("scenarioDrawer.measureTab.plannedMeasures")), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(
@@ -1690,12 +1681,11 @@ const ProbabilityTable = ({
   const theme = useTheme();
   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),
+      onChange: () => handleChange(row),
       style: {
         padding: 0,
         color: theme.palette.type === "dark" ? "#9BC9FE" : theme.palette.primary.main
@@ -1713,13 +1703,12 @@ const ConsequenceTable = ({
   const theme = useTheme();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   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,
       {
         checked: selectedValue === row,
-        onChange: handleChangeRow(row),
+        onChange: () => handleChange(row),
         style: {
           padding: 0,
           color: theme.palette.type === "dark" ? theme.palette.primary.light : theme.palette.primary.main
@@ -1758,41 +1747,45 @@ const RiskStep = ({ riskType, restEqualsInitial }) => {
     setConsequence,
     setProbability,
     setRemainingConsequence,
-    setRemainingProbability
-  } = useContext(ScenarioContext);
+    setRemainingProbability,
+    setProbabilityAndRemainingProbability,
+    setConsequenceAndRemainingConsequence
+  } = useScenario();
   const resourceKey = riskType === "initial" ? "initialRiskStep" : "restRiskStep";
   const risk = riskType === "initial" ? scenario.risk : scenario.remainingRisk;
-  useEffect(() => {
-    if (restEqualsInitial)
-      setRemainingConsequence(getConsequenceLevel(scenario.risk));
-  }, [
-    restEqualsInitial,
-    scenario.risk,
-    scenario.risk.consequence,
-    setRemainingConsequence
-  ]);
-  useEffect(() => {
-    if (restEqualsInitial)
-      setRemainingProbability(getProbabilityLevel(scenario.risk));
-  }, [
-    restEqualsInitial,
-    scenario.risk,
-    scenario.risk.probability,
-    setRemainingProbability
-  ]);
-  const setC = riskType === "initial" ? setConsequence : setRemainingConsequence;
-  const setP = riskType === "initial" ? setProbability : setRemainingProbability;
+  const handleProbabilityChange = (probabilityLevel) => {
+    if (riskType === "initial") {
+      if (restEqualsInitial) {
+        setProbabilityAndRemainingProbability(probabilityLevel);
+      } else {
+        setProbability(probabilityLevel);
+      }
+    } else {
+      setRemainingProbability(probabilityLevel);
+    }
+  };
+  const handleConsequenceChange = (consequenceLevel) => {
+    if (riskType === "initial") {
+      if (restEqualsInitial) {
+        setConsequenceAndRemainingConsequence(consequenceLevel);
+      } else {
+        setConsequence(consequenceLevel);
+      }
+    } else {
+      setRemainingConsequence(consequenceLevel);
+    }
+  };
   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: getProbabilityLevel(risk),
-      handleChange: setP
+      handleChange: handleProbabilityChange
     }
   )), /* @__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: getConsequenceLevel(risk),
-      handleChange: setC
+      handleChange: handleConsequenceChange
     }
   )));
 };
@@ -1889,8 +1882,9 @@ const ScenarioWizard = ({
     saveScenario,
     closeScenario,
     editScenario,
-    validateScenario
-  } = useContext(ScenarioContext);
+    validateScenario,
+    hasFormErrors
+  } = useScenario();
   const [showCloseConfirmation, setShowCloseConfirmation] = useState(false);
   const [restEqualsInitial, setRestEqualsInitial] = useState(isNewScenario);
   const [canCloseIfSuccessfull, setCanCloseIfSuccessfull] = useState(false);
@@ -1911,6 +1905,9 @@ const ScenarioWizard = ({
     }
   }, [canCloseIfSuccessfull, close, updateStatus]);
   const saveAndClose = () => {
+    if (hasFormErrors()) {
+      return;
+    }
     saveScenario();
     setCanCloseIfSuccessfull(true);
   };
@@ -2023,396 +2020,555 @@ const ScenarioWizard = ({
   ));
 };
 
-const useScenarioDrawerStyles = makeStyles((theme) => ({
-  drawer: {
-    padding: theme.spacing(4),
-    width: "50%",
-    [theme.breakpoints.down("sm")]: {
-      width: "90%",
-      padding: theme.spacing(2)
-    }
-  },
-  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"
-  },
-  gridContainer: {
-    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 section = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "16px",
+  width: "100%",
+  padding: 2
+};
+
+const formLabel = (theme) => ({
+  fontSize: theme.spacing(1.75),
+  fontWeight: 700,
+  textTransform: "uppercase",
+  marginBottom: theme.spacing(1),
+  color: theme.palette.mode === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)"
+});
+const heading1 = (theme) => ({
+  fontSize: theme.spacing(4),
+  fontWeight: 700
+});
+const heading3 = (theme) => ({
+  fontSize: theme.spacing(2.5),
+  fontWeight: 500
+});
+const body1 = (theme) => ({
+  fontSize: theme.spacing(2),
+  fontWeight: 500
+});
+const body2 = (theme) => ({
+  fontSize: theme.spacing(2),
+  fontWeight: 400,
+  whiteSpace: "pre-line"
+});
+const label = (theme) => ({
+  fontSize: theme.spacing(1.75),
+  fontWeight: 700,
+  textTransform: "uppercase",
+  color: theme.palette.mode === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)",
+  paddingBottom: "0.4rem"
+});
+const labelSubtitle = (theme) => ({
+  fontSize: theme.spacing(1.75),
+  fontWeight: 400,
+  color: theme.palette.mode === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)",
+  paddingBottom: "0.4rem",
+  marginTop: "-0.2rem"
+});
+const label2 = (theme) => ({
+  fontSize: theme.spacing(1.75),
+  fontWeight: 700,
+  textTransform: "uppercase",
+  color: theme.palette.mode === "dark" ? "#F8F8F8" : "rgba(0, 0, 0, 0.87)"
+});
 
-const RiskBox = ({ risk, riskType, editScenario }) => {
-  const { risikoBadge, titleAndButton, section, editIcon } = useScenarioDrawerStyles();
-  const { h3, body1, label, button } = useFontStyles();
+const RiskBox = ({ risk, riskType }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  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(riskType),
-      startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(
-    Grid,
+  return /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t(`dictionary.${riskType}`)), /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(
+    Box$2,
     {
-      item: true,
-      xs: 12,
-      style: {
+      sx: {
         display: "flex",
-        flexDirection: "row",
-        gap: "0.5rem",
-        alignItems: "center"
+        alignItems: "center",
+        gap: 1
       }
     },
     /* @__PURE__ */ React.createElement(
       Box$2,
       {
-        className: risikoBadge,
-        style: {
+        sx: {
+          width: "20px",
+          height: "48px",
+          borderRadius: 1,
           backgroundColor: getRiskMatrixColor(risk)
         }
       }
     ),
     /* @__PURE__ */ React.createElement(
-      Grid,
+      Box$2,
       {
-        item: true,
-        xs: 12,
-        style: {
+        sx: {
           display: "flex",
           flexDirection: "column",
-          alignItems: "start"
+          alignItems: "start",
+          gap: 0.5
         }
       },
-      /* @__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(Typography$1, { sx: label2 }, t("dictionary.probability"), ": ", getProbabilityLevel(risk)),
+      /* @__PURE__ */ React.createElement(Typography$1, { sx: label2 }, t("dictionary.consequence"), ": ", getConsequenceLevel(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(risk.consequence * risk.probability), " ", t("riskMatrix.estimatedRisk.unit.nokPerYear")))));
+  )), /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("dictionary.estimatedRisk")), /* @__PURE__ */ React.createElement(Typography$1, { sx: body1 }, formatNOK(risk.consequence * risk.probability), " ", t("riskMatrix.estimatedRisk.unit.nokPerYear"))));
 };
 const RiskSection = () => {
-  const { scenario, editScenario } = useContext(ScenarioContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  const { scenario } = useScenario();
+  return /* @__PURE__ */ React.createElement(Box$2, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React.createElement(RiskBox, { risk: scenario.risk, riskType: "initialRisk" }), /* @__PURE__ */ React.createElement(KeyboardDoubleArrowRightIcon, { sx: { fontSize: "48px" } }), /* @__PURE__ */ React.createElement(RiskBox, { risk: scenario.remainingRisk, riskType: "restRisk" }));
+};
+
+const ActionBox = ({ action, index, saveScenario }) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const [previousAction, setPreviousAction] = useState(action);
+  useEffect(() => {
+    if (previousAction !== action) {
+      saveScenario();
+      setPreviousAction(action);
+    }
+  }, [action, saveScenario, previousAction]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("dictionary.measure"), " ", index), /* @__PURE__ */ React.createElement(Typography$1, { sx: body2 }, action.description)), /* @__PURE__ */ React.createElement(
     Box$2,
     {
-      style: {
+      sx: {
         display: "flex",
-        flexDirection: "row",
-        alignItems: "center"
+        justifyContent: "space-between",
+        alignItems: "end"
       }
     },
-    /* @__PURE__ */ React.createElement(
-      RiskBox,
-      {
-        risk: scenario.risk,
-        riskType: "initialRisk",
-        editScenario
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Grid,
+    /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("dictionary.url")), action.url ? /* @__PURE__ */ React.createElement(
+      Link,
       {
-        item: true,
-        xs: 2,
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }
+        sx: body2,
+        target: "_blank",
+        rel: "noreferrer",
+        href: action.url.startsWith("http") ? action.url : `//${action.url}`
       },
-      /* @__PURE__ */ React.createElement(KeyboardDoubleArrowRightIcon, { fontSize: "large" })
-    ),
+      action.url
+    ) : /* @__PURE__ */ React.createElement(Typography$1, { sx: body2 }, t("dictionary.emptyUrl"))),
     /* @__PURE__ */ React.createElement(
-      RiskBox,
+      Chip$1,
       {
-        risk: scenario.remainingRisk,
-        riskType: "restRisk",
-        editScenario
+        label: action.status,
+        sx: {
+          margin: 0,
+          backgroundColor: action.status === "Completed" ? { backgroundColor: "#6BC6A4" } : void 0
+        }
       }
     )
   ));
 };
 
-const useActionBoxStyles = makeStyles((theme) => ({
-  alignCenter: {
-    display: "flex",
-    alignItems: "center"
-  },
-  justifyEnd: {
-    display: "flex",
-    justifyContent: "flex-end"
-  },
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    padding: theme.spacing(1)
-  },
-  column: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center"
-  },
-  paddingTop: {
-    paddingTop: theme.spacing(2)
-  },
-  actionDescription: {
-    marginTop: theme.spacing(-2)
-  },
-  chipDropdown: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-end"
-  }
-}));
+const ActionsSection = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { scenario, saveScenario } = useScenario();
+  return /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("scenarioDrawer.measureTab.title")), scenario.existingActions && /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("scenarioDrawer.measureTab.existingMeasure")), /* @__PURE__ */ React.createElement(Typography$1, { sx: body2 }, scenario.existingActions)), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(Fragment, { key: action.ID }, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
+    ActionBox,
+    {
+      action,
+      index: index + 1,
+      saveScenario
+    }
+  ))));
+};
+
+const DeleteConfirmation = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { deleteConfirmationIsOpen, abortDeletion, confirmDeletion } = useScenario();
+  return /* @__PURE__ */ React.createElement(Dialog$1, { open: deleteConfirmationIsOpen }, /* @__PURE__ */ React.createElement(DialogTitle$1, null, t("scenarioDrawer.deleteScenarioConfirmation")), /* @__PURE__ */ React.createElement(DialogActions$1, { sx: { gap: 1, paddingX: 3, paddingY: 2 } }, /* @__PURE__ */ React.createElement(Button$1, { onClick: abortDeletion }, t("dictionary.cancel")), /* @__PURE__ */ React.createElement(Button$1, { onClick: confirmDeletion, variant: "contained", color: "error" }, t("scenarioDrawer.deleteScenarioButton"))));
+};
+
+const ScopeSection = () => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { scenario } = useScenario();
+  return /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(Typography$1, { sx: heading1 }, scenario.title), /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("dictionary.description")), /* @__PURE__ */ React.createElement(Typography$1, { sx: body2 }, scenario.description)), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box$2, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 } }, /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("dictionary.threatActors")), scenario.threatActors.map((threatActor) => /* @__PURE__ */ React.createElement(Typography$1, { key: threatActor, sx: body2 }, threatActor))), /* @__PURE__ */ React.createElement(Box$2, null, /* @__PURE__ */ React.createElement(Typography$1, { sx: label }, t("dictionary.vulnerabilities")), scenario.vulnerabilities.map((vulnerability) => /* @__PURE__ */ React.createElement(Typography$1, { key: vulnerability, sx: body2 }, vulnerability)))));
+};
 
-const ChipDropdown = ({
+const Select = ({
+  label,
+  sublabel,
+  error,
+  helperText,
+  required,
+  control,
+  name,
+  multiple,
+  labelTranslationKey,
   options,
-  selectedValue,
-  handleChange
+  ...props
 }) => {
-  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: selectedValue === "Completed" ? "#6BC6A4" : "#D9D9D9",
-        color: "#000000"
-      },
-      label: selectedValue,
-      onClick: (e) => {
-        setAnchorEl(e.currentTarget);
-        setMenuAnchorEl(e.currentTarget);
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { field } = useController({
+    name,
+    control,
+    rules: { required }
+  });
+  const renderValue = (values) => {
+    var _a;
+    return multiple ? /* @__PURE__ */ React.createElement(
+      Box$2,
+      {
+        sx: {
+          display: "flex",
+          flexWrap: "wrap",
+          marginBottom: 0,
+          paddingBottom: 0
+        }
       },
-      icon: /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, { style: { color: "#000000" } })
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Menu,
+      values.map((value) => /* @__PURE__ */ React.createElement(
+        Chip$1,
+        {
+          key: value,
+          label: (
+            /* @ts-ignore Because ts can't typecheck strings against our keys */
+            labelTranslationKey ? t(`${labelTranslationKey}.${value}`) : value
+          )
+        }
+      ))
+    ) : (_a = options.find((option) => option.value === values)) == null ? void 0 : _a.renderedValue;
+  };
+  const handleChecked = (fieldValue, optionValue) => {
+    if (Array.isArray(fieldValue))
+      return fieldValue.includes(optionValue);
+    return fieldValue === optionValue;
+  };
+  return /* @__PURE__ */ React.createElement(FormControl$2, { sx: { width: "100%" } }, label && /* @__PURE__ */ React.createElement(FormLabel$2, { sx: formLabel, required }, label), sublabel && /* @__PURE__ */ React.createElement(FormHelperText$1, { sx: labelSubtitle }, sublabel), /* @__PURE__ */ React.createElement(
+    MUISelect,
     {
-      anchorEl: menuAnchorEl,
-      open: Boolean(anchorEl),
-      onClose: () => setAnchorEl(null),
-      getContentAnchorEl: null,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
+      MenuProps: {
+        disablePortal: true
       },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      }
+      variant: "outlined",
+      renderValue,
+      multiple,
+      SelectDisplayProps: multiple ? {
+        style: {
+          paddingBottom: 8,
+          paddingTop: 16,
+          minHeight: 40
+        }
+      } : {},
+      inputRef: field.ref,
+      ...field,
+      ...props
     },
-    options.map((item) => /* @__PURE__ */ React.createElement(MenuItem, { key: item, onClick: () => handleClick(item) }, item))
-  ));
+    options.map((option) => /* @__PURE__ */ React.createElement(MenuItem$1, { key: option.value, value: option.value }, multiple && /* @__PURE__ */ React.createElement(Checkbox$1, { checked: handleChecked(field.value, option.value) }), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: option.renderedValue })))
+  ), error && /* @__PURE__ */ React.createElement(FormHelperText$1, { error: true }, helperText));
 };
 
-const ActionBox = ({
-  action,
-  index,
-  updateAction,
-  saveScenario
+const ScenarioForm = ({
+  formMethods
 }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { body2, label } = useFontStyles();
-  const { gridContainer } = useScenarioDrawerStyles();
-  const {
-    alignCenter,
-    row,
-    paddingTop,
-    actionDescription,
-    column,
-    chipDropdown
-  } = 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, className: paddingTop }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measure"), " ", index))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: actionDescription }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, action.description)), /* @__PURE__ */ React.createElement(Grid, { container: true, xs: 12, className: row }, /* @__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, { container: true, xs: 4, className: column }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.deadline")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, formatDate(action.deadline))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3, className: chipDropdown }, /* @__PURE__ */ React.createElement(
-    ChipDropdown,
+  const { control } = formMethods;
+  const probabilityValues = probabilityOptions.map((value, index) => ({
+    value,
+    /* @ts-ignore Because ts can't typecheck strings against our keys */
+    renderedValue: `${index + 1}: ${t(`probabilityTable.rows.${index + 1}`)}`
+  }));
+  const consequenceValues = consequenceOptions.map((value, index) => ({
+    value,
+    /* @ts-ignore Because ts can't typecheck strings against our keys */
+    renderedValue: `${index + 1}: ${t(`consequenceTable.rows.${index + 1}`)}`
+  }));
+  return /* @__PURE__ */ React.createElement(
+    Box$2,
     {
-      options: actionStatusOptions,
-      selectedValue: action.status,
-      handleChange: setStatus
-    }
-  ))));
+      sx: {
+        display: "flex",
+        gap: "24px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("dictionary.initialRisk")), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        control,
+        name: "risk.probability",
+        label: t("dictionary.probability"),
+        options: probabilityValues
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        control,
+        name: "risk.consequence",
+        label: t("dictionary.consequence"),
+        options: consequenceValues
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("dictionary.restRisk")), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        control,
+        name: "remainingRisk.probability",
+        label: t("dictionary.probability"),
+        options: probabilityValues
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        control,
+        name: "remainingRisk.consequence",
+        label: t("dictionary.consequence"),
+        options: consequenceValues
+      }
+    ))
+  );
 };
 
-const ExistingActionBox = ({
-  existingAction
-}) => {
-  const { body2 } = useFontStyles();
-  const { gridContainer } = useScenarioDrawerStyles();
-  const { alignCenter } = useActionBoxStyles();
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, className: gridContainer }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: alignCenter }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, existingAction)));
-};
+const Input = forwardRef(
+  ({ label, sublabel, error, helperText, required, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(FormControl$2, { sx: { width: "100%" }, error, required }, label && /* @__PURE__ */ React.createElement(FormLabel$2, { required, sx: formLabel }, label), sublabel && /* @__PURE__ */ React.createElement(FormHelperText$1, { sx: labelSubtitle }, sublabel), /* @__PURE__ */ React.createElement(
+      TextField$2,
+      {
+        id: "filled-multiline-static",
+        error,
+        multiline: true,
+        fullWidth: true,
+        variant: "outlined",
+        inputRef: ref,
+        InputProps: {
+          sx: (theme) => ({
+            "&.Mui-disabled": {
+              color: theme.palette.mode === "dark" ? "#FFFFFF80" : "#757575"
+            }
+          })
+        },
+        ...props
+      }
+    ), helperText && /* @__PURE__ */ React.createElement(FormHelperText$1, null, helperText));
+  }
+);
 
-const ActionsSection = () => {
+const ActionFormSection = ({
+  formMethods
+}) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { h3, button, label } = 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,
+  const { control, register } = formMethods;
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "actions"
+  });
+  return /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("dictionary.measure")), /* @__PURE__ */ React.createElement(
+    Input,
     {
-      item: true,
-      xs: 12,
-      className: titleAndButton,
-      style: {
-        marginBottom: "12px"
+      ...register("existingActions"),
+      label: t("scenarioDrawer.measureTab.existingMeasure"),
+      minRows: 3
+    }
+  ), fields.map((field, index) => /* @__PURE__ */ React.createElement(Fragment, { key: field.ID }, /* @__PURE__ */ React.createElement(Divider, { variant: "fullWidth" }), /* @__PURE__ */ React.createElement(
+    Box$2,
+    {
+      sx: {
+        display: "grid",
+        gap: "24px",
+        padding: 0
       }
     },
-    /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("scenarioDrawer.measureTab.actionsTitle")),
     /* @__PURE__ */ React.createElement(
-      Button,
+      Box$2,
       {
-        className: button,
-        variant: "text",
-        color: "primary",
-        onClick: () => editScenario("measure"),
-        startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("scenarioDrawer.measureTab.title"), " ", index),
+      /* @__PURE__ */ React.createElement(IconButton, { onClick: () => remove(index), color: "primary" }, /* @__PURE__ */ React.createElement(DeleteIcon$1, { "aria-label": "Edit" }))
+    ),
+    /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        required: true,
+        ...register(`actions.${index}.description`, { required: true }),
+        label: t("dictionary.description")
       }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box$2,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "2fr 1fr",
+          gap: "24px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          required: true,
+          ...register(`actions.${index}.url`, { required: true }),
+          label: t("dictionary.url")
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Select,
+        {
+          required: true,
+          control,
+          name: `actions.${index}.status`,
+          label: t("dictionary.status"),
+          options: actionStatusOptions.map((value) => ({
+            value,
+            renderedValue: value
+          }))
+        }
+      )
     )
-  ), scenario.existingActions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("scenarioDrawer.measureTab.existingMeasure")), /* @__PURE__ */ React.createElement(ExistingActionBox, { existingAction: scenario.existingActions }), scenario.actions.length > 0 && /* @__PURE__ */ React.createElement(Divider$1, { variant: "fullWidth" })), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(Fragment, { key: action.ID }, /* @__PURE__ */ React.createElement(
-    ActionBox,
+  ))), /* @__PURE__ */ React.createElement(
+    Button$1,
     {
-      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"))));
+      startIcon: /* @__PURE__ */ React.createElement(AddCircle$1, null),
+      color: "primary",
+      onClick: () => append(emptyAction())
+    },
+    t("scenarioDrawer.measureTab.addMeasureButton")
+  ));
 };
 
-const ScopeSection = () => {
+const ScenarioFormSection = ({
+  formMethods
+}) => {
   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,
+  const {
+    control,
+    register,
+    formState: { errors }
+  } = formMethods;
+  const translatedThreatActors = threatActorsOptions.map((threatActor) => ({
+    value: threatActor,
+    /* @ts-ignore Because ts can't typecheck strings against our keys */
+    renderedValue: t(`threatActors.${threatActor}`)
+  }));
+  const translatedVulnerabilities = vulnerabilitiesOptions.map(
+    (vulnerability) => ({
+      value: vulnerability,
+      /* @ts-ignore Because ts can't typecheck strings against our keys */
+      renderedValue: t(`vulnerabilities.${vulnerability}`)
+    })
+  );
+  return /* @__PURE__ */ React.createElement(Paper$1, { sx: section }, /* @__PURE__ */ React.createElement(Typography$1, { sx: heading3 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(
+    Input,
     {
-      className: button,
-      variant: "text",
-      color: "primary",
-      onClick: () => editScenario("scenario"),
-      startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
+      required: true,
+      ...register("title", { required: true }),
+      error: errors.title !== void 0,
+      label: t("dictionary.title")
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      multiple: true,
+      control,
+      name: "threatActors",
+      label: t("dictionary.threatActors"),
+      labelTranslationKey: "threatActors",
+      options: translatedThreatActors
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      multiple: true,
+      control,
+      name: "vulnerabilities",
+      label: t("dictionary.vulnerabilities"),
+      labelTranslationKey: "vulnerabilities",
+      options: translatedVulnerabilities
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ...register("description"),
+      label: t("dictionary.description"),
+      minRows: 4
     }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, scenario.title)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.description")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, scenario.description)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { variant: "fullWidth" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.threatActors")), scenario.threatActors.map((threatActor) => /* @__PURE__ */ React.createElement(Typography, { key: threatActor, className: body2 }, threatActor))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.vulnerabilities")), scenario.vulnerabilities.map((vulnerability) => /* @__PURE__ */ React.createElement(Typography, { key: vulnerability, className: body2 }, vulnerability))))));
+  ));
 };
 
 const ScenarioDrawer = () => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { drawer, buttons } = useScenarioDrawerStyles();
-  const { button } = useFontStyles();
-  const { scenarioDrawerState, openDeleteConfirmation, closeScenario } = useContext(ScenarioContext);
-  const isOpen = scenarioDrawerState !== ScenarioDrawerState.Closed;
+  const [isEditing, setIsEditing] = useState(false);
+  const {
+    scenario,
+    isDrawerOpen,
+    openDeleteConfirmation,
+    closeScenario,
+    submitEditedScenarioToRiSc
+  } = useScenario();
+  const formMethods = useForm({ defaultValues: scenario });
+  const onCancel = () => {
+    formMethods.reset(scenario);
+    setIsEditing(false);
+  };
+  const onClose = () => {
+    closeScenario();
+    setIsEditing(false);
+  };
+  const onSubmit = formMethods.handleSubmit((data) => {
+    submitEditedScenarioToRiSc(data);
+    setIsEditing(false);
+  });
+  useEffect(() => {
+    formMethods.reset(scenario);
+  }, [scenario, formMethods]);
   return /* @__PURE__ */ React.createElement(
     Drawer,
     {
-      classes: { paper: drawer },
+      PaperProps: {
+        sx: (theme) => ({
+          padding: theme.spacing(4),
+          width: "50%",
+          gap: theme.spacing(3),
+          [theme.breakpoints.down("sm")]: {
+            width: "90%",
+            padding: theme.spacing(2)
+          },
+          backgroundColor: theme.palette.mode === "dark" ? "#333333" : "#f8f8f8"
+        })
+      },
       variant: "temporary",
       anchor: "right",
-      open: isOpen,
-      onClose: closeScenario
+      open: isDrawerOpen,
+      onClose
     },
     /* @__PURE__ */ React.createElement(
       Box$2,
       {
-        className: buttons,
-        style: {
-          marginBottom: "8px",
-          marginTop: "8px",
+        sx: {
           display: "flex",
-          flexDirection: "row",
-          gap: "0.5rem",
-          justifyContent: "flex-end"
+          gap: "16px",
+          marginLeft: "auto"
         }
       },
       /* @__PURE__ */ React.createElement(
-        Button,
+        Button$1,
+        {
+          color: "primary",
+          variant: "contained",
+          onClick: isEditing ? onSubmit : () => setIsEditing(true),
+          disabled: isEditing && !formMethods.formState.isDirty
+        },
+        t(isEditing ? "dictionary.save" : "dictionary.edit")
+      ),
+      /* @__PURE__ */ React.createElement(
+        Button$1,
         {
-          className: button,
           variant: "outlined",
           color: "primary",
-          onClick: closeScenario
+          onClick: isEditing ? onCancel : onClose
         },
-        t("dictionary.close")
+        t(isEditing ? "dictionary.cancel" : "dictionary.close")
       )
     ),
-    /* @__PURE__ */ React.createElement(ScopeSection, null),
-    /* @__PURE__ */ React.createElement(RiskSection, null),
-    /* @__PURE__ */ React.createElement(ActionsSection, null),
+    isEditing ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScenarioFormSection, { formMethods }), /* @__PURE__ */ React.createElement(ScenarioForm, { formMethods }), /* @__PURE__ */ React.createElement(ActionFormSection, { formMethods })) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScopeSection, null), /* @__PURE__ */ React.createElement(RiskSection, null), /* @__PURE__ */ React.createElement(ActionsSection, null)),
     /* @__PURE__ */ React.createElement(
-      Box$2,
+      Button$1,
       {
-        className: buttons,
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          gap: "0.5rem",
-          justifyContent: "flex-start"
-        }
+        startIcon: /* @__PURE__ */ React.createElement(DeleteIcon$1, null),
+        variant: "text",
+        color: "primary",
+        onClick: openDeleteConfirmation,
+        sx: { marginRight: "auto" }
       },
-      /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          startIcon: /* @__PURE__ */ React.createElement(DeleteIcon$1, null),
-          variant: "text",
-          color: "primary",
-          onClick: openDeleteConfirmation
-        },
-        t("scenarioDrawer.deleteScenarioButton")
-      )
+      t("scenarioDrawer.deleteScenarioButton")
     ),
     /* @__PURE__ */ React.createElement(DeleteConfirmation, null)
   );
@@ -2504,7 +2660,7 @@ const RiskMatrixScenarioCount = ({
     tooltipText
   } = useRiskMatrixStyles();
   const [tooltipOpen, setTooltipOpen] = useState(false);
-  const { openScenario } = useContext(ScenarioContext);
+  const { openScenario } = useScenario();
   const handleScenarioClick = (ID) => {
     setTooltipOpen(false);
     openScenario(ID);
@@ -2519,16 +2675,27 @@ const RiskMatrixScenarioCount = ({
   if (scenarios.length === 0) {
     return null;
   }
-  const tooltipList = /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(ListSubheader, { className: tooltipText }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: tooltipText }, t("riskMatrix.tooltip.title"))), scenarios.map((s) => /* @__PURE__ */ React.createElement(ListItem, { key: s.ID, button: true, disableGutters: true, className: tooltipText, onClick: () => {
-    handleScenarioClick(s.ID);
-  } }, /* @__PURE__ */ React.createElement(CircleIcon, { className: tooltipText, style: { width: "10px" } }), /* @__PURE__ */ React.createElement(
-    ListItemText$1,
+  const tooltipList = /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(ListSubheader, { className: tooltipText }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: tooltipText }, t("riskMatrix.tooltip.title"))), scenarios.map((s) => /* @__PURE__ */ React.createElement(
+    ListItem,
     {
+      key: s.ID,
+      button: true,
+      disableGutters: true,
       className: tooltipText,
-      style: { paddingLeft: "0.6rem" }
+      onClick: () => {
+        handleScenarioClick(s.ID);
+      }
     },
-    /* @__PURE__ */ React.createElement("span", null, s.title)
-  ))));
+    /* @__PURE__ */ React.createElement(CircleIcon, { className: tooltipText, style: { width: "10px" } }),
+    /* @__PURE__ */ React.createElement(
+      ListItemText$2,
+      {
+        className: tooltipText,
+        style: { paddingLeft: "0.6rem" }
+      },
+      /* @__PURE__ */ React.createElement("span", null, s.title)
+    )
+  )));
   return /* @__PURE__ */ React.createElement(ClickAwayListener, { onClickAway: () => setTooltipOpen(false) }, /* @__PURE__ */ React.createElement(
     Tooltip,
     {
@@ -2593,7 +2760,7 @@ const AggregatedCost = ({ riSc, initialRisk }) => {
   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);
-  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(
+  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$1, { size: "small", onClick: () => setShowDialog(true) }, /* @__PURE__ */ React.createElement(InfoIcon, null))), /* @__PURE__ */ React.createElement(
     EstimatedRiskInfoDialog,
     {
       isOpen: showDialog,
@@ -2661,29 +2828,36 @@ const RiskMatrix = ({ riSc }) => {
     centered
   } = useRiskMatrixStyles();
   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, rowIndex) => /* @__PURE__ */ React.createElement(Fragment, { key: rowIndex }, /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, 5 - rowIndex)), row.map((col, colIndex) => /* @__PURE__ */ React.createElement(
-    Box$2,
+  return /* @__PURE__ */ React.createElement(
+    InfoCard,
     {
-      className: `${square} ${centered}`,
-      style: { backgroundColor: col },
-      key: colIndex
+      title: t("riskMatrix.title"),
+      titleTypographyProps: { style: { marginBottom: 0 } }
     },
-    /* @__PURE__ */ React.createElement(
-      RiskMatrixScenarioCount,
+    /* @__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,
-        probability: colIndex,
-        consequence: 4 - rowIndex,
         initialRisk: tab === "initialRisk" /* initialRisk */
       }
-    )
-  )))), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), riskMatrix.map((_, col) => /* @__PURE__ */ React.createElement(Box$2, { className: centered, key: col }, /* @__PURE__ */ React.createElement(Typography, { className: text }, col + 1))), /* @__PURE__ */ React.createElement(Box$2, { className: sannsynlighet }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.probability")))))));
+    )), /* @__PURE__ */ React.createElement(Box$2, { className: gridWrapper }, /* @__PURE__ */ React.createElement(Box$2, { className: grid }, /* @__PURE__ */ React.createElement(Box$2, { className: konsekvens }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.consequence"))), riskMatrix.map((row, rowIndex) => /* @__PURE__ */ React.createElement(Fragment, { key: rowIndex }, /* @__PURE__ */ React.createElement(Box$2, { className: centered }, /* @__PURE__ */ React.createElement(Typography, { className: text }, 5 - rowIndex)), row.map((col, colIndex) => /* @__PURE__ */ React.createElement(
+      Box$2,
+      {
+        className: `${square} ${centered}`,
+        style: { backgroundColor: col },
+        key: colIndex
+      },
+      /* @__PURE__ */ React.createElement(
+        RiskMatrixScenarioCount,
+        {
+          riSc,
+          probability: colIndex,
+          consequence: 4 - rowIndex,
+          initialRisk: tab === "initialRisk" /* initialRisk */
+        }
+      )
+    )))), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), /* @__PURE__ */ React.createElement(Box$2, { className: centered }), riskMatrix.map((_, col) => /* @__PURE__ */ React.createElement(Box$2, { className: centered, key: col }, /* @__PURE__ */ React.createElement(Typography, { className: text }, col + 1))), /* @__PURE__ */ React.createElement(Box$2, { className: sannsynlighet }, /* @__PURE__ */ React.createElement(Typography, { className: `${centered} ${label2}` }, t("dictionary.probability"))))))
+  );
 };
 
 const useTableStyles = makeStyles((theme) => ({
@@ -2801,9 +2975,10 @@ const ScenarioTableRow = ({
 
 const ScenarioTable = ({ riSc }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { label } = useFontStyles();
   const { titleBox, rowBorder, tableCell, tableCellTitle } = useTableStyles();
-  const { newScenario, openScenario } = useContext(ScenarioContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(Box$1, { className: titleBox }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", style: { padding: "1rem" } }, t("scenarioTable.title")), riSc.scenarios.length > 0 && /* @__PURE__ */ React.createElement(
+  const { newScenario, openScenario } = useScenario();
+  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", marginBottom: 0 } }, t("scenarioTable.title")), riSc.scenarios.length > 0 && /* @__PURE__ */ React.createElement(
     Box$1,
     {
       style: {
@@ -2847,38 +3022,7 @@ const ScenarioTable = ({ riSc }) => {
       },
       t("scenarioTable.addScenarioButton")
     )
-  ) : /* @__PURE__ */ React.createElement(TableContainer, { style: { overflow: "auto" }, component: Paper }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, { className: rowBorder }, /* @__PURE__ */ React.createElement(TableCell, { className: tableCellTitle }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle1",
-      style: { fontWeight: "bold", textTransform: "uppercase" }
-    },
-    t("dictionary.title")
-  )), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle1",
-      style: { fontWeight: "bold", textTransform: "uppercase" }
-    },
-    t("dictionary.initialRisk")
-  )), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle1",
-      style: { fontWeight: "bold", textTransform: "uppercase" }
-    },
-    t("scenarioTable.columns.measuresCount")
-  )), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle1",
-      style: {
-        fontWeight: "bold",
-        textTransform: "uppercase"
-      }
-    },
-    t("dictionary.restRisk")
-  )))), /* @__PURE__ */ React.createElement(TableBody, null, riSc.scenarios.map((scenario, idx) => /* @__PURE__ */ React.createElement(
+  ) : /* @__PURE__ */ React.createElement(TableContainer, { style: { overflow: "auto" }, component: Paper }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHead, { style: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React.createElement(TableRow, { className: rowBorder }, /* @__PURE__ */ React.createElement(TableCell, { className: tableCellTitle }, /* @__PURE__ */ React.createElement(Typography, { className: label, style: { paddingBottom: 0 } }, t("dictionary.title"))), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(Typography, { className: label, style: { paddingBottom: 0 } }, t("dictionary.initialRisk"))), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(Typography, { className: label, style: { paddingBottom: 0 } }, t("scenarioTable.columns.measuresCount"))), /* @__PURE__ */ React.createElement(TableCell, { className: tableCell }, /* @__PURE__ */ React.createElement(Typography, { className: label, style: { paddingBottom: 0 } }, t("dictionary.restRisk"))))), /* @__PURE__ */ React.createElement(TableBody, null, riSc.scenarios.map((scenario, idx) => /* @__PURE__ */ React.createElement(
     ScenarioTableRow,
     {
       key: scenario.ID,
@@ -2991,7 +3135,7 @@ const RiScDialog = ({
     {
       classes: { paper },
       open: dialogState !== 0 /* Closed */,
-      onClose: handleSave,
+      onClose: handleCancel,
       ...props
     },
     /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, header), /* @__PURE__ */ React.createElement(Box$1, { className: content }, /* @__PURE__ */ React.createElement(
@@ -3031,116 +3175,6 @@ const RiScDialog = ({
   );
 };
 
-const useStatusChipStyles = makeStyles(() => ({
-  statusChip: {
-    borderRadius: "7px",
-    maxHeight: "fit-content",
-    height: "fit-content",
-    margin: "0px"
-  },
-  statusChipText: {
-    whiteSpace: "normal"
-  },
-  statusIcon: {
-    maxHeight: "10px"
-  },
-  riScPublished: {
-    borderColor: "#88e763",
-    color: "#88e763"
-  },
-  riScSentForApproval: {
-    borderColor: "#E7A563FF",
-    color: "#E7A563FF"
-  },
-  riScDraft: {
-    borderColor: "#FBE36A",
-    color: "#FBE36A"
-  }
-}));
-const useStatusTextStyles = makeStyles(() => ({
-  prStatus: {
-    fontSize: "14px",
-    wrap: "wrap"
-  },
-  prIcon: {
-    margin: "0px",
-    padding: "0px",
-    marginBottom: "-1px",
-    marginRight: "2px",
-    marginLeft: "2px"
-  }
-}));
-
-const getChipColor = (status, classes) => {
-  switch (status) {
-    case RiScStatus.Draft:
-      return classes.riScDraft;
-    case RiScStatus.SentForApproval:
-    case RiScStatus.Published:
-      return classes.riScPublished;
-    default:
-      return classes.riScDraft;
-  }
-};
-const useChipText = (status) => {
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  switch (status) {
-    case RiScStatus.Draft:
-      return t("rosStatus.statusBadge.missing");
-    case RiScStatus.SentForApproval:
-    case RiScStatus.Published:
-      return t("rosStatus.statusBadge.approved");
-    default:
-      return t("rosStatus.statusBadge.error");
-  }
-};
-function ChipTextStatus({ status }) {
-  const { statusChipText } = useStatusChipStyles();
-  const chipText = useChipText(status);
-  return /* @__PURE__ */ React.createElement("span", { className: statusChipText }, chipText);
-}
-function PRStatus({ status, classes }) {
-  const { t } = useTranslationRef(pluginRiScTranslationRef);
-  switch (status) {
-    case RiScStatus.SentForApproval:
-      return /* @__PURE__ */ React.createElement(Typography, { className: classes.prStatus }, /* @__PURE__ */ React.createElement(GitHubIcon, { fontSize: "inherit", className: classes.prIcon }), t("rosStatus.prStatus"));
-    case RiScStatus.Draft:
-    case RiScStatus.Published:
-    default:
-      return null;
-  }
-}
-const StatusChip = ({ currentRiScStatus }) => {
-  const chipClasses = useStatusChipStyles();
-  const textClasses = useStatusTextStyles();
-  const [chipColorClass, setChipColorClass] = useState(null);
-  useEffect(() => {
-    const chipColor = getChipColor(currentRiScStatus, chipClasses);
-    setChipColorClass(chipColor);
-  }, [currentRiScStatus, chipClasses]);
-  return /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      container: true,
-      direction: "column",
-      spacing: 0,
-      style: { alignItems: "end" }
-    },
-    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-      Chip,
-      {
-        color: "primary",
-        size: "medium",
-        variant: "outlined",
-        label: /* @__PURE__ */ React.createElement(ChipTextStatus, { status: currentRiScStatus }),
-        icon: /* @__PURE__ */ React.createElement(CircleIcon$1, { className: chipClasses.statusIcon }),
-        className: [chipColorClass, chipClasses.statusChip].join(" ")
-      }
-    )),
-    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(PRStatus, { status: currentRiScStatus, classes: textClasses }))
-  );
-};
-
 const useButtonStyles = makeStyles(() => ({
   approveButton: {
     borderRadius: "2px",
@@ -3190,6 +3224,49 @@ const RiScPublishDialog = ({
     ))
   ));
 };
+function PullRequestSvg() {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "18",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      style: {
+        transform: "translateY(2px)"
+      },
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M9.55625 0.065625C9.825 0.184375 10 0.453125 10 0.75V2.25H10.5C12.5719 2.25 14.25 3.92812 14.25 6V11.1156C15.2656 11.4344 16 12.3813 16 13.5C16 14.8813 14.8813 16 13.5 16C12.1187 16 11 14.8813 11 13.5C11 12.3813 11.7344 11.4344 12.75 11.1156V6C12.75 4.75625 11.7437 3.75 10.5 3.75H10V5.25C10 5.54688 9.825 5.81562 9.55625 5.93437C9.2875 6.05312 8.96875 6.00625 8.75 5.80625L6.25 3.55625C6.09062 3.4125 6.00313 3.2125 6.00313 3C6.00313 2.7875 6.09375 2.58437 6.25 2.44375L8.75 0.19375C8.96875 -0.00312501 9.2875 -0.053125 9.55625 0.065625ZM3.5 2.5C3.5 2.23478 3.39464 1.98043 3.20711 1.79289C3.01957 1.60536 2.76522 1.5 2.5 1.5C2.23478 1.5 1.98043 1.60536 1.79289 1.79289C1.60536 1.98043 1.5 2.23478 1.5 2.5C1.5 2.76522 1.60536 3.01957 1.79289 3.20711C1.98043 3.39464 2.23478 3.5 2.5 3.5C2.76522 3.5 3.01957 3.39464 3.20711 3.20711C3.39464 3.01957 3.5 2.76522 3.5 2.5ZM3.25 4.88438V11.1156C4.26562 11.4344 5 12.3813 5 13.5C5 14.8813 3.88125 16 2.5 16C1.11875 16 0 14.8813 0 13.5C0 12.3813 0.734375 11.4344 1.75 11.1156V4.88438C0.734375 4.56563 0 3.61875 0 2.5C0 1.11875 1.11875 0 2.5 0C3.88125 0 5 1.11875 5 2.5C5 3.61875 4.26562 4.56563 3.25 4.88438ZM3.5 13.5C3.5 13.2348 3.39464 12.9804 3.20711 12.7929C3.01957 12.6054 2.76522 12.5 2.5 12.5C2.23478 12.5 1.98043 12.6054 1.79289 12.7929C1.60536 12.9804 1.5 13.2348 1.5 13.5C1.5 13.7652 1.60536 14.0196 1.79289 14.2071C1.98043 14.3946 2.23478 14.5 2.5 14.5C2.76522 14.5 3.01957 14.3946 3.20711 14.2071C3.39464 14.0196 3.5 13.7652 3.5 13.5ZM13.5 14.5C13.7652 14.5 14.0196 14.3946 14.2071 14.2071C14.3946 14.0196 14.5 13.7652 14.5 13.5C14.5 13.2348 14.3946 12.9804 14.2071 12.7929C14.0196 12.6054 13.7652 12.5 13.5 12.5C13.2348 12.5 12.9804 12.6054 12.7929 12.7929C12.6054 12.9804 12.5 13.2348 12.5 13.5C12.5 13.7652 12.6054 14.0196 12.7929 14.2071C12.9804 14.3946 13.2348 14.5 13.5 14.5Z",
+        fill: theme.palette.type === "dark" ? "white" : "rgba(0, 0, 0, 0.87)"
+      }
+    )
+  );
+}
+const RosAcceptance = ({
+  status
+}) => {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  switch (status) {
+    case RiScStatus.Draft:
+      return /* @__PURE__ */ React.createElement(Typography, { paragraph: true, style: { fontWeight: 700 }, variant: "subtitle1" }, t("rosStatus.statusBadge.missing"));
+    case RiScStatus.SentForApproval:
+    case RiScStatus.Published:
+      return /* @__PURE__ */ React.createElement(Typography, { paragraph: true, style: { fontWeight: 700 }, variant: "subtitle1" }, /* @__PURE__ */ React.createElement(
+        CheckIcon,
+        {
+          fontSize: "medium",
+          style: { transform: "translateY(5px)" }
+        }
+      ), " ", t("rosStatus.statusBadge.approved"));
+    default:
+      return /* @__PURE__ */ React.createElement(Typography, { paragraph: true, variant: "subtitle1" }, t("rosStatus.statusBadge.error"));
+  }
+};
 const RiScStatusComponent = ({
   selectedRiSc,
   publishRiScFn
@@ -3201,50 +3278,66 @@ const RiScStatusComponent = ({
     publishRiScFn();
     setPublishRiScDialogIsOpen(false);
   };
-  return /* @__PURE__ */ React.createElement(Grid, { item: true, container: true, xs: true, direction: "column", alignItems: "flex-end" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(StatusChip, { currentRiScStatus: selectedRiSc.status })), /* @__PURE__ */ React.createElement(Grid, { item: true, container: true, spacing: 1, justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Status"), /* @__PURE__ */ React.createElement(RosAcceptance, { status: selectedRiSc.status }), selectedRiSc.status === RiScStatus.SentForApproval && /* @__PURE__ */ React.createElement(Typography, { style: { fontWeight: 700 }, paragraph: true, variant: "subtitle1" }, /* @__PURE__ */ React.createElement(PullRequestSvg, null), t("rosStatus.prStatus"), /* @__PURE__ */ React.createElement(Link$1, { target: "_blank", href: selectedRiSc.pullRequestUrl }, "Github")), /* @__PURE__ */ React.createElement(
+    Grid,
     {
-      color: "primary",
-      variant: "contained",
-      onClick: () => setPublishRiScDialogIsOpen(!publishRiScDialogIsOpen),
-      className: approveButton,
-      fullWidth: true,
-      disabled: selectedRiSc.status !== RiScStatus.Draft
+      item: true,
+      container: true,
+      xs: true,
+      direction: "row",
+      alignItems: "flex-end",
+      justifyContent: "space-between"
     },
-    /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, t("rosStatus.approveButton"))
-  ))), /* @__PURE__ */ React.createElement(
-    RiScPublishDialog,
-    {
-      openDialog: publishRiScDialogIsOpen,
-      handlePublish: handleApproveAndPublish,
-      handleCancel: () => setPublishRiScDialogIsOpen(false)
-    }
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" })),
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, selectedRiSc.status === RiScStatus.Draft && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        variant: "contained",
+        onClick: () => setPublishRiScDialogIsOpen(!publishRiScDialogIsOpen),
+        className: approveButton,
+        fullWidth: true,
+        disabled: selectedRiSc.status !== RiScStatus.Draft
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, t("rosStatus.approveButton"))
+    )),
+    /* @__PURE__ */ React.createElement(
+      RiScPublishDialog,
+      {
+        openDialog: publishRiScDialogIsOpen,
+        handlePublish: handleApproveAndPublish,
+        handleCancel: () => setPublishRiScDialogIsOpen(false)
+      }
+    )
   ));
 };
 
-const useRiScInfoStyles = makeStyles(() => ({
-  infoCard: {
-    maxWidth: "600px"
+const useEditButtonStyle = makeStyles((theme) => ({
+  icon: {
+    color: theme.palette.type === "dark" ? "#fff" : "rgba(0, 0, 0, 0.54)"
   }
 }));
+const EditButton = (props) => {
+  const { icon } = useEditButtonStyle();
+  return /* @__PURE__ */ React.createElement(IconButton$1, { size: "small", ...props }, /* @__PURE__ */ React.createElement(EditIcon, { className: icon, "aria-label": "Edit" }));
+};
 
 const RiScInfo = ({ riSc, approveRiSc, edit }) => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { label, body2 } = useFontStyles();
-  const { infoCard } = useRiScInfoStyles();
   return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(
     Grid,
     {
       item: true,
       xs: 12,
       sm: 6,
-      md: 8,
+      md: 6,
       style: {
         display: "flex",
         flexDirection: "column"
       }
     },
-    /* @__PURE__ */ React.createElement(InfoCard, { className: infoCard }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
       Box$1,
       {
         style: {
@@ -3254,9 +3347,15 @@ const RiScInfo = ({ riSc, approveRiSc, edit }) => {
         }
       },
       /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, riSc.content.title),
-      /* @__PURE__ */ React.createElement(IconButton, { onClick: edit }, /* @__PURE__ */ React.createElement(EditIcon, null))
+      /* @__PURE__ */ React.createElement(EditButton, { onClick: edit })
     ), /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.scope")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, riSc.content.scope))
-  ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 4 }, /* @__PURE__ */ React.createElement(RiScStatusComponent, { selectedRiSc: riSc, publishRiScFn: approveRiSc })));
+  ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 6 }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
+    RiScStatusComponent,
+    {
+      selectedRiSc: riSc,
+      publishRiScFn: approveRiSc
+    }
+  ))));
 };
 
 const useLinearProgressStyle = makeStyles((theme) => ({
@@ -3267,8 +3366,16 @@ const useLinearProgressStyle = makeStyles((theme) => ({
   }
 }));
 
+var _a;
+const emotionInsertionPoint = document.createElement("meta");
+emotionInsertionPoint.setAttribute("name", "emotion-insertion-point");
+(_a = document.querySelector("head")) == null ? void 0 : _a.appendChild(emotionInsertionPoint);
+const cache = createCache({
+  key: "css",
+  insertionPoint: emotionInsertionPoint
+});
 const Plugin = () => {
-  var _a, _b;
+  var _a2, _b;
   const params = useParams();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { linearProgress } = useLinearProgressStyle();
@@ -3291,77 +3398,84 @@ const Plugin = () => {
     response,
     isRequesting
   } = useFetchRiScs(params.riScId);
-  const scenario = useScenarioDrawer(
-    selectedRiSc != null ? selectedRiSc : null,
-    updateRiSc,
-    params.scenarioId
-  );
   const [searchParams] = useSearchParams();
   const scenarioWizardStep = searchParams.get("step") || null;
   useEffect(() => {
     if (scenarioWizardStep !== null)
       resetRiScStatus();
   }, [resetRiScStatus, scenarioWizardStep]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScenarioContext.Provider, { value: scenario }, response && /* @__PURE__ */ React.createElement(Alert, { severity: getAlertSeverity(response.status) }, /* @__PURE__ */ React.createElement(Typography, null, response.statusMessage)), isRequesting && /* @__PURE__ */ React.createElement(LinearProgress, { className: linearProgress }), scenarioWizardStep !== null ? /* @__PURE__ */ React.createElement(
-    ScenarioWizard,
-    {
-      step: scenarioWizardStep,
-      isFetching,
-      updateStatus: updateRiScStatus
-    }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("contentHeader.title") }, /* @__PURE__ */ React.createElement(SupportButton, null)), isFetching && /* @__PURE__ */ React.createElement(Spinner, { size: 80 }), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, riScs !== null && riScs.length !== 0 && /* @__PURE__ */ React.createElement(
-    Grid,
+  return /* @__PURE__ */ React.createElement(CacheProvider, { value: cache }, /* @__PURE__ */ React.createElement(
+    ScenarioProvider,
     {
-      item: true,
-      xs: 12,
-      sm: 6,
-      style: {
-        maxWidth: "600px",
-        minWidth: "300px"
-      }
+      riSc: selectedRiSc != null ? selectedRiSc : null,
+      updateRiSc,
+      scenarioIdFromParams: params.scenarioId
     },
-    /* @__PURE__ */ React.createElement(
-      Dropdown,
+    response && /* @__PURE__ */ React.createElement(Alert, { severity: getAlertSeverity(response.status) }, /* @__PURE__ */ React.createElement(Typography, null, response.statusMessage)),
+    isRequesting && /* @__PURE__ */ React.createElement(LinearProgress, { className: linearProgress }),
+    scenarioWizardStep !== null ? /* @__PURE__ */ React.createElement(
+      ScenarioWizard,
       {
-        options: (_a = riScs.map((riSc) => riSc.content.title)) != null ? _a : [],
-        selectedValues: (_b = selectedRiSc == null ? void 0 : selectedRiSc.content.title) != null ? _b : "",
-        handleChange: (title) => selectRiSc(title),
-        variant: "standard"
+        step: scenarioWizardStep,
+        isFetching,
+        updateStatus: updateRiScStatus
       }
-    )
-  ), !isFetching && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      startIcon: /* @__PURE__ */ React.createElement(AddCircle, null),
-      variant: "text",
-      color: "primary",
-      onClick: openCreateRiScDialog,
-      style: {
-        minWidth: "205px"
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("contentHeader.title") }, /* @__PURE__ */ React.createElement(SupportButton, null)), isFetching && /* @__PURE__ */ React.createElement(Spinner, { size: 80 }), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, riScs !== null && riScs.length !== 0 && /* @__PURE__ */ React.createElement(
+      Grid,
+      {
+        item: true,
+        xs: 12,
+        sm: 6,
+        style: {
+          maxWidth: "600px",
+          minWidth: "300px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Dropdown,
+        {
+          options: (_a2 = riScs.map((riSc) => riSc.content.title)) != null ? _a2 : [],
+          selectedValues: (_b = selectedRiSc == null ? void 0 : selectedRiSc.content.title) != null ? _b : "",
+          handleChange: (title) => selectRiSc(title),
+          variant: "standard"
+        }
+      )
+    ), !isFetching && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        startIcon: /* @__PURE__ */ React.createElement(AddCircle, null),
+        variant: "text",
+        color: "primary",
+        onClick: openCreateRiScDialog,
+        style: {
+          minWidth: "205px"
+        }
+      },
+      t("contentHeader.createNewButton")
+    )), selectedRiSc && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+      RiScInfo,
+      {
+        riSc: selectedRiSc,
+        approveRiSc,
+        edit: openEditRiScDialog
       }
-    },
-    t("contentHeader.createNewButton")
-  )), selectedRiSc && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
-    RiScInfo,
-    {
-      riSc: selectedRiSc,
-      approveRiSc,
-      edit: openEditRiScDialog
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, md: 7, lg: 8 }, /* @__PURE__ */ React.createElement(ScenarioTable, { riSc: selectedRiSc.content })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, md: 5, lg: 4 }, /* @__PURE__ */ React.createElement(RiskMatrix, { riSc: selectedRiSc.content }))))), RiScDialogState !== RiScDialogStates.Closed && /* @__PURE__ */ React.createElement(
-    RiScDialog,
-    {
-      onClose: closeRiScDialog,
-      createNewRiSc,
-      updateRiSc,
-      riSc: selectedRiSc,
-      dialogState: RiScDialogState
-    }
-  ), !scenarioWizardStep && /* @__PURE__ */ React.createElement(ScenarioDrawer, null)));
+    )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, md: 7, lg: 8 }, /* @__PURE__ */ React.createElement(ScenarioTable, { riSc: selectedRiSc.content })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, md: 5, lg: 4 }, /* @__PURE__ */ React.createElement(RiskMatrix, { riSc: selectedRiSc.content }))))),
+    RiScDialogState !== RiScDialogStates.Closed && /* @__PURE__ */ React.createElement(
+      RiScDialog,
+      {
+        onClose: closeRiScDialog,
+        createNewRiSc,
+        updateRiSc,
+        riSc: selectedRiSc,
+        dialogState: RiScDialogState
+      }
+    ),
+    !scenarioWizardStep && /* @__PURE__ */ React.createElement(ScenarioDrawer, null)
+  ));
 };
 const RiScPlugin = () => {
   return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, { path: "/", element: /* @__PURE__ */ React.createElement(Plugin, null) }), /* @__PURE__ */ React.createElement(Route, { path: riScRouteRef.path, element: /* @__PURE__ */ React.createElement(Plugin, null) }), /* @__PURE__ */ React.createElement(Route, { path: scenarioRouteRef.path, element: /* @__PURE__ */ React.createElement(Plugin, null) }));
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-b5d09407.esm.js.map
+//# sourceMappingURL=index-99d0fef8.esm.js.map