feat: Enable connecting to different GitLab integration providers #10025

Dschoordsch · 2024-07-24T09:14:31Z

Description

Fixes #10024
[Please include a summary of the changes and the related issue]

Demo

https://www.loom.com/share/a5a3aa15f716401cb2e3d5458fcda8a0?sid=fa83daa9-4e18-4c98-bf83-ec348a778ea1

Testing scenarios

Test UI with existing team webhook integrations (Mattermost and MS Teams)
test adding, removing, updating and see the changes reflected in UI
Test UI with 1 or more dummy GitLab integration providers
add, remove and edit the providers
test as org admin and without rights
Add a real GitLab integration provider and connect to it via the team integrations page

Final checklist

I checked the code review guidelines
I have added Metrics Representative as reviewer(s) if my PR invovles metrics/data/analytics related changes
I have performed a self-review of my code, the same way I'd do it for any other team member
I have tested all cases I listed in the testing scenarios and I haven't found any issues or regressions
Whenever I took a non-obvious choice I added a comment explaining why I did it this way
I added the label Skip Maintainer Review Indicating the PR only requires reviewer review and can be merged right after it's approved if the PR introduces only minor changes, does not contain any architectural changes or does not introduce any new patterns and I think one review is sufficient'
PR title is human readable and could be used in changelog

Summary by CodeRabbit

New Features
- Enhanced the GitLabProviderRow component to display multiple GitLab instances and their connection statuses.
- Introduced a new ProviderCard layout for clearer presentation of provider information and actions.
Bug Fixes
- Improved the handling of the tenantId field in the GraphQL API, allowing it to be optional for greater flexibility in submissions.

coderabbitai · 2024-07-24T09:14:40Z

Walkthrough

The recent updates enhance the GitLabProviderRow component, improving the integration of self-hosted GitLab instances within the application. Key changes include the ability to connect multiple GitLab providers, improved UI layout for better status display, and a shift to styled components for modern styling. Additionally, adjustments to the GraphQL schema allow for greater flexibility in input handling.

Changes

Files	Change Summary
`packages/client/modules/teamDashboard/components/ProviderRow/GitLabProviderRow.tsx`	Enhanced layout and functionality for GitLab provider integration, including a new `sharedProviders` field in GraphQL query and improved UI with `ProviderCard` layout.
`packages/server/graphql/types/IntegrationProviderMetadataInputOAuth2.ts`	Updated `tenantId` from a non-nullable to a nullable GraphQL type, allowing for more flexible input.

Assessment against linked issues

