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/lib/commandBarConfigs/homeCommandConfig.ts

@@ -28,7 +28,8 @@ export const homeCommandBarConfig: CommandSetConfig<
       name: {
         inputType: 'options',
         required: true,
-        options: (context) =>
+        options: [],
+        optionsFromContext: (context) =>
           context.projects.map((p) => ({
             name: p.name!,
             value: p.name!,
@@ -43,7 +44,7 @@ export const homeCommandBarConfig: CommandSetConfig<
       name: {
         inputType: 'string',
         required: true,
-        defaultValue: (context) => context.defaultProjectName,
+        defaultValueFromContext: (context) => context.defaultProjectName,
       },
     },
   },
@@ -55,7 +56,8 @@ export const homeCommandBarConfig: CommandSetConfig<
       name: {
         inputType: 'options',
         required: true,
-        options: (context) =>
+        options: [],
+        optionsFromContext: (context) =>
           context.projects.map((p) => ({
             name: p.name!,
             value: p.name!,
@@ -71,7 +73,8 @@ export const homeCommandBarConfig: CommandSetConfig<
       oldName: {
         inputType: 'options',
         required: true,
-        options: (context) =>
+        options: [],
+        optionsFromContext: (context) =>
           context.projects.map((p) => ({
             name: p.name!,
             value: p.name!,
@@ -80,7 +83,7 @@ export const homeCommandBarConfig: CommandSetConfig<
       newName: {
         inputType: 'string',
         required: true,
-        defaultValue: (context) => context.defaultProjectName,
+        defaultValueFromContext: (context) => context.defaultProjectName,
       },
     },
   },

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -1,7 +1,13 @@
+import { Models } from '@kittycad/lib'
 import { CommandSetConfig, KclCommandValue } from 'lib/commandTypes'
 import { Selections } from 'lib/selections'
 import { modelingMachine } from 'machines/modelingMachine'
 
+type OutputFormat = Models['OutputFormat_type']
+type OutputTypeKey = OutputFormat['type']
+type ExtractStorageTypes<T> = T extends { storage: infer U } ? U : never
+type StorageUnion = ExtractStorageTypes<OutputFormat>
+
 export const EXTRUSION_RESULTS = [
   'new',
   'add',
@@ -11,6 +17,10 @@ export const EXTRUSION_RESULTS = [
 
 export type ModelingCommandSchema = {
   'Enter sketch': {}
+  Export: {
+    type: OutputTypeKey
+    storage?: StorageUnion
+  }
   Extrude: {
     selection: Selections // & { type: 'face' } would be cool to lock that down
     // result: (typeof EXTRUSION_RESULTS)[number]
@@ -26,6 +36,80 @@ export const modelingMachineConfig: CommandSetConfig<
     description: 'Enter sketch mode.',
     icon: 'sketch',
   },
+  Export: {
+    description: 'Export the current model.',
+    icon: 'exportFile',
+    needsReview: true,
+    args: {
+      type: {
+        inputType: 'options',
+        defaultValue: 'gltf',
+        required: true,
+        options: [
+          { name: 'gLTF', isCurrent: true, value: 'gltf' },
+          { name: 'OBJ', isCurrent: false, value: 'obj' },
+          { name: 'STL', isCurrent: false, value: 'stl' },
+          { name: 'STEP', isCurrent: false, value: 'step' },
+          { name: 'PLY', isCurrent: false, value: 'ply' },
+        ],
+      },
+      storage: {
+        inputType: 'options',
+        defaultValue: (c) => {
+          switch (c.argumentsToSubmit.type) {
+            case 'gltf':
+              return 'embedded'
+            case 'stl':
+              return 'ascii'
+            case 'ply':
+              return 'ascii'
+            default:
+              return undefined
+          }
+        },
+        skip: true,
+        required: (commandContext) =>
+          ['gltf', 'stl', 'ply'].includes(
+            commandContext.argumentsToSubmit.type as string
+          ),
+        options: (commandContext) => {
+          const type = commandContext.argumentsToSubmit.type as
+            | OutputTypeKey
+            | undefined
+
+          switch (type) {
+            case 'gltf':
+              return [
+                { name: 'embedded', isCurrent: true, value: 'embedded' },
+                { name: 'binary', isCurrent: false, value: 'binary' },
+                { name: 'standard', isCurrent: false, value: 'standard' },
+              ]
+            case 'stl':
+              return [
+                { name: 'binary', isCurrent: false, value: 'binary' },
+                { name: 'ascii', isCurrent: true, value: 'ascii' },
+              ]
+            case 'ply':
+              return [
+                { name: 'ascii', isCurrent: true, value: 'ascii' },
+                {
+                  name: 'binary_big_endian',
+                  isCurrent: false,
+                  value: 'binary_big_endian',
+                },
+                {
+                  name: 'binary_little_endian',
+                  isCurrent: false,
+                  value: 'binary_little_endian',
+                },
+              ]
+            default:
+              return []
+          }
+        },
+      },
+    },
+  },
   Extrude: {
     description: 'Pull a sketch into 3D along its normal or perpendicular.',
     icon: 'extrude',

src/lib/commandBarConfigs/settingsCommandConfig.ts

@@ -41,8 +41,9 @@ export const settingsCommandBarConfig: CommandSetConfig<
       baseUnit: {
         inputType: 'options',
         required: true,
-        defaultValue: (context) => context.baseUnit,
-        options: (context) =>
+        defaultValueFromContext: (context) => context.baseUnit,
+        options: [],
+        optionsFromContext: (context) =>
           Object.values(baseUnitsUnion).map((v) => ({
             name: v,
             value: v,
@@ -57,8 +58,9 @@ export const settingsCommandBarConfig: CommandSetConfig<
       cameraControls: {
         inputType: 'options',
         required: true,
-        defaultValue: (context) => context.cameraControls,
-        options: (context) =>
+        defaultValueFromContext: (context) => context.cameraControls,
+        options: [],
+        optionsFromContext: (context) =>
           Object.values(cameraSystems).map((v) => ({
             name: v,
             value: v,
@@ -74,7 +76,7 @@ export const settingsCommandBarConfig: CommandSetConfig<
       defaultProjectName: {
         inputType: 'string',
         required: true,
-        defaultValue: (context) => context.defaultProjectName,
+        defaultValueFromContext: (context) => context.defaultProjectName,
       },
     },
   },
@@ -84,8 +86,9 @@ export const settingsCommandBarConfig: CommandSetConfig<
       textWrapping: {
         inputType: 'options',
         required: true,
-        defaultValue: (context) => context.textWrapping,
-        options: (context) => [
+        defaultValueFromContext: (context) => context.textWrapping,
+        options: [],
+        optionsFromContext: (context) => [
           {
             name: 'On',
             value: 'On' as Toggle,
@@ -106,8 +109,9 @@ export const settingsCommandBarConfig: CommandSetConfig<
       theme: {
         inputType: 'options',
         required: true,
-        defaultValue: (context) => context.theme,
-        options: (context) =>
+        defaultValueFromContext: (context) => context.theme,
+        options: [],
+        optionsFromContext: (context) =>
           Object.values(Themes).map((v) => ({
             name: v,
             value: v,
@@ -122,8 +126,9 @@ export const settingsCommandBarConfig: CommandSetConfig<
       unitSystem: {
         inputType: 'options',
         required: true,
-        defaultValue: (context) => context.unitSystem,
-        options: (context) => [
+        defaultValueFromContext: (context) => context.unitSystem,
+        options: [],
+        optionsFromContext: (context) => [
           {
             name: 'Imperial',
             value: 'imperial' as UnitSystem,