Make command bar arguments skippable, configure Extrude selection to be skippable (#1353)

* Make commands able to be configured as 'skippable'

* Make command machine able to skip arguments

* Add support for skippable selections, which are not known until within input component

* Update extrude command config to skippable

* Use defaultValue to seed initial arg values, not payload

* Remove unused `payload` command config prop

* Make skip and defaultValue types more exact

* Remove console logs

* fmt

* Revert type tightening, not worth the headache

src/components/CommandBar/CommandBarHeader.tsx

@@ -1,6 +1,6 @@
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from '../CustomIcon'
-import React, { useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { ActionButton } from '../ActionButton'
 import { Selections, getSelectionTypeDisplayText } from 'lib/selections'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -99,15 +99,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                     ) : typeof argumentsToSubmit[argName] === 'object' ? (
                       JSON.stringify(argumentsToSubmit[argName])
                     ) : (
-                      argumentsToSubmit[argName]
-                    )
-                  ) : arg.payload ? (
-                    arg.inputType === 'selection' ? (
-                      getSelectionTypeDisplayText(arg.payload as Selections)
-                    ) : typeof arg.payload === 'object' ? (
-                      JSON.stringify(arg.payload)
-                    ) : (
-                      arg.payload
+                      <em>{argumentsToSubmit[argName] as ReactNode}</em>
                     )
                   ) : (
                     <em>{argName}</em>

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -27,7 +27,7 @@ function CommandBarSelectionInput({
 }) {
   const { code } = useKclContext()
   const inputRef = useRef<HTMLInputElement>(null)
-  const { commandBarSend } = useCommandsContext()
+  const { commandBarState, commandBarSend } = useCommandsContext()
   const [hasSubmitted, setHasSubmitted] = useState(false)
   const selection = useSelector(arg.actor, selectionSelector)
   const [selectionsByType, setSelectionsByType] = useState<
@@ -59,8 +59,16 @@ function CommandBarSelectionInput({
     )
   }, [selection])
 
+  // Fast-forward through this arg if it's marked as skippable
+  // and we have a valid selection already
   useEffect(() => {
     setCanSubmitSelection(canSubmitSelectionArg(selectionsByType, arg))
+    const argValue = commandBarState.context.argumentsToSubmit[arg.name]
+    if (canSubmitSelection && arg.skip && argValue === undefined) {
+      handleSubmit({
+        preventDefault: () => {},
+      } as React.FormEvent<HTMLFormElement>)
+    }
   }, [selectionsByType, arg])
 
   function handleChange() {