AXON-762: added MUI Snackbar

Author: sspanchenko

src/react/atlascode/startwork/v3/StartWorkPageV3.tsx

@@ -8,7 +8,13 @@ import { RepoData } from '../../../../lib/ipc/toUI/startWork';
 import { Branch } from '../../../../typings/git';
 import { AtlascodeErrorBoundary } from '../../common/ErrorBoundary';
 import { StartWorkControllerContext, useStartWorkController } from '../startWorkController';
-import { CreateBranchSection, SuccessAlert, TaskInfoSection, UpdateStatusSection } from './components';
+import {
+    CreateBranchSection,
+    SnackbarNotification,
+    SuccessAlert,
+    TaskInfoSection,
+    UpdateStatusSection,
+} from './components';
 import { generateBranchName, getDefaultSourceBranch } from './utils/branchUtils';
 
 const StartWorkPageV3: React.FunctionComponent = () => {
@@ -31,6 +37,7 @@ const StartWorkPageV3: React.FunctionComponent = () => {
         branch?: string;
         upstream?: string;
     }>({});
+    const [snackbarOpen, setSnackbarOpen] = useState(false);
 
     // Initialize form with default values
     useEffect(() => {
@@ -101,6 +108,10 @@ const StartWorkPageV3: React.FunctionComponent = () => {
         setBranchSetupEnabled(enabled);
     }, []);
 
+    const handleSnackbarClose = useCallback(() => {
+        setSnackbarOpen(false);
+    }, []);
+
     const handleCreateBranch = useCallback(async () => {
         setSubmitState('submitting');
 
@@ -127,6 +138,7 @@ const StartWorkPageV3: React.FunctionComponent = () => {
 
             setSubmitResponse(response);
             setSubmitState('submit-success');
+            setSnackbarOpen(true);
         } catch (error) {
             console.error('Error creating branch:', error);
             setSubmitState('initial');
@@ -222,6 +234,16 @@ const StartWorkPageV3: React.FunctionComponent = () => {
                         </Button>
                     )}
                 </Box>
+
+                {submitState === 'submit-success' && (
+                    <SnackbarNotification
+                        open={snackbarOpen}
+                        onClose={handleSnackbarClose}
+                        title="Success!"
+                        message="See details at the top of this page"
+                        severity="success"
+                    />
+                )}
             </AtlascodeErrorBoundary>
         </StartWorkControllerContext.Provider>
     );

src/react/atlascode/startwork/v3/components/SnackbarNotification.test.tsx

@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { SnackbarNotification } from './SnackbarNotification';
+
+describe('SnackbarNotification', () => {
+    const mockOnClose = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render when open is true', () => {
+        render(<SnackbarNotification open={true} onClose={mockOnClose} message="Test message" title="Test title" />);
+
+        expect(screen.getByText('Test title')).toBeTruthy();
+        expect(screen.getByText('Test message')).toBeTruthy();
+    });
+
+    it('should not render when open is false', () => {
+        render(<SnackbarNotification open={false} onClose={mockOnClose} message="Test message" title="Test title" />);
+
+        expect(screen.queryByText('Test title')).toBeNull();
+        expect(screen.queryByText('Test message')).toBeNull();
+    });
+
+    it('should call onClose when close button is clicked', () => {
+        render(<SnackbarNotification open={true} onClose={mockOnClose} message="Test message" title="Test title" />);
+
+        const closeButton = screen.getByLabelText('close');
+        fireEvent.click(closeButton);
+
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render without title when title is not provided', () => {
+        render(<SnackbarNotification open={true} onClose={mockOnClose} message="Test message" />);
+
+        expect(screen.queryByText('Test title')).toBeNull();
+        expect(screen.getByText('Test message')).toBeTruthy();
+    });
+
+    it('should render with default severity when not provided', () => {
+        render(<SnackbarNotification open={true} onClose={mockOnClose} message="Test message" />);
+
+        const alert = screen.getByRole('alert');
+        expect(alert.className).toContain('MuiAlert-standardSuccess');
+    });
+
+    it('should render with custom severity when provided', () => {
+        render(<SnackbarNotification open={true} onClose={mockOnClose} message="Test message" severity="error" />);
+
+        const alert = screen.getByRole('alert');
+        expect(alert.className).toContain('MuiAlert-standardError');
+    });
+});

src/react/atlascode/startwork/v3/components/SnackbarNotification.tsx

@@ -0,0 +1,48 @@
+import { IconButton, Snackbar } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import React, { useCallback } from 'react';
+
+interface SnackbarNotificationProps {
+    open: boolean;
+    onClose: () => void;
+    message: string;
+    title?: string;
+    severity?: 'success' | 'error' | 'warning' | 'info';
+    autoHideDuration?: number;
+}
+
+export const SnackbarNotification: React.FC<SnackbarNotificationProps> = ({
+    open,
+    onClose,
+    message,
+    title,
+    severity = 'success',
+    autoHideDuration = 6000,
+}) => {
+    const handleClose = useCallback(() => {
+        onClose();
+    }, [onClose]);
+
+    return (
+        <Snackbar
+            open={open}
+            onClose={handleClose}
+            autoHideDuration={autoHideDuration}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        >
+            <Alert
+                variant="standard"
+                severity={severity}
+                action={
+                    <IconButton aria-label="close" color="inherit" size="small" onClick={handleClose}>
+                        <CloseIcon fontSize="inherit" />
+                    </IconButton>
+                }
+            >
+                {title && <AlertTitle>{title}</AlertTitle>}
+                <p>{message}</p>
+            </Alert>
+        </Snackbar>
+    );
+};

src/react/atlascode/startwork/v3/components/index.ts

@@ -2,6 +2,7 @@ export { CreateBranchSection } from './CreateBranchSection';
 export { TaskInfoSection } from './TaskInfoSection';
 export { UpdateStatusSection } from './UpdateStatusSection';
 export { SuccessAlert } from './SuccessAlert';
+export { SnackbarNotification } from './SnackbarNotification';
 export { RepositorySelector } from './RepositorySelector';
 export { BranchPrefixSelector } from './BranchPrefixSelector';
 export { LocalBranchInput } from './LocalBranchInput';