diff options
Diffstat (limited to 'application/components/github')
| -rw-r--r-- | application/components/github/api.js | 23 | ||||
| -rw-r--r-- | application/components/github/invalid-repo.vue | 30 | ||||
| -rw-r--r-- | application/components/github/picker.vue | 17 | ||||
| -rw-r--r-- | application/components/github/validation-errors.vue | 66 |
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> |