From 8cbddd489da2cb206b2f7227bd1133aff8ce1ef6 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Wed, 19 Feb 2025 11:04:20 +1100
Subject: [PATCH] Devcontainer updates (#9101)

* Update docker image

- Required changes to pass display through from host OS

* Update docs

* Update devcontainer docs
---
 .devcontainer/Dockerfile            | 6 ++++--
 .devcontainer/docker-compose.yml    | 1 +
 docs/docs/develop/contributing.md   | 2 +-
 docs/docs/develop/devcontainer.md   | 8 ++++++--
 docs/docs/develop/react-frontend.md | 3 ++-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 49ed779532..d787f93db3 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -14,6 +14,10 @@ ENV INVENTREE_BACKUP_DIR="${INVENTREE_DATA_DIR}/backup"
 ENV INVENTREE_PLUGIN_DIR="${INVENTREE_DATA_DIR}/plugins"
 ENV INVENTREE_CONFIG_FILE="${INVENTREE_DATA_DIR}/config.yaml"
 
+# Required for running playwright within devcontainer
+ENV DISPLAY=:0
+ENV LIBGL_ALWAYS_INDIRECT=1
+
 COPY contrib/container/init.sh ./
 RUN chmod +x init.sh
 
@@ -31,6 +35,4 @@ RUN apt install -y \
 
 RUN yarn config set network-timeout 600000 -g
 
-# Install python database connectors
-
 ENTRYPOINT ["/bin/bash", "./init.sh"]
diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml
index 39cb357b6c..0d2594d682 100644
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@@ -23,6 +23,7 @@ services:
       dockerfile: .devcontainer/Dockerfile
     volumes:
       - ../:/home/inventree:z
+      - /tmp/.X11-unix:/tmp/.X11-unix
 
     environment:
       INVENTREE_DB_ENGINE: postgresql
diff --git a/docs/docs/develop/contributing.md b/docs/docs/develop/contributing.md
index 1fd90a1a23..64f707b923 100644
--- a/docs/docs/develop/contributing.md
+++ b/docs/docs/develop/contributing.md
@@ -47,7 +47,7 @@ Read the [InvenTree setup documentation](../start/intro.md) for a complete insta
 
 ### Setup Devtools
 
-Run the following command to set up all toolsets for development.
+Run the following command to set up the tools required for development.
 
 ```bash
 invoke dev.setup-dev
diff --git a/docs/docs/develop/devcontainer.md b/docs/docs/develop/devcontainer.md
index dc509d6097..3711470bb7 100644
--- a/docs/docs/develop/devcontainer.md
+++ b/docs/docs/develop/devcontainer.md
@@ -97,7 +97,7 @@ The easiest way for plugin developing is by using the InvenTree devcontainer. Ju
    }
    ```
 
-Your plugin should now be activateable from the InvenTree settings. You can also use breakpoints for debugging.
+Your plugin should now be able to be activated from the InvenTree settings. You can also use breakpoints for debugging.
 
 ### Troubleshooting
 
@@ -125,4 +125,8 @@ You can also refer to the [Improve disk performance guide](https://code.visualst
 
 ### Redis Caching
 
-The devcontainer setup provides a [redis](https://redis.io/) container which can be used for managing global cache. By default this is enabled, but it can be easily disabled by adjusting the environment variabiles in the [docker compose file]({{ sourcefile('.devcontainer/docker-compose.yml') }}).
+The devcontainer setup provides a [redis](https://redis.io/) container which can be used for managing global cache. By default this is enabled, but it can be easily disabled by adjusting the environment variables in the [docker compose file]({{ sourcefile('.devcontainer/docker-compose.yml') }}).
+
+### Frontend Testing
+
+By default, the required packages for running frontend tests (via playwright) are not installed. Refer to the [installation instructions](./react-frontend.md#install-playwright) for instructions on installing these packages within the devcontainer environment.
diff --git a/docs/docs/develop/react-frontend.md b/docs/docs/develop/react-frontend.md
index 7b0274cf8e..acc472142b 100644
--- a/docs/docs/develop/react-frontend.md
+++ b/docs/docs/develop/react-frontend.md
@@ -95,10 +95,11 @@ The frontend codebase it tested using [Playwright](https://playwright.dev/). The
 
 ### Install Playwright
 
-To install the required packages to run the tests, you can use the following command:
+To install the required packages to run the tests, you can use the following commands:
 
 ```bash
 cd src/frontend
+sudo npx playwright install-deps
 npx playwright install
 ```