vibinex / vibinex-server

This website will be the interface for the organizations to get AI insights about their own code and their software development teams.

Vibinex Website

This is the project for the Vibinex website and the primary backend for the Vibinex Browser Extension. It's a Next.js project bootstrapped with create-next-app.

Introduction

Vibinex Code Review enriches the GitHub, Bitbucket and GitLab pull-request/merge-request UI with data from the git history. By making the UI more personalized to the contributors of the project using Vibinex, tech teams can increase the quality of their code reviews, increase the overall code awareness and ownership in the team and reduce the time and effort it takes to review a pull request.

Vibinex Code Review offers these features:

1. Automatic assignment of reviewers on any pull request based on authorship
2. Comments on the pull-request indicating percentage weightage of approvals of different reviewers as well as completion rates.
3. Personalized highlighting of relevant pull requests, files and code-hunks in the pull request that are revent to the contributor. (This feature is only enabled for users who have installed the browser extension).

Architecture

The primary frontend of the Vibinex Code Review tool is the browser extension. There are two backends:

1. On-prem Rust service: stores the whole repository and processes the code and git history to assign reviewers, add comments and extract the meta data required for personalized highlighting.
2. NextJS backend: Serves as the backend for the browser extension. It handles authentication, authorization, analytics, meta-data storage and security. This server also hosts the website on vibinex.com.

Contribute

Repository setup

1. Fork this repository using the GitHub GUI.
2. Clone your fork of the repository:

git clone https://github.com/<your_username>/vibinex-server.git

or, if you use SSH cloning:

git clone [email protected]:<your_username>/vibinex-server.git

3. Create a new branch with your user-prefixed branch name.
   Optional: If you are working on an issue, you can directly use the issue number as the branch name.

git checkout -b <your_username>/<your_branch_name>

Install dependencies

Enter the repository folder and install dependencies:

npm install
# or
yarn

Start NextJS server

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Connect to Test environment

Create a .env.local file in the root directory and add the following in it:

# NextAuthJS
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=

# Github Login
GITHUB_CLIENT_ID=78eb181cacd859319797
GITHUB_CLIENT_SECRET=c6efe816493a0b553ef20364134a3009b724b402

# Bitbucket Login
BITBUCKET_CLIENT_ID=
BITBUCKET_CLIENT_SECRET=

# Bitbucket OAuth consumer
BITBUCKET_OAUTH_CLIENT_ID=

# GitLab Login
GITLAB_CLIENT_ID=
GITLAB_CLIENT_SECRET=

# PostGreSQL Connection
PGSQL_USER=postgres
PGSQL_PASSWORD=vibi@test-pg
PGSQL_HOST=127.0.0.1
PGSQL_PORT=5432
PGSQL_DATABASE=test-db

(TODO: Add steps for downloading the cloud-sql-proxy script)

Now run the following command is a different terminal:

./cloud-sql-proxy --port 5432 vibi-test-394606:asia-south1:test-db --gcloud-auth

This will enable you to connect with our test database hosted on your localhost.

The environment file also contains client ID and client secret for the Vibinex-Test OAuth App so that you can use the entire website locally by logging in using GitHub. You can create your own Bitbucket or GitLab OAuth consumers and add your client-id and client-secrets in the .env.local file to test them out.

Running Unit Tests

Unit tests written using jest library can be run using:

npm test

vibinex-server's Issues

PAT repo selection postgres setup

• Setup dpu repos properly in postgres after dpu cloning

Bitbucket line highlighting

Repo selection component ui to be improved for pat flow

• select all button should be moved on top of the repo list
• refresh button can be introduced

Eventing

• Dpu eventing for setup
• Vibinex-server setup api eventing to complete setup funnel
• Add eventing for webhook endpoints (when we send the message to DPU, we should also send an event on BigQuery so that analytics can capture them).

Add buttons for connecting multiple auths for a user

• Create the backend for adding a new auth for an existing user even if there are no matching aliases
• Add a button on u.tsx for connecting other accounts
• Show existing auths in the chrome extension and a link to connect more accounts
• Add prompts through the chrome extension to connect accounts whenever a user is on a website for which we don't have their auth_info

Unable to run the website locally without the prod secrets environment file

Instructions page has no eventing

Making Slack Community button

DOD

• making the ui
• making slack community public channel
• adding this link to website

Disable authorise button on instructions page once user has authorised the oauth consumer and returns back to the page.

Pending from this ticket

Solve the sign-in/sign-out issue

Why did you not copy the `isGetInstallIdLoading` state as well?

          Why did you not copy the `isGetInstallIdLoading` state as well?

