Merge pull request #1713 from OpenC3/plugin_install

Change plugin / package install to a button

openc3-cosmos-init/plugins/packages/openc3-cosmos-http-example/README.md

@@ -5,6 +5,6 @@ This plugin provides an example of using the HttpClientInterface and the HttpSer
 ## Upload plugin
 
 1. Go to localhost:2900/tools/admin
-1. Click the paperclip icon and choose your plugin.gem file
+1. Click the install button and choose your plugin.gem file
 1. Fill out plugin parameters
 1. Click Install

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/PackagesTab.vue

@@ -23,34 +23,18 @@
 <template>
   <div>
     <v-row no-gutters align="center" class="px-2">
-      <v-col>
-        <v-file-input
-          v-model="files"
-          multiple
-          show-size
-          accept=".gem,.gz,.zip,.whl"
-          class="mx-2"
-          label="Click to select file(s) to add to COSMOS"
+      <v-col class="pa-2 mt-2">
+        <v-btn @click="selectFile">Install Package</v-btn>
+        <input
+          style="display: none"
+          type="file"
           ref="fileInput"
+          @change="fileChange"
         />
       </v-col>
       <v-col class="ml-4 mr-2" cols="4">
         <rux-progress :value="progress"></rux-progress>
       </v-col>
-      <v-btn
-        @click="upload()"
-        class="mx-2"
-        color="primary"
-        data-test="packageUpload"
-        :disabled="files.length < 1"
-        :loading="loadingPackage"
-      >
-        <v-icon start theme="dark">mdi-cloud-upload</v-icon>
-        <span> Upload </span>
-        <template v-slot:loader>
-          <span>Loading...</span>
-        </template>
-      </v-btn>
     </v-row>
     <v-alert v-model="showAlert" closable :type="alertType">{{
       alert
@@ -203,43 +187,49 @@ export default {
         'yyyy-MM-dd HH:mm:ss.SSS',
       )
     },
-    upload: function () {
-      this.loadingPackage = true
+    selectFile() {
       this.progress = 0
-      let self = this
-      const promises = this.files.map((file) => {
-        const formData = new FormData()
-        formData.append('package', file, file.name)
-        return Api.post('/openc3-api/packages', {
-          data: formData,
-          headers: { 'Content-Type': 'multipart/form-data' },
-          onUploadProgress: function (progressEvent) {
-            let percentCompleted = Math.round(
-              (progressEvent.loaded * 100) / progressEvent.total,
-            )
-            self.progress = percentCompleted
-          },
-        })
-      })
-      Promise.all(promises)
-        .then((responses) => {
-          this.progress = 100
-          this.alert = `Uploaded ${responses.length} package${
-            responses.length > 1 ? 's' : ''
-          }`
-          this.alertType = 'success'
-          this.showAlert = true
-          this.loadingPackage = false
-          this.files = []
-          setTimeout(() => {
-            this.showAlert = false
-            this.updateProcesses()
-          }, 5000)
-          this.update()
-        })
-        .catch((error) => {
-          this.loadingPackage = false
+      this.$refs.fileInput.click()
+    },
+    fileChange(event) {
+      const files = event.target.files
+      if (files.length > 0) {
+        this.loadingPackage = true
+        let self = this
+        const promises = [...files].map((file) => {
+          const formData = new FormData()
+          formData.append('package', file, file.name)
+          return Api.post('/openc3-api/packages', {
+            data: formData,
+            headers: { 'Content-Type': 'multipart/form-data' },
+            onUploadProgress: function (progressEvent) {
+              let percentCompleted = Math.round(
+                (progressEvent.loaded * 100) / progressEvent.total,
+              )
+              self.progress = percentCompleted
+            },
+          })
         })
+        Promise.all(promises)
+          .then((responses) => {
+            this.progress = 100
+            this.alert = `Uploaded ${responses.length} package${
+              responses.length > 1 ? 's' : ''
+            }`
+            this.alertType = 'success'
+            this.showAlert = true
+            this.loadingPackage = false
+            this.files = []
+            setTimeout(() => {
+              this.showAlert = false
+              this.updateProcesses()
+            }, 5000)
+            this.update()
+          })
+          .catch((error) => {
+            this.loadingPackage = false
+          })
+      }
     },
     deletePackage: function (pkg) {
       this.$dialog

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/PluginsTab.vue

@@ -23,34 +23,21 @@
 <template>
   <div>
     <v-row no-gutters align="center" class="px-2">
-      <v-col>
-        <v-file-input
-          v-model="file"
-          show-size
-          accept=".gem"
-          class="mx-2"
-          label="Click to install new plugin .gem (NOT upgrade)"
+      <v-col class="pa-2 mt-2">
+        <v-btn @click="selectFile">Install New Plugin</v-btn>
+        <input
+          style="display: none"
+          type="file"
           ref="fileInput"
-          @change="fileChange()"
-          @mousedown="fileMousedown()"
+          @change="fileChange"
         />
+        &nbsp;Note: Use <v-icon>mdi-update</v-icon> to upgrade existing plugins
       </v-col>
       <v-col class="ml-4 mr-2" cols="4">
         <rux-progress :value="progress"></rux-progress>
       </v-col>
-      <!-- <v-col align="right">
-        <v-btn
-          @click="showDownloadDialog = true"
-          class="mx-2"
-          data-test="download-plugin"
-          :disabled="file !== null"
-        >
-          <v-icon left>mdi-cloud-download</v-icon>
-          <span> Download </span>
-        </v-btn>
-      </v-col> -->
     </v-row>
-    <v-row no-gutters class="px-4" style="margin-top: 10px">
+    <v-row no-gutters class="px-2">
       <v-col>
         <v-checkbox
           v-model="showDefaultTools"
@@ -296,6 +283,15 @@ export default {
       ],
     }
   },
+  watch: {
+    // watcher to reset the file input when the dialog is closed
+    showPluginDialog: function (newValue, oldValue) {
+      if (newValue === false) {
+        this.file = null
+        this.$refs.fileInput.value = null
+      }
+    },
+  },
   computed: {
     shownPlugins() {
       let result = []
@@ -547,17 +543,21 @@ export default {
       this.update()
     },
     upgradePlugin(plugin) {
-      this.file = undefined
+      this.file = null
       this.currentPlugin = plugin
-      this.$refs.fileInput.click()
       this.progress = 0
+      this.$refs.fileInput.click()
     },
-    fileMousedown() {
+    selectFile() {
+      this.file = null
       this.currentPlugin = null
       this.progress = 0
+      this.$refs.fileInput.click()
     },
-    fileChange() {
-      if (this.file !== undefined) {
+    fileChange(event) {
+      const files = event.target.files
+      if (files.length > 0) {
+        this.file = files[0]
         if (this.currentPlugin !== null) {
           if (
             this.file.name.split('.gem')[0] ==
@@ -608,6 +608,9 @@ export default {
         } else {
           this.upload()
         }
+      } else {
+        // Reset the input element
+        this.$refs.fileInput.value = null
       }
     },
   },

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/ActivityCreateDialog.vue

@@ -51,19 +51,13 @@
                 Previous
               </v-btn>
               <v-spacer />
-              <v-btn
-                @click="clearHandler"
-                variant="outlined"
-                class="mr-4"
-                data-test="trigger-create-cancel-btn"
-              >
+              <v-btn @click="clearHandler" variant="outlined" class="mr-4">
                 Cancel
               </v-btn>
               <v-btn
                 @click.prevent="submitHandler"
                 type="submit"
                 color="primary"
-                data-test="trigger-create-submit-btn"
                 :disabled="!!error"
               >
                 Ok

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/MetadataCreateDialog.vue

@@ -51,19 +51,13 @@
                 Previous
               </v-btn>
               <v-spacer />
-              <v-btn
-                @click="clearHandler"
-                variant="outlined"
-                class="mr-4"
-                data-test="trigger-create-cancel-btn"
-              >
+              <v-btn @click="clearHandler" variant="outlined" class="mr-4">
                 Cancel
               </v-btn>
               <v-btn
                 @click.prevent="submitHandler"
                 type="submit"
                 color="primary"
-                data-test="trigger-create-submit-btn"
                 :disabled="!!error"
               >
                 Ok

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/calendar/Dialogs/NoteCreateDialog.vue

@@ -51,19 +51,13 @@
                 Previous
               </v-btn>
               <v-spacer />
-              <v-btn
-                @click="clearHandler"
-                variant="outlined"
-                class="mr-4"
-                data-test="trigger-create-cancel-btn"
-              >
+              <v-btn @click="clearHandler" variant="outlined" class="mr-4">
                 Cancel
               </v-btn>
               <v-btn
                 @click.prevent="submitHandler"
                 type="submit"
                 color="primary"
-                data-test="trigger-create-submit-btn"
                 :disabled="!!error"
               >
                 Ok

openc3.code-workspace

@@ -11,6 +11,9 @@
     },
     {
       "path": "../cosmos-enterprise-project"
+    },
+    {
+      "path": "../cosmos-enterprise-plugins"
     }
   ],
   "settings": {

openc3/templates/plugin/README.md

@@ -42,7 +42,7 @@ docker run -it -v %cd%:/openc3/local -w /openc3/local docker.io/openc3inc/openc3
 ## Installing into OpenC3 COSMOS
 
 1. Go to the OpenC3 Admin Tool, Plugins Tab
-1. Click the paperclip icon and choose your plugin.gem file
+1. Click the install button and choose your plugin.gem file
 1. Fill out plugin parameters
 1. Click Install
 

playwright/tests/admin/plugins.spec.ts

@@ -210,11 +210,7 @@ test('installs a new plugin', async ({ page, utils }) => {
     // It is important to call waitForEvent before click to set up waiting.
     page.waitForEvent('filechooser'),
     // Opens the file chooser.
-    await page
-      .getByLabel('Click to install new plugin .gem (NOT upgrade)', {
-        exact: true,
-      })
-      .click(),
+    await page.getByRole('button', { name: 'Install New Plugin' }).click(),
   ])
   await fileChooser.setFiles(`./${plugin}/${pluginGem}`)
   await expect(page.locator('.v-dialog:has-text("Variables")')).toBeVisible()

playwright/tests/script-runner/api.spec.ts

@@ -217,7 +217,7 @@ async function testMetadataApis(page, utils, filename) {
     .locator('[data-test="value-0"]')
     .locator('input')
     .fill('inputvalue')
-  await page.locator('[data-test="trigger-create-submit-btn"]').click()
+  await page.getByRole('button', { name: 'Ok' }).click()
   await page.locator('[data-test="close-event-list"]').click()
 
   await expect(page.locator('[data-test=state] input')).toHaveValue('stopped', {