[Feature] Handle packager port setting changes in status bar

src/common/packager.ts

@@ -114,6 +114,7 @@ export class Packager {
 
     public resetToSettingsPort(): void {
         this.packagerPort = SettingsHelper.getPackagerPort(this.workspacePath);
+        this.packagerStatusIndicator.setPendingPackagerPort(undefined);
     }
 
     public setRunOptions(runOptions: IRunOptions): void {

src/extension/packagerStatusIndicator.ts

@@ -35,6 +35,8 @@ export class PackagerStatusIndicator implements Disposable {
     private displayVersion!: string;
     private projectRoot?: string;
     private packagerPort?: number;
+    private pendingPackagerPort?: number;
+    private packagerStatus: PackagerStatus = PackagerStatus.PACKAGER_STOPPED;
     private isShowIndicator: boolean = true;
 
     private static PACKAGER_NAME: string = localize("ReactNativePackager", "React Native Packager");
@@ -117,32 +119,50 @@ export class PackagerStatusIndicator implements Disposable {
     ): void {
         this.updateDisplayVersion();
         this.togglePackagerItem.command = command;
-        this.togglePackagerItem.tooltip = tooltip;
+        this.togglePackagerItem.tooltip = this.getTooltip(tooltip);
         if (!this.isShowIndicator) {
             icon = PackagerStatusIndicator.NOT_SHOW_INDICATOR;
         }
         const portSuffix = this.packagerPort ? ` :${this.packagerPort}` : "";
+        const pendingPortSuffix = this.pendingPackagerPort ? " $(warning)" : "";
         switch (this.displayVersion) {
             case PackagerStatusIndicator.FULL_VERSION:
-                this.togglePackagerItem.text = `${icon} ${PackagerStatusIndicator.PACKAGER_NAME}${portSuffix}`;
+                this.togglePackagerItem.text = `${icon} ${PackagerStatusIndicator.PACKAGER_NAME}${portSuffix}${pendingPortSuffix}`;
                 this.togglePackagerItem.show();
                 this.restartPackagerItem.show();
                 break;
             case PackagerStatusIndicator.SHORT_VERSION:
-                this.togglePackagerItem.text = `${icon}${portSuffix}`;
+                this.togglePackagerItem.text = `${icon}${portSuffix}${pendingPortSuffix}`;
                 this.togglePackagerItem.show();
                 this.restartPackagerItem.show();
                 break;
         }
     }
 
+    private getTooltip(tooltip: string): string {
+        if (this.pendingPackagerPort && this.packagerPort) {
+            return `${tooltip}\n\nRunning on port ${this.packagerPort}.\nPort setting changed to ${this.pendingPackagerPort}. It will be reset on next start.`;
+        }
+        return tooltip;
+    }
+
+    public setPendingPackagerPort(port?: number): void {
+        this.pendingPackagerPort = port;
+        this.updatePackagerStatus(this.packagerStatus);
+    }
+
     public updatePackagerStatus(status: PackagerStatus, port?: number): void {
+        this.packagerStatus = status;
         if (port !== undefined) {
             this.packagerPort = port;
+            if (this.pendingPackagerPort === port) {
+                this.pendingPackagerPort = undefined;
+            }
         }
         switch (status) {
             case PackagerStatus.PACKAGER_STOPPED:
                 this.packagerPort = undefined;
+                this.pendingPackagerPort = undefined;
                 this.setupPackagerStatusIndicatorItems(
                     PackagerStatusIndicator.START_ICON,
                     PackagerStatusIndicator.START_COMMAND,

src/extension/rn-extension.ts

@@ -47,6 +47,7 @@ import { TipNotificationService } from "./services/tipsNotificationsService/tips
 import { SurveyService } from "./services/surveyService/surveyService";
 import { RNProjectObserver } from "./rnProjectObserver";
 import { StopPackager } from "./commands";
+import { PackagerStatus } from "./packagerStatusIndicator";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,
@@ -66,6 +67,7 @@ interface ISetupableDisposable extends vscode.Disposable {
 }
 
 let EXTENSION_CONTEXT: vscode.ExtensionContext;
+const PACKAGER_PORT_CONFIGURATION = "react-native.packager.port";
 /**
  * We initialize the counter starting with a large value in order
  * to not overlap indices of the workspace folders originally generated by VS Code
@@ -136,6 +138,9 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
                     onChangeWorkspaceFolders(event),
                 ),
             );
+            EXTENSION_CONTEXT.subscriptions.push(
+                vscode.workspace.onDidChangeConfiguration(event => onChangeConfiguration(event)),
+            );
             EXTENSION_CONTEXT.subscriptions.push(TipNotificationService.getInstance());
             EXTENSION_CONTEXT.subscriptions.push(SurveyService.getInstance());
 
@@ -256,6 +261,34 @@ function onChangeWorkspaceFolders(event: vscode.WorkspaceFoldersChangeEvent) {
     }
 }
 
+export function onChangeConfiguration(event: vscode.ConfigurationChangeEvent): void {
+    if (event.affectsConfiguration(PACKAGER_PORT_CONFIGURATION)) {
+        updatePackagerPortFromSettings();
+    }
+}
+
+function updatePackagerPortFromSettings(): void {
+    const packagers = Object.values(ProjectsStorage.projectsCache).map(appLauncher =>
+        appLauncher.getPackager(),
+    );
+    packagers.forEach(packager => {
+        const status = packager.getPackagerStatus();
+        const isRunningPackager =
+            status === PackagerStatus.PACKAGER_STARTED ||
+            status === PackagerStatus.PACKAGER_STARTING ||
+            status === PackagerStatus.PACKAGER_STOPPING;
+
+        if (isRunningPackager) {
+            const settingsPort = SettingsHelper.getPackagerPort(packager.getProjectPath());
+            const pendingPort = settingsPort === packager.getPort() ? undefined : settingsPort;
+            packager.getStatusIndicator().setPendingPackagerPort(pendingPort);
+            return;
+        }
+
+        packager.resetToSettingsPort();
+    });
+}
+
 export function createAdditionalWorkspaceFolder(folderPath: string): vscode.WorkspaceFolder | null {
     if (fs.existsSync(folderPath)) {
         const folderUri = vscode.Uri.file(folderPath);