@kartverket/backstage-plugin-risk-scorecard 3.10.3 → 3.10.5

package/css/theme.css

@@ -87,4 +87,8 @@ Remember to prefix custom styles with 'ros-' to avoid conflicts with other plugi
 
   --ros-input-text-color: #ffffff80;
   --ros-input-disabledBackground: rgba(255, 255, 255, 0.12);
+
+  .bui-SwitchIndicator {
+    background-color: var(--bui-gray-6);
+  }
 }

package/dist/components/action/ActionEdit.esm.js

@@ -0,0 +1,63 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Button from '@mui/material/Button';
+import { useForm } from 'react-hook-form';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { pluginRiScTranslationRef } from '../../utils/translations.esm.js';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useRiScs } from '../../contexts/RiScContext.esm.js';
+import { ActionFormItem } from '../scenarioDrawer/components/ActionFormItem.esm.js';
+
+function ActionEdit(props) {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const formMethods = useForm({
+    defaultValues: {
+      title: props.action.title,
+      description: props.action.description,
+      status: props.action.status,
+      url: props.action.url
+    }
+  });
+  const { updateStatus } = useRiScs();
+  const onSubmit = (data) => {
+    const newAction = {
+      ...props.action,
+      ...data
+    };
+    props.onSaveAction(newAction);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ActionFormItem,
+      {
+        formMethods,
+        handleDelete: props.onDeleteAction
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 1, children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          color: "primary",
+          variant: "contained",
+          onClick: formMethods.handleSubmit(onSubmit),
+          disabled: !formMethods.formState.isDirty || updateStatus.isLoading,
+          children: [
+            t("dictionary.save"),
+            updateStatus.isLoading && /* @__PURE__ */ jsx(
+              CircularProgress,
+              {
+                size: 16,
+                sx: { marginLeft: 8, color: "inherit" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: props.onCancelEdit, children: t("dictionary.cancel") })
+    ] })
+  ] });
+}
+
+export { ActionEdit };
+//# sourceMappingURL=ActionEdit.esm.js.map

package/dist/components/action/ActionEdit.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionEdit.esm.js","sources":["../../../src/components/action/ActionEdit.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport { Action } from '../../utils/types.ts';\nimport { SubmitHandler, useForm } from 'react-hook-form';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { pluginRiScTranslationRef } from '../../utils/translations.ts';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport { useRiScs } from '../../contexts/RiScContext.tsx';\nimport { ActionFormItem } from '../scenarioDrawer/components/ActionFormItem.tsx';\n\ntype ActionEditProps = {\n  action: Action;\n  onCancelEdit: () => void;\n  onSaveAction: (newAction: Action) => void;\n  onDeleteAction: () => void;\n  onFormSubmitted?: () => void;\n};\n\ntype ActionEditForm = {\n  title: string;\n  description: string;\n  status: string;\n  url: string;\n};\n\nexport function ActionEdit(props: ActionEditProps) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n\n  const formMethods = useForm<ActionEditForm>({\n    defaultValues: {\n      title: props.action.title,\n      description: props.action.description,\n      status: props.action.status,\n      url: props.action.url,\n    },\n  });\n  const { updateStatus } = useRiScs();\n\n  const onSubmit: SubmitHandler<ActionEditForm> = data => {\n    const newAction = {\n      ...props.action,\n      ...data,\n    };\n    props.onSaveAction(newAction);\n  };\n\n  return (\n    <>\n      <ActionFormItem\n        formMethods={formMethods}\n        handleDelete={props.onDeleteAction}\n      />\n      <Box display=\"flex\" gap={1}>\n        <Button\n          color=\"primary\"\n          variant=\"contained\"\n          onClick={formMethods.handleSubmit(onSubmit)}\n          disabled={!formMethods.formState.isDirty || updateStatus.isLoading}\n        >\n          {t('dictionary.save')}\n          {updateStatus.isLoading && (\n            <CircularProgress\n              size={16}\n              sx={{ marginLeft: 8, color: 'inherit' }}\n            />\n          )}\n        </Button>\n        <Button onClick={props.onCancelEdit}>{t('dictionary.cancel')}</Button>\n      </Box>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,MAAM,cAAc,OAAA,CAAwB;AAAA,IAC1C,aAAA,EAAe;AAAA,MACb,KAAA,EAAO,MAAM,MAAA,CAAO,KAAA;AAAA,MACpB,WAAA,EAAa,MAAM,MAAA,CAAO,WAAA;AAAA,MAC1B,MAAA,EAAQ,MAAM,MAAA,CAAO,MAAA;AAAA,MACrB,GAAA,EAAK,MAAM,MAAA,CAAO;AAAA;AACpB,GACD,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,QAAA,EAAS;AAElC,EAAA,MAAM,WAA0C,CAAA,IAAA,KAAQ;AACtD,IAAA,MAAM,SAAA,GAAY;AAAA,MAChB,GAAG,KAAA,CAAM,MAAA;AAAA,MACT,GAAG;AAAA,KACL;AACA,IAAA,KAAA,CAAM,aAAa,SAAS,CAAA;AAAA,EAC9B,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,cAAc,KAAA,CAAM;AAAA;AAAA,KACtB;AAAA,oBACA,IAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,KAAK,CAAA,EACvB,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,SAAA;AAAA,UACN,OAAA,EAAQ,WAAA;AAAA,UACR,OAAA,EAAS,WAAA,CAAY,YAAA,CAAa,QAAQ,CAAA;AAAA,UAC1C,QAAA,EAAU,CAAC,WAAA,CAAY,SAAA,CAAU,WAAW,YAAA,CAAa,SAAA;AAAA,UAExD,QAAA,EAAA;AAAA,YAAA,CAAA,CAAE,iBAAiB,CAAA;AAAA,YACnB,aAAa,SAAA,oBACZ,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,EAAA;AAAA,gBACN,EAAA,EAAI,EAAE,UAAA,EAAY,CAAA,EAAG,OAAO,SAAA;AAAU;AAAA;AACxC;AAAA;AAAA,OAEJ;AAAA,0BACC,MAAA,EAAA,EAAO,OAAA,EAAS,MAAM,YAAA,EAAe,QAAA,EAAA,CAAA,CAAE,mBAAmB,CAAA,EAAE;AAAA,KAAA,EAC/D;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/action/ActionRow.esm.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DeleteActionConfirmation } from '../scenarioDrawer/components/DeleteConfirmation.esm.js';
+import { useState } from 'react';
+import { ActionEdit } from './ActionEdit.esm.js';
+import { ActionView } from './ActionView.esm.js';
+
+function ActionRow(props) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [deleteActionConfirmationIsOpen, setDeleteActionConfirmationIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    isEditing ? /* @__PURE__ */ jsx(
+      ActionEdit,
+      {
+        onSaveAction: (a) => {
+          props.onSaveAction(a);
+          setIsEditing(false);
+        },
+        onDeleteAction: () => setDeleteActionConfirmationIsOpen(true),
+        onCancelEdit: () => setIsEditing(false),
+        action: props.action
+      }
+    ) : /* @__PURE__ */ jsx(
+      ActionView,
+      {
+        action: props.action,
+        onRefreshActionStatus: props.onRefreshActionStatus,
+        onNewActionStatus: props.onNewActionStatus,
+        toggleEditMode: () => setIsEditing(!isEditing),
+        openDeleteDialog: () => setDeleteActionConfirmationIsOpen(true),
+        allowDeletion: props.allowDeletion,
+        allowEdit: props.allowEdit,
+        optimisticStatus: props.optimisticStatus,
+        optimisticUpdatedStatus: props.optimisticUpdatedStatus,
+        index: props.index
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteActionConfirmation,
+      {
+        isOpen: deleteActionConfirmationIsOpen,
+        setIsOpen: setDeleteActionConfirmationIsOpen,
+        onConfirm: () => props.onDeleteAction(props.action.ID)
+      }
+    )
+  ] }, props.action.ID);
+}
+
+export { ActionRow };
+//# sourceMappingURL=ActionRow.esm.js.map

