Refactor open preview logic (#870)

Fixes #278

This PR refactors logic related to opening previews. We were using
`showIDEPanel` for `RNIDE.showPanel`/`RNIDE.openPanel` commands, the
launch preview depended on the existence of the `fileName` and
`lineNumber`. The problem is that VSCode passes its arguments there, but
instead number in lineNumber we get an object with the panel's id, which
triggers this logic always. Thus, I refactored the opening preview to
use a separate command.

Additionally, startPreview was running even if the project wasn't set up
yet, which led to an error that we used `.project` on `null`. Now, we
open the panel and show a warning in that case.

### How Has This Been Tested: 

Repeat those scenarios for preview both in `tab panel` and `side panel`:

**Steps:**
- Close the IDE panel
- Reopen (or restart if in debug mode) VSCode 
- Open IDE panel from top right corner 

**Expected:**
The panel opens without error dialog. 

**Steps:**
- Close the IDE panel
- Reopen (or restart if in debug mode) VSCode 
- Click "Open preview" 

**Expected:**
Confirm that panel opens and there is warning message 

**Steps:**
- Make sure IDE Panel is open
- Click "Open preview" 

**Expected:**
Confirm that preview started

_Tested on react-native-76_

packages/vscode-extension/src/extension.ts

@@ -78,17 +78,17 @@ export async function activate(context: ExtensionContext) {
 
   commands.executeCommand("setContext", "RNIDE.sidePanelIsClosed", false);
 
-  async function showIDEPanel(fileName?: string, lineNumber?: number) {
+  async function showIDEPanel() {
     await commands.executeCommand("setContext", "RNIDE.sidePanelIsClosed", false);
 
     const panelLocation = workspace
       .getConfiguration("RadonIDE")
       .get<PanelLocation>("panelLocation");
 
     if (panelLocation !== "tab") {
-      SidePanelViewProvider.showView(context, fileName, lineNumber);
+      SidePanelViewProvider.showView();
     } else {
-      TabPanel.render(context, fileName, lineNumber);
+      TabPanel.render(context);
     }
   }
 
@@ -119,6 +119,15 @@ export async function activate(context: ExtensionContext) {
     Project.currentProject?.showStorybookStory(componentTitle, storyName);
   }
 
+  async function showInlinePreview(fileName: string, lineNumber: number) {
+    commands.executeCommand("RNIDE.openPanel");
+    if (Project.currentProject) {
+      Project.currentProject.startPreview(`preview:/${fileName}:${lineNumber}`);
+    } else {
+      window.showWarningMessage("Wait for app to load before lunching preview. ", "Dismiss");
+    }
+  }
+
   context.subscriptions.push(
     window.registerWebviewViewProvider(
       SidePanelViewProvider.viewType,
@@ -148,6 +157,9 @@ export async function activate(context: ExtensionContext) {
   context.subscriptions.push(
     commands.registerCommand("RNIDE.showStorybookStory", showStorybookStory)
   );
+  context.subscriptions.push(
+    commands.registerCommand("RNIDE.showInlinePreview", showInlinePreview)
+  );
 
   async function closeAuxiliaryBar(registeredCommandDisposable: Disposable) {
     registeredCommandDisposable.dispose(); // must dispose to avoid endless loops

packages/vscode-extension/src/panels/SidepanelViewProvider.ts

@@ -37,7 +37,7 @@ export class SidePanelViewProvider implements WebviewViewProvider, Disposable {
     );
   }
 
-  public static showView(context: ExtensionContext, fileName?: string, lineNumber?: number) {
+  public static showView() {
     if (SidePanelViewProvider.currentProvider) {
       commands.executeCommand(`${SidePanelViewProvider.viewType}.focus`);
       if (workspace.getConfiguration("RadonIDE").get("panelLocation") === "secondary-side-panel") {
@@ -47,12 +47,6 @@ export class SidePanelViewProvider implements WebviewViewProvider, Disposable {
       Logger.error("SidepanelViewProvider does not exist.");
       return;
     }
-
-    if (fileName !== undefined && lineNumber !== undefined) {
-      SidePanelViewProvider.currentProvider.webviewController.project.startPreview(
-        `preview:/${fileName}:${lineNumber}`
-      );
-    }
   }
 
   //called when a view first becomes visible

packages/vscode-extension/src/panels/Tabpanel.ts

@@ -57,7 +57,7 @@ export class TabPanel implements Disposable {
     });
   }
 
-  public static render(context: ExtensionContext, fileName?: string, lineNumber?: number) {
+  public static render(context: ExtensionContext) {
     if (TabPanel.currentPanel) {
       // If the webview panel already exists reveal it
       TabPanel.currentPanel._panel.reveal();
@@ -85,12 +85,6 @@ export class TabPanel implements Disposable {
 
       commands.executeCommand("workbench.action.lockEditorGroup");
     }
-
-    if (fileName !== undefined && lineNumber !== undefined) {
-      TabPanel.currentPanel.webviewController.project.startPreview(
-        `preview:/${fileName}:${lineNumber}`
-      );
-    }
   }
 
   public dispose() {

packages/vscode-extension/src/providers/PreviewCodeLensProvider.ts

@@ -91,7 +91,7 @@ export class PreviewCodeLensProvider implements CodeLensProvider {
       const previewCallRange = this.createRange(document, match.index);
       const command: Command = {
         title: "Open preview",
-        command: "RNIDE.showPanel",
+        command: "RNIDE.showInlinePreview",
         arguments: [
           document.fileName,
           jsxOpeningTagLine0Based + 1 /* RNIDE expects 1-based line number */,