Repository: kedro-org/kedro-viz
Pull request #2292: Setting up DevContainers to QA Kedro-Viz on Codespaces
Author: login: rashidakanchwala
Created: 2025-03-04T13:17:54Z | Merged: 2025-03-10T13:49:34Z

## Description

Resolves #2270 

This PR adds the dev container setup in Codespaces to streamline the QA process for Kedro-Viz. Inside the dev container it does the following

Builds the frontend using make build to get the latest static assets.
Installs Kedro-Viz as an editable package with pip install -e package.
Builds the demo project using kedro viz build.
Serves the static build using python -m http.server.

To learn more about Dev Containers - https://www.gitpod.io/docs/flex/configuration/devcontainer


## QA notes

Click on 'Code', then create a 'Codespace' or use an existing active one. And let it rebuild your codespace. Then it will create a port at the end of it, you can go to it and access the Kedro Viz link. 

<img width="1845" alt="Screenshot 2025-03-06 at 15 30 34" src="https://github.com/user-attachments/assets/eae3d666-8f0d-4d72-8cb2-b037508f2391" />


## Checklist

- [ ] Read the [contributing](/CONTRIBUTING.md) guidelines
- [ ] Opened this PR as a 'Draft Pull Request' if it is work-in-progress
- [ ] Updated the documentation to reflect the code changes
- [ ] Added new entries to the `RELEASE.md` file
- [ ] Added tests to cover my changes


Linked issue #2270: Create a QA Environment for Testing Kedro-Viz
Gitpod has been the preferred method for QA testing of PRs without requiring a full development setup. However, with Gitpod Classic being deprecated, we need an alternative solution.

https://www.drupal.org/project/drupalpod/issues/3500792#:~:text=Gitpod%20Classic%20is%20going%20away,be%20available%20after%20April%2C%202025.