package/dist/components/action/ActionRow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow.esm.js","sources":["../../../src/components/action/ActionRow.tsx"],"sourcesContent":["import { UpdatedStatusEnumType } from '../../utils/utilityfunctions.ts';\nimport { ActionStatusOptions } from '../../utils/constants.ts';\nimport { DeleteActionConfirmation } from '../scenarioDrawer/components/DeleteConfirmation.tsx';\nimport { Action } from '../../utils/types.ts';\nimport { useState } from 'react';\nimport { ActionEdit } from './ActionEdit.tsx';\nimport { ActionView } from './ActionView.tsx';\n\ntype ActionRowProps = {\n  action: Action;\n  onRefreshActionStatus: (action: Action) => void;\n  onNewActionStatus: (actionId: string, newStatus: ActionStatusOptions) => void;\n  onDeleteAction: (actionId: string) => void;\n  onSaveAction: (newAction: Action) => void;\n  allowDeletion?: boolean;\n  allowEdit?: boolean;\n  optimisticStatus?: ActionStatusOptions;\n  optimisticUpdatedStatus?: UpdatedStatusEnumType;\n  index?: number;\n};\n\nexport function ActionRow(props: ActionRowProps) {\n  const [isEditing, setIsEditing] = useState<boolean>(false);\n  const [deleteActionConfirmationIsOpen, setDeleteActionConfirmationIsOpen] =\n    useState(false);\n\n  return (\n    <div key={props.action.ID}>\n      {isEditing ? (\n        <ActionEdit\n          onSaveAction={(a: Action) => {\n            props.onSaveAction(a);\n            setIsEditing(false);\n          }}\n          onDeleteAction={() => setDeleteActionConfirmationIsOpen(true)}\n          onCancelEdit={() => setIsEditing(false)}\n          action={props.action}\n        />\n      ) : (\n        <ActionView\n          action={props.action}\n          onRefreshActionStatus={props.onRefreshActionStatus}\n          onNewActionStatus={props.onNewActionStatus}\n          toggleEditMode={() => setIsEditing(!isEditing)}\n          openDeleteDialog={() => setDeleteActionConfirmationIsOpen(true)}\n          allowDeletion={props.allowDeletion}\n          allowEdit={props.allowEdit}\n          optimisticStatus={props.optimisticStatus}\n          optimisticUpdatedStatus={props.optimisticUpdatedStatus}\n          index={props.index}\n        />\n      )}\n      <DeleteActionConfirmation\n        isOpen={deleteActionConfirmationIsOpen}\n        setIsOpen={setDeleteActionConfirmationIsOpen}\n        onConfirm={() => props.onDeleteAction(props.action.ID)}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAqBO,SAAS,UAAU,KAAA,EAAuB;AAC/C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAkB,KAAK,CAAA;AACzD,EAAA,MAAM,CAAC,8BAAA,EAAgC,iCAAiC,CAAA,GACtE,SAAS,KAAK,CAAA;AAEhB,EAAA,4BACG,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,SAAA,mBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAc,CAAC,CAAA,KAAc;AAC3B,UAAA,KAAA,CAAM,aAAa,CAAC,CAAA;AACpB,UAAA,YAAA,CAAa,KAAK,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,cAAA,EAAgB,MAAM,iCAAA,CAAkC,IAAI,CAAA;AAAA,QAC5D,YAAA,EAAc,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,QACtC,QAAQ,KAAA,CAAM;AAAA;AAAA,KAChB,mBAEA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,uBAAuB,KAAA,CAAM,qBAAA;AAAA,QAC7B,mBAAmB,KAAA,CAAM,iBAAA;AAAA,QACzB,cAAA,EAAgB,MAAM,YAAA,CAAa,CAAC,SAAS,CAAA;AAAA,QAC7C,gBAAA,EAAkB,MAAM,iCAAA,CAAkC,IAAI,CAAA;AAAA,QAC9D,eAAe,KAAA,CAAM,aAAA;AAAA,QACrB,WAAW,KAAA,CAAM,SAAA;AAAA,QACjB,kBAAkB,KAAA,CAAM,gBAAA;AAAA,QACxB,yBAAyB,KAAA,CAAM,uBAAA;AAAA,QAC/B,OAAO,KAAA,CAAM;AAAA;AAAA,KACf;AAAA,oBAEF,GAAA;AAAA,MAAC,wBAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,8BAAA;AAAA,QACR,SAAA,EAAW,iCAAA;AAAA,QACX,WAAW,MAAM,KAAA,CAAM,cAAA,CAAe,KAAA,CAAM,OAAO,EAAE;AAAA;AAAA;AACvD,GAAA,EAAA,EA7BQ,KAAA,CAAM,OAAO,EA8BvB,CAAA;AAEJ;;;;"}

package/dist/components/action/ActionRowList.esm.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ActionRow } from './ActionRow.esm.js';
+import { useState, useCallback, useEffect, Fragment } from 'react';
+import { isToday } from '../../utils/date.esm.js';
+import { useScenario } from '../../contexts/ScenarioContext.esm.js';
+import { Flex } from '@backstage/ui';
+import Divider from '@mui/material/Divider';
+import { useDebounce } from '../../utils/hooks.esm.js';
+import { useBackstageContext } from '../../contexts/BackstageContext.esm.js';
+import { UpdatedStatusEnum } from '../../utils/utilityfunctions.esm.js';
+import { useRiScs } from '../../contexts/RiScContext.esm.js';
+import { getScenarioOfIdFromRiSc } from '../../utils/scenario.esm.js';
+
+function ActionRowList(props) {
+  const { selectedRiSc } = useRiScs();
+  const { submitEditedScenarioToRiSc } = useScenario();
+  const { profileInfo } = useBackstageContext();
+  const [pendingActionStatusUpdates, setPendingActionStatusUpdates] = useState({});
+  const [pendingActionUpdatesHistory, setPendingActionUpdatesHistory] = useState([]);
+  const onRefreshActionStatus = (action) => {
+    if (isToday(action.lastUpdated ?? null)) return;
+    setPendingActionStatusUpdates((prev) => ({
+      ...prev,
+      [props.scenarioId]: {
+        ...prev[props.scenarioId],
+        [action.ID]: action.status
+      }
+    }));
+    setPendingActionUpdatesHistory((prev) => [...prev, action.ID]);
+  };
+  const onNewActionStatus = (actionId, newStatus) => {
+    setPendingActionStatusUpdates((prev) => ({
+      ...prev,
+      [props.scenarioId]: {
+        ...prev[props.scenarioId],
+        [actionId]: newStatus
+      }
+    }));
+    setPendingActionUpdatesHistory((prev) => [...prev, actionId]);
+  };
+  const onDeleteAction = (actionId) => {
+    const oldScenario = getScenarioOfIdFromRiSc(props.scenarioId, selectedRiSc);
+    if (!oldScenario) return;
+    const newScenario = {
+      ...oldScenario,
+      actions: oldScenario.actions.filter((a) => a.ID !== actionId)
+    };
+    submitEditedScenarioToRiSc(newScenario);
+  };
+  const onSaveAction = (newAction) => {
+    const oldScenario = getScenarioOfIdFromRiSc(props.scenarioId, selectedRiSc);
+    if (!oldScenario) return;
+    submitEditedScenarioToRiSc(
+      {
+        ...oldScenario,
+        actions: oldScenario.actions.map(
+          (a) => a.ID === newAction.ID ? newAction : a
+        )
+      },
+      {
+        profileInfo
+      }
+    );
+  };
+  const debounceCallback = useCallback(
+    (updates) => {
+      if (Object.keys(updates).length === 0) return;
+      Object.keys(updates).forEach((scenarioId) => {
+        const oldScenario = getScenarioOfIdFromRiSc(scenarioId, selectedRiSc);
+        if (!oldScenario) return;
+        const newActionArray = oldScenario.actions.map(
+          (a) => a.ID in updates[scenarioId] ? {
+            ...a,
+            status: updates[scenarioId][a.ID] ?? a.status
+          } : a
+        );
+        const updatedScenario = {
+          ...oldScenario,
+          actions: newActionArray
+        };
+        submitEditedScenarioToRiSc(updatedScenario, {
+          idsOfActionsToForceUpdateLastUpdatedValue: Object.keys(
+            updates[scenarioId]
+          ),
+          profileInfo,
+          onSuccess: () => {
+            setPendingActionStatusUpdates({});
+          },
+          onError: () => {
+            setPendingActionStatusUpdates((prevStatusUpdates) => {
+              setPendingActionUpdatesHistory(
+                (prevHistory) => prevHistory.filter(
+                  (actionId) => Object.keys(prevStatusUpdates[scenarioId] ?? {}).includes(
+                    actionId
+                  )
+                )
+              );
+              return {};
+            });
+          }
+        });
+      });
+    },
+    [submitEditedScenarioToRiSc, profileInfo, selectedRiSc]
+  );
+  const { flush } = useDebounce(pendingActionStatusUpdates, 6e3, debounceCallback);
+  const actions = props.displayedActions ?? getScenarioOfIdFromRiSc(props.scenarioId, selectedRiSc)?.actions ?? [];
+  useEffect(() => {
+    return () => {
+      flush();
+    };
+  }, [flush]);
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    actions.map((action, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ActionRow,
+        {
+          action,
+          index,
+          onRefreshActionStatus,
+          onNewActionStatus,
+          onDeleteAction,
+          onSaveAction,
+          optimisticUpdatedStatus: pendingActionUpdatesHistory.includes(action.ID) ? UpdatedStatusEnum.UPDATED : void 0,
+          optimisticStatus: pendingActionStatusUpdates[props.scenarioId]?.[action.ID],
+          allowDeletion: props.allowDeletion,
+          allowEdit: props.allowEdit
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }, `Action-${action.ID}-${index}`))
+  ] });
+}
+
+export { ActionRowList };
+//# sourceMappingURL=ActionRowList.esm.js.map

