feat: improve intergations UX for code repos #3900
Conversation
|
You can access the deployment of this PR at https://renku-ci-ui-3900.dev.renku.ch |
lorenzo-cavazzi
force-pushed
the
lorenzo/code-intergations
branch
2 times, most recently
from
e46de6b to
b29be88
Compare
lorenzo-cavazzi
force-pushed
the
lorenzo/code-intergations
branch
from
3d912ed to
410a2e3
Compare
* 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
|
Note: labelling as "do-not-merge" until the backend has been reviewed and merged. |
| export function RepositoryPermissionsBadge({ | ||
| hasWriteAccess, | ||
| repositoryUrl, | ||
| }: RepositoryPermissionsProps) { |
There was a problem hiding this comment.
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.
| <h3>Repository</h3> | ||
| <p> | ||
| URL:{" "} | ||
| <a |
There was a problem hiding this comment.
Can't we use an existing external link component here?
| <a | ||
| target="_blank" | ||
| rel="noreferrer noopener" | ||
| href="mailto:[email protected]" |
There was a problem hiding this comment.
The email needs to be taken from helm values. We need to stop hard-coding [email protected] in our UI code.
There was a problem hiding this comment.
Also update the generate-api and update-api targets.
|
|
||
| export function getRepositoryName(repositoryURL: string): string { | ||
| const canonicalUrlStr = `${repositoryURL.replace(/.git$/i, "")}`; | ||
| const canonicalUrlStr = `${repositoryURL.replace(/(?:\.git|\/)$/i, "")}`; |
There was a problem hiding this comment.
| const canonicalUrlStr = `${repositoryURL.replace(/(?:\.git|\/)$/i, "")}`; | |
| const canonicalUrlStr = `${repositoryURL.replace(/[/]$/, "").replace(/[.]git$/i, "")}`; |
This correctly handles repo.git, repo.git/ and repo/.
| url: string; | ||
| }; | ||
|
|
||
| const withResponseRewrite = repositoriesGeneratedApi.injectEndpoints({ |
There was a problem hiding this comment.
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.
| 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")) | ||
| ); |
There was a problem hiding this comment.
You don't need to do this, you can have a hasProjectWritePermission in the arguments and return only the needed data.
leafty
left a comment
leafty
left a comment
There was a problem hiding this comment.
Forgot to post this recording: the offcanvas get triggered when clicking the for label or selecting the input:
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:
There will be a follow-up to let users connect in-place instead of redirecting to the Integrations page.
/deploy renku-data-services=eikek/build/integration-improvements renku=build/code-integrations extra-values=enableInternalGitlab=false