Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: refactored integration guides images SEO and accessibility #129

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+16 −16
Open

docs: refactored integration guides images SEO and accessibility #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/platforms/azure-devops.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ please contact your administrator to request approval for the applications.

:::

![azure devops apps consent](/img/integrations/azure_apps_consent_page.png)
![CodeRabbit admin consent page for Azure DevOps integration showing Microsoft authentication URLs and continue button for granting application permissions](/img/integrations/azure_apps_consent_page.png)

3. Once your administrator has approved the applications, click "Continue."
4. You will be redirected to the "Onboarding" page, where you can select the
organization you wish to integrate with.
5. On the "Azure DevOps User" page, enter your Personal Access Token for Azure
Comment on lines 33 to 36
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix ordered list numbering sequence.

The ordered list numbers are not sequential (jumps from 1 to 3 to 4 to 5), which can impact accessibility and screen reader functionality.

Apply this fix:

1. Log in to the CodeRabbitAI application.
2. After logging in, you will be redirected to a page displaying Microsoft Apps
   consent requests. Please forward these requests to your administrator for
   approval.

![CodeRabbit admin consent page for Azure DevOps integration showing Microsoft authentication URLs and continue button for granting application permissions](/img/integrations/azure_apps_consent_page.png)

-3. Once your administrator has approved the applications, click "Continue."
-4. You will be redirected to the "Onboarding" page, where you can select the
+3. Once your administrator has approved the applications, click "Continue."
+4. You will be redirected to the "Onboarding" page, where you can select the
   organization you wish to integrate with.
-5. On the "Azure DevOps User" page, enter your Personal Access Token for Azure
+5. On the "Azure DevOps User" page, enter your Personal Access Token for Azure

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 Markdownlint

33-33: Expected: 1; Actual: 3; Style: 1/2/3
Ordered list item prefix

(MD029, ol-prefix)

34-34: Expected: 2; Actual: 4; Style: 1/2/3
Ordered list item prefix

(MD029, ol-prefix)

36-36: Expected: 3; Actual: 5; Style: 1/2/3
Ordered list item prefix

(MD029, ol-prefix)

DevOps.
![azure devops user page](/img/integrations/azure_devops_user_page.png)
![Azure DevOps integration settings page showing organization user ID and personal access token input field for CodeRabbit configuration](/img/integrations/azure_devops_user_page.png)
6. To install CodeRabbit on a repository, toggle the switch on the
"Repositories" page.

Expand All @@ -58,7 +58,7 @@ your existing users.
Upon first login to the application (immediately after the onboarding screen),
you will need to add the Personal Access Token.

![azure devops user modal](/img/integrations/azure_personal_access_token_add.png)
![Azure DevOps integration modal with personal access token input field and documentation link for connecting CodeRabbit to Azure DevOps API](/img/integrations/azure_personal_access_token_add.png)

### Recommendations

Expand Down Expand Up @@ -98,4 +98,4 @@ Follow these steps to generate the token:
on pull requests.
8. Click "Create"