package/dist/components/action/ActionRowList.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRowList.esm.js","sources":["../../../src/components/action/ActionRowList.tsx"],"sourcesContent":["import { Action } from '../../utils/types.ts';\nimport { ActionRow } from './ActionRow.tsx';\nimport { Fragment, useCallback, useEffect, useState } from 'react';\nimport { isToday } from '../../utils/date.ts';\nimport { ActionStatusOptions } from '../../utils/constants.ts';\nimport { useScenario } from '../../contexts/ScenarioContext.tsx';\nimport { Flex } from '@backstage/ui';\nimport Divider from '@mui/material/Divider';\nimport { useDebounce } from '../../utils/hooks.ts';\nimport { useBackstageContext } from '../../contexts/BackstageContext.tsx';\nimport { UpdatedStatusEnum } from '../../utils/utilityfunctions.ts';\nimport { useRiScs } from '../../contexts/RiScContext.tsx';\nimport { getScenarioOfIdFromRiSc } from '../../utils/scenario.ts';\n\ntype ActionRowListProps = {\n  scenarioId: string;\n  displayedActions?: Action[]; // Specify if not every action of scenario is to be displayed\n  allowDeletion?: boolean;\n  allowEdit?: boolean;\n};\n\nexport function ActionRowList(props: ActionRowListProps) {\n  const { selectedRiSc } = useRiScs();\n  const { submitEditedScenarioToRiSc } = useScenario();\n  const { profileInfo } = useBackstageContext();\n  const [pendingActionStatusUpdates, setPendingActionStatusUpdates] = useState<\n    Record<string, Record<string, ActionStatusOptions>>\n  >({});\n  const [pendingActionUpdatesHistory, setPendingActionUpdatesHistory] =\n    useState<string[]>([]);\n\n  const onRefreshActionStatus = (action: Action) => {\n    if (isToday(action.lastUpdated ?? null)) return;\n\n    setPendingActionStatusUpdates(prev => ({\n      ...prev,\n      [props.scenarioId]: {\n        ...prev[props.scenarioId],\n        [action.ID]: action.status as ActionStatusOptions,\n      },\n    }));\n    setPendingActionUpdatesHistory(prev => [...prev, action.ID]);\n  };\n\n  const onNewActionStatus = (\n    actionId: string,\n    newStatus: ActionStatusOptions,\n  ) => {\n    setPendingActionStatusUpdates(prev => ({\n      ...prev,\n      [props.scenarioId]: {\n        ...prev[props.scenarioId],\n        [actionId]: newStatus,\n      },\n    }));\n    setPendingActionUpdatesHistory(prev => [...prev, actionId]);\n  };\n\n  const onDeleteAction = (actionId: string) => {\n    const oldScenario = getScenarioOfIdFromRiSc(props.scenarioId, selectedRiSc);\n    if (!oldScenario) return;\n    const newScenario = {\n      ...oldScenario,\n      actions: oldScenario.actions.filter(a => a.ID !== actionId),\n    };\n    submitEditedScenarioToRiSc(newScenario);\n  };\n\n  const onSaveAction = (newAction: Action) => {\n    const oldScenario = getScenarioOfIdFromRiSc(props.scenarioId, selectedRiSc);\n    if (!oldScenario) return;\n    submitEditedScenarioToRiSc(\n      {\n        ...oldScenario,\n        actions: oldScenario.actions.map(a =>\n          a.ID === newAction.ID ? newAction : a,\n        ),\n      },\n      {\n        profileInfo: profileInfo,\n      },\n    );\n  };\n\n  const debounceCallback = useCallback(\n    (updates: Record<string, Record<string, ActionStatusOptions>>) => {\n      if (Object.keys(updates).length === 0) return;\n\n      Object.keys(updates).forEach(scenarioId => {\n        const oldScenario = getScenarioOfIdFromRiSc(scenarioId, selectedRiSc);\n        if (!oldScenario) return;\n        const newActionArray = oldScenario.actions.map(a =>\n          a.ID in updates[scenarioId]\n            ? {\n                ...a,\n                status: updates[scenarioId][a.ID] ?? a.status,\n              }\n            : a,\n        );\n\n        const updatedScenario = {\n          ...oldScenario,\n          actions: newActionArray,\n        };\n\n        submitEditedScenarioToRiSc(updatedScenario, {\n          idsOfActionsToForceUpdateLastUpdatedValue: Object.keys(\n            updates[scenarioId],\n          ),\n          profileInfo: profileInfo,\n          onSuccess: () => {\n            setPendingActionStatusUpdates({});\n          },\n          onError: () => {\n            // TODO: Should probably retry once before canceling updates\n            setPendingActionStatusUpdates(prevStatusUpdates => {\n              setPendingActionUpdatesHistory(prevHistory =>\n                prevHistory.filter(actionId =>\n                  Object.keys(prevStatusUpdates[scenarioId] ?? {}).includes(\n                    actionId,\n                  ),\n                ),\n              );\n              return {};\n            });\n          },\n        });\n      });\n    },\n    [submitEditedScenarioToRiSc, profileInfo, selectedRiSc],\n  );\n\n  const { flush } = useDebounce<\n    Record<string, Record<string, ActionStatusOptions>>\n  >(pendingActionStatusUpdates, 6000, debounceCallback);\n\n  const actions =\n    props.displayedActions ??\n    getScenarioOfIdFromRiSc(props.scenarioId, selectedRiSc)?.actions ??\n    [];\n\n  useEffect(() => {\n    return () => {\n      // flush on unmount. makes sure changes are saved\n      flush();\n    };\n  }, [flush]);\n\n  return (\n    <Flex direction=\"column\">\n      <Divider />\n      {actions.map((action, index) => (\n        <Fragment key={`Action-${action.ID}-${index}`}>\n          <ActionRow\n            action={action}\n            index={index}\n            onRefreshActionStatus={onRefreshActionStatus}\n            onNewActionStatus={onNewActionStatus}\n            onDeleteAction={onDeleteAction}\n            onSaveAction={onSaveAction}\n            optimisticUpdatedStatus={\n              pendingActionUpdatesHistory.includes(action.ID)\n                ? UpdatedStatusEnum.UPDATED\n                : undefined\n            }\n            optimisticStatus={\n              pendingActionStatusUpdates[props.scenarioId]?.[action.ID]\n            }\n            allowDeletion={props.allowDeletion}\n            allowEdit={props.allowEdit}\n          />\n          <Divider />\n        </Fragment>\n      ))}\n    </Flex>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/action/ActionURL.esm.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Text } from '@backstage/ui';
+import Link from '@mui/material/Link';
+import { body2 } from '../common/typography.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { pluginRiScTranslationRef } from '../../utils/translations.esm.js';
+
+function ActionURL(props) {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  return /* @__PURE__ */ jsxs(Box, { mt: "16px", children: [
+    /* @__PURE__ */ jsxs(Text, { as: "p", variant: "body-large", weight: "bold", children: [
+      " ",
+      t("dictionary.url")
+    ] }),
+    props.url ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        sx: {
+          ...body2,
+          wordBreak: "break-all"
+        },
+        target: "_blank",
+        rel: "noreferrer",
+        href: props.url.startsWith("http") ? props.url : `//${props.url}`,
+        children: props.url
+      }
+    ) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-large", style: { fontStyle: "italic" }, children: t("dictionary.emptyField", {
+      field: t("dictionary.url").toLowerCase()
+    }) })
+  ] });
+}
+
+export { ActionURL };
+//# sourceMappingURL=ActionURL.esm.js.map

