Devcontainer updates (#9101)

* Update docker image

- Required changes to pass display through from host OS

* Update docs

* Update devcontainer docs

.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"]

.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

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

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.

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
 ```