### Exploration So Far
- **Gitpod Flex**: Supports Dev Containers. A first attempt was made to integrate Dev Containers ([#2255](#2255)), but the setup behaved unpredictably.  
- **GitHub Pages**: Was tested but didn’t work as expected.  
- **Potential Alternative Solutions**:  
  - **Netlify?** Could be an option, but needs further investigation. However, we prefer not to pay for this.  

### Next Steps
- Explore Gitpod Flex further and see if we can resolve inconsistencies in setup.  
- Investigate Netlify or other hosting alternatives for previewing PRs.  
- Determine if GitHub Pages can be configured correctly or if it should be ruled out.  
- Document a recommended approach for PR testing moving forward.  
Linked issue comments: user: login: datajoely
created_at: 2025-02-10T12:46:42Z
body: If were to adopt some of these changes it would simplify a hell of a lot

https://github.com/kedro-org/kedro/issues/4363
author_association: CONTRIBUTOR
user: login: astrojuanlu
created_at: 2025-02-13T15:15:49Z
body: In case it helps (but feel free to throw this away), I made 1 last attempt on the `dev-containers` branch https://github.com/kedro-org/kedro-viz/tree/dev-containers

There are some improvements from the last time I tried #2255 , but then got stuck at a weird frontend error.

Happy to help test whatever comes but I think it's time for me to put this aside 😅 
author_association: CONTRIBUTOR
user: login: astrojuanlu
created_at: 2025-02-13T15:17:27Z
body: Notice that GitHub Codespaces, an alternative to Gitpod Flex, also uses Dev Containers https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers
author_association: CONTRIBUTOR

Diff:
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..e04586de51
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,44 @@
+{
+	"name": "Kedro Viz Dev Container",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "18",
+			"nodeGypDependencies": true
+		}
+	},
+
+	"forwardPorts": [8000],
+
+	"portsAttributes": {
+		"8000": {
+			"label": "Kedro Viz",
+			"onAutoForward": "openBrowser"
+		}
+	},
+
+	"containerEnv": {
+		"DISPLAY": "dummy",
+		"PYTHONUNBUFFERED": "True",
+		"UV_LINK_MODE": "copy",
+		"VIRTUAL_ENV": "/home/vscode/venv"
+	},
+
+	"mounts": [
+		{"source": "${localWorkspaceFolderBasename}-node_modules", "target": "${containerWorkspaceFolder}/node_modules", "type": "volume"},
+		{"source": "${localWorkspaceFolderBasename}-venv", "target": "${containerWorkspaceFolder}/.venv", "type": "volume"}
+	],
+
+	"onCreateCommand": "./.devcontainer/onCreateCommand.sh",
+
+	"postStartCommand": "nohup bash -c 'python -m http.server --directory demo-project/build 8000 &' > server.out 2> server.err < /dev/null",
+
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-python.python"
+			]
+		}
+	}
+}
diff --git a/.devcontainer/onCreateCommand.sh b/.devcontainer/onCreateCommand.sh
new file mode 100755
index 0000000000..750f43ff1c
--- /dev/null
+++ b/.devcontainer/onCreateCommand.sh
@@ -0,0 +1,61 @@
+#! /usr/bin/env bash
+
+set -euo pipefail
+IFS=$'\n\t'
+
+# Install system dependencies
+sudo apt-get update && \
+sudo apt-get install -y --no-install-recommends \
+    build-essential \
+    python3 \
+    make \
+    g++ \
+    libpixman-1-dev \
+    libcairo2-dev \
+    libjpeg-dev \
+    libgif-dev \
+    pkg-config \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libpangocairo-1.0-0 && \
+sudo apt-get clean && sudo rm -rf /var/lib/apt/lists/*
+
+# Install uv
+curl -LsSf https://astral.sh/uv/install.sh | sh
+
+# Ensure the virtual environment path is set
+export VIRTUAL_ENV="/home/vscode/venv"  # Adjust this if needed
+uv venv $VIRTUAL_ENV
+
+# Activate virtual environment explicitly
+source $VIRTUAL_ENV/bin/activate
+
+# Install Python dependencies
+uv pip install kedro
+uv pip install -r package/test_requirements.txt -r demo-project/src/docker_requirements.txt
+
+# Install Node.js dependencies
+sudo chown vscode:vscode node_modules
+npm install
+
+# Build the frontend and pip install editable kedro-viz
+make build
+uv pip install -e package/
+
+# Ensure Kedro is installed and available
+if ! command -v kedro &> /dev/null
+then
+    echo "Error: Kedro command not found. Exiting."
+    exit 1
+fi
+
+# Generate the Kedro-Viz static build inside demo-project
+cd demo-project
+source $VIRTUAL_ENV/bin/activate  # Ensure virtual environment is active
+kedro viz build
+
+# Serve the generated files
+cd build
+python3 -m http.server 8000 &
+
+echo "Setup complete! The website is available at http://localhost:8000"
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000000..1d17dae13b
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+.venv
diff --git a/.github/workflows/docs-language-linter.yml b/.github/workflows/docs-language-linter.yml
index 84bd87aaf8..89075a0ac9 100644
--- a/.github/workflows/docs-language-linter.yml
+++ b/.github/workflows/docs-language-linter.yml
@@ -14,4 +14,5 @@ jobs:
       - uses: actions/checkout@v4
       - uses: errata-ai/vale-action@reviewdog
         with:
+          fail_on_error: false
           reporter: github-pr-review
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2be58f6b3d..9191fda81e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -307,21 +307,43 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespaces
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+<img width="1443" alt="Screenshot 2025-03-07 at 09 57 50" src="https://github.com/user-attachments/assets/bceb9e42-902f-4f32-a96b-8f618ab0ddf2" />
 
-**2. It will open the gitpod workspace automatically**
-<img width="1792" alt="Screenshot 2024-04-17 at 15 57 41" src="https://github.com/kedro-org/kedro-viz/assets/32060364/9aea0174-858a-4ebc-9c62-ee90b28c921f">
 
-**3. Please wait until the frontend and backend builds are successful. You can check it by clicking on `frontend` and `backend` tabs in the terminal. (Estimated build time : 5 minutes)**
-<img width="1455" alt="Screenshot 2024-04-17 at 15 59 46" src="https://github.com/kedro-org/kedro-viz/assets/32060364/ae080672-4a48-4178-b83e-70274071497f">
-<img width="1456" alt="Screenshot 2024-04-17 at 16 04 38" src="https://github.com/kedro-org/kedro-viz/assets/32060364/af60ea0a-6148-4354-938e-3a0ef7b9e711">
+2. Codespace Initialization
+  - If this is your first time opening the Codespace, it will start rebuilding your development container.
+  - If you have used it before, the dev container setup will already be available.
 
-**4. Unblock pop-up ads and refresh your browser. Kedro-Viz should be running on your gitpod workspace**
-<img width="1432" alt="Screenshot 2024-04-17 at 16 06 05" src="https://github.com/kedro-org/kedro-viz/assets/32060364/53dd56c2-df5e-49a6-ba06-9846af7bab52">
+3. Ensure You Are on the Latest Commit and Branch
+  - Open Source Control from the left sidebar.
+  - Ensure you are on the correct branch by checking the branch name at the bottom left.
+  - Click on Pull to fetch the latest changes.
+
+<img width="981" alt="Screenshot 2025-03-07 at 10 00 33" src="https://github.com/user-attachments/assets/a2fe63e7-9494-446a-a2f1-deae3815a50a" />
+
+
+4. Rebuilding the Dev Container
+  - Press `Ctrl + Shift + P` to open the Command Palette.
+  - Type `Rebuild Container` and select the option.
+  Note - A full rebuild is generally not needed unless something is not working as expected.
+
+<img width="1397" alt="Screenshot 2025-03-07 at 10 01 34" src="https://github.com/user-attachments/assets/6d54d46d-5f21-4a32-b1f1-0d19455d1630" />
+
+5. Verifying Ports
+  - Once the rebuild is complete, your port will show a (1) indicator.
+  - Navigate to the Ports tab.
+  - Click on the relevant port to access the running UI.
+
+<img width="855" alt="Screenshot 2025-03-07 at 10 03 44" src="https://github.com/user-attachments/assets/6459c095-49a5-45b3-b25c-479b201598a8" />
+
+
+Your UI should now be running in GitHub Codespaces, ready for testing!
 
 # Release guidelines
 
diff --git a/RELEASE.md b/RELEASE.md
index ea5020d674..0c0ca1305e 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -5,14 +5,13 @@ Please follow the established format:
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
-# Upcoming Release
+# Release 11.0.0 
 
 ## Major features and improvements
 - Remove experiment tracking. (#2237)
 - Introduce horizontal flowchart orientation in Kedro-Viz. (#2159)
 - Visualise pipeline objects in notebook. (#2241)
 - Add support for Kedro's DataCatalog 2.0 with lazy loading. (#2272)
-
 - Enable Kedro-Viz in VSCode to list pipelines using the filter icon.  (#2269)
 
 ## Bug fixes and other changes
@@ -20,6 +19,7 @@ Please follow the established format:
 - Add ESM bundle for Kedro-Viz. (#2268)
 - Fix `%run_viz` using old process in jupyter notebook. (#2267)
 - Make Kedro-Viz compatible with the new `KedroDataCatalog`. (#2274)
+- Add Dev Containers to QA Kedro-Viz on Github Codespaces. (#2292)
 
 ## Community contributions
 
diff --git a/demo-project/pyproject.toml b/demo-project/pyproject.toml
index 76b0de5fcf..483cfccd77 100644
--- a/demo-project/pyproject.toml
+++ b/demo-project/pyproject.toml
@@ -7,3 +7,6 @@ kedro_init_version = "0.19.0"
 addopts = """
 --cov-report term-missing \
 --cov src/demo_project -ra"""
+
+[tool.kedro_telemetry]
+project_id = "7534922e42844faebbb810ac91405089"


Reviews:
user: login: jitu5
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T17:10:33Z
user: login: jitu5
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T17:14:04Z
user: login: jitu5
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T17:15:20Z
user: login: rashidakanchwala
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T08:40:37Z
user: login: rashidakanchwala
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T08:41:18Z
user: login: rashidakanchwala
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T08:42:26Z
user: login: astrojuanlu
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T12:15:20Z
user: login: github-actions[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-07T09:46:14Z
user: login: github-actions[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-07T10:06:48Z
user: login: rashidakanchwala
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T10:17:46Z
user: login: rashidakanchwala
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T10:18:02Z
user: login: Huongg
body: Hey, I tested it, and everything works fine on my end. @rashidakanchwala, thanks for updating it! Just one note: the Vale comments appear on the main review page instead of in the "Files changed" section. This might not be caused by this PR, so let's go ahead and merge it once you're happy to do so. If we notice the same issue in other PRs, we can look into fixing it. 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T11:53:31Z
user: login: github-actions[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-07T15:39:56Z

Review comments:
diff_hunk: @@ -0,0 +1,44 @@
+{
+	"name": "Kedro Viz Dev Container",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "18",
+			"nodeGypDependencies": true
+		}
+	},
+
+	"forwardPorts": [8000],
+
+	"portsAttributes": {
+		"8000": {
+			"label": "Kedro Viz",
+			"onAutoForward": "openBrowser"
+		}
+	},
+
+	"containerEnv": {
+		"DISPLAY": "dummy",
+		"PYTHONUNBUFFERED": "True",
+		"UV_LINK_MODE": "copy",
+		"VIRTUAL_ENV": "/home/vscode/venv"
path: .devcontainer/devcontainer.json
user: login: jitu5
body: `/home/vscode/venv` where is this located? do we need to commit `.venv` file ?
created_at: 2025-03-04T17:10:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,44 @@
+{
+	"name": "Kedro Viz Dev Container",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "18",
+			"nodeGypDependencies": true
+		}
+	},
+
+	"forwardPorts": [8000],
path: .devcontainer/devcontainer.json
user: login: jitu5
body: As every user will have there own Codespace but is there a possibility of port conflict?
created_at: 2025-03-04T17:14:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -62,7 +62,7 @@ export const FlowchartPrimaryToolbar = ({
           className={'pipeline-menu-button--labels'}
           dataTest={`sidebar-flowchart-labels-btn-${textLabels}`}
           icon={LabelIcon}
-          labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
+          labelText={`${textLabels ? 'Hide' : 'Show'} text labelssss`}
path: src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js
user: login: jitu5
body: Before we merge this, please revert to `labels`  😄
created_at: 2025-03-04T17:15:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,44 @@
+{
+	"name": "Kedro Viz Dev Container",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "18",
+			"nodeGypDependencies": true
+		}
+	},
+
+	"forwardPorts": [8000],
path: .devcontainer/devcontainer.json
user: login: rashidakanchwala
body: nope they assign funny random names to codespaces so there's no possibility of port conflict. I was kinda hoping it would be one Codespace per repo but for every branch; so once I set it up, one link could be shared amongst all of us since we just QA anyway. 
created_at: 2025-03-05T08:40:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,44 @@
+{
+	"name": "Kedro Viz Dev Container",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
+
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "18",
+			"nodeGypDependencies": true
+		}
+	},
+
+	"forwardPorts": [8000],
+
+	"portsAttributes": {
+		"8000": {
+			"label": "Kedro Viz",
+			"onAutoForward": "openBrowser"
+		}
+	},
+
+	"containerEnv": {
+		"DISPLAY": "dummy",
+		"PYTHONUNBUFFERED": "True",
+		"UV_LINK_MODE": "copy",
+		"VIRTUAL_ENV": "/home/vscode/venv"
path: .devcontainer/devcontainer.json
user: login: rashidakanchwala
body: this is created in the Codespace; it doesn't live in the repo. so nto required to commit anything. Infact we shouldn't commit anything on Codespace. It should be purely viewing Kedro-viz even tho we do have access to push things via codespaces. 
created_at: 2025-03-05T08:41:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -62,7 +62,7 @@ export const FlowchartPrimaryToolbar = ({
           className={'pipeline-menu-button--labels'}
           dataTest={`sidebar-flowchart-labels-btn-${textLabels}`}
           icon={LabelIcon}
-          labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
+          labelText={`${textLabels ? 'Hide' : 'Show'} text labelssss`}
path: src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js
user: login: rashidakanchwala
body: yes, I have just kept it for ppl to review so we know there's a  difference, shall remove before I merge
created_at: 2025-03-05T08:42:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespace'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespaces'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespace'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+2. Codespace Initialization
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespace'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+2. Codespace Initialization
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.ukspelling] In general, use UK English spelling instead of 'Initialization'.
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+2. Codespace Initialization
+  - If this is your first time opening the Codespace, it will start rebuilding your development container.
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespace'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+2. Codespace Initialization
+  - If this is your first time opening the Codespace, it will start rebuilding your development container.
+  - If you have used it before, the dev container setup will already be available.
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'dev'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+2. Codespace Initialization
+  - If this is your first time opening the Codespace, it will start rebuilding your development container.
+  - If you have used it before, the dev container setup will already be available.
 
-**2. It will open the gitpod workspace automatically**
-<img width="1792" alt="Screenshot 2024-04-17 at 15 57 41" src="https://github.com/kedro-org/kedro-viz/assets/32060364/9aea0174-858a-4ebc-9c62-ee90b28c921f">
+3. Ensure You Are on the Latest Commit and Branch
+  - Open Source Control from the left sidebar.
+  - Ensure you are on the correct branch by checking the branch name at the bottom left.
+  - Click on Pull to fetch the latest changes.
 
-**3. Please wait until the frontend and backend builds are successful. You can check it by clicking on `frontend` and `backend` tabs in the terminal. (Estimated build time : 5 minutes)**
-<img width="1455" alt="Screenshot 2024-04-17 at 15 59 46" src="https://github.com/kedro-org/kedro-viz/assets/32060364/ae080672-4a48-4178-b83e-70274071497f">
-<img width="1456" alt="Screenshot 2024-04-17 at 16 04 38" src="https://github.com/kedro-org/kedro-viz/assets/32060364/af60ea0a-6148-4354-938e-3a0ef7b9e711">
+4. Rebuilding the Dev Container
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Dev'?
created_at: 2025-03-07T09:46:13Z
author_association: NONE
diff_hunk: @@ -307,21 +307,32 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespace
+  - Navigate to your branch and click on the Code button.
+  - Select the Codespaces tab.
+  - Create a new Codespace or open an existing one.
 
+2. Codespace Initialization
+  - If this is your first time opening the Codespace, it will start rebuilding your development container.
+  - If you have used it before, the dev container setup will already be available.
 
-**2. It will open the gitpod workspace automatically**
-<img width="1792" alt="Screenshot 2024-04-17 at 15 57 41" src="https://github.com/kedro-org/kedro-viz/assets/32060364/9aea0174-858a-4ebc-9c62-ee90b28c921f">
+3. Ensure You Are on the Latest Commit and Branch
+  - Open Source Control from the left sidebar.
+  - Ensure you are on the correct branch by checking the branch name at the bottom left.
+  - Click on Pull to fetch the latest changes.
 
-**3. Please wait until the frontend and backend builds are successful. You can check it by clicking on `frontend` and `backend` tabs in the terminal. (Estimated build time : 5 minutes)**
-<img width="1455" alt="Screenshot 2024-04-17 at 15 59 46" src="https://github.com/kedro-org/kedro-viz/assets/32060364/ae080672-4a48-4178-b83e-70274071497f">
-<img width="1456" alt="Screenshot 2024-04-17 at 16 04 38" src="https://github.com/kedro-org/kedro-viz/assets/32060364/af60ea0a-6148-4354-938e-3a0ef7b9e711">
+4. Rebuilding the Dev Container
+  - Press `Ctrl + Shift + P` to open the Command Palette.
+  - Type `Rebuild Container` and select the option.
+  Note - A full rebuild is generally not needed unless something is not working as expected.
 
-**4. Unblock pop-up ads and refresh your browser. Kedro-Viz should be running on your gitpod workspace**
-<img width="1432" alt="Screenshot 2024-04-17 at 16 06 05" src="https://github.com/kedro-org/kedro-viz/assets/32060364/53dd56c2-df5e-49a6-ba06-9846af7bab52">
+5. Verifying Ports
+  - Once the rebuild is complete, your port will show a (1) indicator.
+  - Navigate to the Ports tab.
+  - Click on the relevant port to access the running UI.
+
+Your UI should now be running in GitHub Codespaces, ready for testing!
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespaces'?
created_at: 2025-03-07T09:46:14Z
author_association: NONE
diff_hunk: @@ -307,21 +307,43 @@ Python dependencies in Kedro-Viz are usually updated automatically through tools
 If the lower-bound e2e test fails, it indicates that some dependencies may not work correctly with Kedro-Viz. To resolve this, update the problematic dependency in both `requirements.txt` and `lower-requirements.txt`.
 
 ### Testing UI using Gitpod
-**Please ensure you have installed Gitpod on your browser extensions - [Gitpod browser extension](https://www.gitpod.io/docs/configure/user-settings/browser-extension)**
 
-**1. Once you open a pull request, click on the `Open` icon on the right**
-<img width="1510" alt="Screenshot 2024-04-17 at 15 54 36" src="https://github.com/kedro-org/kedro-viz/assets/32060364/4295e00f-f80d-46e5-bb19-336e393f00a5">
+1. Open a GitHub Codespaces
path: CONTRIBUTING.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespaces'?
created_at: 2025-03-07T10:06:48Z
author_association: NONE
diff_hunk: @@ -14,4 +14,5 @@ jobs:
       - uses: actions/checkout@v4
       - uses: errata-ai/vale-action@reviewdog
         with:
+          fail_on_error: false
path: .github/workflows/docs-language-linter.yml
user: login: rashidakanchwala
body: i just added this check because vale shouldn't fail our PRs but it should highlight the grammar mistakes
created_at: 2025-03-07T10:17:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -62,7 +62,7 @@ export const FlowchartPrimaryToolbar = ({
           className={'pipeline-menu-button--labels'}
           dataTest={`sidebar-flowchart-labels-btn-${textLabels}`}
           icon={LabelIcon}
-          labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
+          labelText={`${textLabels ? 'Hide' : 'Show'} text labelssss`}
path: src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js
user: login: rashidakanchwala
body: @Huongg , i will delete this after u approve. 
created_at: 2025-03-07T10:18:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,21 +5,21 @@ Please follow the established format:
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
-# Upcoming Release
+# Release 11.0.0 
 
 ## Major features and improvements
 - Remove experiment tracking. (#2237)
 - Introduce horizontal flowchart orientation in Kedro-Viz. (#2159)
 - Visualise pipeline objects in notebook. (#2241)
 - Add support for Kedro's DataCatalog 2.0 with lazy loading. (#2272)
-
 - Enable Kedro-Viz in VSCode to list pipelines using the filter icon.  (#2269)
 
 ## Bug fixes and other changes
 
 - Add ESM bundle for Kedro-Viz. (#2268)
 - Fix `%run_viz` using old process in jupyter notebook. (#2267)
 - Make Kedro-Viz compatible with the new `KedroDataCatalog`. (#2274)
+- Add Dev Containers to QA Kedro-Viz on Github Codespaces. (#2292)
path: RELEASE.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Dev'?
created_at: 2025-03-07T15:39:56Z
author_association: NONE
diff_hunk: @@ -5,21 +5,21 @@ Please follow the established format:
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
-# Upcoming Release
+# Release 11.0.0 
 
 ## Major features and improvements
 - Remove experiment tracking. (#2237)
 - Introduce horizontal flowchart orientation in Kedro-Viz. (#2159)
 - Visualise pipeline objects in notebook. (#2241)
 - Add support for Kedro's DataCatalog 2.0 with lazy loading. (#2272)
-
 - Enable Kedro-Viz in VSCode to list pipelines using the filter icon.  (#2269)
 
 ## Bug fixes and other changes
 
 - Add ESM bundle for Kedro-Viz. (#2268)
 - Fix `%run_viz` using old process in jupyter notebook. (#2267)
 - Make Kedro-Viz compatible with the new `KedroDataCatalog`. (#2274)
+- Add Dev Containers to QA Kedro-Viz on Github Codespaces. (#2292)
path: RELEASE.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Github'?
created_at: 2025-03-07T15:39:56Z
author_association: NONE
diff_hunk: @@ -5,21 +5,21 @@ Please follow the established format:
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
-# Upcoming Release
+# Release 11.0.0 
 
 ## Major features and improvements
 - Remove experiment tracking. (#2237)
 - Introduce horizontal flowchart orientation in Kedro-Viz. (#2159)
 - Visualise pipeline objects in notebook. (#2241)
 - Add support for Kedro's DataCatalog 2.0 with lazy loading. (#2272)
-
 - Enable Kedro-Viz in VSCode to list pipelines using the filter icon.  (#2269)
 
 ## Bug fixes and other changes
 
 - Add ESM bundle for Kedro-Viz. (#2268)
 - Fix `%run_viz` using old process in jupyter notebook. (#2267)
 - Make Kedro-Viz compatible with the new `KedroDataCatalog`. (#2274)
+- Add Dev Containers to QA Kedro-Viz on Github Codespaces. (#2292)
path: RELEASE.md
user: login: github-actions[bot]
body: ⚠️ **[vale]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>[Kedro-viz.Spellings] Did you really mean 'Codespaces'?
created_at: 2025-03-07T15:39:56Z
author_association: NONE

PR comments:
user: login: jitu5
created_at: 2025-03-04T17:12:48Z
body: @rashidakanchwala Do we have new Codespace for every change we make in feature branch ?
author_association: CONTRIBUTOR
user: login: astrojuanlu
created_at: 2025-03-05T15:02:18Z
body: Do you folks know what's the best way to test this on Gitpod Flex? I tried creating a new environment but it sort of gets stuck

![image](https://github.com/user-attachments/assets/8e8ce740-4a44-4952-9fe3-d312bce5165e)


author_association: CONTRIBUTOR
user: login: astrojuanlu
created_at: 2025-03-05T15:09:40Z
body: Testing this on GitHub Codespaces and it almost works, but (1) the 8000 port wasn't automatically forwarded (I had to do it myself) and (2) it still didn't quite work

![image](https://github.com/user-attachments/assets/4517be00-cb38-4d7c-be6e-14bccf10a67b)

(Also, the `Creating an optimized production build...` takes a while)
author_association: CONTRIBUTOR
user: login: rashidakanchwala
created_at: 2025-03-05T15:24:22Z
body: Ok, it worked for both Jitendra and I. There's a way to do it using Codespaces. We have our call tomm; maybe we can screenshare and I can show you. Basically we have to wait for all the processing to be done --the port doesn't immediately become available. Once it does you can click on the link and it works. 
author_association: CONTRIBUTOR