package/dist/components/action/ActionURL.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionURL.esm.js","sources":["../../../src/components/action/ActionURL.tsx"],"sourcesContent":["import { Box, Text } from '@backstage/ui';\nimport Link from '@mui/material/Link';\nimport { body2 } from '../common/typography.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { pluginRiScTranslationRef } from '../../utils/translations.ts';\n\ntype ActionURLProps = {\n  url: string;\n};\n\nexport function ActionURL(props: ActionURLProps) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n  return (\n    <Box mt=\"16px\">\n      <Text as=\"p\" variant=\"body-large\" weight=\"bold\">\n        {' '}\n        {t('dictionary.url')}\n      </Text>\n      {props.url ? (\n        <Link\n          sx={{\n            ...body2,\n            wordBreak: 'break-all',\n          }}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          href={props.url.startsWith('http') ? props.url : `//${props.url}`}\n        >\n          {props.url}\n        </Link>\n      ) : (\n        <Text as=\"p\" variant=\"body-large\" style={{ fontStyle: 'italic' }}>\n          {t('dictionary.emptyField', {\n            field: t('dictionary.url').toLowerCase(),\n          })}\n        </Text>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAUO,SAAS,UAAU,KAAA,EAAuB;AAC/C,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EACN,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,YAAA,EAAa,QAAO,MAAA,EACtC,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MACA,EAAE,gBAAgB;AAAA,KAAA,EACrB,CAAA;AAAA,IACC,MAAM,GAAA,mBACL,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI;AAAA,UACF,GAAG,KAAA;AAAA,UACH,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAO,QAAA;AAAA,QACP,GAAA,EAAI,YAAA;AAAA,QACJ,IAAA,EAAM,KAAA,CAAM,GAAA,CAAI,UAAA,CAAW,MAAM,IAAI,KAAA,CAAM,GAAA,GAAM,CAAA,EAAA,EAAK,KAAA,CAAM,GAAG,CAAA,CAAA;AAAA,QAE9D,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,KACT,mBAEA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,YAAA,EAAa,KAAA,EAAO,EAAE,SAAA,EAAW,QAAA,EAAS,EAC5D,YAAE,uBAAA,EAAyB;AAAA,MAC1B,KAAA,EAAO,CAAA,CAAE,gBAAgB,CAAA,CAAE,WAAA;AAAY,KACxC,CAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/action/ActionView.esm.js

