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

package/README.md

@@ -4,11 +4,14 @@ This is a plugin for Backstage that helps you and your team when working continu
 The plugin is dependent on a backend service in order to decrypt and communicate with GitHub, and some configuration is
 necessary for them to communicate.
 
-Add the root url to your running backend service to the app-config:
+Add the following configuration to the proxy-block in your app-config. Modify the `target` to the root url of your running backend service.
 
-``` yaml
-app:
-  backendUrl: http://localhost:8080
+```yaml
+proxy:
+  endpoints:
+    '/risc-proxy':
+      target: http://localhost:8080
+      allowedHeaders: ['Authorization', 'GCP-Access-Token']
 ```
 
 The backend uses EntraID id-tokens to validate the user, and GCP access tokens to federate access to the GCP KMS.
@@ -18,4 +21,4 @@ for both:
 1. Add discovery of organization data for Microsoft Org
 2. Add authentication for both providers
 
-Happy RiSc-ing 🌹
+Happy RiSc-ing 🌹

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

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useCallback, createContext, useContext, Fragment, useRef } from 'react';
-import { makeStyles, FormControl, FormLabel, FormHelperText, TextField as TextField$1, Grid, Typography, Box as Box$1, useTheme, Paper, Button, Radio, CircularProgress, Dialog, DialogTitle, DialogActions, Stepper, Step, StepButton, Divider as Divider$1, Drawer, List, ListSubheader, ListItem, ListItemText as ListItemText$1, ClickAwayListener, Tooltip, DialogContent, DialogContentText, IconButton, Tab } from '@material-ui/core';
+import { 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 { 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-f0f7d618.esm.js';
+import { s as scenarioRouteRef, r as riScRouteRef, p as pluginRiScTranslationRef } from './index-d8d91dc1.esm.js';
 import { useNavigate, useLocation, useParams } from 'react-router';
 import { useEffectOnce } from 'react-use';
 import { useSearchParams, Routes, Route } from 'react-router-dom';
@@ -69,6 +69,13 @@ var ProcessingStatus = /* @__PURE__ */ ((ProcessingStatus2) => {
   ProcessingStatus2["ErrorWhenFetchingJSONSchema"] = "ErrorWhenFetchingJSONSchema";
   return ProcessingStatus2;
 })(ProcessingStatus || {});
+var ContentStatus = /* @__PURE__ */ ((ContentStatus2) => {
+  ContentStatus2["Success"] = "Success";
+  ContentStatus2["Failure"] = "Failure";
+  ContentStatus2["FileNotFound"] = "FileNotFound";
+  ContentStatus2["DecryptionFailed"] = "DecryptionFailed";
+  return 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";
@@ -446,7 +453,7 @@ const requiresNewApproval = (oldRiSc, updatedRiSc) => {
     return true;
   }
   let requiresApproval = false;
-  oldRiSc.scenarios.map((oldScenario, index) => {
+  oldRiSc.scenarios.forEach((oldScenario, index) => {
     const updatedScenario = updatedRiSc.scenarios[index];
     if (oldScenario.threatActors !== updatedScenario.threatActors)
       requiresApproval = true;
@@ -462,10 +469,14 @@ const requiresNewApproval = (oldRiSc, updatedRiSc) => {
       requiresApproval = true;
     if (oldScenario.remainingRisk.consequence !== updatedScenario.remainingRisk.consequence)
       requiresApproval = true;
-    oldScenario.actions.map((oldAction, i) => {
-      const updatedAction = updatedScenario.actions[i];
-      if (oldAction.deadline !== updatedAction.deadline)
+    oldScenario.actions.forEach((oldAction, i) => {
+      if (updatedScenario.actions[i] !== void 0) {
+        const updatedAction = updatedScenario.actions[i];
+        if (oldAction.deadline !== updatedAction.deadline)
+          requiresApproval = true;
+      } else {
         requiresApproval = true;
+      }
     });
   });
   return requiresApproval;
@@ -592,12 +603,12 @@ const useFetch = () => {
   const googleApi = useApi(googleAuthApiRef);
   const identityApi = useApi(identityApiRef);
   const { fetch: fetchApi } = useApi(fetchApiRef);
-  const baseUri = useApi(configApiRef).getString("riskAssessment.baseUrl");
-  const riScUri = `${baseUri}/api/risc/${repoInformation.owner}/${repoInformation.name}`;
+  const backendUrl = useApi(configApiRef).getString("backend.baseUrl");
+  const riScUri = `${backendUrl}/api/proxy/risc-proxy/api/risc/${repoInformation.owner}/${repoInformation.name}`;
   const uriToFetchAllRiScs = () => `${riScUri}/all`;
   const uriToFetchRiSc = (id) => `${riScUri}/${id}`;
   const uriToPublishRiSc = (id) => `${riScUri}/publish/${id}`;
-  const uriToFetchLatestJSONSchema = () => `${baseUri}/api/risc/schemas/latest`;
+  const uriToFetchLatestJSONSchema = () => `${backendUrl}/api/proxy/risc-proxy/api/risc/schemas/latest`;
   const [response, setResponse] = useResponse();
   const fetch = (uri, method, onSuccess, onError, body) => {
     Promise.all([
@@ -739,7 +750,6 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
         return;
       }
       if (isNewScenario) {
-        setSearchParams({ step: "scenario" });
         return;
       }
       const selectedScenario = riSc.content.scenarios.find(
@@ -755,12 +765,17 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
       setOriginalScenario(selectedScenario);
       setScenarioDrawerState(2 /* View */);
     }
-  }, [getRiScPath, isNewScenario, navigate, riSc, scenarioIdFromParams, setSearchParams]);
+  }, [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);
@@ -813,7 +828,7 @@ const useScenarioDrawer = (riSc, updateRiSc, scenarioIdFromParams) => {
       const s = emptyScenario();
       setScenario(s);
       setOriginalScenario(s);
-      openScenario(s.ID);
+      openNewScenarioWizard(s.ID, "scenario");
     }
   };
   const setTitle = (title) => {
@@ -923,6 +938,7 @@ const useFetchRiScs = (riScIdFromParams) => {
   const location = useLocation();
   const navigate = useNavigate();
   const getRiScPath = useRouteRef(riScRouteRef);
+  const [isRequesting, setIsRequesting] = useState(false);
   const {
     fetchRiScs,
     postRiScs,
@@ -953,8 +969,9 @@ const useFetchRiScs = (riScIdFromParams) => {
   useEffectOnce(() => {
     fetchRiScs(
       (res) => {
-        const fetchedRiScs = res.map((riScDTO) => {
-          const content = dtoToRiSc(JSON.parse(riScDTO.riScContent));
+        const fetchedRiScs = res.filter((risk) => risk.status === ContentStatus.Success).map((riScDTO) => {
+          const json = JSON.parse(riScDTO.riScContent);
+          const content = dtoToRiSc(json);
           return {
             id: riScDTO.riScId,
             content,
@@ -963,6 +980,16 @@ const useFetchRiScs = (riScIdFromParams) => {
         });
         setRiScs(fetchedRiScs);
         setIsFetching(false);
+        const errorRiScs = res.filter((risk) => risk.status !== ContentStatus.Success).map((risk) => risk.riScId);
+        if (errorRiScs.length > 0) {
+          const errorMessage = `Failed to fetch risc scorecards with ids: ${errorRiScs.join(
+            ", "
+          )}`;
+          setResponse({
+            statusMessage: errorMessage,
+            status: ProcessingStatus.ErrorWhenFetchingRiScs
+          });
+        }
         if (fetchedRiScs.length === 0) {
           return;
         }
@@ -1092,6 +1119,7 @@ const useFetchRiScs = (riScIdFromParams) => {
         isError: false,
         isSuccess: false
       });
+      setIsRequesting(true);
       putRiScs(
         updatedRiSc,
         () => {
@@ -1104,6 +1132,7 @@ const useFetchRiScs = (riScIdFromParams) => {
           setRiScs(
             riScs.map((r) => r.id === selectedRiSc.id ? updatedRiSc : r)
           );
+          setIsRequesting(false);
         },
         () => {
           setUpdateRiScStatus({
@@ -1111,6 +1140,7 @@ const useFetchRiScs = (riScIdFromParams) => {
             isError: true,
             isSuccess: false
           });
+          setIsRequesting(false);
         }
       );
     }
@@ -1137,7 +1167,8 @@ const useFetchRiScs = (riScIdFromParams) => {
     createNewRiSc,
     updateRiSc,
     approveRiSc,
-    response
+    response,
+    isRequesting
   };
 };
 
@@ -1242,7 +1273,7 @@ const useInputFieldStyles = makeStyles((theme) => ({
   paper: {
     padding: theme.spacing(2),
     marginBottom: theme.spacing(2),
-    backgroundColor: theme.palette.type === "dark" ? "#404040" : "#e0e0e0"
+    backgroundColor: theme.palette.type === "dark" ? "#404040" : "#FFFFFF"
   },
   root: {
     "&.Mui-disabled": {
@@ -1301,10 +1332,23 @@ const Dropdown = ({
   handleChange,
   error,
   required,
-  variant = "outlined"
+  variant = "outlined",
+  renderSelectedValue
 }) => {
   const { formLabel, formControl } = useInputFieldStyles();
   const multiple = Array.isArray(selectedValues);
+  function getOptionsValue(option) {
+    return typeof option === "string" ? option : option.value;
+  }
+  function getOptionsRenderValue(option) {
+    return typeof option === "string" ? option : option.renderedValue;
+  }
+  function renderSelectedValueHandler(value) {
+    if (renderSelectedValue) {
+      return renderSelectedValue(value);
+    }
+    return value;
+  }
   const onChange = (event) => handleChange(event.target.value);
   const renderValue = (selected) => multiple ? /* @__PURE__ */ React.createElement(
     Box,
@@ -1316,7 +1360,7 @@ const Dropdown = ({
         paddingBottom: 0
       }
     },
-    selected.map((value) => /* @__PURE__ */ React.createElement(Chip, { key: value, label: value }))
+    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,
@@ -1336,7 +1380,7 @@ const Dropdown = ({
         }
       } : {}
     },
-    options.map((name) => /* @__PURE__ */ React.createElement(MenuItem, { key: name, value: name }, multiple && /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Checkbox, { checked: selectedValues.indexOf(name) > -1 })), /* @__PURE__ */ React.createElement(ListItemText, { primary: 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));
 };
 
@@ -1353,6 +1397,20 @@ const ScenarioStep = () => {
     setThreatActors,
     setVulnerabilities
   } = useContext(ScenarioContext);
+  const translatedThreatActors = threatActorsOptions.map((threatActor) => {
+    return {
+      value: threatActor,
+      /* @ts-ignore Because ts can't typecheck strings agains our keys */
+      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}`)
+    };
+  });
   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,
     {
@@ -1379,8 +1437,11 @@ const ScenarioStep = () => {
       Dropdown,
       {
         selectedValues: scenario.threatActors,
-        options: threatActorsOptions,
-        handleChange: setThreatActors
+        options: translatedThreatActors,
+        handleChange: setThreatActors,
+        renderSelectedValue: (value) => {
+          return t(`threatActors.${value}`);
+        }
       }
     )
   ), /* @__PURE__ */ React.createElement(
@@ -1399,8 +1460,11 @@ const ScenarioStep = () => {
       Dropdown,
       {
         selectedValues: scenario.vulnerabilities,
-        options: vulnerabilitiesOptions,
-        handleChange: setVulnerabilities
+        options: translatedVulnerabilities,
+        handleChange: setVulnerabilities,
+        renderSelectedValue: (value) => {
+          return t(`vulnerabilities.${value}`);
+        }
       }
     )
   ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
@@ -1623,6 +1687,7 @@ const ProbabilityTable = ({
   selectedValue,
   handleChange
 }) => {
+  const theme = useTheme();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { table, cell, radio } = useTableStyles$1();
   const handleChangeRow = (row) => () => handleChange(row);
@@ -1631,7 +1696,10 @@ const ProbabilityTable = ({
     {
       checked: selectedValue === row,
       onChange: handleChangeRow(row),
-      style: { padding: 0, color: "#9BC9FE" }
+      style: {
+        padding: 0,
+        color: theme.palette.type === "dark" ? "#9BC9FE" : theme.palette.primary.main
+      }
     }
   ), row, ": ", t(`probabilityTable.rows.${row}`)));
   const contentCell = (row) => /* @__PURE__ */ React.createElement("td", { className: cell }, t(`probabilityTable.cells.${row}`));
@@ -1642,6 +1710,7 @@ const ConsequenceTable = ({
   selectedValue,
   handleChange
 }) => {
+  const theme = useTheme();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { table, labelCell, cell, voidCell, radio } = useTableStyles$1();
   const handleChangeRow = (row) => () => handleChange(row);
@@ -1651,7 +1720,10 @@ const ConsequenceTable = ({
       {
         checked: selectedValue === row,
         onChange: handleChangeRow(row),
-        style: { padding: 0, color: "#9BC9FE" }
+        style: {
+          padding: 0,
+          color: theme.palette.type === "dark" ? theme.palette.primary.light : theme.palette.primary.main
+        }
       }
     ), row, ": ", t(`consequenceTable.rows.${row}`)));
   };
