From 7839c804a0540cae8ea280b1b982e57144cfa22e Mon Sep 17 00:00:00 2001
From: Emily Xiong <xiongemi@gmail.com>
Date: Thu, 24 Oct 2024 03:27:29 -0400
Subject: [PATCH] fix(storybook): fix yarn storybook upgrade 8 (#28605)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes https://github.com/nrwl/nx/issues/28301
---
 .../migrate-8/calling-storybook-cli.ts        | 26 +++++++++++++------
 .../generators/migrate-8/helper-functions.ts  | 14 ++++++----
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/storybook/src/generators/migrate-8/calling-storybook-cli.ts b/packages/storybook/src/generators/migrate-8/calling-storybook-cli.ts
index 9d1976a4b1294..9fc6285fe7c1e 100644
--- a/packages/storybook/src/generators/migrate-8/calling-storybook-cli.ts
+++ b/packages/storybook/src/generators/migrate-8/calling-storybook-cli.ts
@@ -1,9 +1,14 @@
-import { getPackageManagerCommand, output } from '@nx/devkit';
+import {
+  detectPackageManager,
+  getPackageManagerCommand,
+  output,
+} from '@nx/devkit';
 import { execSync } from 'child_process';
 import { Schema } from './schema';
 
 export function callUpgrade(schema: Schema): 1 | Buffer {
-  const pm = getPackageManagerCommand();
+  const packageManager = detectPackageManager();
+  const pm = getPackageManagerCommand(packageManager);
   try {
     output.log({
       title: `Calling sb upgrade`,
@@ -15,9 +20,9 @@ export function callUpgrade(schema: Schema): 1 | Buffer {
     });
 
     execSync(
-      `${pm.dlx} storybook@latest upgrade ${
-        schema.autoAcceptAllPrompts ? '--yes' : ''
-      }`,
+      `${pm.dlx} ${
+        packageManager === 'yarn' ? 'storybook' : 'storybook@latest'
+      } upgrade ${schema.autoAcceptAllPrompts ? '--yes' : ''}`,
       {
         stdio: [0, 1, 2],
         windowsHide: false,
@@ -38,7 +43,9 @@ export function callUpgrade(schema: Schema): 1 | Buffer {
       bodyLines: [
         `🚨 The Storybook CLI failed to upgrade your @storybook/* packages to the latest version.`,
         `Please try running the sb upgrade command manually:`,
-        `${pm.exec} storybook@latest upgrade`,
+        `${pm.exec} ${
+          packageManager === 'yarn' ? 'storybook' : 'storybook@latest'
+        } upgrade`,
       ],
       color: 'red',
     });
@@ -71,8 +78,11 @@ export function callAutomigrate(
 
   Object.entries(allStorybookProjects).forEach(
     ([projectName, storybookProjectInfo]) => {
-      const pm = getPackageManagerCommand();
-      const commandToRun = `${pm.dlx} storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir}`;
+      const packageManager = detectPackageManager();
+      const pm = getPackageManagerCommand(packageManager);
+      const commandToRun = `${pm.dlx} ${
+        packageManager === 'yarn' ? 'storybook' : 'storybook@latest'
+      } automigrate --config-dir ${storybookProjectInfo.configDir}`;
       try {
         output.log({
           title: `Calling sb automigrate for ${projectName}`,
diff --git a/packages/storybook/src/generators/migrate-8/helper-functions.ts b/packages/storybook/src/generators/migrate-8/helper-functions.ts
index 3ab44f8457fa6..9d062d401c18f 100644
--- a/packages/storybook/src/generators/migrate-8/helper-functions.ts
+++ b/packages/storybook/src/generators/migrate-8/helper-functions.ts
@@ -2,14 +2,13 @@ import {
   generateFiles,
   getPackageManagerCommand,
   output,
-  readProjectConfiguration,
   Tree,
   workspaceRoot,
   visitNotIgnoredFiles,
   joinPathFragments,
   readJson,
+  detectPackageManager,
 } from '@nx/devkit';
-import { forEachExecutorOptions } from '@nx/devkit/src/generators/executor-options-utils';
 import { fileExists } from 'nx/src/utils/fileutils';
 import { readFileSync } from 'fs';
 import { dirname, join } from 'path';
@@ -19,7 +18,8 @@ export function onlyShowGuide(storybookProjects: {
     configDir: string;
   };
 }) {
-  const pm = getPackageManagerCommand();
+  const packageManager = detectPackageManager();
+  const pm = getPackageManagerCommand(packageManager);
 
   output.log({
     title: 'Storybook 8 Migration Guide',
@@ -27,13 +27,17 @@ export function onlyShowGuide(storybookProjects: {
       `You can run the following commands manually to upgrade your Storybook projects to Storybook 8:`,
       ``,
       `1. Call the Storybook upgrade script:`,
-      `${pm.exec} storybook@latest upgrade`,
+      `${pm.exec} ${
+        packageManager === 'yarn' ? 'storybook' : 'storybook@latest'
+      } upgrade`,
       ``,
       `2. Call the Storybook automigrate scripts:`,
       `Run the following commands for each Storybook project:`,
       ...Object.entries(storybookProjects).map(
         ([_projectName, storybookProjectInfo]) => {
-          return `${pm.exec} storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir}`;
+          return `${pm.exec} ${
+            packageManager === 'yarn' ? 'storybook' : 'storybook@latest'
+          } automigrate --config-dir ${storybookProjectInfo.configDir}`;
         }
       ),
       ``,