fix: Fix for navigation within electron app, Desktop CSV Files (#75)

* fix for navigation within electron app

* support csv file saving

* many text area upload fixes

Author: seveibar

desktop/main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, Menu } = require("electron")
+const { app, BrowserWindow, Menu, shell } = require("electron")
 const path = require("path")
 const menuTemplate = require("./menu-template")
 const { format: formatUrl } = require("url")
@@ -34,6 +34,17 @@ function createWindow() {
     )
   }
 
+  // Don't open links in electron browser
+  mainWindow.webContents.on("new-window", function (event, url) {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
+
+  mainWindow.webContents.on("will-navigate", function (event, url) {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
+
   // Open the DevTools.
   // mainWindow.webContents.openDevTools()
 }

desktop/menu-template.js

@@ -169,24 +169,13 @@ module.exports = [
       },
     ],
   },
-  {
-    label: "Navigate",
-    submenu: [
-      {
-        label: "Welcome Page",
-        click: (menuItem, currentWindow) => {
-          currentWindow.webContents.send("open-welcome-page")
-        },
-      },
-    ],
-  },
   {
     label: "About",
     submenu: [
       {
         label: "Github",
         click: () => {
-          shell.openItem(
+          shell.openExternal(
             "https://github.com/openhumanannotation/universal-data-tool"
           )
         },

package.json

@@ -73,7 +73,7 @@
     "fast-json-patch": "^3.0.0-1",
     "ffmpeg-static": "^4.0.1",
     "in-browser-download": "^2.0.0",
-    "jac-format": "^1.1.0",
+    "jac-format": "^1.1.2",
     "js-md5": "^0.7.3",
     "moment": "^2.24.0",
     "posthog-js": "^1.0.4",

src/components/ConfigureInterface/index.story.js

@@ -9,7 +9,6 @@ import ConfigureInterface from "./"
 
 storiesOf("ConfigureInterface", module).add("Data Entry", () => {
   const [iface, changeIFace] = useState({ type: "data_entry" })
-  console.log({ iface })
   return (
     <ConfigureInterface
       iface={iface}

src/components/ImportUDTFileDialog/index.js

@@ -33,8 +33,8 @@ const ImportUDTFileDialog = ({ open, onClose, onAddSamples }) => {
       actions={[
         {
           text: "Add Samples",
-          disabled: Boolean(error),
           onClick: () => {
+            changeError(null)
             let taskData, taskOutput
             try {
               ;[taskData, taskOutput] = JSON.parse(content).taskData
@@ -43,6 +43,11 @@ const ImportUDTFileDialog = ({ open, onClose, onAddSamples }) => {
                 const udt = fromUDTCSV(content)
                 ;({ taskData, taskOutput } = udt)
               } catch (e2) {
+                console.log({
+                  message: "CSV/JSON Error Stacks",
+                  jsonError: e1.stack,
+                  csvError: e2.stack,
+                })
                 changeError(
                   `JSON did not parse. CSV did not parse.\n\nJSON Error: ${e1.toString()}\nCSV Error: ${e2.toString()}`
                 )

src/components/InterfacePage/index.js

@@ -52,16 +52,15 @@ export default ({ oha, onChange, onClickEditJSON, onClearLabelData }) => {
             onClick={onClickEditJSON}
             variant="outlined"
             onClick={() => {
-              if (posthog.has_opted_out_captureing()) {
-                posthog.opt_in_captureing()
+              if (posthog.has_opted_out_capturing()) {
+                posthog.opt_in_capturing()
               } else {
-                posthog.opt_out_captureing()
+                posthog.opt_out_capturing()
               }
               forceUpdate()
             }}
           >
-            {posthog.has_opted_out_captureing() ? "Enable" : "Disable"}{" "}
-            Telemetry
+            {posthog.has_opted_out_capturing() ? "Enable" : "Disable"} Telemetry
           </Button>
         </Box>
       </PaperContainer>

src/components/SampleContainer/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { makeStyles } from "@material-ui/core"
 import Grid from "@material-ui/core/Grid"
 import Button from "@material-ui/core/Button"
@@ -92,7 +92,9 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 export const SampleContainer = ({
-  hideDescription: defaultHideDescription = false,
+  hideDescription: defaultHideDescription = window.localStorage.getItem(
+    "hideDescription"
+  ) === '"true"',
   lastSampleExitText,
   onExit,
   requireCompleteToPressNext = false,
@@ -106,9 +108,17 @@ export const SampleContainer = ({
   children,
 }) => {
   const c = useStyles()
-  const [hideDescription, changeHideDescription] = useState(
+  const [hideDescription, changeHideDescriptionState] = useState(
     defaultHideDescription
   )
+  const changeHideDescription = (hide) => {
+    window.localStorage.setItem(
+      "hideDescription",
+      `"${hide ? "true" : "false"}"`
+    )
+    changeHideDescriptionState(hide)
+  }
+
   const [sampleDrawerOpen, changeSampleDrawerOpen] = useState(false)
   return (
     <>

src/components/TextAreaWithUpload/index.js

@@ -26,11 +26,7 @@ export default ({ content, onChangeContent, placeholder }) => {
     const reader = new FileReader()
     reader.onload = (e) => {
       const fileContent = e.target.result
-      if (fileName.endsWith("csv") || fileName.endsWith("CSV")) {
-        onChangeContent(fileContent.replace(",", "\n"))
-      } else {
-        onChangeContent(fileContent)
-      }
+      onChangeContent(fileContent)
     }
     reader.readAsText(acceptedFiles[0])
   })

src/utils/file-handlers/use-filesystem.js

@@ -6,6 +6,7 @@ import useElectron from "../use-electron.js"
 import { useToasts } from "../../components/Toasts"
 import templates from "../../components/StartingPage/templates.js"
 import { setIn } from "seamless-immutable"
+import toUDTCSV from "../to-udt-csv.js"
 import useIsDesktop from "../use-is-desktop"
 
 const webReturn = { saveFile: () => null }
@@ -24,10 +25,15 @@ export default (file, changeFile) => {
           cancelled,
           filePath: newFilePath,
         } = await remote.dialog.showSaveDialog({
-          filters: [{ name: ".udt.json", extensions: ["udt.json"] }],
+          filters: [
+            { name: ".udt.json", extensions: ["udt.json"] },
+            { name: ".udt.csv", extensions: ["udt.csv"] },
+          ],
         })
         filePath =
-          !newFilePath || newFilePath.endsWith(".json")
+          !newFilePath ||
+          newFilePath.endsWith(".json") ||
+          newFilePath.endsWith(".csv")
             ? newFilePath
             : `${newFilePath}.udt.json`
         if (cancelled || !filePath) {
@@ -42,7 +48,12 @@ export default (file, changeFile) => {
       }
       await remote
         .require("fs")
-        .promises.writeFile(filePath, JSON.stringify(file.content, null, "  "))
+        .promises.writeFile(
+          filePath,
+          filePath.endsWith(".csv")
+            ? toUDTCSV(file.content)
+            : JSON.stringify(file.content, null, "  ")
+        )
       addToast("File Saved!")
     }
     saveFileAsync()