feat(ui): Project select hide tabs when creating project

Author: Guillaume Chau

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="step-wizard">
+  <div
+    class="step-wizard"
+    :class="{
+      'hide-tabs': hideTabs
+    }"
+  >
     <div class="header">
       <div v-if="title" class="title">{{ title }}</div>
     </div>
@@ -24,6 +29,11 @@ export default {
   inheritAttrs: false,
 
   props: {
+    hideTabs: {
+      type: Boolean,
+      default: false
+    },
+
     title: {
       type: String,
       default: null
@@ -38,12 +48,11 @@ export default {
     previous () {
       const tabs = this.$refs.tabs
       tabs.activateChild(tabs.activeChildIndex - 1)
-    },
+    }
   }
 }
 </script>
 
-
 <style lang="stylus" scoped>
 @import "~@/style/imports"
 
@@ -86,4 +95,8 @@ export default {
     text-align center
     font-weight lighter
 
+  &.hide-tabs
+    >>> .tabs
+      display none
+
 </style>

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

@@ -14,6 +14,7 @@
               <div class="project-details vue-grid col-1 big-gap">
                 <VueFormField
                   title="Project folder"
+                  :subtitle="cwd"
                 >
                   <VueInput
                     v-model="formData.folder"
@@ -24,7 +25,7 @@
 
                   <VueButton
                     label="Change current working directory"
-                    :to="{ name: 'project-select', query: { tab: 'create' } }"
+                    :to="{ name: 'project-select', query: { tab: 'create', hideTabs: true } }"
                   />
                 </VueFormField>
 
@@ -265,8 +266,8 @@ import ProjectPresetItem from '../components/ProjectPresetItem'
 import StatusBar from '../components/StatusBar'
 import StepWizard from '../components/StepWizard'
 
+import CWD from '../graphql/cwd.gql'
 import PROJECT_CREATION from '../graphql/projectCreation.gql'
-import PROJECT_INIT_CREATE from '../graphql/projectInitCreate.gql'
 
 function formDataFactory () {
   return {
@@ -292,13 +293,15 @@ export default {
   data () {
     return {
       formData: formData,
+      cwd: '',
       projectCreation: null,
       showCancel: false,
       showRemotePreset: false
     }
   },
 
   apollo: {
+    cwd: CWD,
     projectCreation: PROJECT_CREATION
   },
 

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

@@ -3,6 +3,7 @@
     <StepWizard
       :tab-id.sync="tab"
       title="Vue Project Manager"
+      :hide-tabs="hideTabs"
     >
       <VueTab
         id="existing"
@@ -70,7 +71,8 @@ export default {
   data () {
     return {
       folderCurrent: {},
-      tab: undefined
+      tab: undefined,
+      hideTabs: this.$route.query.hideTabs
     }
   },