[studio] Separate Before/After editors is a frustrating experience

[with-heart]

Issue Description

Select one of:
[ ] Generated codemod is not correct
[ ] Bug in Codemod Studio
[x] UI/UX improvement request
[x] Feature request

Preface

Most of my experience with Codemod has been through maintenance work on the xstate repo. One of the things I've been working on lately is converting the codebase from jest to vitest.

Since xstate is a mature library with a thorough test suite, there are lots of tests that need to be converted. The biggest conversion hurdle has been moving from the old done callback test format to one of a few alternative callback styles based on how the done callback was used.

The code isn't entirely relevant but here's a few examples anyway, just for context:

@@ -1,15 +1,19 @@
-import { createActor, createMachine } from '../src';
+import { createActor, createMachine, waitFor } from '../src';
 
 // 1
-test('done->Promise.withResolvers', (done) => {
+test('done->Promise.withResolvers', async () => {
+  const { promise, resolve } = Promise.withResolvers<void>();
+
   const machine = createMachine({
-    entry: () => done()
+    entry: () => resolve()
   });
   createActor(machine).start();
+
+  await promise;
 });
 
 // 2
-test('done->waitFor', (done) => {
+test('done->waitFor', async () => {
   const machine = createMachine({
     initial: 'idle',
     states: {
@@ -31,8 +35,8 @@
   const actor = createActor(machine).start();
   actor.send({ type: 'START' });
 
-  setTimeout(() => {
-    expect(actor.getSnapshot().value).toBe('complete');
-    done();
-  }, 100);
+  // wait for the actor to be 'done' (in a `final` state)
+  await waitFor(actor, (snapshot) => snapshot.status === 'done');
+
+  expect(actor.getSnapshot().value).toBe('complete');
 });

Actual Results

To generate a snapshot for these conversions, here's the workflow I've found myself using:

1. find a good test to demonstrate a type of conversion
2. copy that test
3. tab to browser
4. paste it into the Before panel
5. add a // # comment above it
6. tab to vscode
7. edit the test to the desired outcome
8. copy the edited test
9. tab to browser
10. paste it into the After panel
11. add a // # comment above it
12. tab to vscode
13. repeat if i want more before/after pairs
14. generate codemod

It works but the experience of copying/pasting and tabbing back and forth between applications is frustrating at best.

Expected Results

I'd like to change my workflow like this:

@@ -1,14 +1,10 @@
 1. find a good test to demonstrate a type of conversion
 1. copy that test
 1. tab to browser
-1. paste it into the Before panel
-1. add a `// #` comment above it
+1. paste it into an editor
+1. do _something_ so the app knows I'm ready to make edits to the test (before)
+1. edit the test inline to the desired outcome (after)
+1. do _something_ (maybe?) to add the diff as a before/after example
 1. tab to vscode
-1. edit the test to the desired outcome
-1. copy the edited test
-1. tab to browser
-1. paste it into the After panel
-1. add a `// #` comment above it
-1. tab to vscode
 1. repeat if i want more before/after pairs
 1. generate codemod

Or if I'm really letting myself dream:

@@ -1,14 +1,4 @@
-1. find a good test to demonstrate a type of conversion
-1. copy that test
-1. tab to browser
-1. paste it into the Before panel
-1. add a `// #` comment above it
-1. tab to vscode
-1. edit the test to the desired outcome
-1. copy the edited test
-1. tab to browser
-1. paste it into the After panel
-1. add a `// #` comment above it
-1. tab to vscode
-1. repeat if i want more before/after pairs
+1. open https://github.com/statelyai/xstate repo in Codemod Studio
+1. switch to my conversion PR branch
+1. make inline edits to whatever tests i want to use as examples
 1. generate codemod

[with-heart]

rtfm

just learned about codemod learn 😭

[mohab-sameh]

Thanks a lot for reporting @with-heart. I'm glad codemod learn resolved this for you! Also, any feedback on why you didn't know about codemod learn earlier? Did you feel like it was not easy to find in the docs? If so, let me know if you have any feedback there.