Improve support for file changes detection when running UI mode in Docker (#217)

* regenerate package-lock.json

* improve UI mode detection so that it also works when running outside of docker

* wip detect wsl version for docker-desktop

* wip detect wsl version for docker-desktop 2

* start docs for file change detection on docker

* remove console log from playwright config because they trigger more than just at startup

* Update docker README

* Update docker README 2

* Update references to README section

Author: edumserrano

demos/docker/README.md

@@ -7,7 +7,9 @@ param (
   [switch] $useHostWebServer = $false,
   [string] $grep = "",
   [ValidateSet("auto", "install", "mount")]
-  [string] $installNpmPackagesMode = "auto"
+  [string] $installNpmPackagesMode = "auto",
+  [ValidateSet("auto", "supported", "unsupported")]
+  [string] $fileChangesDetectionSupportMode = "auto"
 )
 
 function GetPlaywrightVersion() {
@@ -54,6 +56,33 @@ function NeedsToInstallNpmPackages() {
   return $needsToInstallNpmPackages;
 }
 
+function IsFileChangesDetectionSupported() {
+  if ($fileChangesDetectionSupportMode -eq "auto") {
+    $isDockerDesktopOnWindowsUsingWsl2 = IsDockerDesktopOnWindowsUsingWsl2
+    if($isDockerDesktopOnWindowsUsingWsl2) {
+      Write-Host "Detected Docker Desktop running on WSL2. FILE_CHANGES_DETECTION_SUPPORTED=false environment variable will be added to the docker run command." -ForegroundColor Cyan
+    }
+
+    return !$isDockerDesktopOnWindowsUsingWsl2;
+  } elseif ($fileChangesDetectionSupportMode -eq "supported") {
+    return $true
+  } elseif ($fileChangesDetectionSupportMode -eq "unsupported") {
+    return $false
+  }
+
+  throw "Unknown '-fileChangesDetectionSupportMode' option. Received: $fileChangesDetectionSupportMode. Available options are: 'auto | supported | unsupported'"
+}
+
+function IsDockerDesktopOnWindowsUsingWsl2() {
+  if(!$IsWindows) {
+    return $false
+  }
+
+  # See https://docs.docker.com/desktop/settings/windows/
+  $dockerDesktopSettings = Get-Content "$env:USERPROFILE\AppData\Roaming\Docker\settings.json" | ConvertFrom-Json
+  return $dockerDesktopSettings.wslEngineEnabled
+}
+
 function StartPlaywrightTests {
   Write-Host "Starting playwright tests run in docker container...`n" -ForegroundColor Cyan
   Write-Host "options:" -ForegroundColor DarkYellow
@@ -102,17 +131,25 @@ function StartPlaywrightTests {
   Exit $LASTEXITCODE # see https://stackoverflow.com/questions/32348794/how-to-get-status-of-invoke-expression-successful-or-failed
 }
 
-
 function StartPlaywrightUI() {
   Write-Host "Starting playwright tests with ui in docker container...`n"
   Write-Host "options:" -ForegroundColor DarkYellow
   Write-Host "-useHostWebServer=$useHostWebServer" -ForegroundColor DarkYellow
-  Write-Host "-installNpmPackagesMode=$installNpmPackagesMode`n" -ForegroundColor DarkYellow
+  Write-Host "-installNpmPackagesMode=$installNpmPackagesMode" -ForegroundColor DarkYellow
+  Write-Host "-fileChangesDetectionSupportMode=$fileChangesDetectionSupportMode`n" -ForegroundColor DarkYellow
 
   if ($useHostWebServer) {
     $useHostWebServerOption = "--add-host=host.docker.internal:host-gateway --env USE_DOCKER_HOST_WEBSERVER=true"
   }
 
+  # For more info on the reason for the FILE_CHANGES_DETECTION_SUPPORTED environment variable
+  # see the section 'File changes aren't triggering an application rebuild when testing with UI mode' of the README at /demos/docker/README.md
+  if(IsFileChangesDetectionSupported) {
+    $fileChangesDetectionSupportedEnv = "--env FILE_CHANGES_DETECTION_SUPPORTED=true"
+  } else {
+    $fileChangesDetectionSupportedEnv = "--env FILE_CHANGES_DETECTION_SUPPORTED=false"
+  }
+
   # Must use a random port or else there will be issues with the UI app where sometimes the tests don't load/refresh properly.
   # I believe it has something to do with some websockets that the UI app uses. When the same port is used and the UI app is
   # restarted, the tests don't load properly until the websockets timeout and then a new connection is established.
@@ -127,7 +164,7 @@ function StartPlaywrightUI() {
     $startCommand = "/bin/bash -c 'npm ci && $startCommand'" # see https://stackoverflow.com/questions/28490874/docker-run-image-multiple-commands
   }
 
-  $dockerRunCommand = "docker run -it --rm --ipc=host $useHostWebServerOption --workdir=/app -p ${playwrightUiPort}:${playwrightUiPort} -v '${PWD}:/app' $nodeModulesMount mcr.microsoft.com/playwright:v$playwrightVersion-jammy $startCommand"
+  $dockerRunCommand = "docker run -it --rm --ipc=host $useHostWebServerOption $fileChangesDetectionSupportedEnv --workdir=/app -p ${playwrightUiPort}:${playwrightUiPort} -v '${PWD}:/app' $nodeModulesMount mcr.microsoft.com/playwright:v$playwrightVersion-jammy $startCommand"
   if ($installNpmPackages) {
     Write-Host "NPM packages will be installed in the docker container." -ForegroundColor Cyan
   }