Merge pull request #204 from Open-STEM/kq-bugs

Fixed upload action and rename artifact and addressed other issues

Author: kcq888

.github/workflows/release.yml

@@ -11,6 +11,9 @@ jobs:
   release:
     name: Release pushed tag
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
 
     steps:
       - name: Checkout
@@ -31,7 +34,11 @@ jobs:
         with:
           type: 'zip'
           directory: './dist'
-          filename: xrpweb-v${{ github.run_number }}.zip
+          filename: ../xrpweb-v${{ github.run_number }}.zip
+      - name: Debug - List files
+        run: |
+          ls -la
+          ls -la dist/
       - name: Create Release
         id: create_new_release
         uses: softprops/action-gh-release@v2.3.3
@@ -45,6 +52,6 @@ jobs:
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           file: xrpweb-v${{ github.run_number }}.zip
-          asset_name: xrpweb-v${{ github.run_number }}.zip
+          asset_name: artifacts.zip
           tag: ${{ github.ref }}
           overwrite: true

public/CHANGELOG.txt

@@ -1,4 +1,4 @@
-# Version 2.0.10
+# Version 2.0.11
 
 #### Bluetooth support
 <img height="10%" width="10%" src="src/assets/images/Bluetooth_FM_Black.png"/></img>
@@ -34,10 +34,6 @@
 * Support the New Puppet Protocol for communication with the XRP Bluetooth (advanced users) [See XPP](https://xrpcode.io/docs/puppet_protocol)
 
 #### Bug Fixes
-* Fixed various bugs with the Block Editor where the change indicator would not show
-* [New File button on Folder Tree](https://github.com/Open-STEM/XRPWeb/issues/195)
-* [New Directory button on Folder Tree](https://github.com/Open-STEM/XRPWeb/issues/194)
-* [Monaco Editor not resize properly](https://github.com/Open-STEM/XRPWeb/issues/186)
-* [Rename file in File System Tree doesn't reflect the changes in the open tab](https://github.com/Open-STEM/XRPWeb/issues/185)
-* [Change AI Chat to Code Buddy on the Tab title](https://github.com/Open-STEM/XRPWeb/issues/183)
-* [If a program is loaded into the editor after Web browser refresh, and if the file was edited on the XRP, this program won't run](https://github.com/Open-STEM/XRPWeb/issues/176)
+* [File SaveAs dialog not using name](https://github.com/Open-STEM/XRPWeb/issues/205)
+* [Google Drive Export to PC resulted with zero bytes](https://github.com/Open-STEM/XRPWeb/issues/206)
+* [Google Drive Onetime notification](https://github.com/Open-STEM/XRPWeb/issues/198)

src/components/blockly.tsx

@@ -150,7 +150,6 @@ function blocklyToPython(ws: Workspace) {
 function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
     const [toolboxKey, setToolboxKey] = useState(0); // Force re-render when toolbox updates
     const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [isListenerSet, setIsListenerSet] = useState(false);
     const [name, setName] = useState<string>(tabName);
     const nameRef = useRef(name);
     const isLoadingRef = useRef(isLoading);
@@ -225,15 +224,22 @@ function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
 
                 const ws = EditorMgr.getInstance().getEditorSession(tabId)?.workspace;
                 if (ws) {
-                    Blockly.serialization.workspaces.load(JSON.parse(loadContent.content), ws);
-                    // @ts-expect-error - it is a valid function
-                    ws.scrollCenter();
-                    // @ts-expect-error - it is a valid function
-                    ws.zoomToFit();
+                    try {
+                        Blockly.Events.disable();
+                        Blockly.serialization.workspaces.load(JSON.parse(loadContent.content), ws);
+                        // @ts-expect-error - it is a valid function
+                        ws.scrollCenter();
+                        // @ts-expect-error - it is a valid function
+                        ws.zoomToFit();
+                    } finally {
+                        Blockly.Events.enable();
+                    }
                 }
                 if (session) {
                     EditorMgr.getInstance().SaveToLocalStorage(session, loadContent.content);
                 }
+                setIsLoading(false);
+                isLoadingRef.current = false;
             });
 
             AppMgr.getInstance().on(EventType.EVENT_EDITOR, (type) => {
@@ -265,11 +271,16 @@ function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
                     setTimeout(() => {
                         const newWs = Blockly.getMainWorkspace();
                         if (newWs) {
-                            Blockly.serialization.workspaces.load(content, newWs);
-                            // @ts-expect-error - it is a valid function
-                            newWs.scrollCenter();
-                            // @ts-expect-error - it is a valid function
-                            newWs.zoomToFit();
+                            try {
+                                Blockly.Events.disable();
+                                Blockly.serialization.workspaces.load(content, newWs);
+                                // @ts-expect-error - it is a valid function
+                                newWs.scrollCenter();
+                                // @ts-expect-error - it is a valid function
+                                newWs.zoomToFit();
+                            } finally {
+                                Blockly.Events.enable();
+                            }
                         }
                     }, 100);
                 }
@@ -324,56 +335,43 @@ function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
 
         // Call setupLanguage to initialize Blockly locale
         setupLanguage();
+
         // Set up workspace change listener for live content tracking
-        const setupWorkspaceListener = () => {
-            const ws = Blockly.getMainWorkspace();
-            if (ws) {
-                // Listen for workspace changes
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const changeListener = (event: any) => {
-                    if (event.type === Blockly.Events.FINISHED_LOADING) {
-                        setIsLoading(false);
-                        return;
-                    }
-                    if (isLoadingRef.current && 
-                        (event.type === Blockly.Events.BLOCK_CREATE ||
-                        event.type === Blockly.Events.BLOCK_DELETE ||
-                        event.type === Blockly.Events.BLOCK_CHANGE)
-                    ) { return; }
-                    if (event.type === Blockly.Events.VIEWPORT_CHANGE || event.isUiEvent) { return; }
-                    try {
-                        console.log('Workspace changed, saving session:', nameRef.current);
-                        EditorMgr.getInstance().updateEditorSessionChange(tabId, true);
-                        const code = blocklyToPython(ws);
-                        EditorMgr.getInstance().SaveToLocalStorage(EditorMgr.getInstance().getEditorSession(tabId) as EditorSession, code);
-                    } catch (e) {
-                        console.warn('Failed to serialize Blockly workspace:', e);
-                    }
-                };
-                
-                ws.addChangeListener(changeListener);
-                
-                // Store the listener for cleanup
-                return changeListener;
-            }
-            return null;
-        };
+        const ws = Blockly.getMainWorkspace();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let changeListener: ((event: any) => void) | null = null;
 
-        let listener = null;
-        if (!isListenerSet) {
-            listener = setupWorkspaceListener();
-            setIsListenerSet(true);
+        if (ws) {
+            // Listen for workspace changes
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            changeListener = (event: any) => {
+                if (event.type === Blockly.Events.FINISHED_LOADING) {
+                    setIsLoading(false);
+                    isLoadingRef.current = false;
+                    return;
+                }
+                if (isLoadingRef.current) { return; }
+                if (event.type === Blockly.Events.VIEWPORT_CHANGE || event.isUiEvent) { return; }
+                try {
+                    console.log('Workspace changed, saving session:', nameRef.current);
+                    EditorMgr.getInstance().updateEditorSessionChange(tabId, true);
+                    const code = blocklyToPython(ws);
+                    EditorMgr.getInstance().SaveToLocalStorage(EditorMgr.getInstance().getEditorSession(tabId) as EditorSession, code);
+                } catch (e) {
+                    console.warn('Failed to serialize Blockly workspace:', e);
+                }
+            };
+            
+            ws.addChangeListener(changeListener);
         }
 
         return () => {
             // Cleanup listener on unmount
-            const ws = Blockly.getMainWorkspace();
-            if (ws && isListenerSet) {
-                // @ts-expect-error - listener may be null
-                ws.removeChangeListener(listener);
+            if (ws && changeListener) {
+                ws.removeChangeListener(changeListener);
             }
         }
-    }, [isListenerSet, saveEditor, tabId]);
+    }, [saveEditor, tabId]);
 
     return (
         <BlocklyWorkspace

src/components/dialogs/filesaveasdlg.tsx

@@ -86,8 +86,8 @@ function FileSaveAsDialg(fileSaveAsProps: FileSaveAsProps) {
             const session = EditorMgr.getInstance().getEditorSession(activeTab);
             if (session) {
                 setSelectedFolder('/' + session.path.split('/')[1]);
+                setFilename(session.name); 
             }
-            setFilename(activeTab);
         }
     }, [activeTab]);
 
@@ -111,11 +111,13 @@ function FileSaveAsDialg(fileSaveAsProps: FileSaveAsProps) {
             <label className="text-mountain-mist-700 dark:text-mountain-mist-300">
                 {t('destFolder')}: {selectedFolder}
             </label>
-            <FolderTree
-                treeData={JSON.stringify(folderList)}
-                theme=""
-                onSelected={handleFolderSelection}
-            />
+            <div className='h-48 w-full overflow-y-auto border border-shark-300 dark:border-shark-600'>
+                <FolderTree
+                    treeData={JSON.stringify(folderList)}
+                    theme=""
+                    onSelected={handleFolderSelection}
+                />
+            </div>
             <label className="text-sm text-mountain-mist-700 dark:text-mountain-mist-300">{t('filename')}</label>
             <div>
                 <input

src/components/dialogs/newfiledlg.tsx

@@ -178,19 +178,21 @@ function NewFileDlg(newFileProps: NewFileProps) {
     };
 
     return (
-        <div className="flex flex-col items-center gap-4 rounded-md border border-mountain-mist-700 p-8 shadow-md transition-all dark:border-shark-500 dark:bg-shark-950">
+        <div className="flex flex-col items-center gap-4 rounded-md border border-mountain-mist-700 p-8 shadow-md transition-all dark:border-shark-500 dark:bg-shark-950 w-96 max-h-[90vh] overflow-y-auto">
             <div className="flex w-[90%] flex-col items-center">
                 <h1 className="text-lg font-bold text-mountain-mist-700 dark:text-mountain-mist-300">{t('newFile')}</h1>
                 <p className="text-sm text-mountain-mist-700 dark:text-mountain-mist-300">{t('chooseNewFile')}</p>
             </div>
             <hr className="w-full border-mountain-mist-600" />
             <form id="fileOptionId" className="flex w-full flex-col gap-2">
                 <span className="text-sm text-mountain-mist-700 dark:text-mountain-mist-300">{t('destFolder')}</span>
-                <FolderTree
-                    treeData={JSON.stringify(folderList)}
-                    theme=""
-                    onSelected={handleFolderSelection}
-                />
+                <div className='h-48 w-full overflow-y-auto border border-shark-300 dark:border-shark-600'>
+                    <FolderTree
+                        treeData={JSON.stringify(folderList)}
+                        theme=""
+                        onSelected={handleFolderSelection}
+                    />
+                </div>
                 <label className="text-sm text-mountain-mist-700 dark:text-mountain-mist-300" htmlFor="filesId">
                     {t('fileType')}
                 </label>

src/components/dialogs/uploadfiledlg.tsx

@@ -77,7 +77,9 @@ function UploadFileDlg({ files, toggleDialog }: UploadFileDlgProps) {
                 <h1 className="text-lg font-bold text-mountain-mist-700 dark:text-mountain-mist-300">{t('uploadFiles')}</h1>
             </div>
             <hr className="w-full border-mountain-mist-600 dark:border-mountain-mist-200" />
-            <FolderTree treeData={JSON.stringify(folderItem)} theme="" onSelected={handleFolderSelection} />
+            <div className='h-48 w-full overflow-y-auto border border-shark-300 dark:border-shark-600'>
+                <FolderTree treeData={JSON.stringify(folderItem)} theme="" onSelected={handleFolderSelection} />
+            </div>
             <label className="text-mountain-mist-700 dark:text-mountain-mist-300">{t('destFolder')}: {selectedFolder}</label>
             <label className="text-mountain-mist-700 dark:text-mountain-mist-300">{t('filesToUpload')}: {fileList?.length}</label>
             <ul className='flex flex-col gap-2'>

src/components/folder-tree.tsx

@@ -25,6 +25,7 @@ import EditorMgr, { EdSearchParams } from '@/managers/editormgr';
 import Login from '@/widgets/login';
 import { UserProfile } from '@/services/google-auth';
 import CreateNodeDlg from './dialogs/create-node-dlg';
+import { StorageKeys } from '@/utils/localstorage';
 
 type TreeProps = {
     treeData: string | null;
@@ -585,6 +586,14 @@ function FolderTree(treeProps: TreeProps) {
         }
 
         fireGoogleUserTree(username ?? '');
+
+        const firstTimeLogin = localStorage.getItem(StorageKeys.GOOGLE_FIRST_TIME_LOGIN) === null || localStorage.getItem(StorageKeys.GOOGLE_FIRST_TIME_LOGIN) === 'true';
+        if (firstTimeLogin) {
+            localStorage.setItem(StorageKeys.GOOGLE_FIRST_TIME_LOGIN, 'false');
+            // put up a dialog to inform user that the Google Drive notification about owner created folder and files
+            setDialogContent(<AlertDialog toggleDialog={toggleDialog} alertMessage={t('googleDriveNotification')} />);
+            toggleDialog();
+        }
     }
 
     /**

src/components/navbar.tsx

@@ -459,13 +459,20 @@ function NavBar({ layoutref }: NavBarProps) {
         console.log(t('exportToPC'));
         const session = EditorMgr.getInstance().getEditorSession(activeTab);
         if (session) {
-            CommandToXRPMgr.getInstance()
-                .getFileContents(session.path)
-                .then((content) => {
-                    const data: string = new TextDecoder().decode(new Uint8Array(content));
-                    const blob = new Blob([data], { type: 'text/plain;charset=utf-8' });
-                    FileSaver.saveAs(blob, session.name);
+            if (authService.isLogin) {
+                // download the file from Google Drive and save to PC
+                driveService.getFileContents(session.gpath || '').then((fileContent) => {
+                    FileSaver.saveAs(new Blob([fileContent || '']), session.name);
                 });
+            } else if (isConnected) {
+                CommandToXRPMgr.getInstance()
+                    .getFileContents(session.path)
+                    .then((content) => {
+                        const data: string = new TextDecoder().decode(new Uint8Array(content));
+                        const blob = new Blob([data], { type: 'text/plain;charset=utf-8' });
+                        FileSaver.saveAs(blob, session.name);
+                    });
+            }
         } else {
             setDialogContent(
                 <AlertDialog alertMessage={t('no-activetab')} toggleDialog={toggleDialog} />,

src/utils/i18n/locales/en/en.json

@@ -60,6 +60,7 @@
     "googleLoginTooltip": "Sign in with your Google account to access files stored in Google Drive.",
     "googlogoutTooltip": "Sign out of your Google account.",
     "not-google-drive-file": "This file can not be saved to Google Drive because it was not associated with Google Drive! Please try savinging it to XRP!",
+    "googleDriveNotification": "When using Google Drive mode, all folders and files created will be owned by the Google account that is logged in. If you add Google Drive folders or files directly through your Google Drive account, these files are not visible in XRP.",
     "userfoldername": "User Folder Name",
     "goouserfoldername": "Google User Folder Name",
     "chooseFolder": "Choose a Folder",

src/utils/i18n/locales/es/es.json

@@ -58,6 +58,7 @@
     "user-folder": "Nombre de Carpeta de Usuario",
     "google-drive-folder": "Nombre de Carpeta de Google Drive",
     "not-google-drive-file": "¡Este archivo no se puede guardar en Google Drive porque no se asocia con Google Drive! Por favor intente guardar el archivo en XRP!",
+    "googleDriveNotification": "Cuando se utiliza el modo Google Drive, todas las carpetas y archivos creados serán propiedad de la cuenta de Google que haya iniciado sesión. Si agrega carpetas o archivos de Google Drive directamente a través de su cuenta de Google Drive, estos archivos no serán visibles en XRP.",
     "userfoldername": "Nombre de Carpeta de Usuario",
     "goouserfoldername": "Nombre de Carpeta de Usuario de Google",
     "chooseFolder": "Elija una Carpeta",