![Generate Personal Access Token](/img/integrations/azure-access-token.png)
![Azure DevOps personal access token creation form showing name field, organization selector, expiration date, and detailed permission scopes for work items, code, build, release, test management, and packaging](/img/integrations/azure-access-token.png)
6 changes: 3 additions & 3 deletions docs/platforms/github-enterprise-server.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ complete, you can log in directly.
**Visit CodeRabbit:** Visit our [Login](https://coderabbit.ai/login) page and
select Self-Hosted GitHub

![login-page](/img/integrations/login-self-hosted-github.png)
![CodeRabbit login page displaying multiple sign-in options - Login with GitHub, Login with GitLab, Self-Hosted GitHub and GitLab](/img/integrations/login-self-hosted-github.png)

On this page, enter the URL of your self-managed GitHub instance and click
submit. Once, you submit, we check our database for a record of your
organization and if we find an existing one, we will start the login process.

![Untitled](/img/integrations/self-hosted-github-host-url.png)
![Self-hosted GitHub Enterprise connection page for CodeRabbit showing URL input field for GitHub instance domain](/img/integrations/self-hosted-github-host-url.png)

If the self-managed GitHub instance is not found, you will be required to enter
more details for the onboarding.
Expand Down Expand Up @@ -66,7 +66,7 @@ Keep the following details handy:
- Client ID
- Client secret

![GitHub OAuth Client ID & Secret](/img/integrations/github-oauth-client-id-secret.png)
![GitHub Developer Settings page showing CodeRabbit OAuth application configuration with client ID display, client secret management](/img/integrations/github-oauth-client-id-secret.png)

### **Step 3: GitHub App**

Expand Down
6 changes: 3 additions & 3 deletions docs/platforms/gitlab-com.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ To interact with the GitLab API, a **Personal Access Token** is required. This t

Upon first login to the application (immediately after the onboarding screen), you will need to choose based on your organization's requirements.

![gitlab user modal choice](/img/integrations/gitlab_user_choice.png)
![GitLab repository access configuration modal showing how to choose between default CodeRabbit user or organization user token](/img/integrations/gitlab_user_choice.png)

**We recommend using the default CodeRabbit user** for most organizations, as it is pre-configured. However, we understand that some organizations may prefer more control over the user or have restrictions regarding user inclusion within their organization.

### Personal Access Tokens

If your organization opts to use another user within the organization, you can do so by [generating a personal access token](#generating-a-personal-access-token).

![gitlab organization user modal choice](/img/integrations/gitlab_organization_user.png)
![GitLab integration configuration modal showing personal access token input field and organization user setup with detailed instructions for token integration](/img/integrations/gitlab_organization_user.png)

#### Recommendations

Expand Down Expand Up @@ -67,4 +67,4 @@ GitLab provides an option to generate a personal access token for a new user. Fo
9. Click "Create Personal Access Token."
10. Note down the token as it will only be displayed once.

![Untitled](/img/integrations/admin-access-token.png)
![GitLab personal access token configuration page showing token name input, expiration date selector, and API permission scopes including read/write access options](/img/integrations/gitlab-personal-access-token-scopes-setup.png)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add newline at end of file.

Add a newline character at the end of the file to follow Markdown best practices and improve compatibility.

 ![GitLab personal access token configuration page showing token name input, expiration date selector, and API permission scopes including read/write access options](/img/integrations/gitlab-personal-access-token-scopes-setup.png)
+
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
![GitLab personal access token configuration page showing token name input, expiration date selector, and API permission scopes including read/write access options](/img/integrations/gitlab-personal-access-token-scopes-setup.png)
![GitLab personal access token configuration page showing token name input, expiration date selector, and API permission scopes including read/write access options](/img/integrations/gitlab-personal-access-token-scopes-setup.png)
🧰 Tools
🪛 Markdownlint

70-70: null
Files should end with a single newline character

(MD047, single-trailing-newline)

12 changes: 6 additions & 6 deletions docs/platforms/self-hosted-gitlab.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,23 @@ CodeRabbit supports GitLab `16.x` and above. Version `15.x` may experience unexp
**Visit CodeRabbit:** Visit our [Login](https://coderabbit.ai/login) page and
select Self-Hosted GitLab

![login-page](/img/integrations/login-self-hosted-gitlab.png)
![CodeRabbit login page displaying multiple sign-in options - Login with GitHub, Login with GitLab, Self-Hosted GitHub and GitLab](/img/integrations/login-self-hosted-gitlab.png)

### Step 2: Enter your Self-Managed GitLab URL

On this page, enter the URL of your self-managed GitLab instance and click
submit. Once, you submit, we check our database for a record of your
organization and if we find an existing one, we are starting the login process.

![Untitled](/img/integrations/self-hosted-gitlab-host-url.png)
![Self-hosted Gitlab enterprise connection page for CodeRabbit](/img/integrations/self-hosted-gitlab-host-url.png)

If the self-managed GitLab instance is not found, we initiate the onboarding process, which can be either manual or automated.

### **Step 3: Onboarding Manual or Automated**

#### 1. Automated onboarding

![Untitled](/img/integrations/automated-onboarding.png)
![Self-managed GitLab connection page showing instance URL input, admin access token field, installation type toggles (Manual/Automated)](/img/integrations/automated-onboarding.png)

#### **Why do we need the Admin Access Token?**

Expand All @@ -50,7 +50,7 @@ wish, as the next step.
#### 2. Manual onboarding

For the manual onboarding process we need to create the [CodeRabbit user](#creating-coderabbit-user) and the [OAuth2 GitLab application](#creating-oauth2-application).
![Untitled](/img/integrations/manual-onboarding.png)
![Self-managed GitLab connection page showing instance URL input, admin access token field, installation type toggles (Manual/Automated)](/img/integrations/manual-onboarding.png)

#### **Creating CodeRabbit user**

Expand Down Expand Up @@ -92,14 +92,14 @@ the token, please follow the process outlined below:
9. Select Create personal access token.
10. Please note down this token as this will be visible one time only

![Untitled](/img/integrations/admin-access-token.png)
![GitLab personal access token configuration page showing token name input, expiration date selector, and API permission scopes including read/write access options](/img/integrations/gitlab-personal-access-token-scopes-setup.png)

### **Step 4: Paste the details and click submit**

- Submit the form.
- We will handle the setup process for you.
- On subsequent visits, your setup will be automatically detected, allowing for
direct login. ![Untitled](/img/integrations/self-hosted-page.png)
direct login. ![CodeRabbit authentication options page displaying three login choices - GitHub login button, GitLab login button, and Self-Hosted GitLab option](/img/integrations/self-hosted-page.png)

### **Step 5: Whitelist CodeRabbit IP address**

Expand Down
0 ...c/img/integrations/admin-access-token.png → ...ab-personal-access-token-scopes-setup.png
View file
Open in desktop
File renamed without changes