Here, the user will see the failure message even when the API call to get the install id hasn't failed yet. And they might refresh the page, triggering the API again and not waiting until the API call completes.

Originally posted by @avikalpg in #311 (comment)

login page UI: change default next auth UI

DOD

• creating custome UI page for login

CORS issue for extension not working on prod

Documentation: detail to be added regarding `git config`

Vibinex only works properly when the aliases mentioned in the commits match the emails associated with the GitHub or Bitbucket account.
So when someone is setting up Vibinex and when someone makes an account on Vibinex, we need to ask them to make sure that their user email is configured correctly in their local git (or wherever they make there commits from).

Create the "Schedule a demo" section on our website

Logout button doesn't work (at least not promptly)

In the LoginLogout component, the "Logout" option doesn't log the user out promptly as it is expected to.

Implement auth using Database adapters

NextAuthJS provides the functionality to automatically create and manage users in the database using adapters.
If we use one of the database providers from this list, we can use a pre-built adapter.

If we don't (for example, we currently do not use Prisma and are using PostGreSQL as our primary database), we can also create a custom database adapter.

In any case, it would be beneficial to use the database adapter because it will make it easier to create and manage user sessions.

Create a demo video for our product (to introduce it to new users)

Along with the screenshots, we also need to create a video that clearly shows the benefits of using our product.

• Product pitch video
• Chrome-extension onboarding video (for landing page)
• Github App/Action setup video
• Bitbucket OAuth Consumer/Pipeline setup video

Create the "About Us" page

Our website does not have an "About us" page. This page will have the following information:

1. Purpose of the company
2. Product Vision
3. Our core principles
4. Our team
5. Our investors
6. The co-reviewers club

Steps:

• Work with the team and iron out the requirements and design
• Build the first draft of the page
• Make improvements on the page based on review feedback

Implement login

Dod -

• Gmail login is implemented on website

Approval comment is wrong

          Relevant users for this PR:

Contributor Name/Alias	Relevance	Approval
MuskanPaliwal	84.09%	❌
tapishr	15.91%	❌

Total Coverage for PR: 0.00%

If you are a relevant reviewer, you can use the Vibinex browser extension to see parts of the PR relevant to you
Relevance of the reviewer is calculated based on the git blame information of the PR. To know more, hit us up at [email protected].

To change comment and auto-assign settings, go to your Vibinex repository settings page.

Originally posted by @vibinex-dpu[bot] in #293 (comment)

Rudderstack eventing

Some work is done in this pr
Dod -

• on new website

Let Vibinex users edit their list of aliases

• Users should be able to add new aliases to their account, even if they are not valid email addresses (like their default Macbook git email config value)
• We need to ensure that the aliases that they add are not already added for another user
• (optional) User should be able to delete aliases to their account
• (optional) We can make an auto-complete enabled text field for this, populated with the list of unknown aliases that we have detected.

Create nextjs repo profile page frontend

Dod -
whatever is required in nextjs for using repo profile page

Separate out SQL from TS files

In our Python projects, we are using sqlalchemy for this. We should do something similar to separate out the SQL queries used from the TypeScript files that use those scripts in order to track changes in SQL separately.

navbar UI implementation

Repoprofiler link in docs needs to be changed

We changed name of our github app to Vibinex Code Reviewer, changing its public link. This needs to be updated in docs page

making landing page UI

DOD

• UI design
• complete the code
• deployed

Create repository profile page

Dod -

• UI for repo profile page
• backend for repo profile page
• end-to-end tested and released

Browser extension detection on website

On the website, for a logged in user, if it is open on a desktop, we would like to automatically detect whether or not the Vibinex browser extension is installed on it or not. And if not, we would like to show a banner right below the NavBar or MainAppBar.

More details are mentioned in this Alokit Epic.

Cache bursting

The old Vibinex website is saved in the cache of all the people who have ever opened it. This doesn't let them see the new website. For us, we have "cleared browser data" to get rid of the old website from our browser cache, but we cannot expect all our users to do that.

Cache bursting is the technique used to deal with this (told to me by Shivam Arora of ShareChat).

Slack invitation should be more controlled

Currently, we have created a "forever link" for invitations to Slack, which is not a secure way to conduct things.
Any user can just click on the button and become a full member of our Slack channel with all the rights that any other member has.

We would ideally want to invite users as guests (single-channel or multi-channel guests) and that can be done using this library (also used by Firebase):

https://github.com/thesandlord/SlackEngine

Features section in landing page

Add carousel view for the features section.

Build button in docs should be disabled right? after we get the status `success` in setup instructions.

Pricing page has no eventing

This page contains the details of the contents that should be in the rudderstack event:
https://www.docs.developers.amplitude.com/data/sources/bigquery/#properties-fields

