Add package manager to DiagnosticView

packages/vscode-extension/src/common/DependencyManager.ts

@@ -9,6 +9,7 @@ export type Dependency =
   | "xcode"
   | "cocoaPods"
   | "nodejs"
+  | "packageManager"
   | "nodeModules"
   | "android"
   | "ios"
@@ -23,6 +24,7 @@ export type InstallationStatus = "installed" | "notInstalled" | "installing";
 export type DependencyStatus = {
   status: InstallationStatus;
   isOptional: boolean;
+  details?: string;
 };
 
 export type DependenciesStatus = Record<Dependency, DependencyStatus>;

packages/vscode-extension/src/dependency/DependencyManager.ts

@@ -61,6 +61,7 @@ export class DependencyManager implements Disposable, DependencyManagerInterface
     }
 
     this.checkNodeCommandStatus();
+    this.checkPackageManagerInstallationStatus();
     this.checkNodeModulesInstallationStatus();
 
     this.emitEvent("reactNative", {
@@ -133,16 +134,16 @@ export class DependencyManager implements Disposable, DependencyManagerInterface
   }
 
   public async installNodeModules(): Promise<boolean> {
-    const manager = await this.getPackageManager();
-    if (!manager) {
+    const packageManager = await this.getPackageManager();
+    if (!packageManager) {
       return false;
     }
 
     this.emitEvent("nodeModules", { status: "installing", isOptional: false });
 
-    // all managers support the `install` command
-    await command(`${manager.name} install`, {
-      cwd: manager.workspacePath ?? getAppRootFolder(),
+    // all package managers support the `install` command
+    await command(`${packageManager.name} install`, {
+      cwd: packageManager.workspacePath ?? getAppRootFolder(),
       quietErrorsOnExit: true,
     });
 
@@ -240,8 +241,20 @@ export class DependencyManager implements Disposable, DependencyManagerInterface
     });
   }
 
+  private async checkPackageManagerInstallationStatus() {
+    // the resolvePackageManager function in getPackageManager checks
+    // if a package manager is installed and otherwise returns undefined
+    const packageManager = await this.getPackageManager();
+    this.emitEvent("packageManager", {
+      status: packageManager ? "installed" : "notInstalled",
+      isOptional: false,
+      details: packageManager?.name,
+    });
+    return packageManager;
+  }
+
   public async checkNodeModulesInstallationStatus() {
-    const packageManager = await resolvePackageManager();
+    const packageManager = await this.getPackageManager();
     if (!packageManager) {
       this.emitEvent("nodeModules", { status: "notInstalled", isOptional: false });
       return false;

packages/vscode-extension/src/webview/providers/DependenciesProvider.tsx

@@ -17,6 +17,7 @@ const dependencyManager = makeProxy<DependencyManagerInterface>("DependencyManag
 
 const dependenciesDomain = [
   "nodejs",
+  "packageManager",
   "androidEmulator",
   "xcode",
   "cocoaPods",
@@ -125,6 +126,7 @@ function getErrors(statuses: DependencyRecord) {
           setFirstError(dependency, "emulator");
           break;
         case "nodejs":
+        case "packageManager":
         case "nodeModules":
           setFirstError(dependency, "common");
           break;
@@ -146,6 +148,12 @@ export function dependencyDescription(dependency: Dependency) {
         info: "Used for running scripts and getting dependencies.",
         error: "Node.js was not found. Make sure to [install Node.js](https://nodejs.org/en).",
       };
+    case "packageManager":
+      return {
+        info: "Used for managing project dependencies and scripts.",
+        error:
+          "Package manager not found or uninstalled. Make sure to install the package manager used in the project.",
+      };
     case "androidEmulator":
       return {
         info: "Used for running Android apps.",

packages/vscode-extension/src/webview/views/DiagnosticView.tsx

@@ -19,6 +19,11 @@ function DiagnosticView() {
     <div className="diagnostic-container">
       <Label>Common</Label>
       <DiagnosticItem label="Node.js" name="nodejs" info={dependencies.nodejs} />
+      <DiagnosticItem
+        label={`Package manager`}
+        name="packageManager"
+        info={dependencies.packageManager}
+      />
       <DiagnosticItem label="Node Modules" name="nodeModules" info={dependencies.nodeModules} />
       <div className="diagnostic-section-margin" />
 
@@ -94,11 +99,13 @@ function DiagnosticItem({ label, name, info, action }: DiagnosticItemProps) {
     description = messages.info;
   }
 
+  const details = info?.details ? `: ${info?.details}` : "";
+
   return (
     <div className="diagnostic-item-wrapper">
       <div className="diagnostic-item">
         <div className="diagnostic-icon">{icon}</div>
-        <p className="diagnostic-item-text">{label}</p>
+        <p className="diagnostic-item-text">{`${label}${details}`}</p>
         {description && (
           <Tooltip label={description} type="secondary" instant>
             <span className="diagnostic-item-info-icon codicon codicon-info" />