feat(ui): import project: missing modules modal

vuejs · Jun 17, 2018 · 99dc316 · 99dc316
1 parent ccde77c
commit 99dc316
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 9 deletions.
diff --git a/packages/@vue/cli-ui/locales/en.json b/packages/@vue/cli-ui/locales/en.json
@@ -191,6 +191,13 @@
  "buttons": {
  "create": "Create a new project here",
  "import": "Import this folder"
+ },
+ "import": {
+ "no-modules": {
+ "title": "Missing modules",
+ "message": "It seems the project is missing the 'node_modules' folder. Please check you installed the dependencies before importing.",
+ "close": "Got it"
+ }
  }
  },
  "project-create": {

diff --git a/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js b/packages/@vue/cli-ui/src/graphql-api/connectors/projects.js
@@ -332,6 +332,10 @@ async function create (input, context) {
 }
 
 async function importProject (input, context) {
+ if (!fs.existsSync(path.join(input.path, 'node_modules'))) {
+ throw new Error('NO_MODULES')
+ }
+
  const project = {
  id: shortId.generate(),
  path: input.path,

diff --git a/packages/@vue/cli-ui/src/views/ProjectSelect.vue b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -65,6 +65,27 @@
  v-tooltip="$t('views.about.title')"
  />
  </div>
+
+ <VueModal
+ v-if="showNoModulesModal"
+ :title="$t('views.project-select.import.no-modules.title')"
+ class="small no-modules-modal"
+ @close="showNoModulesModal = false"
+ >
+ <div class="default-body">
+ <div class="message">
+ {{ $t('views.project-select.import.no-modules.message') }}
+ </div>
+ </div>
+
+ <div slot="footer" class="actions">
+ <VueButton
+ class="primary big"
+ :label="$t('views.project-select.import.no-modules.close')"
+ @click="showNoModulesModal = false"
+ />
+ </div>
+ </VueModal>
  </div>
 </template>
 
@@ -86,7 +107,8 @@ export default {
  return {
  folderCurrent: {},
  tab: undefined,
- hideTabs: !!this.$route.query.hideTabs
+ hideTabs: !!this.$route.query.hideTabs,
+ showNoModulesModal: false
  }
  },
 
@@ -111,16 +133,22 @@ export default {
  },
 
  async importProject () {
- await this.$apollo.mutate({
- mutation: PROJECT_IMPORT,
- variables: {
- input: {
- path: this.folderCurrent.path
+ try {
+ await this.$apollo.mutate({
+ mutation: PROJECT_IMPORT,
+ variables: {
+ input: {
+ path: this.folderCurrent.path
+ }
  }
- }
- })
+ })
 
- this.$router.push({ name: 'project-home' })
+ this.$router.push({ name: 'project-home' })
+ } catch (e) {
+ if (e.graphQLErrors && e.graphQLErrors.some(e => e.message === 'NO_MODULES')) {
+ this.showNoModulesModal = true
+ }
+ }
  }
  }
 }