Change command to textarea and add playwright test

Author: jmthomas

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/CommandEditor.vue

@@ -313,7 +313,7 @@ export default {
     getCmdString() {
       let cmd = `${this.targetName} ${this.commandName}`
       if (this.computedRows.length === 0) return cmd
-      cmd += ' with '
+      cmd += ' with'
       for (const row of this.computedRows) {
         // null value indicates required parameter not set, see updateCmdParams
         if (row.val === null) {

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

@@ -235,11 +235,12 @@
                 >
                 </v-select>
                 <div v-if="kind === 'COMMAND'">
-                  <v-text-field
+                  <v-textarea
                     v-model="activityData"
-                    readonly
-                    type="text"
                     label="Command Input"
+                    rows="1"
+                    readonly
+                    auto-grow
                     data-test="activity-cmd"
                     @click:control="editItem()"
                   />

playwright/tests/script-runner/edit-menu.p.spec.ts

@@ -56,4 +56,32 @@ openc3 is everything I thought it could be`
   await expect(page.locator('text=0 of 0')).toBeVisible()
 })
 
-test('inserts and edits commands', async ({ page, utils }) => {})
+test('inserts and edits commands', async ({ page, utils }) => {
+  // await page.locator('textarea').click({ button: 'right' })
+  await page.locator('.ace_content').click({
+    button: 'right',
+  })
+  await page.getByText('Insert Command').click()
+  await utils.selectTargetPacketItem('INST', 'ABORT')
+  await page.getByRole('button', { name: 'Insert Command' }).click()
+
+  await page.locator('.ace_content').click({
+    button: 'right',
+  })
+  await page.getByText('Insert Command').click()
+  await utils.selectTargetPacketItem('INST', 'COLLECT')
+  await page
+    .locator('[data-test="cmd-param-select"]')
+    .getByRole('combobox')
+    .first()
+    .click()
+  await page.getByRole('option', { name: 'NORMAL' }).click()
+  await page.getByRole('button', { name: 'Insert Command' }).click()
+
+  await expect(page.locator('.ace_content')).toContainText(
+    'cmd("INST ABORT")\n',
+  )
+  await expect(page.locator('.ace_content')).toContainText(
+    'cmd("INST COLLECT with TYPE \'NORMAL\', DURATION 1, OPCODE 0xAB, TEMP 0")\n',
+  )
+})