feat(ui): prompt error ui

vuejs · Mar 14, 2018 · 798445f · 798445f
1 parent 009b880
commit 798445f
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 69 deletions.
diff --git a/packages/@vue/cli-ui/src/components/PromptCheckbox.vue b/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
@@ -18,6 +18,8 @@
         {{ choice.name }}
       </VueSwitch>
     </div>
+
+    <PromptError :error="prompt.error"/>
   </div>
 </template>
 

diff --git a/packages/@vue/cli-ui/src/components/PromptConfirm.vue b/packages/@vue/cli-ui/src/components/PromptConfirm.vue
@@ -11,6 +11,8 @@
         :link="prompt.link"
       />
     </VueSwitch>
+
+    <PromptError :error="prompt.error"/>
   </div>
 </template>
 

diff --git a/packages/@vue/cli-ui/src/components/PromptError.vue b/packages/@vue/cli-ui/src/components/PromptError.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-if="error" class="prompt-error">
+    <div class="vue-text danger banner">
+      <VueIcon icon="warning" class="big"/>
+      <span>{{ error.message }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.prompt-error
+  padding 0 $padding-item $padding-item
+
+  .banner
+    border-radius $br
+</style>
diff --git a/packages/@vue/cli-ui/src/components/PromptInput.vue b/packages/@vue/cli-ui/src/components/PromptInput.vue
@@ -15,6 +15,8 @@
         />
       </div>
     </div>
+
+    <PromptError :error="prompt.error"/>
   </div>
 </template>
 

diff --git a/packages/@vue/cli-ui/src/components/PromptList.vue b/packages/@vue/cli-ui/src/components/PromptList.vue
@@ -21,6 +21,8 @@
         </VueSelect>
       </div>
     </div>
+
+    <PromptError :error="prompt.error"/>
   </div>
 </template>
 

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js b/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js
@@ -126,6 +126,7 @@ function initCreator (context) {
   // Prompts
   prompts.reset()
   creator.injectedPrompts.forEach(prompts.add)
+  updatePromptsFeatures()
   prompts.start()
 
   return creator

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
@@ -52,7 +52,7 @@ function getEnabled (value) {
 function validateInput (prompt, value) {
   const validate = prompt.raw.validate
   if (typeof validate === 'function') {
-    return validate(value)
+    return validate(value, answers)
   }
   return true
 }
@@ -147,6 +147,7 @@ function generatePrompt (data) {
     choices: null,
     value: null,
     valueChanged: false,
+    error: null,
     raw: data
   }
 }
@@ -218,7 +219,7 @@ function setValue ({ id, value }) {
   if (validation !== true) {
     prompt.error = generatePromptError(validation)
   } else {
-    prompt.error = undefined
+    prompt.error = null
   }
   prompt.value = getDisplayedValue(prompt, value)
   const finalValue = getValue(prompt, value)

diff --git a/packages/@vue/cli-ui/src/mixins/Prompts.js b/packages/@vue/cli-ui/src/mixins/Prompts.js
@@ -0,0 +1,48 @@
+import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
+
+export default function ({
+  field,
+  query
+}) {
+  // @vue/component
+  return {
+    computed: {
+      configurationValid () {
+        return this.enabledPrompts.filter(
+          p =>
+            p.error ||
+            p.value === null ||
+            JSON.parse(p.value) === ''
+        ).length === 0
+      },
+
+      enabledPrompts () {
+        if (!this[field]) {
+          return []
+        }
+        return this[field].prompts.filter(
+          p => p.enabled
+        )
+      }
+    },
+
+    methods: {
+      async answerPrompt ({ prompt, value }) {
+        await this.$apollo.mutate({
+          mutation: PROMPT_ANSWER,
+          variables: {
+            input: {
+              id: prompt.id,
+              value: JSON.stringify(value)
+            }
+          },
+          update: (store, { data: { promptAnswer } }) => {
+            const data = store.readQuery({ query })
+            data[field].prompts = promptAnswer
+            store.writeQuery({ query, data })
+          }
+        })
+      }
+    }
+  }
+}
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -365,11 +365,12 @@
 </template>
 
 <script>
+import Prompts from '../mixins/Prompts'
+
 import CWD from '../graphql/cwd.gql'
 import PROJECT_CREATION from '../graphql/projectCreation.gql'
 import FEATURE_SET_ENABLED from '../graphql/featureSetEnabled.gql'
 import PRESET_APPLY from '../graphql/presetApply.gql'
-import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
 import PROJECT_CREATE from '../graphql/projectCreate.gql'
 
 function formDataFactory () {
@@ -391,6 +392,13 @@ let formData = formDataFactory()
 export default {
   name: 'ProjectCreate',
 
+  mixins: [
+    Prompts({
+      field: 'projectCreation',
+      query: PROJECT_CREATION
+    }),
+  ],
+
   data () {
     return {
       formData: formData,
@@ -423,21 +431,6 @@ export default {
       return !!this.formData.selectedPreset
     },
 
-    configurationValid () {
-      return this.enabledPrompts.filter(
-        p => p.value === null || JSON.parse(p.value) === ''
-      ).length === 0
-    },
-
-    enabledPrompts () {
-      if (!this.projectCreation) {
-        return []
-      }
-      return this.projectCreation.prompts.filter(
-        p => p.enabled
-      )
-    },
-
     manual () {
       return this.formData.selectedPreset === '__manual__'
     },
@@ -486,23 +479,6 @@ export default {
       this.$apollo.queries.projectCreation.refetch()
     },
 
-    async answerPrompt ({ prompt, value }) {
-      await this.$apollo.mutate({
-        mutation: PROMPT_ANSWER,
-        variables: {
-          input: {
-            id: prompt.id,
-            value: JSON.stringify(value)
-          }
-        },
-        update: (store, { data: { promptAnswer } }) => {
-          const data = store.readQuery({ query: PROJECT_CREATION })
-          data.projectCreation.prompts = promptAnswer
-          store.writeQuery({ query: PROJECT_CREATION, data })
-        }
-      })
-    },
-
     createWithoutSaving () {
       this.formData.save = ''
       this.createProject()

diff --git a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -151,6 +151,8 @@
 </template>
 
 <script>
+import Prompts from '../mixins/Prompts'
+
 import PLUGIN_INSTALLATION from '../graphql/pluginInstallation.gql'
 import PLUGIN_INSTALL from '../graphql/pluginInstall.gql'
 import PLUGIN_UNINSTALL from '../graphql/pluginUninstall.gql'
@@ -159,6 +161,13 @@ import PROMPT_ANSWER from '../graphql/promptAnswer.gql'
 export default {
   name: 'ProjectPluginsAdd',
 
+  mixins: [
+    Prompts({
+      field: 'pluginInstallation',
+      query: PLUGIN_INSTALLATION
+    })
+  ],
+
   data () {
     return {
       tabId: 'search',
@@ -182,23 +191,6 @@ export default {
     }
   },
 
-  computed: {
-    configurationValid () {
-      return this.enabledPrompts.filter(
-        p => p.value === null || JSON.parse(p.value) === ''
-      ).length === 0
-    },
-
-    enabledPrompts () {
-      if (!this.pluginInstallation) {
-        return []
-      }
-      return this.pluginInstallation.prompts.filter(
-        p => p.enabled
-      )
-    }
-  },
-
   mounted () {
     requestAnimationFrame(() => {
       this.$refs.searchInput.focus()
@@ -248,23 +240,6 @@ export default {
     async invokePlugin () {
       // TODO
     },
-
-    async answerPrompt ({ prompt, value }) {
-      await this.$apollo.mutate({
-        mutation: PROMPT_ANSWER,
-        variables: {
-          input: {
-            id: prompt.id,
-            value: JSON.stringify(value)
-          }
-        },
-        update: (store, { data: { promptAnswer } }) => {
-          const data = store.readQuery({ query: PLUGIN_INSTALLATION })
-          data.pluginInstallation.prompts = promptAnswer
-          store.writeQuery({ query: PLUGIN_INSTALLATION, data })
-        }
-      })
-    },
   }
 }
 </script>