feat(upgrade): Improve CLI output (#4393)

Co-authored-by: Lennart <[email protected]>
clerk · Oct 23, 2024 · a917a2d · a917a2d
1 parent 1c7e105
commit a917a2d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/.changeset/wild-guests-occur.md b/.changeset/wild-guests-occur.md
@@ -0,0 +1,5 @@
+---
+"@clerk/upgrade": patch
+---
+
+Updating the CLI output to match the DX of core-1 to core-2 migration
diff --git a/packages/upgrade/src/components/Codemod.js b/packages/upgrade/src/components/Codemod.js
@@ -35,7 +35,7 @@ export function Codemod(props) {
       .finally(() => {
         callback(true);
       });
-  }, [glob]);
+  }, [callback, glob, transform]);
 
   return (
     <>

diff --git a/packages/upgrade/src/components/SDKWorkflow.js b/packages/upgrade/src/components/SDKWorkflow.js
@@ -25,9 +25,11 @@ export function SDKWorkflow(props) {
   const { packageManager, sdk } = props;
 
   const [done, setDone] = useState(false);
+  const [runCodemod, setRunCodemod] = useState(false);
   const [upgradeComplete, setUpgradeComplete] = useState(false);
 
-  const version = getClerkSdkVersion(sdk);
+  // eslint-disable-next-line no-unused-vars
+  const [version, setVersion] = useState(getClerkSdkVersion(sdk));
 
   if (sdk !== 'nextjs') {
     return (
@@ -41,6 +43,18 @@ export function SDKWorkflow(props) {
   return (
     <>
       <Header />
+      <Text>
+        Clerk SDK used: <Text color='green'>@clerk/{sdk}</Text>
+      </Text>
+      <Text>
+        Migrating from version: <Text color='green'>{version}</Text>
+      </Text>
+      {runCodemod ? (
+        <Text>
+          Executing codemod: <Text color='green'>yes</Text>
+        </Text>
+      ) : null}
+      <Newline />
       {version === 5 && (
         <>
           <UpgradeSDK
@@ -57,32 +71,34 @@ export function SDKWorkflow(props) {
           ) : null}
         </>
       )}
-      {!done && version === 6 && (
+      {version === 6 && (
         <>
-          <Text>
-            Looks like you are already on the latest version of <Text bold>@clerk/{sdk}</Text>. Would you like to run
-            the associated codemod?.
-          </Text>
-          {upgradeComplete ? (
+          {runCodemod ? (
             <Codemod
               sdk={sdk}
               callback={setDone}
               transform='transform-async-request'
             />
           ) : (
-            <Select
-              options={[
-                { label: 'yes', value: 'yes' },
-                { label: 'no', value: 'no' },
-              ]}
-              onChange={value => {
-                if (value === 'yes') {
-                  setUpgradeComplete(true);
-                } else {
-                  setDone(true);
-                }
-              }}
-            />
+            <>
+              <Text>
+                Looks like you are already on the latest version of <Text bold>@clerk/{sdk}</Text>. Would you like to
+                run the associated codemod?
+              </Text>
+              <Select
+                options={[
+                  { label: 'yes', value: 'yes' },
+                  { label: 'no', value: 'no' },
+                ]}
+                onChange={value => {
+                  if (value === 'yes') {
+                    setRunCodemod(true);
+                  } else {
+                    setDone(true);
+                  }
+                }}
+              />
+            </>
           )}
         </>
       )}