[Enhancement] Manually Entered on Command Sender (#2906)

* [Enhancement] Manually Entered on Command Sender

* Add/fix playwright tests

Author: clayandgen

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue

@@ -26,6 +26,7 @@
       :states-in-hex="statesInHex"
       :show-ignored-params="showIgnoredParams"
       :cmd-raw="cmdRaw"
+      :ignore-range-checks="ignoreRangeChecks"
       @command-changed="commandChanged($event)"
       @command-loaded="onCommandLoaded($event)"
       @build-cmd="buildCmd($event)"
@@ -411,9 +412,14 @@ export default {
   methods: {
     convertToValue(param) {
       if (param.val !== undefined && param.states && !this.cmdRaw) {
-        return Object.keys(param.states).find(
+        const stateName = Object.keys(param.states).find(
           (state) => param.states[state].value === param.val,
         )
+        if (stateName !== undefined) {
+          return stateName
+        }
+        // No matching state found (manually entered value), fall through
+        // to parse the raw value below
       }
       if (typeof param.val !== 'string') {
         return param.val

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

@@ -67,6 +67,7 @@
               :states="item.states"
               :states-in-hex="statesInHex"
               :disabled="item.disabled"
+              :allow-manual-entry="ignoreRangeChecks"
               @hazardous-change="onParameterHazardousChange(item, $event)"
             />
           </slot>
@@ -149,6 +150,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    ignoreRangeChecks: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['command-changed', 'build-cmd', 'command-loaded'],
   data() {

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

@@ -40,9 +40,29 @@
         placeholder="Select..."
         min-width="120px"
         data-test="cmd-param-select"
+        @update:model-value="handleStateSelect"
+      />
+      <v-text-field
+        v-if="manuallyEntered"
+        :model-value="textFieldValue"
+        hide-details
+        density="compact"
+        variant="outlined"
+        min-width="60px"
+        data-test="cmd-param-value"
         @update:model-value="handleChange"
       />
+      <v-tooltip v-if="manuallyEntered" location="top">
+        <template #activator="{ props }">
+          <v-icon v-bind="props" class="ml-1">mdi-information-outline</v-icon>
+        </template>
+        <span
+          >Enter a raw value (e.g. numeric) for this parameter.<br />State names
+          are not accepted here.</span
+        >
+      </v-tooltip>
       <v-text-field
+        v-else
         :model-value="stateValue"
         disabled
         hide-details
@@ -77,8 +97,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    allowManualEntry: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'hazardous-change'],
+  data() {
+    return {
+      manuallyEntered: false,
+    }
+  },
   computed: {
     textFieldValue() {
       return this.convertToString(this.modelValue)
@@ -91,19 +120,26 @@ export default {
       }
     },
     selectValue() {
+      if (this.manuallyEntered) {
+        return '__manual__'
+      }
       // this makes the placeholder prop work
       return this.modelValue === '' ? null : this.modelValue
     },
     stateOptions() {
       if (!this.states) {
         return null
       }
-      return Object.keys(this.states).map((label) => {
+      const options = Object.keys(this.states).map((label) => {
         return {
           label,
           ...this.states[label],
         }
       })
+      if (this.allowManualEntry) {
+        options.push({ label: 'MANUALLY_ENTERED', value: '__manual__' })
+      }
+      return options
     },
     hazardous() {
       if (!this.states) {
@@ -126,11 +162,25 @@ export default {
         this.$emit('hazardous-change', newVal)
       },
     },
+    allowManualEntry(newVal) {
+      if (!newVal) {
+        this.manuallyEntered = false
+      }
+    },
   },
   methods: {
     handleChange(value) {
       this.$emit('update:modelValue', value)
     },
+    handleStateSelect(value) {
+      if (value === '__manual__') {
+        this.manuallyEntered = true
+        this.$emit('update:modelValue', '')
+      } else {
+        this.manuallyEntered = false
+        this.$emit('update:modelValue', value)
+      }
+    },
   },
 }
 </script>

playwright/tests/command-sender.p.spec.ts

@@ -169,7 +169,7 @@ test('warns for required parameters', async ({ page, utils }) => {
   await expect(page.locator('.v-dialog')).toContainText('Error sending')
   await expect(page.locator('.v-dialog')).toContainText('INST COLLECT TYPE')
   await expect(page.locator('.v-dialog')).toContainText(
-    "Required command parameter 'INST COLLECT TYPE' not given",
+    "not one of NORMAL, SPECIAL",
   )
   await page.locator('button:has-text("Ok")').click()
 })
@@ -750,3 +750,48 @@ for (const target of ['INST', 'INST2']) {
       .toMatch(/\[\s*4,\s*5\s*\]/)
   })
 }
+
+test('sends manually entered state values', async ({ page, utils }) => {
+  await page.locator('[data-test="clear-history"]').click()
+  await utils.selectTargetPacketItem('INST', 'COLLECT')
+  await expect(page.locator('main')).toContainText(
+    'Starts a collect on the INST target',
+  )
+
+  // Enable Ignore Range Checks to unlock manual entry
+  await page.locator('[data-test=command-sender-mode]').click()
+  await page.getByText('Ignore Range Checks').click()
+  await page.locator('[data-test=command-sender-mode]').click()
+
+  // Select MANUALLY_ENTERED from the TYPE state dropdown
+  let row = page.locator('tr:has(td:text-is("TYPE"))')
+  await row.locator('[data-test=cmd-param-select]').click({ force: true })
+  await page.getByRole('option', { name: 'MANUALLY_ENTERED' }).click()
+
+  // Enter a raw numeric value in the manual entry text field
+  await row.locator('[data-test=cmd-param-value] input').first().fill('0')
+  await row.locator('[data-test=cmd-param-value] input').first().press('Enter')
+
+  // Send the command
+  await page.locator('[data-test="select-send"]').click()
+  await expect(page.locator('main')).toContainText(
+    'cmd_no_range_check("INST COLLECT with TYPE 0, DURATION 1, OPCODE 171, TEMP 0") sent',
+  )
+  await checkHistory(
+    page,
+    'cmd_no_range_check("INST COLLECT with TYPE 0, DURATION 1, OPCODE 171, TEMP 0")',
+  )
+
+  // Disable Ignore Range Checks and verify MANUALLY_ENTERED option is gone
+  await page.locator('[data-test=command-sender-mode]').click()
+  await page.getByText('Ignore Range Checks').click()
+  await page.locator('[data-test=command-sender-mode]').click()
+
+  // The TYPE dropdown should no longer have MANUALLY_ENTERED
+  await row.locator('[data-test=cmd-param-select]').click({ force: true })
+  await expect(
+    page.getByRole('option', { name: 'MANUALLY_ENTERED' }),
+  ).not.toBeVisible()
+  // Close the dropdown by pressing Escape
+  await page.keyboard.press('Escape')
+})