Refresh token needs to be stored during github login

What's stored now -

{"github":{"584758475":{"type":"oauth","scope":"read:user,user:email","access_token":"gho_xWaZgaOEhBCvMUiJIWto6sXoLIx7i6G01PSbS"}}}

Linting standards

We need to create a way for every file to be linted in the same formatting rules, no matter who is contributing to the code.

We need to evaluate the different ways to do this:

1. git hooks
2. GitHub Actions CI/CD
3. EditorConfig + ESLint solution
4. VS Code setting file (.vscode)

We can discuss the pros and cons of different approaches and finalize a method that works best.

UI for instructions on how to connect to repository

• Instructions to setup on Github
• Instructions to setup on BitBucket
• Link on Chrome extension FAB should directly take to the instructions page

Transfer events README from `team-monitor-website` to `analytics` repository and document events from python backend in the same repo

Session object contains secrets. Logged out auth-info is not deleted.

          [e0c8b25](https://github.com/Alokit-Innovations/chrome-extension/pull/86/commits/e0c8b2501846bb504ca81bc8a8a1360f5afa48ba) adds the enhancement over the initial commits to check for the correct auth provider which is logged in. For eg, if user is logged in to Vibinex via Github but is currently on a Bitbucket repo page, then the indicator will still be present due to this check.

However, whilst working on this enhancement, I found that the backend api has a bug, which returns multiple logged in auth tokens if I had previously logged into another provider.
For eg, consider the below condition:

• I logged into Github.
• Next I logged in to Bitbucket.
• Next I use the extension to log out of Vibinex.
• Now I log in via Github only.
• But the api responds with both Github and Bitbucket in its response as shown below.

Originally posted by @AJAYK-01 in vibinex/chrome-extension#86 (comment)

Chrome extension POC -- editing the UI of github.com/[/s]+/[/s]+/pull/[/d]/files page

Create a chrome extension which does the following:

• Detects when the URL matches the pattern mentioned in the title
• When it does: check if we can change the colour of one of the hunks/vibinons, say, from green or red to blue.
• When it does: check if we can overlay a window on top of the file tree on the left.

Repository profile

Currently, the Repository Profile page only shows 2 graphs with dummy data. The following needs to be done:

• Remove the existing graphs (because we are not capturing that information about any of the repositories anymore)
• Add graphs that show the value creation for the repository due to the usage of our tool. (Tick this once the data pipelining is done)
• Show historical review coverage rates in the repository
• Add vertical lines for the times when each developer started using Vibinex (and a thicker line to indicate when Vibinex was installed in the repository)
• Show rework durations over time.

Creating repo list page

Dod -

• Some indication of activity/churn and few other repo-level metrics
• List/grid implementation for now

Coverage definition needs to be mentioned

Create new repository for new website

Even though a lot of work will be copied from the dev-profile-website, we will still need to create a new repository because we want to maintain both these websites on different URLs and for different purposes.

• devprofile.tech -- dev-profile-website --> for individual developers to be able to show off their development experience.
• vibinex.com -- team-monitor-website --> for team leaders to be able to understand and optimize their software development teams.

• Create a duplicate repository
• Transfer all the issues
• Raise the relevant pull requests in the new repository
• Setup the CI/CD/CT (hosting, deployment)

Bug: Repository selection step changes install-id even before DPU has been setup

Repo selection steps in the cases of GitHub individual installation and Bitbucket project installation currently communicate to the DPU the set of selected repositories by updating the install_id (and we also update the repo_config table at the same time, deleting all the rows for repositories that are not selected.

This can create problems when a user already has setup once and comes back to the setup page, but only completes repository selection without re-running the docker. For example:

1. The setup API from the browser extension will not give accurate output
2. No webhook would be set up for the new repositories selected, so Vibinex will not work for them. Plus, since the install_id has been removed from the old repositories, so even if the webhook exists, it will not trigger the DPU to process the pull request.
3. Even manual triggers will stop working for the old repositories, for which the install_id has been deleted.

Access control after login

Instructions docs to be made easily understandable

Following the instructions to install and set up the GitHub App/Actions and the Bitbucket OAuth Consumer/Pipeline is tough.

• Add images/gifs/videos in the instructions
• Add "docs" link in the MainAppBar
• Design the setup page like the "Docs" pages of developer tools.

Optimize query for updating aliases for user (called in u.tsx)

This is an inefficient way to execute this.

1. You are creating a different query for each alias
2. You are creating a different query for each handle in each alias

This can all be done in a single query to the database. That will also handle rollbacks and failures much better than Promise.all.

Originally posted by @avikalpg in #256 (comment)

Build Trigger button does not get disabled after the build is completed