From 56c2aacd4aac2b550d52d87fc38154f57f7eef43 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sat, 24 Mar 2018 21:01:14 +0100
Subject: [PATCH] feat(ui): Prompts can now be shown and disabled

---
 .../cli-ui/src/components/PromptCheckbox.vue  |  7 ++--
 .../cli-ui/src/components/PromptConfirm.vue   |  7 ++--
 .../cli-ui/src/components/PromptInput.vue     |  7 ++--
 .../@vue/cli-ui/src/components/PromptList.vue |  7 ++--
 .../cli-ui/src/components/PromptsList.vue     |  2 +-
 .../src/graphql-api/connectors/prompts.js     | 11 ++++---
 .../@vue/cli-ui/src/graphql-api/type-defs.js  | 33 +++++++++++++++----
 .../cli-ui/src/graphql/promptFragment.gql     |  3 +-
 packages/@vue/cli-ui/src/mixins/Prompts.js    |  6 ++--
 .../@vue/cli-ui/src/views/ProjectCreate.vue   |  6 ++--
 .../cli-ui/src/views/ProjectPluginsAdd.vue    |  2 +-
 11 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/packages/@vue/cli-ui/src/components/PromptCheckbox.vue b/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
index e4af2ed584..9627146b62 100644
--- a/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
+++ b/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>
diff --git a/packages/@vue/cli-ui/src/components/PromptConfirm.vue b/packages/@vue/cli-ui/src/components/PromptConfirm.vue
index 5c20be0b41..bc463f0c87 100644
--- a/packages/@vue/cli-ui/src/components/PromptConfirm.vue
+++ b/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>
diff --git a/packages/@vue/cli-ui/src/components/PromptInput.vue b/packages/@vue/cli-ui/src/components/PromptInput.vue
index 914f5a6904..bd0cfbde46 100644
--- a/packages/@vue/cli-ui/src/components/PromptInput.vue
+++ b/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>
diff --git a/packages/@vue/cli-ui/src/components/PromptList.vue b/packages/@vue/cli-ui/src/components/PromptList.vue
index 372f8e3552..1cc37bef2c 100644
--- a/packages/@vue/cli-ui/src/components/PromptList.vue
+++ b/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>
diff --git a/packages/@vue/cli-ui/src/components/PromptsList.vue b/packages/@vue/cli-ui/src/components/PromptsList.vue
index a9aaee0ad5..86cecd1dcf 100644
--- a/packages/@vue/cli-ui/src/components/PromptsList.vue
+++ b/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"
diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js b/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
index 8e2a6fe6b5..11cbece7b0 100644
--- a/packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js
+++ b/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))
diff --git a/packages/@vue/cli-ui/src/graphql-api/type-defs.js b/packages/@vue/cli-ui/src/graphql-api/type-defs.js
index 182654c5ee..04246cc8cd 100644
--- a/packages/@vue/cli-ui/src/graphql-api/type-defs.js
+++ b/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 {
diff --git a/packages/@vue/cli-ui/src/graphql/promptFragment.gql b/packages/@vue/cli-ui/src/graphql/promptFragment.gql
index c761adf9aa..cb9e478bd0 100644
--- a/packages/@vue/cli-ui/src/graphql/promptFragment.gql
+++ b/packages/@vue/cli-ui/src/graphql/promptFragment.gql
@@ -3,8 +3,9 @@
 
 fragment prompt on Prompt {
   id
-  enabled
   type
+  visible
+  enabled
   name
   message
   description
diff --git a/packages/@vue/cli-ui/src/mixins/Prompts.js b/packages/@vue/cli-ui/src/mixins/Prompts.js
index 8a5d79f3f3..7bba3e2490 100644
--- a/packages/@vue/cli-ui/src/mixins/Prompts.js
+++ b/packages/@vue/cli-ui/src/mixins/Prompts.js
@@ -8,7 +8,7 @@ export default function ({
   return {
     computed: {
       configurationValid () {
-        return this.enabledPrompts.filter(
+        return this.visiblePrompts.filter(
           p =>
             p.error ||
             p.value === null ||
@@ -16,12 +16,12 @@ export default function ({
         ).length === 0
       },
 
-      enabledPrompts () {
+      visiblePrompts () {
         if (!this[field]) {
           return []
         }
         return this[field].prompts.filter(
-          p => p.enabled
+          p => p.visible
         )
       }
     },
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
index 8fb81d4f3b..294b04ea67 100644
--- a/packages/@vue/cli-ui/src/views/ProjectCreate.vue
+++ b/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>
diff --git a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
index fd7dc74724..681049dd49 100644
--- a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -90,7 +90,7 @@
             <div class="content vue-ui-disable-scroll">
               <div class="cta-text">{{ $t('views.project-plugins-add.tabs.configuration.heading', { target: pluginId }) }}</div>
               <PromptsList
-                :prompts="enabledPrompts"
+                :prompts="visiblePrompts"
                 @answer="answerPrompt"
               />
             </div>