@@ -1693,11 +1765,21 @@ const RiskStep = ({ riskType, restEqualsInitial }) => {
   useEffect(() => {
     if (restEqualsInitial)
       setRemainingConsequence(getConsequenceLevel(scenario.risk));
-  }, [restEqualsInitial, scenario.risk, scenario.risk.consequence, setRemainingConsequence]);
+  }, [
+    restEqualsInitial,
+    scenario.risk,
+    scenario.risk.consequence,
+    setRemainingConsequence
+  ]);
   useEffect(() => {
     if (restEqualsInitial)
       setRemainingProbability(getProbabilityLevel(scenario.risk));
-  }, [restEqualsInitial, scenario.risk, scenario.risk.probability, setRemainingProbability]);
+  }, [
+    restEqualsInitial,
+    scenario.risk,
+    scenario.risk.probability,
+    setRemainingProbability
+  ]);
   const setC = riskType === "initial" ? setConsequence : setRemainingConsequence;
   const setP = riskType === "initial" ? setProbability : setRemainingProbability;
   return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(Typography, { className: h2 }, t(`scenarioStepper.${resourceKey}.title`)), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t(`scenarioStepper.${resourceKey}.subtitle`))), /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("dictionary.probability")), /* @__PURE__ */ React.createElement(Typography, { className: subtitle2 }, t(`scenarioStepper.${resourceKey}.probabilitySubtitle`))), /* @__PURE__ */ React.createElement(Box, { className: box }, /* @__PURE__ */ React.createElement(
@@ -1749,6 +1831,15 @@ const useWizardStyle = makeStyles((theme) => ({
   saveAndNextButtons: {
     display: "flex",
     gap: theme.spacing(2)
+  },
+  button: {
+    "&.MuiButton-outlined": {
+      color: theme.palette.type === "dark" ? "#9CC9FF" : theme.palette.link,
+      borderr: "1px solid rgba(25, 118, 210, 0.5)",
+      "&:hover": {
+        borderColor: theme.palette.type === "dark" ? "#9CC9FF" : theme.palette.linkHover
+      }
+    }
   }
 }));
 
@@ -1786,6 +1877,7 @@ const ScenarioWizard = ({
     header,
     stepper,
     steps,
+    button,
     buttonContainer,
     buttonContainerRight,
     saveAndNextButtons
@@ -1801,6 +1893,7 @@ const ScenarioWizard = ({
   } = useContext(ScenarioContext);
   const [showCloseConfirmation, setShowCloseConfirmation] = useState(false);
   const [restEqualsInitial, setRestEqualsInitial] = useState(isNewScenario);
+  const [canCloseIfSuccessfull, setCanCloseIfSuccessfull] = useState(false);
   useEffect(() => {
     if (step === "restRisk")
       setRestEqualsInitial(false);
@@ -1810,15 +1903,16 @@ const ScenarioWizard = ({
     setShowCloseConfirmation(false);
   }, [closeScenario]);
   useEffect(() => {
-    if (updateStatus.isSuccess) {
+    if (updateStatus.isSuccess && canCloseIfSuccessfull) {
       close();
     } else if (updateStatus.isError && wizardRef.current) {
       setShowCloseConfirmation(false);
       wizardRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
     }
-  }, [close, updateStatus]);
+  }, [canCloseIfSuccessfull, close, updateStatus]);
   const saveAndClose = () => {
     saveScenario();
+    setCanCloseIfSuccessfull(true);
   };
   const handleCloseStepper = () => {
     if (JSON.stringify(scenario) !== JSON.stringify(originalScenario)) {
@@ -1848,7 +1942,15 @@ const ScenarioWizard = ({
   const isLastStep = () => {
     return scenarioWizardSteps.indexOf(step) === scenarioWizardSteps.length - 1;
   };
-  return /* @__PURE__ */ React.createElement("div", { ref: wizardRef }, /* @__PURE__ */ React.createElement(Box, { className: root }, /* @__PURE__ */ React.createElement(Box, { className: container }, /* @__PURE__ */ React.createElement(Box, { className: header }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(Button$1, { variant: "outlined", onClick: handleCloseStepper }, t("dictionary.cancel"))), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref: wizardRef }, /* @__PURE__ */ React.createElement(Box, { className: root }, /* @__PURE__ */ React.createElement(Box, { className: container }, /* @__PURE__ */ React.createElement(Box, { className: header }, /* @__PURE__ */ React.createElement(Typography, { className: h1 }, t("scenarioDrawer.title")), /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      variant: "outlined",
+      className: button,
+      onClick: handleCloseStepper
+    },
+    t("dictionary.cancel")
+  )), /* @__PURE__ */ React.createElement(
     Stepper,
     {
       className: stepper,
@@ -1896,6 +1998,7 @@ const ScenarioWizard = ({
     /* @__PURE__ */ React.createElement(Box, { className: saveAndNextButtons }, /* @__PURE__ */ React.createElement(
       Button$1,
       {
+        className: button,
         variant: isLastStep() ? "contained" : "outlined",
         onClick: saveAndClose,
         disabled: updateStatus.isLoading
@@ -1957,7 +2060,6 @@ const useScenarioDrawerStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.type === "dark" ? "#555555" : "#e0e0e0"
   },
   gridContainer: {
-    padding: theme.spacing(2),
     marginBottom: theme.palette.type === "dark" ? theme.spacing(1) : "7px",
     backgroundColor: theme.palette.type === "dark" ? "#55555519" : "#e0e0e019"
   },
@@ -2059,7 +2161,7 @@ const RiskSection = () => {
   ));
 };
 
-const useActionBoxStyles = makeStyles((_) => ({
+const useActionBoxStyles = makeStyles((theme) => ({
   alignCenter: {
     display: "flex",
     alignItems: "center"
@@ -2067,6 +2169,28 @@ const useActionBoxStyles = makeStyles((_) => ({
   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"
   }
 }));
 
@@ -2087,7 +2211,7 @@ const ChipDropdown = ({
       style: {
         margin: 0,
         padding: 0,
-        backgroundColor: "#D9D9D9",
+        backgroundColor: selectedValue === "Completed" ? "#6BC6A4" : "#D9D9D9",
         color: "#000000"
       },
       label: selectedValue,
@@ -2126,7 +2250,14 @@ const ActionBox = ({
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const { body2, label } = useFontStyles();
   const { gridContainer } = useScenarioDrawerStyles();
-  const { alignCenter, justifyEnd } = useActionBoxStyles();
+  const {
+    alignCenter,
+    row,
+    paddingTop,
+    actionDescription,
+    column,
+    chipDropdown
+  } = useActionBoxStyles();
   const [previousAction, setPreviousAction] = useState(action);
   useEffect(() => {
     if (previousAction !== action) {
@@ -2140,19 +2271,28 @@ const ActionBox = ({
       status
     });
   };
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, className: gridContainer }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, className: alignCenter }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measure"), " ", index)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, className: justifyEnd }, /* @__PURE__ */ React.createElement(
+  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,
     {
       options: actionStatusOptions,
       selectedValue: action.status,
       handleChange: setStatus
     }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { className: body2 }, action.description)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.measureOwner")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, action.owner)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(Typography, { className: label }, t("dictionary.deadline")), /* @__PURE__ */ React.createElement(Typography, { className: body2 }, formatDate(action.deadline))));
+  ))));
+};
+
+const 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 ActionsSection = () => {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  const { h3, button } = useFontStyles();
+  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(
@@ -2165,7 +2305,7 @@ const ActionsSection = () => {
         marginBottom: "12px"
       }
     },
-    /* @__PURE__ */ React.createElement(Typography, { className: h3, gutterBottom: true }, t("scenarioDrawer.measureTab.actionsTitle")),
+    /* @__PURE__ */ React.createElement(Typography, { className: h3 }, t("scenarioDrawer.measureTab.actionsTitle")),
     /* @__PURE__ */ React.createElement(
       Button,
       {
@@ -2176,7 +2316,7 @@ const ActionsSection = () => {
         startIcon: /* @__PURE__ */ React.createElement(EditIcon, { className: editIcon, "aria-label": "Edit" })
       }
     )
-  ), scenario.actions.map((action, index) => /* @__PURE__ */ React.createElement(Fragment, { key: action.ID }, /* @__PURE__ */ React.createElement(
+  ), 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,
     {
       action,
@@ -3119,10 +3259,19 @@ const RiScInfo = ({ riSc, approveRiSc, edit }) => {
   ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 4 }, /* @__PURE__ */ React.createElement(RiScStatusComponent, { selectedRiSc: riSc, publishRiScFn: approveRiSc })));
 };
 
+const useLinearProgressStyle = makeStyles((theme) => ({
+  linearProgress: {
+    position: "sticky",
+    top: 0,
+    margin: theme.spacing(2)
+  }
+}));
+
 const Plugin = () => {
   var _a, _b;
   const params = useParams();
   const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { linearProgress } = useLinearProgressStyle();
   const [RiScDialogState, setRiScDialogState] = useState(
     RiScDialogStates.Closed
   );
@@ -3139,7 +3288,8 @@ const Plugin = () => {
     updateRiScStatus,
     resetRiScStatus,
     approveRiSc,
-    response
+    response,
+    isRequesting
   } = useFetchRiScs(params.riScId);
   const scenario = useScenarioDrawer(
     selectedRiSc != null ? selectedRiSc : null,
@@ -3152,7 +3302,7 @@ const Plugin = () => {
     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)), scenarioWizardStep !== null ? /* @__PURE__ */ React.createElement(
+  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,
@@ -3214,4 +3364,4 @@ const RiScPlugin = () => {
 };
 
 export { RiScPlugin };
-//# sourceMappingURL=index-55c3e55b.esm.js.map
+//# sourceMappingURL=index-b5d09407.esm.js.map