Setting up DevContainers to QA Kedro-Viz on Codespaces #2292

rashidakanchwala · 2025-03-04T13:17:54Z

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.

Checklist

Read the contributing 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

Signed-off-by: Juan Luis Cano Rodríguez <juan_luis_cano@mckinsey.com>

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

Signed-off-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com>

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

.devcontainer/devcontainer.json

jitu5 · 2025-03-04T17:12:48Z

@rashidakanchwala Do we have new Codespace for every change we make in feature branch ?

.devcontainer/devcontainer.json

jitu5 · 2025-03-04T17:15:20Z

src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js

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


Before we merge this, please revert to labels 😄

yes, I have just kept it for ppl to review so we know there's a difference, shall remove before I merge

@Huongg , i will delete this after u approve.

astrojuanlu · 2025-03-05T15:02:18Z

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

astrojuanlu · 2025-03-05T15:09:40Z

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

(Also, the Creating an optimized production build... takes a while)

rashidakanchwala · 2025-03-05T15:24:22Z

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.

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md


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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespace'?

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md

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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespaces'?

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md

+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.


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespace'?

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md


+2. Codespace Initialization


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespace'?

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md


+2. Codespace Initialization


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.ukspelling] In general, use UK English spelling instead of 'Initialization'.

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md


+2. Codespace Initialization
+  - If this is your first time opening the Codespace, it will start rebuilding your development container.


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespace'?

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md


+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.


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'dev'?

github-actions · 2025-03-07T09:46:13Z

CONTRIBUTING.md

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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Dev'?

github-actions · 2025-03-07T09:46:14Z

CONTRIBUTING.md

+  - 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!


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespaces'?

github-actions · 2025-03-07T10:06:48Z

CONTRIBUTING.md


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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespaces'?

Signed-off-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com>

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

rashidakanchwala · 2025-03-07T10:17:46Z

.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


i just added this check because vale shouldn't fail our PRs but it should highlight the grammar mistakes

Huongg

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.

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

github-actions · 2025-03-07T15:39:56Z

RELEASE.md

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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Dev'?

github-actions · 2025-03-07T15:39:56Z

RELEASE.md

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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Github'?

github-actions · 2025-03-07T15:39:56Z

RELEASE.md

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


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'Codespaces'?

astrojuanlu and others added 20 commits February 13, 2025 13:39

First attempt at adding Dev Containers config

ba250fb

Signed-off-by: Juan Luis Cano Rodríguez <juan_luis_cano@mckinsey.com>

Fix commands

f1aa0b1

Signed-off-by: Juan Luis Cano Rodríguez <juan_luis_cano@mckinsey.com>

Fix whitespace

437a7a4

Signed-off-by: Juan Luis Cano Rodríguez <juan_luis_cano@mckinsey.com>

WIP: Add NODE_VERSION (does not work)

edf5c17

Signed-off-by: Juan Luis Cano Rodríguez <juan_luis_cano@mckinsey.com>

Finish frontend

fae492b

Signed-off-by: Juan Luis Cano Rodríguez <juan_luis_cano@mckinsey.com>

Fix Node version

26c2ec1

Fix frontend command

34170c2

Improve disk performance

44e64f6

Do not start Babel

f61b940

Do not open browser twice

d70cd25

Remove outdated comment

58a18c5

test-with-build

abc263d

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

Merge branch 'main' into dev-containers

671df5f

Signed-off-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com>

done

39ccd4c

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

removed pyproject toml telemetry stuff

2c884a1

add make build earlier

ddb9498

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

add make build earlier

b1013f8

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

test again

d185f01

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

testing to see if changes get updated

1175c3c

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

testing to see if changes get updated-2

ae05f6a

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

rashidakanchwala marked this pull request as ready for review March 4, 2025 14:33

rashidakanchwala requested a review from jitu5 as a code owner March 4, 2025 14:33

rashidakanchwala changed the title ~~Dev containers~~ Setting up DevContainers to QA Kedro-Viz on Codespaces Mar 4, 2025

rashidakanchwala requested a review from astrojuanlu March 4, 2025 14:44

update label

33e4832

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

jitu5 reviewed Mar 4, 2025

View reviewed changes

.devcontainer/devcontainer.json Show resolved Hide resolved

jitu5 reviewed Mar 4, 2025

View reviewed changes

.devcontainer/devcontainer.json Show resolved Hide resolved

jitu5 reviewed Mar 4, 2025

View reviewed changes

astrojuanlu approved these changes Mar 6, 2025

View reviewed changes

add contributing docs

60a5ce4

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

github-actions bot reviewed Mar 7, 2025

View reviewed changes

update with screenshots

851011a

github-actions bot reviewed Mar 7, 2025

View reviewed changes

rashidakanchwala and others added 3 commits March 7, 2025 10:08

Delete server.out

16c1097

Signed-off-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com>

Delete server.err

b723c93

Signed-off-by: rashidakanchwala <37628668+rashidakanchwala@users.noreply.github.com>

value shouldn't fail on error

fb263c9

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

rashidakanchwala commented Mar 7, 2025

View reviewed changes

rashidakanchwala requested a review from Huongg March 7, 2025 10:18

Huongg approved these changes Mar 7, 2025

View reviewed changes

rashidakanchwala and others added 3 commits March 7, 2025 14:31

undo typo on primary toolbar

95d3dd4

Merge branch 'main' into dev-containers

21f2e38

release notes

a2ccb9f

Signed-off-by: rashidakanchwala <rashida_kanchwala@mckinsey.com>

github-actions bot reviewed Mar 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setting up DevContainers to QA Kedro-Viz on Codespaces #2292

Setting up DevContainers to QA Kedro-Viz on Codespaces #2292

rashidakanchwala commented Mar 4, 2025 •

edited

Loading

jitu5 commented Mar 4, 2025

jitu5 Mar 4, 2025

rashidakanchwala Mar 5, 2025

rashidakanchwala Mar 7, 2025

astrojuanlu commented Mar 5, 2025

astrojuanlu commented Mar 5, 2025

rashidakanchwala commented Mar 5, 2025 •

edited

Loading

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

rashidakanchwala Mar 7, 2025

Huongg left a comment

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025

github-actions bot Mar 7, 2025


		2. Codespace Initialization
		- If this is your first time opening the Codespace, it will start rebuilding your development container.

Setting up DevContainers to QA Kedro-Viz on Codespaces #2292

Are you sure you want to change the base?

Setting up DevContainers to QA Kedro-Viz on Codespaces #2292

Conversation

rashidakanchwala commented Mar 4, 2025 • edited Loading

Description

QA notes

Checklist

jitu5 commented Mar 4, 2025

jitu5 Mar 4, 2025

Choose a reason for hiding this comment

rashidakanchwala Mar 5, 2025

Choose a reason for hiding this comment

rashidakanchwala Mar 7, 2025

Choose a reason for hiding this comment

astrojuanlu commented Mar 5, 2025

astrojuanlu commented Mar 5, 2025

rashidakanchwala commented Mar 5, 2025 • edited Loading

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

rashidakanchwala Mar 7, 2025

Choose a reason for hiding this comment

Huongg left a comment

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

rashidakanchwala commented Mar 4, 2025 •

edited

Loading

rashidakanchwala commented Mar 5, 2025 •

edited

Loading