Merge pull request #2081 from mito-ds/feature/spreadsheet-footer-btn

Spreadsheet Footer Button

Author: ngafar

mito-ai/src/Extensions/NotebookFooter/NotebookFooter.tsx

@@ -12,6 +12,7 @@ import '../../../style/NotebookFooter.css';
 import LoadingCircle from "../../components/LoadingCircle";
 import CodeIcon from "../../icons/NotebookFooter/CodeIcon";
 import TextIcon from "../../icons/NotebookFooter/TextIcon";
+import SpreadsheetIcon from "../../icons/NotebookFooter/SpreadsheetIcon";
 import { userSignupEvents } from '../../utils/userSignupEvents';
 import { useUserSignup } from '../AiChat/hooks/useUserSignup';
 
@@ -25,12 +26,18 @@ const NotebookFooter: React.FC<NotebookFooterProps> = ({ notebookTracker, app })
 
     const [inputValue, setInputValue] = useState('');
     const [isGenerating, setIsGenerating] = useState(false);
+    const [hasMitosheet, setHasMitosheet] = useState(false);
     const { isSignedUp, refreshUserSignupState } = useUserSignup();
 
     useEffect(() => {
         void refreshUserSignupState();
     }, []);
 
+    // Check if mitosheet command exists
+    useEffect(() => {
+        setHasMitosheet(app.commands.hasCommand('mitosheet:create-empty-mitosheet'));
+    }, [app]);
+
     // Listen for signup success events from other components
     useEffect(() => {
         const handleSignupSuccess = (): void => {
@@ -60,13 +67,15 @@ const NotebookFooter: React.FC<NotebookFooterProps> = ({ notebookTracker, app })
         }
     };
 
-    const addCell = (cellType: 'code' | 'markdown' = 'code'): void => {
+    const addCell = (cellType: 'code' | 'markdown' | 'spreadsheet' = 'code'): void => {
         if (notebook.widgets.length && notebook.widgets.length > 0) {
             notebook.activeCellIndex = notebook.widgets.length - 1;
         }
 
         if (cellType === 'code') {
             NotebookActions.insertBelow(notebook);
+        } else if (cellType === 'spreadsheet') {
+            void app.commands.execute('mitosheet:create-empty-mitosheet');
         } else {
             NotebookActions.insertBelow(notebook);
             // Change the cell type after insertion
@@ -190,6 +199,22 @@ const NotebookFooter: React.FC<NotebookFooterProps> = ({ notebookTracker, app })
                         <span className="button-label">Text</span>
                     </div>
                 </button>
+
+                {/* Spreadsheet button */}
+                {hasMitosheet && (
+                    <button
+                        onClick={() => addCell('spreadsheet')}
+                        className="footer-button"
+                        onMouseDown={(e) => e.stopPropagation()}
+                    >
+                        <div className="button-content">
+                            <div className="button-icon">
+                                <SpreadsheetIcon />
+                            </div>
+                            <span className="button-label">Spreadsheet</span>
+                        </div>
+                    </button>
+                )}
             </div>
         </div>
     );

mito-ai/src/icons/NotebookFooter/SpreadsheetIcon.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+import React from 'react';
+
+const SpreadsheetIcon: React.FC = () => (
+    <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g fill='currentColor'>
+            <path fillRule="evenodd" clipRule="evenodd" d="M15.5 9.75V1.75C15.5 0.784 14.717 0 13.75 0H1.75C0.783 0 0 0.784 0 1.75V9.75C0 10.716 0.783 11.5 1.75 11.5H13.75C14.717 11.5 15.5 10.716 15.5 9.75ZM14 1.75V9.75C14 9.888 13.888 10 13.75 10H1.75C1.612 10 1.5 9.888 1.5 9.75V1.75C1.5 1.612 1.612 1.5 1.75 1.5H13.75C13.888 1.5 14 1.612 14 1.75Z" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M0.75 8.25H14.75C15.164 8.25 15.5 7.914 15.5 7.5C15.5 7.086 15.164 6.75 14.75 6.75H0.75C0.336 6.75 0 7.086 0 7.5C0 7.914 0.336 8.25 0.75 8.25Z" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M9.5 0.75V10.75C9.5 11.164 9.836 11.5 10.25 11.5C10.664 11.5 11 11.164 11 10.75V0.75C11 0.336 10.664 0 10.25 0C9.836 0 9.5 0.336 9.5 0.75Z" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M0.75 4.75H14.75C15.164 4.75 15.5 4.414 15.5 4C15.5 3.586 15.164 3.25 14.75 3.25H0.75C0.336 3.25 0 3.586 0 4C0 4.414 0.336 4.75 0.75 4.75Z" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M4.5 0.75V10.75C4.5 11.164 4.836 11.5 5.25 11.5C5.664 11.5 6 11.164 6 10.75V0.75C6 0.336 5.664 0 5.25 0C4.836 0 4.5 0.336 4.5 0.75Z" />
+        </g>
+    </svg>
+);
+
+export default SpreadsheetIcon;
+

mito-ai/src/tests/NotebookFooter/notebookFooter.test.tsx

@@ -90,7 +90,8 @@ const createMockNotebook = (widgetCount = 3) => {
 // Create mock app
 const createMockApp = () => ({
     commands: {
-        execute: jest.fn().mockResolvedValue(undefined)
+        execute: jest.fn().mockResolvedValue(undefined),
+        hasCommand: jest.fn().mockReturnValue(false)
     }
 }) as unknown as JupyterFrontEnd;
 
@@ -287,7 +288,8 @@ describe('NotebookFooter Component', () => {
 
             const mockApp = {
                 commands: {
-                    execute: jest.fn().mockReturnValue(mockPromise)
+                    execute: jest.fn().mockReturnValue(mockPromise),
+                    hasCommand: jest.fn().mockReturnValue(false)
                 }
             } as unknown as JupyterFrontEnd;
 
@@ -345,7 +347,8 @@ describe('NotebookFooter Component', () => {
 
             const mockApp = {
                 commands: {
-                    execute: jest.fn().mockReturnValue(mockPromise)
+                    execute: jest.fn().mockReturnValue(mockPromise),
+                    hasCommand: jest.fn().mockReturnValue(false)
                 }
             } as unknown as JupyterFrontEnd;