feat(ui): update all plugin to wanted version button (#1456)

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

@@ -267,7 +267,8 @@
     "project-plugins": {
       "title": "Project plugins",
       "button": "Add plugin",
-      "heading": "Installed plugins"
+      "heading": "Installed plugins",
+      "update-all": "Update all plugins"
     },
     "project-plugins-add": {
       "title": "Add a plugin",

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

@@ -359,7 +359,7 @@ async function initPrompts (id, context) {
   await prompts.start()
 }
 
-function update (id, context) {
+function update (id, context, notify = true) {
   return progress.wrap('plugin-update', context, async setProgress => {
     setProgress({
       status: 'plugin-update',
@@ -370,15 +370,44 @@ function update (id, context) {
     const { current, wanted } = await getVersion(plugin, context)
     await updatePackage(cwd.get(), getCommand(), null, id)
     resetPluginApi(context)
+
     logs.add({
       message: `Plugin ${id} updated from ${current} to ${wanted}`,
       type: 'info'
     }, context)
+
+    if (notify) {
+      notifier.notify({
+        title: `Plugin updated`,
+        message: `Plugin ${id} was successfully updated`,
+        icon: path.resolve(__dirname, '../../assets/done.png')
+      })
+    }
+
     currentPluginId = null
     return findOne(id)
   })
 }
 
+async function updateAll (context) {
+  const plugins = await list(cwd.get(), context)
+  let updatedPlugins = []
+  for (const plugin of plugins) {
+    const version = await getVersion(plugin, context)
+    if (version.current !== version.wanted) {
+      updatedPlugins.push(await update(plugin.id, context, false))
+    }
+  }
+
+  notifier.notify({
+    title: `Plugins updated`,
+    message: `${updatedPlugins.length} plugin(s) were successfully updated`,
+    icon: path.resolve(__dirname, '../../assets/done.png')
+  })
+
+  return updatedPlugins
+}
+
 function getApi () {
   return pluginApi
 }
@@ -433,6 +462,7 @@ module.exports = {
   install,
   uninstall,
   update,
+  updateAll,
   runInvoke,
   resetPluginApi,
   getApi,

packages/@vue/cli-ui/src/graphql-api/schema/plugin.js

@@ -17,6 +17,7 @@ extend type Mutation {
   pluginFinishInstall: PluginInstallation
   pluginUpdate (id: ID!): Plugin
   pluginActionCall (id: ID!, params: JSON): PluginActionResult
+  pluginsUpdate: [Plugin]
 }
 
 extend type Subscription {
@@ -80,7 +81,8 @@ exports.resolvers = {
     pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),
     pluginFinishInstall: (root, args, context) => plugins.finishInstall(context),
     pluginUpdate: (root, { id }, context) => plugins.update(id, context),
-    pluginActionCall: (root, args, context) => plugins.callAction(args, context)
+    pluginActionCall: (root, args, context) => plugins.callAction(args, context),
+    pluginsUpdate: (root, args, context) => plugins.updateAll(context)
   },
 
   Subscription: {

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

@@ -0,0 +1,10 @@
+#import "./versionFragment.gql"
+
+mutation pluginsUpdate {
+  pluginsUpdate {
+    id
+    version {
+      ...version
+    }
+  }
+}

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

@@ -12,6 +12,20 @@
           :to="{ name: 'project-plugins-add' }"
           data-testid="add-plugin"
         />
+
+        <VueDropdown>
+          <VueButton
+            slot="trigger"
+            icon-left="more_vert"
+            class="icon-button flat round"
+          />
+
+          <VueDropdownButton
+            icon-left="file_download"
+            :label="$t('views.project-plugins.update-all')"
+            @click="updateAll()"
+          />
+        </VueDropdown>
       </template>
 
       <ApolloQuery
@@ -43,6 +57,8 @@
 </template>
 
 <script>
+import PLUGINS_UPDATE from '../graphql/pluginsUpdate.gql'
+
 export default {
   name: 'ProjectPlugins',
 
@@ -50,6 +66,14 @@ export default {
     return {
       title: this.$t('views.project-plugins.title')
     }
+  },
+
+  methods: {
+    updateAll () {
+      return this.$apollo.mutate({
+        mutation: PLUGINS_UPDATE
+      })
+    }
   }
 }
 </script>