add fallback behavior for showOpenFilePicker and showSaveFilePicker

[josxha]

Launch Checklist

• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Add an entry to CHANGELOG.md under the ## main section.

Description

showOpenFilePicker and showSaveFilePicker are undefined on Firefox. With this pr, Maputnik uses the old behavior as a fallback. It keeps the naming "open" and "save" instead of "upload" and "download" to underline that the style stays within the browser and no actual upload happens.

@zstadler Could you give it a try, please?

Related Issue

• fixes Cannot open local style file using Firefox #966

Visual Changes

The "Save as" button gets hidden if showSaveFilePicker is not available since it would have no use.

Chrome	Firefox

[zstadler]

LGTM!

[HarelM]

Can we use if-else here? I think it will be clearer...

[josxha]

Is this the syntax you want to go with?

  <div>
      {(() => {
        if (typeof window.showOpenFilePicker === "function") {
          return (
            <InputButton
                  className="maputnik-big-button"
                  onClick={this.onOpenFile}><MdFileUpload/> {t("Open Style")}
                </InputButton>
          )
        } else {
          return (
            <FileReaderInput onChange={this.onFileChanged} tabIndex={-1} aria-label={t("Open Style")}>
                  <InputButton className="maputnik-upload-button"><MdFileUpload /> {t("Open Style")}</InputButton>
                </FileReaderInput>
          )
        }
      })()}
    </div>

[HarelM]

Is the lambda mandatory? I recall that react has a simpler way to add if inside the render method...?

[josxha]

Not sure how? I can't find anything about it in the react docs nor stackoverflow. Using a tenary operator appears to be the shortest way. Alternatively, we could move the html block before the return statement and use it from a variable.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 16.00000% with 21 lines in your changes missing coverage. Please review.

Project coverage is 58.94%. Comparing base (af01346) to head (dfbdfd6).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/ModalOpen.tsx	23.52%	13 Missing ⚠️
src/components/ModalExport.tsx	0.00%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #967      +/-   ##
==========================================
- Coverage   59.84%   58.94%   -0.91%     
==========================================
  Files         104      104              
  Lines        3011     3057      +46     
  Branches      680      687       +7     
==========================================
  Hits         1802     1802              
- Misses       1209     1255      +46     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.