feat: rename project (#3955)

* feat: project rename

* chore: use a pen icon for rename button

packages/@vue/cli-ui/apollo-server/connectors/projects.js

@@ -431,6 +431,11 @@ function setFavorite ({ id, favorite }, context) {
   return findOne(id, context)
 }
 
+function rename ({ id, name }, context) {
+  context.db.get('projects').find({ id }).assign({ name }).write()
+  return findOne(id, context)
+}
+
 function getType (project, context) {
   if (typeof project === 'string') {
     project = findByPath(project, context)
@@ -483,6 +488,7 @@ module.exports = {
   remove,
   resetCwd,
   setFavorite,
+  rename,
   initCreator,
   removeCreator,
   getType,

packages/@vue/cli-ui/apollo-server/schema/project.js

@@ -20,6 +20,7 @@ extend type Mutation {
   projectRemove (id: ID!): Boolean!
   projectCwdReset: String
   projectSetFavorite (id: ID!, favorite: Int!): Project!
+  projectRename (id: ID!, name: String!): Project!
   presetApply (id: ID!): ProjectCreation
   featureSetEnabled (id: ID!, enabled: Boolean): Feature
 }
@@ -105,6 +106,7 @@ exports.resolvers = {
     projectRemove: (root, { id }, context) => projects.remove(id, context),
     projectCwdReset: (root, args, context) => projects.resetCwd(context),
     projectSetFavorite: (root, args, context) => projects.setFavorite(args, context),
+    projectRename: (root, args, context) => projects.rename(args, context),
     presetApply: (root, { id }, context) => projects.applyPreset(id, context),
     featureSetEnabled: (root, args, context) => projects.setFeatureEnabled(args, context)
   }

packages/@vue/cli-ui/locales/en.json

@@ -3,6 +3,7 @@
     "vue": {
       "common": {
         "close": "Close",
+        "cancel": "Cancel",
         "back": "Go back",
         "more-info": "More info",
         "show-more": "Show more",
@@ -111,6 +112,14 @@
             "open-in-editor": "Open in editor"
           }
         },
+        "project-rename": {
+          "title": "Rename",
+          "name-field": {
+            "title": "Name",
+            "subtitle": "Enter the new name"
+          },
+          "submit": "Rename"
+        },
         "project-plugin-item": {
           "version": "version",
           "latest": "latest",

packages/@vue/cli-ui/src/components/app/ProjectQuickDropdown.vue

@@ -1,84 +1,98 @@
 <template>
-  <VueDropdown
-    v-if="$responsive.wide"
-    :label="projectCurrent ? projectCurrent.name : $t('org.vue.components.status-bar.project.empty')"
-    class="current-project project-quick-dropdown"
-    icon-right="arrow_drop_down"
-    button-class="round"
-  >
-    <!-- Current project options -->
+  <div class="project-quick-dropdown">
+    <VueDropdown
+      v-if="$responsive.wide"
+      :label="projectCurrent ? projectCurrent.name : $t('org.vue.components.status-bar.project.empty')"
+      class="current-project"
+      icon-right="arrow_drop_down"
+      button-class="round"
+    >
+      <!-- Current project options -->
 
-    <template v-if="projectCurrent">
-      <VueSwitch
-        :value="projectCurrent.favorite"
-        :icon="projectCurrent.favorite ? 'star' : 'star_border'"
-        class="extend-left"
-        @update="toggleCurrentFavorite()"
-      >
-        {{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
-      </VueSwitch>
+      <template v-if="projectCurrent">
+        <VueSwitch
+          :value="projectCurrent.favorite"
+          :icon="projectCurrent.favorite ? 'star' : 'star_border'"
+          class="extend-left"
+          @update="toggleCurrentFavorite()"
+        >
+          {{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
+        </VueSwitch>
 
-      <VueDropdownButton
-        :label="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
-        icon-left="open_in_browser"
-        @click="openInEditor(projectCurrent)"
-      />
+        <VueDropdownButton
+          :label="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
+          icon-left="open_in_browser"
+          @click="openInEditor(projectCurrent)"
+        />
 
-      <VueDropdownButton
-        v-if="projectCurrent.homepage"
-        :href="projectCurrent.homepage"
-        :label="$t('org.vue.components.top-bar.homepage')"
-        target="_blank"
-        icon-left="open_in_new"
-      />
-    </template>
+        <VueDropdownButton
+          :label="$t('org.vue.components.project-rename.title')"
+          icon-left="edit"
+          @click="showRename = true"
+        />
 
-    <div class="dropdown-separator"/>
+        <VueDropdownButton
+          v-if="projectCurrent.homepage"
+          :href="projectCurrent.homepage"
+          :label="$t('org.vue.components.top-bar.homepage')"
+          target="_blank"
+          icon-left="open_in_new"
+        />
+      </template>
 
-    <!-- Favorites -->
-
-    <div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
-
-    <template v-else>
-      <div class="section-title">
-        {{ $t('org.vue.components.top-bar.favorite-projects') }}
-      </div>
-
-      <VueDropdownButton
-        v-for="project of favoriteProjects"
-        :key="project.id"
-        :label="project.name"
-        icon-left="star"
-        @click="openProject(project)"
-      />
-    </template>
-
-    <!-- Recents -->
-
-    <template v-if="recentProjects.length">
       <div class="dropdown-separator"/>
 
-      <div class="section-title">
-        {{ $t('org.vue.components.top-bar.recent-projects') }}
-      </div>
+      <!-- Favorites -->
+
+      <div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
+
+      <template v-else>
+        <div class="section-title">
+          {{ $t('org.vue.components.top-bar.favorite-projects') }}
+        </div>
+
+        <VueDropdownButton
+          v-for="project of favoriteProjects"
+          :key="project.id"
+          :label="project.name"
+          icon-left="star"
+          @click="openProject(project)"
+        />
+      </template>
+
+      <!-- Recents -->
+
+      <template v-if="recentProjects.length">
+        <div class="dropdown-separator"/>
+
+        <div class="section-title">
+          {{ $t('org.vue.components.top-bar.recent-projects') }}
+        </div>
+
+        <VueDropdownButton
+          v-for="project of recentProjects"
+          :key="project.id"
+          :label="project.name"
+          icon-left="restore"
+          @click="openProject(project)"
+        />
+      </template>
+
+      <div class="dropdown-separator"/>
 
       <VueDropdownButton
-        v-for="project of recentProjects"
-        :key="project.id"
-        :label="project.name"
-        icon-left="restore"
-        @click="openProject(project)"
+        :to="{ name: 'project-select' }"
+        :label="$t('org.vue.views.project-select.title')"
+        icon-left="home"
       />
-    </template>
+    </VueDropdown>
 
-    <div class="dropdown-separator"/>
-
-    <VueDropdownButton
-      :to="{ name: 'project-select' }"
-      :label="$t('org.vue.views.project-select.title')"
-      icon-left="home"
+    <ProjectRename
+      v-if="showRename"
+      :project="projectCurrent"
+      @close="showRename = false"
     />
-  </VueDropdown>
+  </div>
 </template>
 
 <script>
@@ -90,12 +104,24 @@ import PROJECT_OPEN from '@/graphql/project/projectOpen.gql'
 import PROJECT_SET_FAVORITE from '@/graphql/project/projectSetFavorite.gql'
 import OPEN_IN_EDITOR from '@/graphql/file/fileOpenInEditor.gql'
 
+import ProjectRename from '../project-manager/ProjectRename.vue'
+
 export default {
+  components: {
+    ProjectRename
+  },
+
   apollo: {
     projectCurrent: PROJECT_CURRENT,
     projects: PROJECTS
   },
 
+  data () {
+    return {
+      showRename: false
+    }
+  },
+
   computed: {
     favoriteProjects () {
       if (!this.projects) return []
@@ -154,6 +180,7 @@ export default {
 
 <style lang="stylus" scoped>
 .current-project
+  width 100%
   >>> .trigger
     .vue-ui-button
       .vue-ui-icon.right

packages/@vue/cli-ui/src/components/project-manager/ProjectRename.vue

@@ -0,0 +1,79 @@
+<template>
+  <VueModal
+    :title="$t('org.vue.components.project-rename.title')"
+    class="medium anchor"
+    @close="$emit('close')"
+  >
+    <div class="default-body">
+      <VueFormField
+        :title="$t('org.vue.components.project-rename.name-field.title')"
+        :subtitle="$t('org.vue.components.project-rename.name-field.subtitle')"
+      >
+        <VueInput
+          v-model="newName"
+          icon-left="folder"
+          v-focus
+          class="big"
+          @keyup.enter="rename()"
+        />
+      </VueFormField>
+    </div>
+
+    <div slot="footer" class="actions">
+      <VueButton
+        :label="$t('org.vue.common.cancel')"
+        class="flat big close"
+        @click="$emit('close')"
+      />
+
+      <VueButton
+        class="primary big"
+        :label="$t('org.vue.components.project-rename.submit')"
+        @click="rename()"
+      />
+    </div>
+  </VueModal>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  props: {
+    project: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      newName: this.project.name,
+      loading: false
+    }
+  },
+
+  methods: {
+    async rename () {
+      this.loading = true
+
+      await this.$apollo.mutate({
+        mutation: gql`
+          mutation renameProject ($id: ID!, $name: String!) {
+            projectRename (id: $id, name: $name) {
+              id
+              name
+            }
+          }
+        `,
+        variables: {
+          id: this.project.id,
+          name: this.newName
+        }
+      })
+
+      this.$emit('close')
+    }
+  }
+}
+</script>

packages/@vue/cli-ui/src/components/project-manager/ProjectSelectListItem.vue

@@ -44,6 +44,13 @@
           @click.stop
         />
 
+        <VueButton
+          class="icon-button"
+          icon-left="edit"
+          v-tooltip="$t('org.vue.components.project-rename.title')"
+          @click.stop="showRename = true"
+        />
+
         <VueButton
           class="icon-button"
           icon-left="close"
@@ -53,13 +60,26 @@
         />
       </div>
     </div>
+
+    <ProjectRename
+      v-if="showRename"
+      :project="project"
+      @close="showRename = false"
+      @click.native.stop
+    />
   </div>
 </template>
 
 <script>
 import OPEN_IN_EDITOR from '@/graphql/file/fileOpenInEditor.gql'
 
+import ProjectRename from './ProjectRename.vue'
+
 export default {
+  components: {
+    ProjectRename
+  },
+
   props: {
     project: {
       type: Object,
@@ -67,6 +87,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      showRename: false
+    }
+  },
+
   methods: {
     async openInEditor () {
       await this.$apollo.mutate({

packages/@vue/cli-ui/src/components/view/ViewNav.vue

@@ -222,16 +222,17 @@ export default {
         button-colors($vue-ui-color-primary, transparent)
 
   &.wide
-    >>> .vue-ui-button
-      justify-content flex-start
-      padding-left $padding-item
-      padding-right @padding-left
-      > .content
-        width 100%
-        text-align left
-        > .default-slot
-          flex auto 1 1
-          width 0
-          ellipsis()
-          padding 4px 0
+    .content
+      >>> .vue-ui-button
+        justify-content flex-start
+        padding-left $padding-item
+        padding-right @padding-left
+        > .content
+          width 100%
+          text-align left
+          > .default-slot
+            flex auto 1 1
+            width 0
+            ellipsis()
+            padding 4px 0
 </style>