Objective	Addressed	Explanation
Self-hosted GitLab integration (Issue #10024)	✅
Ability to connect multiple GitLab instances	✅
Improved display of connection statuses and actions	✅
Flexibility in handling `tenantId` input	✅

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Dschoordsch · 2024-08-08T15:21:33Z

@ackernaut could you check the loom if it's good enough?

ackernaut · 2024-08-08T15:57:09Z

@Dschoordsch I watched the Loom video. I think this is a great start. Nice work. A few small things:

In the dialog you give instructions, I think it would help to say ‘In the Gitlab Admin Area…’ to be a bit more clear. Up to you to make that small change.
Having 2 Connect buttons does seem to cause a bit of tension in the UI. There may be a way where we could better indicate that they’re making a choice, but it would take a quick UX pass. We can defer on it, ship good over perfect!
I wonder if we just hide Org Admin > Integrations Settings except for the Org Admin role? Also can defer on this.

Adding a simple edit/delete menu required some big refactoring.

github-actions · 2024-09-04T07:37:15Z

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

nickoferrall

Hey @Dschoordsch, how can I test the GitLab server integration? Where can I get the server base url etc?

When I go to the team integrations tab, I see this at the moment:

nickoferrall · 2024-09-04T15:04:19Z

packages/client/modules/userDashboard/components/OrgIntegrations/OrgIntegrations.tsx

+              Configure organization-level integrations that can be used by teams across your
+              organization.
+              <br />
+              See the team integration tab for team-level connections.


+1 adding a hyperlink to the team integrations would be helpful here

Yes, but I wouldn't know to which team I should link

github-actions · 2024-09-05T10:47:50Z

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

Dschoordsch · 2024-09-05T10:49:19Z

I fixed the row when no provider is available (normally we would have the global one already).
When you login to a private test gitlab as admin, you should be able to follow the dialog.

nickoferrall · 2024-09-06T15:21:18Z

packages/client/modules/teamDashboard/components/ProviderRow/GitLabProviderRow.tsx

+                        {isDesktop ? (
+                          <>
+                            <div className='flex items-center pr-6'>
+                              <DoneIcon className='h-[18px] w-[18px] text-lg text-success-light' />


+1 I think it's best to use the default tailwind heights where possible rather than [6px] [18px] etc

Yes, I agree. I just did not want to modify the existing layout in this PR. It's too big already.

nickoferrall · 2024-09-06T15:28:00Z

packages/client/tailwindTheme.ts

+      },
+      'success-light': '#2db553',
+      starter: '#F2E1F7',
+      team: '#CBECF0',


+1 I can see success-light being used in this PR, but not starter, team or enterprise?

I added these just for completeness, so the old PALETTE and the tailwind colours match.

nickoferrall

Tested and it worked!

nickoferrall · 2024-09-09T18:08:03Z

packages/client/modules/userDashboard/components/OrgIntegrations/UpsertGitLabProviderDialog.tsx

+          </div>
+          <div className='flex items-center p-2'>
+            <div className='w-36'>Redirect URI</div>
+            <CopyShortLink url={redirectUri} title='Redirect URL' tooltip='Copy Redirect URL' />


+1 this looked like a hyperlink to me. I tried to copy the text by highlighting it, but I wasn't able to highlight it. I then accidentally clicked on it and saw the "Copy Redirect URL" tooltip.

I think it'd be more user friendly if it had a copy button next to the URL, or if it looked more similar to the invite link:

github-actions · 2024-09-10T11:04:38Z

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

github-actions bot added the size/m label Jul 24, 2024

Dschoordsch force-pushed the feat/10024/selfHostedGitLabIntegration branch from d6a2066 to eef4028 Compare August 5, 2024 18:27

github-actions bot added size/l size/xl and removed size/m size/l labels Aug 5, 2024

Dschoordsch added 12 commits September 2, 2024 12:00

feat: Enable connecting to different GitLab integration providers

a56f4da

Add Organization Integration page

7e33dbd

Cleanup

445930c

Cleanup and convert to tailwindcss

57d4cca

Limit org integrations to org admin

40fd97a

Do some client side error handling

d54fe3c

Shuffle all code around

8e95a0e

Adding a simple edit/delete menu required some big refactoring.

Minor cleanup

a764621

More

b80e6d3

Fix add logo on the small screen

b5b2393

Add subscription for IntegrationProvider mutations

9937701

Update team integrations settings panels

7cdee22

Dschoordsch force-pushed the feat/10024/selfHostedGitLabIntegration branch from b700f17 to 7cdee22 Compare September 4, 2024 07:36

Dschoordsch requested a review from nickoferrall September 4, 2024 08:02

nickoferrall requested changes Sep 4, 2024

View reviewed changes

Hide GitLab provider if not available

6f899a4

Dschoordsch requested a review from nickoferrall September 5, 2024 10:51

nickoferrall approved these changes Sep 6, 2024

View reviewed changes

nickoferrall approved these changes Sep 9, 2024

View reviewed changes

Better copy redirect URL design

c6ce95a

Dschoordsch merged commit 8806839 into master Sep 10, 2024
6 checks passed

Dschoordsch deleted the feat/10024/selfHostedGitLabIntegration branch September 10, 2024 11:59

github-actions bot mentioned this pull request Sep 10, 2024

chore(release): Test v7.47.0 #10207

Merged

24 tasks

charlesmathias mentioned this pull request Sep 25, 2024

Add Jira Server/Data Center to Integration Settings in Org Settings page #10225

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Enable connecting to different GitLab integration providers #10025

feat: Enable connecting to different GitLab integration providers #10025

Dschoordsch commented Jul 24, 2024 •

edited

Loading

coderabbitai bot commented Jul 24, 2024 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Dschoordsch commented Aug 8, 2024

ackernaut commented Aug 8, 2024 •

edited

Loading

github-actions bot commented Sep 4, 2024

nickoferrall left a comment

nickoferrall Sep 4, 2024

Dschoordsch Sep 5, 2024

github-actions bot commented Sep 5, 2024

Dschoordsch commented Sep 5, 2024

nickoferrall Sep 6, 2024

Dschoordsch Sep 9, 2024

nickoferrall Sep 6, 2024

Dschoordsch Sep 9, 2024

nickoferrall left a comment

nickoferrall Sep 9, 2024

Dschoordsch Sep 10, 2024

nickoferrall Sep 10, 2024

github-actions bot commented Sep 10, 2024

feat: Enable connecting to different GitLab integration providers #10025

feat: Enable connecting to different GitLab integration providers #10025

Conversation

Dschoordsch commented Jul 24, 2024 • edited Loading

Description

Demo

Testing scenarios

Final checklist

Summary by CodeRabbit

coderabbitai bot commented Jul 24, 2024 • edited Loading

Walkthrough

Changes

Assessment against linked issues

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Dschoordsch commented Aug 8, 2024

ackernaut commented Aug 8, 2024 • edited Loading

github-actions bot commented Sep 4, 2024

nickoferrall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 5, 2024

Dschoordsch commented Sep 5, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickoferrall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 10, 2024

Dschoordsch commented Jul 24, 2024 •

edited

Loading

coderabbitai bot commented Jul 24, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

ackernaut commented Aug 8, 2024 •

edited

Loading