@@ -0,0 +1,175 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Flex, Text } from '@backstage/ui';
+import IconButton from '@mui/material/IconButton';
+import UpdatedStatusBadge from '../common/UpdatedStatusBadge.esm.js';
+import { DualButtonWithMenu } from '../common/DualButtonWithMenu.esm.js';
+import { getTranslatedActionStatus, actionStatusOptionsToTranslationKeys } from '../../utils/utilityfunctions.esm.js';
+import { ActionStatusOptions } from '../../utils/constants.esm.js';
+import { ScenarioLastUpdatedLabel } from '../scenario/ScenarioLastUpdatedLabel.esm.js';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Collapse from '@mui/material/Collapse';
+import Box from '@mui/material/Box';
+import { Edit } from '@mui/icons-material';
+import { Markdown } from '../common/Markdown.esm.js';
+import { ActionURL } from './ActionURL.esm.js';
+import { useScenario } from '../../contexts/ScenarioContext.esm.js';
+import { useRiScs } from '../../contexts/RiScContext.esm.js';
+import { getUpdatedStatus } from '../../utils/actions.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { pluginRiScTranslationRef } from '../../utils/translations.esm.js';
+
+const getActionStatusButtonClass = (status) => {
+  switch (status) {
+    case ActionStatusOptions.OK:
+      return "ros-button-green";
+    case ActionStatusOptions.NotOK:
+      return "ros-button-red";
+    default:
+      return "ros-button-gray";
+  }
+};
+function ActionView(props) {
+  const { t } = useTranslationRef(pluginRiScTranslationRef);
+  const { isActionExpanded, toggleActionExpanded } = useScenario();
+  const isExpanded = isActionExpanded(props.action.ID);
+  const { selectedRiSc } = useRiScs();
+  const updatedStatus = getUpdatedStatus(
+    props.action,
+    selectedRiSc?.lastPublished?.numberOfCommits ?? null
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: (e) => {
+          e.stopPropagation();
+          const target = e.target;
+          if (target && target.closest("[data-no-row-toggle]")) return;
+          toggleActionExpanded(props.action.ID);
+        },
+        onKeyDown: (e) => {
+          e.stopPropagation();
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleActionExpanded(props.action.ID);
+          }
+        },
+        style: { cursor: "pointer" },
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", justify: "between", children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "start", style: { width: "40%" }, children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleActionExpanded(props.action.ID);
+                },
+                children: /* @__PURE__ */ jsx(
+                  "i",
+                  {
+                    className: `ri-arrow-${isExpanded ? "down" : "right"}-s-line`
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+              /* @__PURE__ */ jsx(
+                UpdatedStatusBadge,
+                {
+                  status: props.optimisticUpdatedStatus ?? updatedStatus,
+                  isPending: !!props.optimisticUpdatedStatus
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { variant: "body-large", children: props.action.title ?? `${t("dictionary.measure")} ${props.index ?? ""}` })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "end", children: [
+            /* @__PURE__ */ jsx(
+              DualButtonWithMenu,
+              {
+                propsCommon: {
+                  className: getActionStatusButtonClass(
+                    props.optimisticStatus ?? props.action.status
+                  )
+                },
+                propsLeft: {
+                  children: getTranslatedActionStatus(
+                    props.optimisticStatus ?? props.action.status,
+                    t
+                  )
+                },
+                propsRight: {
+                  iconEnd: /* @__PURE__ */ jsx("i", { className: "ri-loop-left-line" }),
+                  onClick: () => {
+                    props.onRefreshActionStatus(props.action);
+                  }
+                },
+                menuItems: Object.values(ActionStatusOptions).map((value) => ({
+                  key: value,
+                  // @ts-ignore
+                  label: t(
+                    actionStatusOptionsToTranslationKeys[value]
+                  ),
+                  onClick: () => props.onNewActionStatus(props.action.ID, value),
+                  selected: props.optimisticStatus ? value === props.optimisticStatus : value === props.action.status
+                }))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ScenarioLastUpdatedLabel,
+              {
+                lastUpdated: !!props.optimisticStatus ? /* @__PURE__ */ new Date() : props.action.lastUpdated,
+                lastUpdatedBy: props.action.lastUpdatedBy
+              }
+            ),
+            props.allowDeletion && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  props.openDeleteDialog();
+                },
+                children: /* @__PURE__ */ jsx(DeleteIcon, {})
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Collapse,
+      {
+        in: isExpanded,
+        sx: { marginTop: 1 },
+        timeout: "auto",
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsxs(Box, { ml: "56px", mt: "4", mb: "2", children: [
+          /* @__PURE__ */ jsxs(Flex, { justify: "between", mt: "8px", align: "end", children: [
+            /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-large", weight: "bold", children: t("dictionary.description") }),
+            props.allowEdit && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                sx: {
+                  marginLeft: "auto",
+                  transition: "opacity 300ms ease-in"
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  props.toggleEditMode();
+                },
+                children: /* @__PURE__ */ jsx(Edit, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Markdown, { description: props.action.description }),
+          /* @__PURE__ */ jsx(ActionURL, { url: props.action.url })
+        ] })
+      }
+    )
+  ] });
+}
+
+export { ActionView };
+//# sourceMappingURL=ActionView.esm.js.map

package/dist/components/action/ActionView.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionView.esm.js","sources":["../../../src/components/action/ActionView.tsx"],"sourcesContent":["import { Flex, Text } from '@backstage/ui';\nimport IconButton from '@mui/material/IconButton';\nimport UpdatedStatusBadge from '../common/UpdatedStatusBadge.tsx';\nimport { DualButtonWithMenu } from '../common/DualButtonWithMenu.tsx';\nimport {\n  actionStatusOptionsToTranslationKeys,\n  getTranslatedActionStatus,\n  UpdatedStatusEnumType,\n} from '../../utils/utilityfunctions.ts';\nimport { ActionStatusOptions } from '../../utils/constants.ts';\nimport { ScenarioLastUpdatedLabel } from '../scenario/ScenarioLastUpdatedLabel.tsx';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport Collapse from '@mui/material/Collapse';\nimport Box from '@mui/material/Box';\nimport { Edit } from '@mui/icons-material';\nimport { Markdown } from '../common/Markdown.tsx';\nimport { ActionURL } from './ActionURL.tsx';\nimport { useScenario } from '../../contexts/ScenarioContext.tsx';\nimport { Action } from '../../utils/types.ts';\nimport { useRiScs } from '../../contexts/RiScContext.tsx';\nimport { getUpdatedStatus } from '../../utils/actions.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { pluginRiScTranslationRef } from '../../utils/translations.ts';\n\ntype ActionViewProps = {\n  action: Action;\n  onRefreshActionStatus: (action: Action) => void;\n  onNewActionStatus: (actionId: string, newStatus: ActionStatusOptions) => void;\n  toggleEditMode: () => void;\n  openDeleteDialog: () => void;\n  allowDeletion?: boolean;\n  allowEdit?: boolean;\n  optimisticStatus?: ActionStatusOptions;\n  optimisticUpdatedStatus?: UpdatedStatusEnumType;\n  index?: number;\n};\n\nconst getActionStatusButtonClass = (status: string): string => {\n  switch (status) {\n    case ActionStatusOptions.OK:\n      return 'ros-button-green';\n    case ActionStatusOptions.NotOK:\n      return 'ros-button-red';\n    default:\n      return 'ros-button-gray';\n  }\n};\n\nexport function ActionView(props: ActionViewProps) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n  const { isActionExpanded, toggleActionExpanded } = useScenario();\n  const isExpanded = isActionExpanded(props.action.ID);\n\n  const { selectedRiSc } = useRiScs();\n  const updatedStatus = getUpdatedStatus(\n    props.action,\n    selectedRiSc?.lastPublished?.numberOfCommits ?? null,\n  );\n\n  return (\n    <>\n      <div\n        role=\"button\"\n        tabIndex={0}\n        onClick={e => {\n          e.stopPropagation();\n\n          const target = e.target as HTMLElement | null;\n          if (target && target.closest('[data-no-row-toggle]')) return;\n\n          toggleActionExpanded(props.action.ID);\n        }}\n        onKeyDown={e => {\n          // Prevent keyboard event from bubbling up to parent(s)\n          e.stopPropagation();\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            toggleActionExpanded(props.action.ID);\n          }\n        }}\n        style={{ cursor: 'pointer' }}\n      >\n        <Flex align=\"center\" gap=\"1\" justify=\"between\">\n          <Flex align=\"center\" justify=\"start\" style={{ width: '40%' }}>\n            <IconButton\n              onClick={e => {\n                e.stopPropagation();\n                toggleActionExpanded(props.action.ID);\n              }}\n            >\n              <i\n                className={`ri-arrow-${isExpanded ? 'down' : 'right'}-s-line`}\n              />\n            </IconButton>\n            <Flex direction=\"column\" gap=\"1\">\n              <UpdatedStatusBadge\n                status={props.optimisticUpdatedStatus ?? updatedStatus}\n                isPending={!!props.optimisticUpdatedStatus}\n              />\n              <Text variant=\"body-large\">\n                {props.action.title ??\n                  `${t('dictionary.measure')} ${props.index ?? ''}`}\n              </Text>\n            </Flex>\n          </Flex>\n          <Flex align=\"center\" justify=\"end\">\n            <DualButtonWithMenu\n              propsCommon={{\n                className: getActionStatusButtonClass(\n                  props.optimisticStatus ?? props.action.status,\n                ),\n              }}\n              propsLeft={{\n                children: getTranslatedActionStatus(\n                  props.optimisticStatus ?? props.action.status,\n                  t,\n                ),\n              }}\n              propsRight={{\n                iconEnd: <i className=\"ri-loop-left-line\" />,\n                onClick: () => {\n                  props.onRefreshActionStatus(props.action);\n                },\n              }}\n              menuItems={Object.values(ActionStatusOptions).map(value => ({\n                key: value,\n                // @ts-ignore\n                label: t(\n                  actionStatusOptionsToTranslationKeys[\n                    value as ActionStatusOptions\n                  ],\n                ),\n                onClick: () => props.onNewActionStatus(props.action.ID, value),\n                selected: props.optimisticStatus\n                  ? value === props.optimisticStatus\n                  : value === props.action.status,\n              }))}\n            />\n            <ScenarioLastUpdatedLabel\n              lastUpdated={\n                !!props.optimisticStatus ? new Date() : props.action.lastUpdated\n              }\n              lastUpdatedBy={props.action.lastUpdatedBy}\n            />\n            {props.allowDeletion && (\n              <IconButton\n                onClick={e => {\n                  e.stopPropagation();\n                  props.openDeleteDialog();\n                }}\n              >\n                <DeleteIcon />\n              </IconButton>\n            )}\n          </Flex>\n        </Flex>\n      </div>\n      <Collapse\n        in={isExpanded}\n        sx={{ marginTop: 1 }}\n        timeout=\"auto\"\n        unmountOnExit\n      >\n        <Box ml=\"56px\" mt=\"4\" mb=\"2\">\n          <Flex justify=\"between\" mt=\"8px\" align=\"end\">\n            <Text as=\"p\" variant=\"body-large\" weight=\"bold\">\n              {t('dictionary.description')}\n            </Text>\n            {props.allowEdit && (\n              <IconButton\n                sx={{\n                  marginLeft: 'auto',\n                  transition: 'opacity 300ms ease-in',\n                }}\n                onClick={e => {\n                  e.stopPropagation();\n                  props.toggleEditMode();\n                }}\n              >\n                <Edit />\n              </IconButton>\n            )}\n          </Flex>\n          <Markdown description={props.action.description} />\n          <ActionURL url={props.action.url} />\n        </Box>\n      </Collapse>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/common/AlertBar/AlertBar.esm.js

@@ -15,5 +15,5 @@ function AlertBar({ severity, children, className, alertProps }) {
   ) });
 }
 
