feat: [PROD-15199] implement DeleteScenarioModal and integrate with S…

src/components/DeleteScenarioModal/DeleteScenarioModal.js

@@ -0,0 +1,131 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { Box, Button, Dialog, IconButton, Stack, Typography } from '@mui/material';
+import { Icon } from '../Icon';
+
+export const DeleteScenarioModal = ({ open, onClose, onConfirm, scenarioName }) => {
+  const { t } = useTranslation();
+
+  const handleConfirm = () => {
+    onConfirm();
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        sx: {
+          borderRadius: '12px',
+          maxWidth: '450px',
+          width: '100%',
+          p: 3,
+        },
+      }}
+      sx={{
+        '& .MuiBackdrop-root': {
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      }}
+    >
+      <Stack spacing={3}>
+        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+          <Typography
+            variant="h5"
+            sx={{
+              fontSize: 24,
+              fontWeight: 600,
+              color: (theme) => theme.palette.secondary.main,
+            }}
+          >
+            {t('components.deleteScenarioModal.title', 'Delete Scenario')}
+          </Typography>
+          <IconButton onClick={onClose} sx={{ p: 0, ml: 2 }}>
+            <Icon name="CircleX" size={24} />
+          </IconButton>
+        </Stack>
+
+        <Box
+          sx={{
+            backgroundColor: (theme) => theme.palette.background.default,
+            borderRadius: '8px',
+            p: 3,
+          }}
+        >
+          <Typography
+            variant="h6"
+            sx={{
+              fontSize: 18,
+              fontWeight: 600,
+              color: (theme) => theme.palette.secondary.main,
+              mb: 1,
+            }}
+          >
+            {scenarioName}
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              fontSize: 14,
+              color: (theme) => theme.palette.text.secondary,
+            }}
+          >
+            {t('components.deleteScenarioModal.message', 'Are you sure you want to delete this scenario?')}
+          </Typography>
+        </Box>
+
+        <Stack direction="row" spacing={2} justifyContent="flex-end">
+          <Button
+            onClick={onClose}
+            variant="outlined"
+            sx={{
+              borderColor: (theme) => theme.palette.divider,
+              color: (theme) => theme.palette.secondary.main,
+              textTransform: 'none',
+              fontWeight: 500,
+              px: 3,
+              '&:hover': {
+                borderColor: (theme) => theme.palette.divider,
+                backgroundColor: (theme) => theme.palette.action.hover,
+              },
+            }}
+          >
+            {t('components.deleteScenarioModal.cancel', 'Cancel')}
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            variant="contained"
+            startIcon={<Icon name="Trash2" size={16} />}
+            sx={{
+              backgroundColor: (theme) => theme.palette.error.main,
+              color: '#fff',
+              textTransform: 'none',
+              fontWeight: 500,
+              px: 3,
+              '&:hover': {
+                backgroundColor: (theme) => theme.palette.error.dark,
+              },
+            }}
+          >
+            {t('components.deleteScenarioModal.delete', 'Delete')}
+          </Button>
+        </Stack>
+      </Stack>
+    </Dialog>
+  );
+};
+
+DeleteScenarioModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  scenarioName: PropTypes.string,
+};
+
+DeleteScenarioModal.defaultProps = {
+  scenarioName: '',
+};

src/components/DeleteScenarioModal/index.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+export { DeleteScenarioModal } from './DeleteScenarioModal';

src/components/Icon/Icon.js

@@ -1,6 +1,5 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
-// src/components/Icon/Icon.jsx
 import * as Icons from 'lucide-react';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +15,7 @@ export const Icon = ({ name, size = 16, color, className, strokeWidth = 1.5 }) =
 };
 
 Icon.propTypes = {
-  name: PropTypes.oneOf(Object.keys(Icons)).isRequired,
+  name: PropTypes.string.isRequired,
   size: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string,

src/components/index.js

@@ -30,4 +30,5 @@ export { default as LoadingBackdrop } from './LoadingBackdrop';
 export { default as StatusBar } from './StatusBar';
 export { ModalWindow } from './ModalWindow';
 export { PageHeader } from './PageHeader';
+export { DeleteScenarioModal } from './DeleteScenarioModal';
 export { Icon } from './Icon';

src/views/ScenariosListing/ScenariosListingView.js

@@ -1,14 +1,20 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Box } from '@mui/material';
+import { DeleteScenarioModal } from '../../components';
 import { useCreateScenarioButton } from '../../components/CreateScenarioButton/CreateScenarioButtonHook';
 import { ScenarioListing } from '../../components/ScenarioListing';
 import { useSortedScenarioList } from '../../hooks/ScenarioListHooks';
+import { useDeleteRunner } from '../../state/runner/hooks';
 
 export const ScenariosListingView = () => {
   const sortedScenarioList = useSortedScenarioList();
   const { createScenario, workspaceId } = useCreateScenarioButton({});
+  const deleteRunner = useDeleteRunner();
+
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [scenarioToDelete, setScenarioToDelete] = useState(null);
 
   const handleCreateScenario = (form) => {
     const scenarioData = {
@@ -27,6 +33,23 @@ export const ScenariosListingView = () => {
     console.log('TODO: open Share modal:', dataset);
   }, []);
 
+  const handleDeleteScenario = useCallback((scenario) => {
+    setScenarioToDelete(scenario);
+    setDeleteModalOpen(true);
+  }, []);
+
+  const handleConfirmDelete = useCallback(() => {
+    if (scenarioToDelete) {
+      deleteRunner(scenarioToDelete.id);
+      setScenarioToDelete(null);
+    }
+  }, [deleteRunner, scenarioToDelete]);
+
+  const handleCloseDeleteModal = useCallback(() => {
+    setDeleteModalOpen(false);
+    setScenarioToDelete(null);
+  }, []);
+
   return (
     <Box
       sx={{
@@ -41,6 +64,13 @@ export const ScenariosListingView = () => {
         onCreateScenario={handleCreateScenario}
         onEditDataset={handleEditDataset}
         onShareDataset={handleShareDataset}
+        onDeleteScenario={handleDeleteScenario}
+      />
+      <DeleteScenarioModal
+        open={deleteModalOpen}
+        onClose={handleCloseDeleteModal}
+        onConfirm={handleConfirmDelete}
+        scenarioName={scenarioToDelete?.name}
       />
     </Box>
   );