feat: improve intergations UX for code repos #3900

lorenzo-cavazzi · 2025-11-06T13:22:14Z

Implements the solution for this ShapeUp pitch https://www.notion.so/renku/Make-users-aware-of-need-to-connect-git-integrations-for-code-repositories-27e0df2efafc8087844ac62252ee423e

The PR includes the following changes:

Auto-generate the code for the (new) "repository" APIs
Show better feedback for the code repositories' status
Show a blocking modal on session start whenever repos are unavailable (all users) or when integrations might add push permissions (project owners/editors)

There will be a follow-up to let users connect in-place instead of redirecting to the Integrations page.

/deploy renku-data-services=main renku=build/code-integrations extra-values=enableInternalGitlab=false

RenkuBot · 2025-11-06T13:23:05Z

You can access the deployment of this PR at https://renku-ci-ui-3900.dev.renku.ch

* Generate repository APIs code automatically * Show better feedback on code repositories' status * Block session start for unavailable or unaccessible repos

leafty · 2025-11-24T07:31:24Z

Note: labelling as "do-not-merge" until the backend has been reviewed and merged.

leafty · 2025-11-26T08:14:25Z

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx

+export function RepositoryPermissionsBadge({
+  hasWriteAccess,
+  repositoryUrl,
+}: RepositoryPermissionsProps) {


Instead of recomputing the conditions twice (badgeColor and badgeText), compute the condition once and based on the result assign the color and the text. The logic in this component is written twice which means it will be very easy to make a mistake when updating the logic.

Good point! I merged the 2 separate loops here acc8fbd

leafty · 2025-11-26T08:35:35Z

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx

+                <h3>Repository</h3>
+                <p>
+                  URL:{" "}
+                  <a


Can't we use an existing external link component here?

Yes! 2a27b11

leafty · 2025-11-26T08:38:16Z

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx

+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="mailto:[email protected]"


The email needs to be taken from helm values. We need to stop hard-coding [email protected] in our UI code.

I agree. That problem needs to be addressed application-wide.
I swapped the hardcoded [email protected] for the RenkuContactEmail variable here, but I also made an issue for the cooldown to get the contact email from helm values #3925

leafty · 2025-11-26T08:41:45Z

client/package.json

Also update the generate-api and update-api targets.

Good catch! e6122d4

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/repositories.utils.ts

leafty · 2025-11-26T08:53:54Z

client/src/features/repositories/api/repositories.api.ts

+    url: string;
+  };
+
+const withResponseRewrite = repositoriesGeneratedApi.injectEndpoints({


Bad practice: do not tamper with API responses, only perform simple data manipulations in the API code.

You can use shouldInterrupt() when it is needed and where it is needed after getting the API data.

You are right: embedding the shouldInterrupt function call in the API responses isn't ideal.
I updated the logic here e11d33a

leafty · 2025-11-26T08:54:35Z

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/repositories.utils.ts

+  const interruptAlways = !!(
+    !repositoryData?.metadata?.pull_permission &&
+    !(repositoryData?.connection?.status === "connected")
+  );
+  const interruptOwner = !!(
+    (!repositoryData?.metadata?.pull_permission &&
+      !(repositoryData?.connection?.status === "connected")) ||
+    (repositoryData?.metadata?.pull_permission &&
+      !repositoryData?.metadata?.push_permission &&
+      !(repositoryData?.connection?.status === "connected"))
+  );


You don't need to do this, you can have a hasProjectWritePermission in the arguments and return only the needed data.

👍 e11d33a

leafty

Forgot to post this recording: the offcanvas get triggered when clicking the for label or selecting the input:

Screen.Recording.2025-11-26.at.09.32.44.mov

leafty · 2025-11-28T10:18:28Z

I checked what we have on dev and the offcanvas bug is not present, so it is most likely introduced in this PR.

Co-authored-by: Flora Thiebaut <[email protected]>

Bumps [actions/checkout](https://github.com/actions/checkout) from 5 to 6. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v5...v6) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump body-parser from 2.2.0 to 2.2.1 in /client Bumps [body-parser](https://github.com/expressjs/body-parser) from 2.2.0 to 2.2.1. - [Release notes](https://github.com/expressjs/body-parser/releases) - [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md) - [Commits](expressjs/body-parser@v2.2.0...v2.2.1) --- updated-dependencies: - dependency-name: body-parser dependency-version: 2.2.1 dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build: update to body-parser v2.2.1 --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Mind that this doesnt fully address the review comment. That will require #3925

lorenzo-cavazzi · 2025-12-02T10:52:39Z

I checked what we have on dev and the offcanvas bug is not present, so it is most likely introduced in this PR.

Thanks for reporting the issue! That actually happens on dev too, I assume it's unrelated to the PR (I don't see changes around those bits).
I'm not sure what's going on. This is a temporarily fix 91c7555
If it's OK with you, we can keep that. Otherwise, I can make a separate issue and give it a look as soon as I finish the other builds

leafty · 2025-12-02T14:40:58Z

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx

-                <Label for={`project-${project.id}-edit-repository-url`}>
-                  Repository URL
-                </Label>
+                <Label>Repository URL</Label>


This is not a fix, please undo. The label should be linked to the input with the for= attribute.

It works as a workaround (for me, a quick workaround that improves UX is more important than keeping formal correctness in the code), but I can take it out for now if you wish 🤷
I'll make a separate issue to address the problem -- EDIT: #3926

P.S: working on this, I should be done soon #3900 (comment)

Fix:
In function EditCodeRepositoryModal({, update with the following:

<Modal size={"lg"} isOpen={isOpen} toggle={toggleModal} centered onClickCapture={(e) => { e.stopPropagation(); }} >

This is not a proper fix though, the issue is that it is forbidden to place a clickable button inside a clickable button which is what is happening here ("Edit" is inside the clickable code repository row). If we change that, then this offcanvas issue would not exist.

Also "for me, a quick workaround that improves UX is more important than keeping formal correctness in the code" is wrong because it breaks a fundamental Web affordance which is that form labels need to be linked to their input. Breaking this means breaking fundamental UI expectation for people with accessibility constraints. You may "fix" the issue for people using a mouse but you break the UI for people who may not have access to that input method.

I added the onClickCapture to the FormGroup element; attaching it to the Modal element disabled a bunch of other interactive elements like the close modal icon and the button on the footer
See 69cb87b

lorenzo-cavazzi · 2025-12-03T16:21:30Z

@leafty Thank you for the review. I should have addressed everything

lorenzo-cavazzi added the ShapeUp label Nov 6, 2025

lorenzo-cavazzi force-pushed the lorenzo/code-intergations branch 2 times, most recently from e46de6b to b29be88 Compare November 11, 2025 10:52

lorenzo-cavazzi force-pushed the lorenzo/code-intergations branch from 3d912ed to 410a2e3 Compare November 19, 2025 15:33

feat: improve integrations and code repos UX

18f84b8

* Generate repository APIs code automatically * Show better feedback on code repositories' status * Block session start for unavailable or unaccessible repos

lorenzo-cavazzi force-pushed the lorenzo/code-intergations branch from c114938 to 18f84b8 Compare November 21, 2025 13:51

lorenzo-cavazzi marked this pull request as ready for review November 21, 2025 14:07

lorenzo-cavazzi requested a review from a team as a code owner November 21, 2025 14:07

leafty added the do not merge label Nov 24, 2025

lorenzo-cavazzi added 3 commits November 25, 2025 10:10

chore: update API code according to backend changes

07087f2

update tests

e82afd0

fix

21f2586

leafty requested changes Nov 26, 2025

View reviewed changes

leafty reviewed Nov 27, 2025

View reviewed changes

lorenzo-cavazzi and others added 8 commits December 2, 2025 11:18

review: update logic to replace .git ending

301dc52

Co-authored-by: Flora Thiebaut <[email protected]>

review: blend together color+text badge logic

acc8fbd

review: use external link component

2a27b11

review: use the variable for our contact email.

3c2de48

Mind that this doesnt fully address the review comment. That will require #3925

format

26c9b3c

remove target

91c7555

Merge branch 'main' into lorenzo/code-intergations

699071e

leafty reviewed Dec 2, 2025

View reviewed changes

undo the fix from 3c2de48

1733e68

lorenzo-cavazzi mentioned this pull request Dec 2, 2025

Using the quick "Edit" button for code repo might open the offcanvas #3926

Closed

lorenzo-cavazzi added 3 commits December 2, 2025 16:48

review: avoid embedding shouldInterrupt logic into api responses

e11d33a

review: update generate-api and update-api

e6122d4

review: prevent opening offcanvas when clicking on the edit form

69cb87b

lorenzo-cavazzi requested a review from leafty December 3, 2025 16:20

feat: improve intergations UX for code repos #3900

Are you sure you want to change the base?

feat: improve intergations UX for code repos #3900

Uh oh!

Conversation

lorenzo-cavazzi commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RenkuBot commented Nov 6, 2025

Uh oh!

leafty commented Nov 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lorenzo-cavazzi Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lorenzo-cavazzi Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leafty left a comment

Choose a reason for hiding this comment

Uh oh!

leafty commented Nov 28, 2025

Uh oh!

lorenzo-cavazzi commented Dec 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lorenzo-cavazzi Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lorenzo-cavazzi Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lorenzo-cavazzi commented Dec 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lorenzo-cavazzi commented Nov 6, 2025 •

edited

Loading

lorenzo-cavazzi Dec 2, 2025 •

edited

Loading

lorenzo-cavazzi Dec 2, 2025 •

edited

Loading

lorenzo-cavazzi Dec 2, 2025 •

edited

Loading

lorenzo-cavazzi Dec 2, 2025 •

edited

Loading