-export { AlertBar, AlertBar as default };
+export { AlertBar as default };
 //# sourceMappingURL=AlertBar.esm.js.map

package/dist/components/common/AlertBar/AlertBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBar.esm.js","sources":["../../../../src/components/common/AlertBar/AlertBar.tsx"],"sourcesContent":["import React from 'react';\nimport Alert, { AlertProps } from '@mui/material/Alert';\nimport styles from '../alertBar.module.css';\n\ntype Severity = 'success' | 'warning' | 'error' | 'info';\n\ntype Props = {\n  severity: Severity;\n  children: React.ReactNode;\n  className?: string; // applied to wrapper\n  alertProps?: Partial<AlertProps>;\n};\n\nexport function AlertBar({ severity, children, className, alertProps }: Props) {\n  const severityClass = (styles as any)[severity] || '';\n\n  return (\n    <div className={className}>\n      <Alert\n        severity={severity as any}\n        className={`${styles.alertBar} ${severityClass}`}\n        {...(alertProps as any)}\n      >\n        {children}\n      </Alert>\n    </div>\n  );\n}\n\nexport default AlertBar;\n"],"names":[],"mappings":";;;;AAaO,SAAS,SAAS,EAAE,QAAA,EAAU,QAAA,EAAU,SAAA,EAAW,YAAW,EAAU;AAC7E,EAAA,MAAM,aAAA,GAAiB,MAAA,CAAe,QAAQ,CAAA,IAAK,EAAA;AAEnD,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EACH,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,QAAQ,IAAI,aAAa,CAAA,CAAA;AAAA,MAC7C,GAAI,UAAA;AAAA,MAEJ;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AlertBar.esm.js","sources":["../../../../src/components/common/AlertBar/AlertBar.tsx"],"sourcesContent":["import React from 'react';\nimport Alert, { AlertProps } from '@mui/material/Alert';\nimport styles from '../alertBar.module.css';\n\ntype Severity = 'success' | 'warning' | 'error' | 'info';\n\ntype Props = {\n  severity: Severity;\n  children: React.ReactNode;\n  className?: string; // applied to wrapper\n  alertProps?: Partial<AlertProps>;\n};\n\nfunction AlertBar({ severity, children, className, alertProps }: Props) {\n  const severityClass = (styles as any)[severity] || '';\n\n  return (\n    <div className={className}>\n      <Alert\n        severity={severity as any}\n        className={`${styles.alertBar} ${severityClass}`}\n        {...(alertProps as any)}\n      >\n        {children}\n      </Alert>\n    </div>\n  );\n}\n\nexport default AlertBar;\n"],"names":[],"mappings":";;;;AAaA,SAAS,SAAS,EAAE,QAAA,EAAU,QAAA,EAAU,SAAA,EAAW,YAAW,EAAU;AACtE,EAAA,MAAM,aAAA,GAAiB,MAAA,CAAe,QAAQ,CAAA,IAAK,EAAA;AAEnD,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EACH,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,QAAQ,IAAI,aAAa,CAAA,CAAA;AAAA,MAC7C,GAAI,UAAA;AAAA,MAEJ;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

package/dist/components/common/MarkdownInput/MarkdownInput.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormLabel from '@mui/material/FormLabel';
@@ -23,9 +23,36 @@ const MarkdownInput = forwardRef(
     const [markdownContent, setMarkdownContent] = useState(
       value
     );
+    const wrapperRef = useRef(null);
     useEffect(() => {
       setMarkdownContent(value);
     }, [value]);
+    useEffect(() => {
+      const root = wrapperRef.current;
+      if (!root) return () => {
+      };
+      const handleKeyDown = (e) => {
+        if (e.key !== "Tab") return;
+        const active = document.activeElement;
+        if (!active || !root.contains(active)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const focusable = Array.from(
+          document.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          )
+        ).filter((el) => !el.hasAttribute("disabled"));
+        const index = focusable.indexOf(active);
+        const direction = e.shiftKey ? -1 : 1;
+        const nextIndex = index + direction;
+        const next = focusable[nextIndex] ?? (direction === 1 ? focusable[0] : focusable[focusable.length - 1]);
+        next?.focus();
+      };
+      root.addEventListener("keydown", handleKeyDown, true);
+      return () => {
+        root.removeEventListener("keydown", handleKeyDown, true);
+      };
+    }, [wrapperRef]);
     const handleMarkdownChange = (newValue) => {
       setMarkdownContent(newValue || "");
       onMarkdownChange?.(newValue || "");
@@ -50,6 +77,7 @@ const MarkdownInput = forwardRef(
       /* @__PURE__ */ jsx(
         "div",
         {
+          ref: wrapperRef,
           onFocusCapture,
           "data-color-mode": getActiveTheme(),
           className: styles.MarkDownInputWrapper,