Display load errors in UI

4 files changed, 94 insertions, 42 deletions

diff --git a/application/components/github/api.js b/application/components/github/api.js
index a7cbfbb..cce9aec 100644
--- a/application/components/github/api.js
+++ b/application/components/github/api.js
@@ -100,17 +100,20 @@ export class API extends EventEmitter {
       url.search = new URLSearchParams({ branch }).toString()
     }
 
-    const { status, data } = await this._request(url.toString())
-
-    if (status === 400) {
-      console.error('Failed to load keymap and layout from github')
-      return data
-    }
+    try {
+      const { data } = await this._request(url.toString())
+      const defaultLayout = data.info.layouts.default || data.info.layouts[Object.keys(data.info.layouts)[0]]
+      return {
+        layout: defaultLayout.layout,
+        keymap: data.keymap
+      }
+    } catch (err) {
+      if (err.response?.status === 400) {
+        console.error('Failed to load keymap and layout from github', err.response.data)
+        this.emit('repo-validation-error', err.response.data)
+      }
 
-    const defaultLayout = data.info.layouts.default || data.info.layouts[Object.keys(data.info.layouts)[0]]
-    return {
-      layout: defaultLayout.layout,
-      keymap: data.keymap
+      throw err
     }
   }
 
diff --git a/application/components/github/invalid-repo.vue b/application/components/github/invalid-repo.vue
index eee706f..bbb4e3d 100644
--- a/application/components/github/invalid-repo.vue
+++ b/application/components/github/invalid-repo.vue
@@ -1,6 +1,6 @@
 <template>
   <modal>
-    <div class="dialog">
+    <dialog-box @dismiss="$emit('dismiss')">
       <h2>Hold up a second!</h2>
       <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p>
       <p>
@@ -12,29 +12,19 @@
         If you have another branch or repository the the required metadata files
         you may switch to them instead.
       </p>
-      <p>
-        <button
-          class="dismiss"
-          @click="$emit('dismiss')"
-          v-text="dismissText"
-        />
-      </p>
-    </div>
+    </dialog-box>
   </modal>
 </template>
 
 <script>
+import DialogBox from '../dialog-box.vue'
 import Modal from '../modal.vue'
 
 export default {
   name: 'InvalidRepo',
   emits: ['dismiss'],
-  components: { Modal },
+  components: { DialogBox, Modal },
   props: {
-    dismissText: {
-      type: String,
-      default: 'Ok'
-    },
     otherRepoOrBranchAvailable: {
       type: Boolean,
       default: false
@@ -44,16 +34,6 @@ export default {
 </script>
 
 <style scoped>
-.dialog {
-  background-color: white;
-  padding: 20px 40px;
-  margin: 40px;
-  max-width: 500px;
-  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
-}
 
-.dismiss {
-  display: block;
-  margin: 0 auto;
-}
+
 </style>
diff --git a/application/components/github/picker.vue b/application/components/github/picker.vue
index 2e27bc7..43f70ae 100644
--- a/application/components/github/picker.vue
+++ b/application/components/github/picker.vue
@@ -30,8 +30,10 @@
       />
 
       <spinner v-if="loadingKeyboard" />
-      <invalid-repo
-        v-if="loadKeyboardError === 'InvalidRepoError'"
+      <validation-errors
+        v-if="loadKeyboardError"
+        :title="loadKeyboardError.name"
+        :errors="loadKeyboardError.errors"
         :otherRepoOrBranchAvailable="repositoryChoices.length > 0 || branchChoices.length > 0"
         @dismiss="clearSelection"
       />
@@ -46,13 +48,14 @@ import map from 'lodash/map'
 import github from './api'
 import * as storage from './storage'
 import InvalidRepo from './invalid-repo.vue'
+import ValidationErrors from './validation-errors.vue'
 import Loader from '../loader.vue'
 import Selector from '../selector.vue'
 import Spinner from '../spinner.vue'
 
 export default {
   name: 'GithubPicker',
-  components: { InvalidRepo, Loader, Selector, Spinner },
+  components: { InvalidRepo, Loader, Selector, Spinner, ValidationErrors },
   emits: ['select'],
   data() {
     return {
@@ -68,6 +71,10 @@ export default {
     github.on('authentication-failed', () => {
       github.beginLoginFlow()
     })
+    github.on('repo-validation-error', err => {
+      this.loadKeyboardError = err
+      this.loadingKeyboard = false
+    })
   },
   watch: {
     repo(value) {
@@ -150,10 +157,6 @@ export default {
       const response = await github.fetchLayoutAndKeymap(repository, branch)
 
       this.loadingKeyboard = false
-      if (response.error) {
-        this.loadKeyboardError = response.error
-        return
-      }
 
       this.$emit('select', { github: { repository, branch }, ...response })
     },
diff --git a/application/components/github/validation-errors.vue b/application/components/github/validation-errors.vue
new file mode 100644
index 0000000..2b08e5a
--- /dev/null
+++ b/application/components/github/validation-errors.vue
@@ -0,0 +1,66 @@
+<script>
+import DialogBox from '../dialog-box.vue'
+import Modal from '../modal.vue'
+
+export default {
+  name: 'ValidationErrors',
+  emits: ['dismiss'],
+  components: {
+    DialogBox,
+    Modal
+  },
+  props: {
+    title: String,
+    errors: Array,
+    otherRepoOrBranchAvailable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    file() {
+      if (this.title === 'InfoValidationError') {
+        return 'config/info.json'
+      } else if (this.title === 'KeymapValidationError') {
+        return 'config/keymap.json'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <modal>
+    <dialog-box @dismiss="$emit('dismiss')">
+      <h2 v-text="title" />
+      <p v-if="file">
+        Errors in the file <code>{{file}}</code>.
+      </p>
+      <ul>
+        <li
+          v-for="(error, i) in errors"
+          v-text="error"
+          :key="i"
+        />
+      </ul>
+      <p v-if="otherRepoOrBranchAvailable">
+        If you have another branch or repository the the required metadata files
+        you may switch to them instead.
+      </p>
+    </dialog-box>
+  </modal>
+</template>
+
+<style scoped>
+  ul {
+    max-height: 300px;
+    overflow: auto;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 80%;
+    background-color: #efefef;
+  }
+  li {
+    margin: 10px;
+  }
+</style>