feat: File Browser Update (urls, examples, etc)

[davidkircos]

Resolves #323

Functionality / things to test:

• Routing:
  • / loads the file menu unless it's the first visit, then it loads the default file
  • /?local={valid-file-id} loads a file from memory
  • /?local={invalid-text} loads the file menu with an error
    • e.g. /?local=foo
  • /?file={valid-url} loads the .grid file over the network
    • Can test using example files from the v0.3.0-beta pulled from jsdeliver:
      • /?file=https://cdn.jsdelivr.net/gh/quadratichq/quadratic@v0.3.0-beta/public/examples/python.grid
      • /?file=https://cdn.jsdelivr.net/gh/quadratichq/quadratic@v0.3.0-beta/public/examples/startup_portfolio.grid
      • /?file=https://cdn.jsdelivr.net/gh/quadratichq/quadratic@v0.3.0-beta/public/examples/expenses.grid
  • /?file={invalid-url} loads the file menu with an error
    • e.g. /?file=https://google.com
• File menu:
  • Opens with: CMD + O, Toolbar "File -> Open...", or Command Palette "File: Open..."
  • Close with: ESC or X in UI
  • Create a new file (names it "Untitled", goes to origin, zooms to 100%)
  • Open an example file (names it file name, goes to origin, zooms to 100%)
  • Open a file from local device (names it based on file on disk sans extension, goes to origin, zooms to 100%)
    • Make sure to test this with an old file (something from the current version of production)
  • Open a file from a URL (names based on file path in, goes to origin, zooms to 100%)
    • Test with a valid .grid URL: https://cdn.jim-nielsen.com/files/sample-file.grid
    • Test with a valid .grid URL from an old file
    • Test with an invalid URL, e.g. https://google.com
  • Delete an in-memory file (deletes it from UI and indexDB)
  • Download a local copy of an in-memory file
• "File -> Save local copy" (from toolbar or command palette) downloads file with current name + .grid extension
• "File -> New" (from toolbar or command palette) starts a new file, zoomed to 100% at (0,0)
• In-app link to "Files" page in docs works
• Can rename a file from the top bar (empty filenames or filenames with only spaces are not allowed)
• "Open file" menu accessible from tablet/mobile
• Files you currently have in memory are migrated to our new storage mechanism
  • You can test this locally by running main on localhost:3000 and create a couple different files in memory, then checkout this branch and load the app and the files you created should be accessible in the file menu

Todos:

• Current files in memory should survive this new change when it merges
• Write docs for how files/file formats work in Quadratic (code currently points at docs.quadratichq.com/files)
• Fix contextual TODOs in code
• Firing twice on each save (appears to be something with pixiapp, not new code)
• Support old files
• Fix/update sample files
  • Update with version "1.1" meta info?
  • Some aren't loading right now?
  • Updates from main?
• Add filename to document.title {File Name} - Quadratic
• File issue for after merge: open separate PR to use context on app and sheetConroller

Nice to haves:

• Example files that, when you clone them, appear with the same name as in the example file list
• Weird flicker when sheet loads first, then open menu renders
  • Coming from how the app loads. useLocalFiles hook has an async action to load the file from memory. Would require re-architecting how this works...

Leaving out:

• Ability to deep link to specific tabs of the "Open file" menu, e.g. from the header click "File -> New from URL" which would open this new screen with the "Remote" URL tab selected
• Contexts for sheetController and app refactor: use react context for sheetController and pixi app #387

[aws-amplify-us-west-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-308.de5w5iglj13on.amplifyapp.com

[davidkircos]

When processing old files to new the order is reversed: (not a big deal)

Have you seen this "SCROLLABLE"? thing in the console before?

What do you think about chaing the Quadratic menu to have a "back to files" option at the top the way Figma does?

In Sheets the top left icon takes to back to your files list

Still testing file actions, but haven't noticed any problems so far. @jimniels

[davidkircos]

Visual overflow on mobile

[HactarCE]

Ctrl + O on Windows opens the browser popup. I'm not sure if it's possible for us to override that.

[HactarCE]

• Also, ?local=... on Firefox always opens the file menu with no error.
• Somehow by refreshing with the right timing using ?local=<invalid> on Chrome, I managed to completely erase all the local files (!!!) but I can't reproduce this. Not sure how that happened.
• It would be nice if dragging a .grid file in loaded it instead of trying to parse a CSV

[jimniels]

When processing old files to new the order is reversed

✅ Fixed in 242a019

Have you seen this "SCROLLABLE"? thing in the console before?

I have not seen that. Was that on the preview branch environment?

What do you think about chaing the Quadratic menu to have a "back to files" option at the top

✅ I like it. Updated.

Visual overflow on mobile

✅ Fixed. Due to the responsive nature of the screen, I went with a background on both those items, so now on mobile they float over any content that scrolls under them. It could use more refinment, but it’s the quickest way to get responsive on this and i’m happy enough with it.

[jimniels]

@HactarCE

Ctrl + O on Windows opens the browser popup. I'm not sure if it's possible for us to override that.

It should be possible, we're overriding it in the other browsers. Not sure why this code isn't working on windows but it is on Mac.

However, that said, CMD + O was not implemented as a toggle. It was one-way, e.g. only for opening the "File menu" not closing it. I've tweaked that. Now CMD + O should toggle the file menu's visibility, e.g. opens it if it's not visible and closes it if it's visible except in the case where you don't have an actively open file in the app in which case it does nothing (because there's nothing to close and go to).

Also, ?local=... on Firefox always opens the file menu with no error.

Hm...I can't reproduce this on Firefox for Mac.

Loading a file using ?local=<valid-id> loads the file:

Whereas loading a file using ?local=<invalid-id> (e.g. /?local=abcd) can't load the file and opens the file menu with an error.

Somehow by refreshing with the right timing using ?local= on Chrome, I managed to completely erase all the local files (!!!) but I can't reproduce this. Not sure how that happened.

This one makes me nervous, but I haven't been able to reproduce it.

I did add a check in the code that will only delete stuff when updating old files if it successfully imports it.

Again, i'm not sure how this was triggered. Delete actions are only accessible in the code when triggered by a user action and confirmation via the UI. The other deletes happen only on migration files. So i'm not sure how this even happened...?

It would be nice if dragging a .grid file in loaded it instead of trying to parse a CSV

Agree. I was actually wanting to do that while I was working on this branch. But figured we'd push that for a later feature. I opened an issue for it.

[jimniels]

@davidkircos I added a check to the code that makes sure we only delete a file in memory when we are sure it's been imported/migrated to this new way of saving/storing files.

However, it is worth noting that if a file in memory fails to migrate/import, that fails silently to the user (there's an error logged to the console). So, right now, that file just stays there in localstorage but is inaccessible to the user via the application UI. We don't tell them one of their files failed to import and there's no UI for trying to retrieve it somehow. This is less than ideal but i'm not really sure how much it happens? Maybe we should log this as a specific event in sentry just to see if it happens a lot?

[jimniels]

Gonna go ahead and approve this PR