feat(ui): Prompts can now be shown and disabled

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/PromptCheckbox.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="prompt prompt-checkbox">
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-checkbox"
+  >
     <div class="prompt-content">
       <ListItemInfo
         :name="prompt.message"
@@ -20,7 +23,7 @@
     </div>
 
     <PromptError :error="prompt.error"/>
-  </div>
+  </VueDisable>
 </template>
 
 <script>

packages/@vue/cli-ui/src/components/PromptConfirm.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="prompt prompt-confirm">
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-confirm"
+  >
     <VueSwitch
       :value="value(prompt.value)"
       class="extend-left"
@@ -13,7 +16,7 @@
     </VueSwitch>
 
     <PromptError :error="prompt.error"/>
-  </div>
+  </VueDisable>
 </template>
 
 <script>

packages/@vue/cli-ui/src/components/PromptInput.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="prompt prompt-input">
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-input"
+  >
     <div class="prompt-content">
       <ListItemInfo
         :name="prompt.message"
@@ -17,7 +20,7 @@
     </div>
 
     <PromptError :error="prompt.error"/>
-  </div>
+  </VueDisable>
 </template>
 
 <script>

packages/@vue/cli-ui/src/components/PromptList.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="prompt prompt-list">
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-list"
+  >
     <div class="prompt-content">
       <ListItemInfo
         :name="prompt.message"
@@ -23,7 +26,7 @@
     </div>
 
     <PromptError :error="prompt.error"/>
-  </div>
+  </VueDisable>
 </template>
 
 <script>

packages/@vue/cli-ui/src/components/PromptsList.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <component
         v-for="prompt of prompts"
-        v-if="prompt.enabled"
+        v-if="prompt.visible"
         :key="prompt.id"
         :is="getModule(prompt)"
         :prompt="prompt"

packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js

@@ -138,8 +138,9 @@ function removeAnswer (id) {
 function generatePrompt (data) {
   return {
     id: data.name,
-    enabled: true,
     type: data.type,
+    visible: true,
+    enabled: true,
     name: data.short || null,
     message: data.message,
     description: data.description || null,
@@ -154,15 +155,15 @@ function generatePrompt (data) {
 
 function updatePrompts () {
   for (const prompt of prompts) {
-    const oldEnabled = prompt.enabled
-    prompt.enabled = getEnabled(prompt.raw.when)
+    const oldVisible = prompt.visible
+    prompt.visible = getEnabled(prompt.raw.when)
 
     prompt.choices = getChoices(prompt)
 
-    if (oldEnabled !== prompt.enabled && !prompt.enabled) {
+    if (oldVisible !== prompt.visible && !prompt.visible) {
       removeAnswer(prompt.id)
       prompt.valueChanged = false
-    } else if (prompt.enabled && !prompt.valueChanged) {
+    } else if (prompt.visible && !prompt.valueChanged) {
       let value = getDefaultValue(prompt)
       prompt.value = getDisplayedValue(prompt, value)
       setAnswer(prompt.id, getValue(prompt, value))

packages/@vue/cli-ui/src/graphql-api/type-defs.js

@@ -21,6 +21,12 @@ enum PackageManager {
   yarn
 }
 
+interface DescribedEntity {
+  name: String
+  description: String
+  link: String
+}
+
 type Folder {
   name: String!
   path: String!
@@ -52,7 +58,7 @@ input ProjectImportInput {
   path: String!
 }
 
-type Preset {
+type Preset implements DescribedEntity {
   id: ID!
   name: String
   description: String
@@ -94,9 +100,9 @@ type PluginInstallation {
   prompts: [Prompt]
 }
 
-type Feature {
+type Feature implements DescribedEntity {
   id: ID!
-  name: String!
+  name: String
   description: String
   link: String
   enabled: Boolean!
@@ -125,10 +131,11 @@ type PromptError {
   link: String
 }
 
-type Prompt {
+type Prompt implements DescribedEntity {
   id: ID!
-  enabled: Boolean!
   type: PromptType!
+  visible: Boolean!
+  enabled: Boolean
   name: String
   message: String
   description: String
@@ -154,12 +161,13 @@ type Progress {
   args: [String]
 }
 
-type Task {
+type Task implements DescribedEntity {
   id: ID!
   status: TaskStatus!
-  name: String!
+  name: String
   command: String!
   description: String
+  link: String
   logs: [TaskLog]
 }
 
@@ -182,6 +190,15 @@ enum TaskLogType {
   stderr
 }
 
+type Configuration implements DescribedEntity {
+  id: ID!
+  name: String
+  description: String
+  link: String
+  icon: String
+  prompts: [Prompt]
+}
+
 type Query {
   progress (id: ID!): Progress
   cwd: String!
@@ -196,6 +213,8 @@ type Query {
   plugin (id: ID!): Plugin
   tasks: [Task]
   task (id: ID!): Task
+  configurations: [Configuration]
+  configuration (id: ID!): Configuration
 }
 
 type Mutation {

packages/@vue/cli-ui/src/graphql/promptFragment.gql

@@ -3,8 +3,9 @@
 
 fragment prompt on Prompt {
   id
-  enabled
   type
+  visible
+  enabled
   name
   message
   description

packages/@vue/cli-ui/src/mixins/Prompts.js

@@ -8,20 +8,20 @@ export default function ({
   return {
     computed: {
       configurationValid () {
-        return this.enabledPrompts.filter(
+        return this.visiblePrompts.filter(
           p =>
             p.error ||
             p.value === null ||
             JSON.parse(p.value) === ''
         ).length === 0
       },
 
-      enabledPrompts () {
+      visiblePrompts () {
         if (!this[field]) {
           return []
         }
         return this[field].prompts.filter(
-          p => p.enabled
+          p => p.visible
         )
       }
     },

packages/@vue/cli-ui/src/views/ProjectCreate.vue

@@ -201,7 +201,7 @@
               />
 
               <VueButton
-                v-if="enabledPrompts.length"
+                v-if="visiblePrompts.length"
                 icon-right="arrow_forward"
                 :label="$t('views.project-create.tabs.features.buttons.next')"
                 class="big primary"
@@ -249,12 +249,12 @@
             id="config"
             :label="$t('views.project-create.tabs.configuration.title')"
             icon="settings_applications"
-            :disabled="!detailsValid || !presetValid || !manual || !enabledPrompts.length"
+            :disabled="!detailsValid || !presetValid || !manual || !visiblePrompts.length"
             lazy
           >
             <div class="content vue-ui-disable-scroll">
               <PromptsList
-                :prompts="enabledPrompts"
+                :prompts="visiblePrompts"
                 @answer="answerPrompt"
               />
             </div>