Add sketch tools back to the command bar (#3008)

* Make machine command type names more explicit

* Prepare "change tool" event for command bar

* Make it so that state machine events can each map to multiple command configs

* Make commands with all skippable args possible

* Add back the tools to the command bar

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Update to use new `groupId` property name

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Oops didn't save this other instance of `ownerMachine`

* Add a playwright test

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -1,8 +1,8 @@
 import { Models } from '@kittycad/lib'
-import { CommandSetConfig, KclCommandValue } from 'lib/commandTypes'
+import { StateMachineCommandSetConfig, KclCommandValue } from 'lib/commandTypes'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 import { Selections } from 'lib/selections'
-import { modelingMachine } from 'machines/modelingMachine'
+import { modelingMachine, SketchTool } from 'machines/modelingMachine'
 
 type OutputFormat = Models['OutputFormat_type']
 type OutputTypeKey = OutputFormat['type']
@@ -27,9 +27,12 @@ export type ModelingCommandSchema = {
     // result: (typeof EXTRUSION_RESULTS)[number]
     distance: KclCommandValue
   }
+  'change tool': {
+    tool: SketchTool
+  }
 }
 
-export const modelingMachineConfig: CommandSetConfig<
+export const modelingMachineCommandConfig: StateMachineCommandSetConfig<
   typeof modelingMachine,
   ModelingCommandSchema
 > = {
@@ -37,22 +40,47 @@ export const modelingMachineConfig: CommandSetConfig<
     description: 'Enter sketch mode.',
     icon: 'sketch',
   },
-  // TODO the event is no 'change tool' with data: 'line', 'rectangle' etc
-  // 'Equip Line tool': {
-  //   description: 'Start drawing straight lines.',
-  //   icon: 'line',
-  //   displayName: 'Line',
-  // },
-  // 'Equip tangential arc to': {
-  //   description: 'Start drawing an arc tangent to the current segment.',
-  //   icon: 'arc',
-  //   displayName: 'Tangential Arc',
-  // },
-  // 'Equip rectangle tool': {
-  //   description: 'Start drawing a rectangle.',
-  //   icon: 'rectangle',
-  //   displayName: 'Rectangle',
-  // },
+  'change tool': [
+    {
+      description: 'Start drawing straight lines.',
+      icon: 'line',
+      displayName: 'Line',
+      args: {
+        tool: {
+          defaultValue: 'line',
+          required: true,
+          skip: true,
+          inputType: 'string',
+        },
+      },
+    },
+    {
+      description: 'Start drawing an arc tangent to the current segment.',
+      icon: 'arc',
+      displayName: 'Tangential Arc',
+      args: {
+        tool: {
+          defaultValue: 'tangentialArc',
+          required: true,
+          skip: true,
+          inputType: 'string',
+        },
+      },
+    },
+    {
+      description: 'Start drawing a rectangle.',
+      icon: 'rectangle',
+      displayName: 'Rectangle',
+      args: {
+        tool: {
+          defaultValue: 'rectangle',
+          required: true,
+          skip: true,
+          inputType: 'string',
+        },
+      },
+    },
+  ],
   Export: {
     description: 'Export the current model.',
     icon: 'exportFile',