Add export to cmd bar (#1593)

* Add new exportFile icon

* Isolate exportFromEngine command

* Naive initial export command

* Update types to accept functions for arg defaultValue, required, and options

* Make existing helper functions and configs work with new types

* Make UI components work with new types
support resolving function values and conditional logic

* Add full export command to command bar

* Replace ExportButton with thin wrapper on cmd bar command

* fmt

* Fix stale tests and bugs found by good tests

* fmt

* Update src/components/CommandBar/CommandArgOptionInput.tsx

* Update snapshot tests and onboarding wording

* Move the panel open click into doExport

* Don't need to input storage step in export tests anymore

* Remove console logs, fmt, select options if we need to

* Increase test timeout

---------

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

src/components/CommandBar/CommandBar.tsx

@@ -29,12 +29,6 @@ export const CommandBarProvider = ({
   const [commandBarState, commandBarSend] = useMachine(commandBarMachine, {
     devTools: true,
     guards: {
-      'Arguments are ready': (context, _) => {
-        return context.selectedCommand?.args
-          ? context.argumentsToSubmit.length ===
-              Object.keys(context.selectedCommand.args)?.length
-          : false
-      },
       'Command has no arguments': (context, _event) => {
         return (
           !context.selectedCommand?.args ||
@@ -81,7 +75,12 @@ export const CommandBar = () => {
   function stepBack() {
     if (!currentArgument) {
       if (commandBarState.matches('Review')) {
-        const entries = Object.entries(selectedCommand?.args || {})
+        const entries = Object.entries(selectedCommand?.args || {}).filter(
+          ([_, argConfig]) =>
+            typeof argConfig.required === 'function'
+              ? argConfig.required(commandBarState.context)
+              : argConfig.required
+        )
 
         const currentArgName = entries[entries.length - 1][0]
         const currentArg = {
@@ -89,19 +88,12 @@ export const CommandBar = () => {
           ...entries[entries.length - 1][1],
         }
 
-        if (commandBarState.matches('Review')) {
-          commandBarSend({
-            type: 'Edit argument',
-            data: {
-              arg: currentArg,
-            },
-          })
-        } else {
-          commandBarSend({
-            type: 'Remove argument',
-            data: { [currentArgName]: currentArg },
-          })
-        }
+        commandBarSend({
+          type: 'Edit argument',
+          data: {
+            arg: currentArg,
+          },
+        })
       } else {
         commandBarSend({ type: 'Deselect command' })
       }
@@ -124,11 +116,6 @@ export const CommandBar = () => {
     }
   }
 
-  useEffect(
-    () => console.log(commandBarState.context.argumentsToSubmit),
-    [commandBarState.context.argumentsToSubmit]
-  )
-
   return (
     <Transition.Root
       show={!commandBarState.matches('Closed') || false}