Merge branch 'main' into 295/error-handling

client/client.ts

@@ -1,5 +1,4 @@
 import omit from 'lodash/omit'
-import * as settings from './settings'
 import * as types from './types'
 
 // https://fastapi.tiangolo.com/tutorial/handling-errors/
@@ -14,28 +13,17 @@ export class Client {
   serverUrl?: string
   Error: typeof ClientError
 
-  constructor(props: { serverUrl?: string } = {}) {
-    this.serverUrl = props.serverUrl
+  constructor() {
+    this.serverUrl = 'http://localhost:4040'
     this.Error = ClientError
   }
 
-  async readServerUrl() {
-    return (
-      this.serverUrl ||
-      // @ts-ignore
-      (await window?.opendataeditor?.readServerUrl()) ||
-      settings.SERVER_URL
-    )
-  }
-
   async request<T>(
     path: string,
     props: { [key: string]: any; file?: File; isBytes?: boolean } = {}
   ) {
-    const serverUrl = await this.readServerUrl()
-    const response = await makeRequest<T>(serverUrl + path, props)
-    return response
-  }
+    return await makeRequest<T>(this.serverUrl + path, props)
+   }
 
   // Article
 

client/components/Application/Dialog.tsx

@@ -10,12 +10,12 @@ import DeleteFolderDialog from './Dialogs/DeleteFolder'
 import IndexFilesDialog from './Dialogs/IndexFiles'
 import MoveFileDialog from './Dialogs/MoveFile'
 import MoveFolderDialog from './Dialogs/MoveFolder'
-import StartDialog from './Dialogs/Start'
 import { useStore } from './store'
 
 export default function Dialog() {
   const dialog = useStore((state) => state.dialog)
   if (!dialog) return null
+  // @ts-ignore
   const Dialog = DIALOGS[dialog]
   return <Dialog />
 }
@@ -34,5 +34,4 @@ const DIALOGS = {
   indexFiles: IndexFilesDialog,
   moveFile: MoveFileDialog,
   moveFolder: MoveFolderDialog,
-  start: StartDialog,
 }

client/components/Application/store.ts

@@ -85,9 +85,7 @@ export function makeStore(props: ApplicationProps) {
 
     onStart: async () => {
       const { client, loadConfig, loadFiles, updateState } = get()
-      updateState({ dialog: 'start' })
 
-      // Wait for the server
       // @ts-ignore
       const sendFatalError = window?.opendataeditor?.sendFatalError
       let ready = false
@@ -102,14 +100,13 @@ export function makeStore(props: ApplicationProps) {
         } catch (error) {
           attempt += 1
           if (attempt >= maxAttempts) {
-            const serverUrl = await client.readServerUrl()
+            const serverUrl = client.serverUrl
             const message = `Client cannot connect to server on "${serverUrl}"`
             sendFatalError ? sendFatalError(message) : alert(message)
           }
           await delay(delaySeconds * 1000)
         }
       }
-
       // Setup project sync polling
       setInterval(async () => {
         const result = await client.projectSync({})
@@ -121,8 +118,6 @@ export function makeStore(props: ApplicationProps) {
 
         updateState({ files: result.files })
       }, settings.PROJECT_SYNC_INTERVAL_MILLIS)
-
-      updateState({ dialog: undefined })
     },
     onFileCreate: async (paths) => {
       const { loadFiles, selectFile } = get()

client/components/Editors/Base/List.tsx

@@ -11,7 +11,7 @@ export interface EditorListProps {
   query?: string
   onAddClick: () => void
   // We accept search as a prop otherwise it loses focus
-  SearchInput: React.ReactNode
+  SearchInput?: React.ReactNode
 }
 
 export default function EditorList(props: React.PropsWithChildren<EditorListProps>) {
@@ -28,7 +28,7 @@ export default function EditorList(props: React.PropsWithChildren<EditorListProp
   return (
     <React.Fragment>
       <HeadingBox>
-        <Columns spacing={1} layout={[4, 5, 3]}>
+        <Columns spacing={1} layout={props.SearchInput ? [4, 5, 3] : [6, 6]}>
           <Box sx={{ whiteSpace: 'nowrap' }}>{startCase(props.kind)}s</Box>
           <Box sx={{ float: 'right' }}>
             <AddButton />

client/components/Editors/Resource/Sections/Contributors.tsx

@@ -4,7 +4,6 @@ import InputField from '../../../Parts/Fields/Input'
 import EditorItem from '../../Base/Item'
 import EditorList from '../../Base/List'
 import EditorListItem from '../../Base/ListItem'
-import EditorSearch from '../../Base/Search'
 import { useStore, selectors, select } from '../store'
 
 export default function Contributors() {
@@ -19,17 +18,7 @@ function ContributorList() {
   const addContributor = useStore((state) => state.addContributor)
   const removeContributor = useStore((state) => state.removeContributor)
   return (
-    <EditorList
-      kind="contributor"
-      query={query}
-      onAddClick={() => addContributor()}
-      SearchInput={
-        <EditorSearch
-          value={query || ''}
-          onChange={(query) => updateContributorState({ query })}
-        />
-      }
-    >
+    <EditorList kind="contributor" query={query} onAddClick={() => addContributor()}>
       {contributorItems.map(({ index, contributor }) => (
         <EditorListItem
           key={index}

client/components/Editors/Resource/Sections/Licenses.tsx

@@ -5,7 +5,6 @@ import InputField from '../../../Parts/Fields/Input'
 import EditorItem from '../../Base/Item'
 import EditorList from '../../Base/List'
 import EditorListItem from '../../Base/ListItem'
-import EditorSearch from '../../Base/Search'
 import { useStore, selectors, select } from '../store'
 import validator from 'validator'
 
@@ -21,17 +20,7 @@ function LicenseList() {
   const addLicense = useStore((state) => state.addLicense)
   const removeLicense = useStore((state) => state.removeLicense)
   return (
-    <EditorList
-      kind="license"
-      query={query}
-      onAddClick={() => addLicense()}
-      SearchInput={
-        <EditorSearch
-          value={query || ''}
-          onChange={(query) => updateLicenseState({ query })}
-        />
-      }
-    >
+    <EditorList kind="license" query={query} onAddClick={() => addLicense()}>
       {licenseItems.map(({ index, license }) => (
         <EditorListItem
           key={index}

client/components/Editors/Resource/Sections/Sources.tsx

@@ -5,7 +5,6 @@ import InputField from '../../../Parts/Fields/Input'
 import EditorItem from '../../Base/Item'
 import EditorList from '../../Base/List'
 import EditorListItem from '../../Base/ListItem'
-import EditorSearch from '../../Base/Search'
 import { useStore, selectors, select } from '../store'
 import validator from 'validator'
 
@@ -21,17 +20,7 @@ function SourceList() {
   const addSource = useStore((state) => state.addSource)
   const removeSource = useStore((state) => state.removeSource)
   return (
-    <EditorList
-      kind="source"
-      query={query}
-      onAddClick={() => addSource()}
-      SearchInput={
-        <EditorSearch
-          value={query || ''}
-          onChange={(query) => updateSourceState({ query })}
-        />
-      }
-    >
+    <EditorList kind="source" query={query} onAddClick={() => addSource()}>
       {sourceItems.map(({ index, source }) => (
         <EditorListItem
           key={index}

client/components/Editors/Schema/Sections/ForeignKeys.tsx

@@ -5,7 +5,6 @@ import SelectField from '../../../Parts/Fields/Select'
 import EditorItem from '../../Base/Item'
 import EditorList from '../../Base/List'
 import EditorListItem from '../../Base/ListItem'
-import EditorSearch from '../../Base/Search'
 import { useStore, selectors, select } from '../store'
 
 export default function ForeignKey() {
@@ -20,17 +19,7 @@ function ForeignKeyList() {
   const addForeignKey = useStore((state) => state.addForeignKey)
   const removeForeignKey = useStore((state) => state.removeForeignKey)
   return (
-    <EditorList
-      kind="foreign key"
-      query={query}
-      onAddClick={() => addForeignKey()}
-      SearchInput={
-        <EditorSearch
-          value={query || ''}
-          onChange={(query) => updateForeignKeyState({ query })}
-        />
-      }
-    >
+    <EditorList kind="foreign key" query={query} onAddClick={() => addForeignKey()}>
       {foreignKeyItems.map(({ index, foreignKey }) => (
         <EditorListItem
           key={index}

client/loading.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Open Data Editor</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+      <script>
+      window?.opendataeditor.ensureLogs((message) => {
+        if (message == "python") {
+          var element = document.getElementById("python")
+          var loader = document.getElementById("loader")
+          element.classList.toggle('pending')
+          element.removeChild(loader)
+          var next = document.getElementById("requirements")
+          next.appendChild(loader)
+        }
+        if (message == "requirements") {
+          var element = document.getElementById("requirements")
+          var loader = document.getElementById("loader")
+          element.classList.toggle('pending')
+          element.removeChild(loader)
+          var next = document.getElementById("server")
+          next.appendChild(loader)
+        }
+        if (message == "server") {
+          var element = document.getElementById("server")
+          var loader = document.getElementById("loader")
+          element.classList.toggle('pending')
+          element.removeChild(loader)
+        }
+      })
+    </script>
+    <style>
+      li {
+        color: black;
+      }
+      .pending {
+        color: grey;
+      }
+      .loader {
+        border: 5px solid grey;
+        border-bottom-color: transparent;
+        border-radius: 50%;
+        display: inline-block;
+        box-sizing: border-box;
+        animation: rotation 1s linear infinite;
+      }
+      @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+      } 
+    </style>
+  </head>
+  <body>
+    <section style="display:grid; place-items: center;">
+      <div>
+        <h1 style="text-align: center;">Open Data Editor is loading</h1>
+        <p style="text-align: center;">The first time launching Open Data Editor needs to ensure requirements are installed.</p>
+        <ul id="logs">
+          <li class="pending" id="python">Ensure python is installed <span id="loader" class="loader"></span></li>
+          <li class="pending" id="requirements">Ensure python dependencies are installed</li>
+          <li class="pending" id="server">Ensure server is running</li>
+        </ul>
+      </div>
+    </section>
+  </body>
+</html>

desktop/bridge.ts

@@ -1,10 +1,7 @@
 import { ipcMain, dialog, app } from 'electron'
 import log from 'electron-log'
 
-export function createBridge({ serverPort }: { serverPort: number }) {
-  ipcMain.handle('readServerUrl', async () => {
-    return `http://localhost:${serverPort}`
-  })
+export function createBridge() {
   ipcMain.handle('sendFatalError', async (_ev, message: string) => {
     log.error(message)
     await dialog.showMessageBox({