From 87c7639a52dcec6e8868d5a0e96b970f3b259db3 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 8 May 2022 13:23:40 +0800
Subject: [PATCH] fix(cli): output correct path when swizzling bare-file
 component in subfolder (#7369)

* fix(cli): output correct path when swizzling bare-file component in subfolder

* fix snapshot
---
 .../__tests__/__snapshots__/index.test.ts.snap | 18 ++++++++++--------
 .../commands/swizzle/__tests__/actions.test.ts | 14 ++++++++++++++
 .../docusaurus/src/commands/swizzle/actions.ts | 15 +++++++--------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
index e48def8da891..84e98d772af6 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
@@ -162,14 +162,14 @@ exports[`swizzle eject ComponentInFolder/ComponentInSubFolder TS: theme dir tree
         └── styles.module.css"
 `;
 
-exports[`swizzle eject ComponentInFolder/Sibling JS: Sibling.css 1`] = `
+exports[`swizzle eject ComponentInFolder/Sibling JS: ComponentInFolder/Sibling.css 1`] = `
 ".testClass {
   background: black;
 }
 "
 `;
 
-exports[`swizzle eject ComponentInFolder/Sibling JS: Sibling.tsx 1`] = `
+exports[`swizzle eject ComponentInFolder/Sibling JS: ComponentInFolder/Sibling.tsx 1`] = `
 "import React from 'react';
 
 export default function Sibling() {
@@ -180,18 +180,19 @@ export default function Sibling() {
 
 exports[`swizzle eject ComponentInFolder/Sibling JS: theme dir tree 1`] = `
 "theme
-├── Sibling.css
-└── Sibling.tsx"
+└── ComponentInFolder
+    ├── Sibling.css
+    └── Sibling.tsx"
 `;
 
-exports[`swizzle eject ComponentInFolder/Sibling TS: Sibling.css 1`] = `
+exports[`swizzle eject ComponentInFolder/Sibling TS: ComponentInFolder/Sibling.css 1`] = `
 ".testClass {
   background: black;
 }
 "
 `;
 
-exports[`swizzle eject ComponentInFolder/Sibling TS: Sibling.tsx 1`] = `
+exports[`swizzle eject ComponentInFolder/Sibling TS: ComponentInFolder/Sibling.tsx 1`] = `
 "import React from 'react';
 
 export default function Sibling() {
@@ -202,8 +203,9 @@ export default function Sibling() {
 
 exports[`swizzle eject ComponentInFolder/Sibling TS: theme dir tree 1`] = `
 "theme
-├── Sibling.css
-└── Sibling.tsx"
+└── ComponentInFolder
+    ├── Sibling.css
+    └── Sibling.tsx"
 `;
 
 exports[`swizzle eject FirstLevelComponent JS: FirstLevelComponent.css 1`] = `
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
index 159318f62395..d73521076160 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
@@ -72,6 +72,20 @@ describe('eject', () => {
     `);
   });
 
+  it(`eject ${Components.Sibling}`, async () => {
+    const result = await testEject('eject', Components.Sibling);
+    expect(result.createdFiles).toEqual([
+      'ComponentInFolder/Sibling.css',
+      'ComponentInFolder/Sibling.tsx',
+    ]);
+    expect(result.tree).toMatchInlineSnapshot(`
+      "theme
+      └── ComponentInFolder
+          ├── Sibling.css
+          └── Sibling.tsx"
+    `);
+  });
+
   it(`eject ${Components.ComponentInFolder}`, async () => {
     const result = await testEject('eject', Components.ComponentInFolder);
     expect(result.createdFiles).toEqual([
diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts
index 1379e8238b54..d6be9f902731 100644
--- a/packages/docusaurus/src/commands/swizzle/actions.ts
+++ b/packages/docusaurus/src/commands/swizzle/actions.ts
@@ -70,16 +70,16 @@ export async function eject({
     );
   }
 
-  const toPath = isDirectory
-    ? path.join(siteDir, THEME_PATH, componentName)
-    : path.join(siteDir, THEME_PATH);
+  const toPath = path.join(siteDir, THEME_PATH);
 
   await fs.ensureDir(toPath);
 
   const createdFiles = await Promise.all(
     filesToCopy.map(async (sourceFile: string) => {
-      const fileName = path.basename(sourceFile);
-      const targetFile = path.join(toPath, fileName);
+      const targetFile = path.join(
+        toPath,
+        path.relative(themePath, sourceFile),
+      );
       try {
         const fileContents = await fs.readFile(sourceFile, 'utf-8');
         await fs.outputFile(
@@ -87,9 +87,8 @@ export async function eject({
           fileContents.trimStart().replace(/^\/\*.+?\*\/\s*/ms, ''),
         );
       } catch (err) {
-        throw new Error(
-          logger.interpolate`Could not copy file from path=${sourceFile} to path=${targetFile}`,
-        );
+        logger.error`Could not copy file from path=${sourceFile} to path=${targetFile}`;
+        throw err;
       }
       return targetFile;
     }),