From dc4b059934e8be1d33a89c04e42ec89a81fab244 Mon Sep 17 00:00:00 2001
From: Joao Eduardo Luis <joao@abysmo.io>
Date: Sun, 7 May 2023 10:48:46 +0000
Subject: [PATCH] ghd: add PR details offcanvas

Signed-off-by: Joao Eduardo Luis <joao@abysmo.io>
---
 src-tauri/src/errors.rs                       |   2 +
 src-tauri/src/gh.rs                           |  39 ++-
 src-tauri/src/gh/gql.rs                       | 229 ++++++++++++-
 src-tauri/src/gh/gql/custom_types.rs          |   1 +
 src-tauri/src/gh/gql/queries.graphql          |  63 ++++
 src-tauri/src/gh/gql/queries.rs               | 300 +++++++++++++++++-
 src-tauri/src/gh/prs.rs                       |  34 +-
 src-tauri/src/gh/types.rs                     |  48 ++-
 src-tauri/src/main.rs                         |  25 +-
 src/app/app.module.ts                         |   6 +
 .../pull-request-details.component.html       |  80 +++++
 .../pull-request-details.component.scss       |   0
 .../pull-request-details.component.spec.ts    |  22 ++
 .../pull-request-details.component.ts         |  51 +++
 .../pull-requests-table.component.html        |   6 +-
 .../pull-requests-table.component.ts          |  14 +
 src/app/shared/services/tauri.service.ts      |   6 +-
 src/app/shared/types.ts                       |  42 +++
 src/styles.scss                               |   4 +
 19 files changed, 951 insertions(+), 21 deletions(-)
 create mode 100644 src/app/pages/dashboard/pull-request-details/pull-request-details.component.html
 create mode 100644 src/app/pages/dashboard/pull-request-details/pull-request-details.component.scss
 create mode 100644 src/app/pages/dashboard/pull-request-details/pull-request-details.component.spec.ts
 create mode 100644 src/app/pages/dashboard/pull-request-details/pull-request-details.component.ts

diff --git a/src-tauri/src/errors.rs b/src-tauri/src/errors.rs
index 91319a0..6187a67 100644
--- a/src-tauri/src/errors.rs
+++ b/src-tauri/src/errors.rs
@@ -23,4 +23,6 @@ pub enum GHDError {
     UnknownError,
     NotFoundError,
     DBVersionInTheFuture,
+    RepositoryNotFoundError,
+    PullRequestNotFoundError,
 }
diff --git a/src-tauri/src/gh.rs b/src-tauri/src/gh.rs
index 21d7039..d37e1f9 100644
--- a/src-tauri/src/gh.rs
+++ b/src-tauri/src/gh.rs
@@ -17,7 +17,7 @@ use sqlx::Row;
 
 use crate::{db::DB, errors::GHDError};
 
-use self::types::{GithubUser, PullRequestTableEntry};
+use self::types::{GithubUser, PullRequestInfo, PullRequestTableEntry};
 
 pub mod api;
 pub mod gql;
@@ -470,6 +470,43 @@ impl Github {
         prs::get_involved_prs(&db, &login).await
     }
 
+    /// Obtain a specific Pull Request's information.
+    ///
+    /// # Arguments
+    ///
+    /// * `db` - A GHD Database handle.
+    /// * `prid` - A Pull Request database ID.
+    ///
+    pub async fn get_pull_request_info(
+        self: &Self,
+        db: &DB,
+        prid: &i64,
+    ) -> Result<PullRequestInfo, GHDError> {
+        let entry = match prs::get_issue_by_id(&db, &prid).await {
+            Err(err) => return Err(err),
+            Ok(res) => res,
+        };
+
+        let token = match self.get_token(&db).await {
+            Ok(t) => t.clone(),
+            Err(err) => return Err(err),
+        };
+
+        let res = match gql::get_pull_request_info(
+            &token,
+            &entry.repo_owner,
+            &entry.repo_name,
+            &entry.number,
+        )
+        .await
+        {
+            Ok(r) => r,
+            Err(err) => return Err(err),
+        };
+
+        Ok(res)
+    }
+
     /// Marks a specified Pull Request as having been viewed.
     ///
     /// # Arguments
diff --git a/src-tauri/src/gh/gql.rs b/src-tauri/src/gh/gql.rs
index 3f883a1..036bb29 100644
--- a/src-tauri/src/gh/gql.rs
+++ b/src-tauri/src/gh/gql.rs
@@ -18,20 +18,27 @@ mod queries;
 use graphql_client::GraphQLQuery;
 use queries::{user_info, UserInfo};
 
-use crate::errors::GHDError;
+use crate::{
+    errors::GHDError,
+    gh::types::{Label, UserReview},
+};
 
 use self::queries::{
+    get_pull_request_info::{
+        self, GetPullRequestInfoRepositoryPullRequestAuthor,
+    },
     search_issues::{
-        self, IssueState, PullRequestReviewDecision, PullRequestState,
-        SearchIssuesSearchNodes, SearchIssuesSearchNodesOnIssue,
-        SearchIssuesSearchNodesOnIssueAuthor,
+        self, IssueState, PullRequestReviewDecision, SearchIssuesSearchNodes,
+        SearchIssuesSearchNodesOnIssue, SearchIssuesSearchNodesOnIssueAuthor,
         SearchIssuesSearchNodesOnPullRequest,
         SearchIssuesSearchNodesOnPullRequestAuthor, UserFragment,
     },
-    SearchIssues,
+    GetPullRequestInfo, SearchIssues,
 };
 
-use super::types::{Issue, PullRequest, UserUpdate};
+use super::types::{
+    GithubUser, Issue, Milestone, PullRequest, PullRequestInfo, UserUpdate,
+};
 
 #[derive(serde::Deserialize, Debug)]
 struct GQLResData<T> {
@@ -215,6 +222,43 @@ impl GithubGQLRequest {
 
         Ok(response_data)
     }
+
+    /// Obtain a given Pull Request's information.
+    ///
+    /// # Arguments
+    ///
+    /// * `repo_owner` - String containing the Pull Request's repository owner.
+    /// * `repo_name` - String containing the Pull Request's repository name.
+    /// * `pr_number` - The Pull Request's number.
+    ///
+    async fn get_pull_request_info(
+        self: &Self,
+        repo_owner: &String,
+        repo_name: &String,
+        pr_number: &i64,
+    ) -> Result<get_pull_request_info::ResponseData, GHDError> {
+        let vars = get_pull_request_info::Variables {
+            owner: repo_owner.clone(),
+            repo: repo_name.clone(),
+            prid: pr_number.clone(),
+        };
+        let response_data: get_pull_request_info::ResponseData = match self
+            .execute::<GetPullRequestInfo, get_pull_request_info::ResponseData>(
+                vars,
+            )
+            .await
+        {
+            Ok(res) => res,
+            Err(GHDError::UnknownError) => {
+                panic!("error: unknown error");
+            }
+            Err(err) => {
+                return Err(err);
+            }
+        };
+
+        Ok(response_data)
+    }
 }
 
 /// Obtain all open issues for the provided `login`. This includes Pull
@@ -392,10 +436,10 @@ fn get_issue_from_pull_request(
         repo_name: node.repository.name.clone(),
         repo_owner: node.repository.owner.login.clone(),
         state: match &node.state {
-            PullRequestState::OPEN => String::from("open"),
-            PullRequestState::CLOSED => String::from("closed"),
-            PullRequestState::MERGED => String::from("merged"),
-            PullRequestState::Other(v) => v.clone(),
+            search_issues::PullRequestState::OPEN => String::from("open"),
+            search_issues::PullRequestState::CLOSED => String::from("closed"),
+            search_issues::PullRequestState::MERGED => String::from("merged"),
+            search_issues::PullRequestState::Other(v) => v.clone(),
         },
         created_at: node.created_at,
         updated_at: node.updated_at,
@@ -405,6 +449,171 @@ fn get_issue_from_pull_request(
     }
 }
 
+/// Obtain a given Pull Request's information.
+///
+pub async fn get_pull_request_info(
+    token: &String,
+    repo_owner: &String,
+    repo_name: &String,
+    pr_number: &i64,
+) -> Result<PullRequestInfo, GHDError> {
+    // helper types
+    type PRInfoAuthor = GetPullRequestInfoRepositoryPullRequestAuthor;
+    type PRState = get_pull_request_info::PullRequestState;
+    type PRMilestoneState = get_pull_request_info::MilestoneState;
+    type ReviewAuthor = get_pull_request_info::GetPullRequestInfoRepositoryPullRequestReviewsNodesAuthor;
+    type ReviewState = get_pull_request_info::PullRequestReviewState;
+
+    let res = match GithubGQLRequest::new(&token)
+        .get_pull_request_info(&repo_owner, &repo_name, &pr_number)
+        .await
+    {
+        Ok(v) => v,
+        Err(err) => return Err(err),
+    };
+
+    let repo = match res.repository {
+        None => return Err(GHDError::RepositoryNotFoundError),
+        Some(v) => v,
+    };
+    let pr = match repo.pull_request {
+        None => return Err(GHDError::PullRequestNotFoundError),
+        Some(v) => v,
+    };
+
+    let unknown_user = GithubUser {
+        id: -1,
+        login: String::from("unknown"),
+        name: String::from("unknown"),
+        avatar_url: String::new(),
+    };
+
+    let author: GithubUser = match pr.author {
+        None => unknown_user.clone(),
+        Some(v) => match v {
+            PRInfoAuthor::User(user) => GithubUser {
+                id: user.database_id.unwrap_or(-1),
+                login: user.login,
+                name: user.name.unwrap_or(String::from("unknown")),
+                avatar_url: user.avatar_url,
+            },
+            _ => unknown_user.clone(),
+        },
+    };
+
+    let mut labels: Vec<Label> = vec![];
+    if let Some(l) = &pr.labels {
+        if let Some(lst) = &l.nodes {
+            for entry in lst {
+                if let Some(label) = &entry {
+                    labels.push(Label {
+                        name: label.name.clone(),
+                        color: label.color.clone(),
+                    });
+                }
+            }
+        }
+    }
+
+    let mut participants: Vec<GithubUser> = vec![];
+    if let Some(lst) = &pr.participants.nodes {
+        for entry in lst {
+            if let Some(user) = &entry {
+                participants.push(GithubUser {
+                    id: match &user.database_id {
+                        None => -1,
+                        Some(v) => *v,
+                    },
+                    login: user.login.clone(),
+                    name: match &user.name {
+                        None => String::from("unknown"),
+                        Some(v) => v.clone(),
+                    },
+                    avatar_url: user.avatar_url.clone(),
+                });
+            }
+        }
+    }
+
+    let mut reviews: Vec<UserReview> = vec![];
+    if let Some(r) = &pr.reviews {
+        if let Some(lst) = &r.nodes {
+            for entry in lst {
+                if let Some(rev) = &entry {
+                    reviews.push(UserReview {
+                        author: match &rev.author {
+                            None => unknown_user.clone(),
+                            Some(ReviewAuthor::User(u)) => GithubUser {
+                                id: u.database_id.unwrap_or(-1),
+                                login: u.login.clone(),
+                                name: match &u.name {
+                                    None => String::from("unknown"),
+                                    Some(v) => v.clone(),
+                                },
+                                avatar_url: u.avatar_url.clone(),
+                            },
+                            Some(_) => unknown_user.clone(),
+                        },
+                        state: match &rev.state {
+                            ReviewState::APPROVED => String::from("approved"),
+                            ReviewState::CHANGES_REQUESTED => {
+                                String::from("changes_requested")
+                            }
+                            ReviewState::COMMENTED => String::from("commented"),
+                            ReviewState::DISMISSED => String::from("dismissed"),
+                            ReviewState::PENDING => String::from("pending"),
+                            ReviewState::Other(v) => v.clone(),
+                        },
+                    });
+                }
+            }
+        }
+    }
+
+    Ok(PullRequestInfo {
+        number: pr.number,
+        title: pr.title,
+        body_html: pr.body_html,
+        author,
+        repo_owner: pr.repository.owner.login,
+        repo_name: pr.repository.name,
+        url: pr.url,
+        state: match &pr.state {
+            PRState::OPEN => String::from("open"),
+            PRState::CLOSED => String::from("closed"),
+            PRState::MERGED => String::from("merged"),
+            PRState::Other(v) => v.clone(),
+        },
+        is_draft: pr.is_draft,
+        milestone: match &pr.milestone {
+            None => None,
+            Some(m) => Some(Milestone {
+                title: m.title.clone(),
+                state: match &m.state {
+                    PRMilestoneState::OPEN => String::from("open"),
+                    PRMilestoneState::CLOSED => String::from("closed"),
+                    PRMilestoneState::Other(v) => v.clone(),
+                },
+                due_on: match &m.due_on {
+                    None => None,
+                    Some(d) => Some(*d),
+                },
+                due_on_ts: match &m.due_on {
+                    None => None,
+                    Some(d) => Some(d.timestamp()),
+                },
+            }),
+        },
+        labels,
+        total_comments: match &pr.total_comments_count {
+            None => 0,
+            Some(v) => *v,
+        },
+        participants,
+        reviews,
+    })
+}
+
 /// Obtain a user `login` and `id` from a given GraphQL `User Fragment`.
 ///
 fn get_username_and_id(user: &UserFragment) -> (String, i64) {
diff --git a/src-tauri/src/gh/gql/custom_types.rs b/src-tauri/src/gh/gql/custom_types.rs
index 71560a1..eacd467 100644
--- a/src-tauri/src/gh/gql/custom_types.rs
+++ b/src-tauri/src/gh/gql/custom_types.rs
@@ -1,3 +1,4 @@
 #[allow(clippy::upper_case_acronyms)]
 pub type URI = String;
 pub type DateTime = chrono::DateTime<chrono::Utc>;
+pub type HTML = String;
diff --git a/src-tauri/src/gh/gql/queries.graphql b/src-tauri/src/gh/gql/queries.graphql
index c95aca0..ea3ef4c 100644
--- a/src-tauri/src/gh/gql/queries.graphql
+++ b/src-tauri/src/gh/gql/queries.graphql
@@ -55,6 +55,8 @@ query UserInfo($login: String!) {
 fragment UserFragment on User {
   login
   databaseId
+  name
+  avatarUrl
 }
 
 query SearchIssues($q: String!) {
@@ -129,3 +131,64 @@ query SearchIssues($q: String!) {
     }
   }
 }
+
+query GetPullRequestInfo($owner: String!, $repo: String!, $prid: Int!) {
+  repository(owner: $owner, name: $repo) {
+    pullRequest(number: $prid) {
+      number
+      title
+      bodyHTML
+      author {
+        __typename
+        ...UserFragment
+      }
+      repository {
+        owner {
+          __typename
+          login
+        }
+        name
+      }
+      url
+      state
+      isDraft
+      milestone {
+        title
+        state
+        dueOn
+      }
+      labels(first: 100) {
+        nodes {
+          color
+          name
+        }
+      }
+      totalCommentsCount
+      comments(first: 100) {
+        nodes {
+          author {
+            __typename
+            ...UserFragment
+          }
+        }
+      }
+      reviews(first: 100) {
+        nodes {
+          author {
+            __typename
+            ...UserFragment
+          }
+          state
+        }
+      }
+      participants(first: 100) {
+        nodes {
+          login
+          name
+          avatarUrl
+          databaseId
+        }
+      }
+    }
+  }
+}
diff --git a/src-tauri/src/gh/gql/queries.rs b/src-tauri/src/gh/gql/queries.rs
index 5f6db91..3acc045 100644
--- a/src-tauri/src/gh/gql/queries.rs
+++ b/src-tauri/src/gh/gql/queries.rs
@@ -4,7 +4,7 @@ pub mod user_info {
     #![allow(dead_code)]
     use std::result::Result;
     pub const OPERATION_NAME: &str = "UserInfo";
-    pub const QUERY : & str = "query UserInfo($login: String!) {\n  user(login: $login) {\n    name\n    login\n    avatarUrl\n    databaseId\n    pullRequests(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        totalCommentsCount\n        createdAt\n        updatedAt\n        isDraft\n        milestone {\n          id\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n      }\n    }\n    issues(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        updatedAt\n        author {\n          __typename\n          login\n        }\n        participants(first: 1) {\n          totalCount\n        }\n        assignees(first: 10) {\n          nodes {\n            login\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment UserFragment on User {\n  login\n  databaseId\n}\n\nquery SearchIssues($q: String!) {\n  search(first: 100, query: $q, type: ISSUE) {\n    nodes {\n      __typename\n      ... on PullRequest {\n        title\n        number\n        databaseId\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        url\n        state\n        isDraft\n        totalCommentsCount\n        reviewRequests(first: 30) {\n          nodes {\n            requestedReviewer {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n        createdAt\n        updatedAt\n        closedAt\n        mergedAt\n      }\n      ... on Issue {\n        title\n        number\n        databaseId\n        url\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        state\n        createdAt\n        updatedAt\n        closedAt\n        comments(first: 100) {\n          nodes {\n            author {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n      }\n    }\n  }\n}\n" ;
+    pub const QUERY : & str = "query UserInfo($login: String!) {\n  user(login: $login) {\n    name\n    login\n    avatarUrl\n    databaseId\n    pullRequests(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        totalCommentsCount\n        createdAt\n        updatedAt\n        isDraft\n        milestone {\n          id\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n      }\n    }\n    issues(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        updatedAt\n        author {\n          __typename\n          login\n        }\n        participants(first: 1) {\n          totalCount\n        }\n        assignees(first: 10) {\n          nodes {\n            login\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment UserFragment on User {\n  login\n  databaseId\n  name\n  avatarUrl\n}\n\nquery SearchIssues($q: String!) {\n  search(first: 100, query: $q, type: ISSUE) {\n    nodes {\n      __typename\n      ... on PullRequest {\n        title\n        number\n        databaseId\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        url\n        state\n        isDraft\n        totalCommentsCount\n        reviewRequests(first: 30) {\n          nodes {\n            requestedReviewer {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n        createdAt\n        updatedAt\n        closedAt\n        mergedAt\n      }\n      ... on Issue {\n        title\n        number\n        databaseId\n        url\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        state\n        createdAt\n        updatedAt\n        closedAt\n        comments(first: 100) {\n          nodes {\n            author {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nquery GetPullRequestInfo($owner: String!, $repo: String!, $prid: Int!) {\n  repository(owner: $owner, name: $repo) {\n    pullRequest(number: $prid) {\n      number\n      title\n      bodyHTML\n      author {\n        __typename\n        ...UserFragment\n      }\n      repository {\n        owner {\n          __typename\n          login\n        }\n        name\n      }\n      url\n      state\n      isDraft\n      milestone {\n        title\n        state\n        dueOn\n      }\n      labels(first: 100) {\n        nodes {\n          color\n          name\n        }\n      }\n      totalCommentsCount\n      comments(first: 100) {\n        nodes {\n          author {\n            __typename\n            ...UserFragment\n          }\n        }\n      }\n      reviews(first: 100) {\n        nodes {\n          author {\n            __typename\n            ...UserFragment\n          }\n          state\n        }\n      }\n      participants(first: 100) {\n        nodes {\n          login\n          name\n          avatarUrl\n          databaseId\n        }\n      }\n    }\n  }\n}\n" ;
     use super::*;
     use serde::{Deserialize, Serialize};
     #[allow(dead_code)]
@@ -190,7 +190,7 @@ pub mod search_issues {
     #![allow(dead_code)]
     use std::result::Result;
     pub const OPERATION_NAME: &str = "SearchIssues";
-    pub const QUERY : & str = "query UserInfo($login: String!) {\n  user(login: $login) {\n    name\n    login\n    avatarUrl\n    databaseId\n    pullRequests(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        totalCommentsCount\n        createdAt\n        updatedAt\n        isDraft\n        milestone {\n          id\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n      }\n    }\n    issues(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        updatedAt\n        author {\n          __typename\n          login\n        }\n        participants(first: 1) {\n          totalCount\n        }\n        assignees(first: 10) {\n          nodes {\n            login\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment UserFragment on User {\n  login\n  databaseId\n}\n\nquery SearchIssues($q: String!) {\n  search(first: 100, query: $q, type: ISSUE) {\n    nodes {\n      __typename\n      ... on PullRequest {\n        title\n        number\n        databaseId\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        url\n        state\n        isDraft\n        totalCommentsCount\n        reviewRequests(first: 30) {\n          nodes {\n            requestedReviewer {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n        createdAt\n        updatedAt\n        closedAt\n        mergedAt\n      }\n      ... on Issue {\n        title\n        number\n        databaseId\n        url\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        state\n        createdAt\n        updatedAt\n        closedAt\n        comments(first: 100) {\n          nodes {\n            author {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n      }\n    }\n  }\n}\n" ;
+    pub const QUERY : & str = "query UserInfo($login: String!) {\n  user(login: $login) {\n    name\n    login\n    avatarUrl\n    databaseId\n    pullRequests(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        totalCommentsCount\n        createdAt\n        updatedAt\n        isDraft\n        milestone {\n          id\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n      }\n    }\n    issues(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        updatedAt\n        author {\n          __typename\n          login\n        }\n        participants(first: 1) {\n          totalCount\n        }\n        assignees(first: 10) {\n          nodes {\n            login\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment UserFragment on User {\n  login\n  databaseId\n  name\n  avatarUrl\n}\n\nquery SearchIssues($q: String!) {\n  search(first: 100, query: $q, type: ISSUE) {\n    nodes {\n      __typename\n      ... on PullRequest {\n        title\n        number\n        databaseId\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        url\n        state\n        isDraft\n        totalCommentsCount\n        reviewRequests(first: 30) {\n          nodes {\n            requestedReviewer {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n        createdAt\n        updatedAt\n        closedAt\n        mergedAt\n      }\n      ... on Issue {\n        title\n        number\n        databaseId\n        url\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        state\n        createdAt\n        updatedAt\n        closedAt\n        comments(first: 100) {\n          nodes {\n            author {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nquery GetPullRequestInfo($owner: String!, $repo: String!, $prid: Int!) {\n  repository(owner: $owner, name: $repo) {\n    pullRequest(number: $prid) {\n      number\n      title\n      bodyHTML\n      author {\n        __typename\n        ...UserFragment\n      }\n      repository {\n        owner {\n          __typename\n          login\n        }\n        name\n      }\n      url\n      state\n      isDraft\n      milestone {\n        title\n        state\n        dueOn\n      }\n      labels(first: 100) {\n        nodes {\n          color\n          name\n        }\n      }\n      totalCommentsCount\n      comments(first: 100) {\n        nodes {\n          author {\n            __typename\n            ...UserFragment\n          }\n        }\n      }\n      reviews(first: 100) {\n        nodes {\n          author {\n            __typename\n            ...UserFragment\n          }\n          state\n        }\n      }\n      participants(first: 100) {\n        nodes {\n          login\n          name\n          avatarUrl\n          databaseId\n        }\n      }\n    }\n  }\n}\n" ;
     use super::*;
     use serde::{Deserialize, Serialize};
     #[allow(dead_code)]
@@ -315,6 +315,9 @@ pub mod search_issues {
         pub login: String,
         #[serde(rename = "databaseId")]
         pub database_id: Option<Int>,
+        pub name: Option<String>,
+        #[serde(rename = "avatarUrl")]
+        pub avatar_url: URI,
     }
     #[derive(Deserialize, Debug)]
     pub struct ResponseData {
@@ -493,3 +496,296 @@ impl graphql_client::GraphQLQuery for SearchIssues {
         }
     }
 }
+pub struct GetPullRequestInfo;
+pub mod get_pull_request_info {
+    #![allow(dead_code)]
+    use std::result::Result;
+    pub const OPERATION_NAME: &str = "GetPullRequestInfo";
+    pub const QUERY : & str = "query UserInfo($login: String!) {\n  user(login: $login) {\n    name\n    login\n    avatarUrl\n    databaseId\n    pullRequests(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        totalCommentsCount\n        createdAt\n        updatedAt\n        isDraft\n        milestone {\n          id\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n      }\n    }\n    issues(first: 30, states: OPEN) {\n      nodes {\n        title\n        number\n        databaseId\n        updatedAt\n        author {\n          __typename\n          login\n        }\n        participants(first: 1) {\n          totalCount\n        }\n        assignees(first: 10) {\n          nodes {\n            login\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment UserFragment on User {\n  login\n  databaseId\n  name\n  avatarUrl\n}\n\nquery SearchIssues($q: String!) {\n  search(first: 100, query: $q, type: ISSUE) {\n    nodes {\n      __typename\n      ... on PullRequest {\n        title\n        number\n        databaseId\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        url\n        state\n        isDraft\n        totalCommentsCount\n        reviewRequests(first: 30) {\n          nodes {\n            requestedReviewer {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n        reviewDecision\n        reviews(first: 1) {\n          totalCount\n        }\n        createdAt\n        updatedAt\n        closedAt\n        mergedAt\n      }\n      ... on Issue {\n        title\n        number\n        databaseId\n        url\n        author {\n          __typename\n          ...UserFragment\n        }\n        repository {\n          owner {\n            __typename\n            login\n          }\n          name\n        }\n        state\n        createdAt\n        updatedAt\n        closedAt\n        comments(first: 100) {\n          nodes {\n            author {\n              __typename\n              ...UserFragment\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nquery GetPullRequestInfo($owner: String!, $repo: String!, $prid: Int!) {\n  repository(owner: $owner, name: $repo) {\n    pullRequest(number: $prid) {\n      number\n      title\n      bodyHTML\n      author {\n        __typename\n        ...UserFragment\n      }\n      repository {\n        owner {\n          __typename\n          login\n        }\n        name\n      }\n      url\n      state\n      isDraft\n      milestone {\n        title\n        state\n        dueOn\n      }\n      labels(first: 100) {\n        nodes {\n          color\n          name\n        }\n      }\n      totalCommentsCount\n      comments(first: 100) {\n        nodes {\n          author {\n            __typename\n            ...UserFragment\n          }\n        }\n      }\n      reviews(first: 100) {\n        nodes {\n          author {\n            __typename\n            ...UserFragment\n          }\n          state\n        }\n      }\n      participants(first: 100) {\n        nodes {\n          login\n          name\n          avatarUrl\n          databaseId\n        }\n      }\n    }\n  }\n}\n" ;
+    use super::*;
+    use serde::{Deserialize, Serialize};
+    #[allow(dead_code)]
+    type Boolean = bool;
+    #[allow(dead_code)]
+    type Float = f64;
+    #[allow(dead_code)]
+    type Int = i64;
+    #[allow(dead_code)]
+    type ID = String;
+    type DateTime = crate::gh::gql::custom_types::DateTime;
+    type HTML = crate::gh::gql::custom_types::HTML;
+    type URI = crate::gh::gql::custom_types::URI;
+    #[derive(Debug)]
+    pub enum MilestoneState {
+        CLOSED,
+        OPEN,
+        Other(String),
+    }
+    impl ::serde::Serialize for MilestoneState {
+        fn serialize<S: serde::Serializer>(
+            &self,
+            ser: S,
+        ) -> Result<S::Ok, S::Error> {
+            ser.serialize_str(match *self {
+                MilestoneState::CLOSED => "CLOSED",
+                MilestoneState::OPEN => "OPEN",
+                MilestoneState::Other(ref s) => &s,
+            })
+        }
+    }
+    impl<'de> ::serde::Deserialize<'de> for MilestoneState {
+        fn deserialize<D: ::serde::Deserializer<'de>>(
+            deserializer: D,
+        ) -> Result<Self, D::Error> {
+            let s: String = ::serde::Deserialize::deserialize(deserializer)?;
+            match s.as_str() {
+                "CLOSED" => Ok(MilestoneState::CLOSED),
+                "OPEN" => Ok(MilestoneState::OPEN),
+                _ => Ok(MilestoneState::Other(s)),
+            }
+        }
+    }
+    #[derive(Debug)]
+    pub enum PullRequestReviewState {
+        APPROVED,
+        CHANGES_REQUESTED,
+        COMMENTED,
+        DISMISSED,
+        PENDING,
+        Other(String),
+    }
+    impl ::serde::Serialize for PullRequestReviewState {
+        fn serialize<S: serde::Serializer>(
+            &self,
+            ser: S,
+        ) -> Result<S::Ok, S::Error> {
+            ser.serialize_str(match *self {
+                PullRequestReviewState::APPROVED => "APPROVED",
+                PullRequestReviewState::CHANGES_REQUESTED => {
+                    "CHANGES_REQUESTED"
+                }
+                PullRequestReviewState::COMMENTED => "COMMENTED",
+                PullRequestReviewState::DISMISSED => "DISMISSED",
+                PullRequestReviewState::PENDING => "PENDING",
+                PullRequestReviewState::Other(ref s) => &s,
+            })
+        }
+    }
+    impl<'de> ::serde::Deserialize<'de> for PullRequestReviewState {
+        fn deserialize<D: ::serde::Deserializer<'de>>(
+            deserializer: D,
+        ) -> Result<Self, D::Error> {
+            let s: String = ::serde::Deserialize::deserialize(deserializer)?;
+            match s.as_str() {
+                "APPROVED" => Ok(PullRequestReviewState::APPROVED),
+                "CHANGES_REQUESTED" => {
+                    Ok(PullRequestReviewState::CHANGES_REQUESTED)
+                }
+                "COMMENTED" => Ok(PullRequestReviewState::COMMENTED),
+                "DISMISSED" => Ok(PullRequestReviewState::DISMISSED),
+                "PENDING" => Ok(PullRequestReviewState::PENDING),
+                _ => Ok(PullRequestReviewState::Other(s)),
+            }
+        }
+    }
+    #[derive(Debug)]
+    pub enum PullRequestState {
+        CLOSED,
+        MERGED,
+        OPEN,
+        Other(String),
+    }
+    impl ::serde::Serialize for PullRequestState {
+        fn serialize<S: serde::Serializer>(
+            &self,
+            ser: S,
+        ) -> Result<S::Ok, S::Error> {
+            ser.serialize_str(match *self {
+                PullRequestState::CLOSED => "CLOSED",
+                PullRequestState::MERGED => "MERGED",
+                PullRequestState::OPEN => "OPEN",
+                PullRequestState::Other(ref s) => &s,
+            })
+        }
+    }
+    impl<'de> ::serde::Deserialize<'de> for PullRequestState {
+        fn deserialize<D: ::serde::Deserializer<'de>>(
+            deserializer: D,
+        ) -> Result<Self, D::Error> {
+            let s: String = ::serde::Deserialize::deserialize(deserializer)?;
+            match s.as_str() {
+                "CLOSED" => Ok(PullRequestState::CLOSED),
+                "MERGED" => Ok(PullRequestState::MERGED),
+                "OPEN" => Ok(PullRequestState::OPEN),
+                _ => Ok(PullRequestState::Other(s)),
+            }
+        }
+    }
+    #[derive(Serialize)]
+    pub struct Variables {
+        pub owner: String,
+        pub repo: String,
+        pub prid: Int,
+    }
+    impl Variables {}
+    #[derive(Deserialize, Debug)]
+    pub struct UserFragment {
+        pub login: String,
+        #[serde(rename = "databaseId")]
+        pub database_id: Option<Int>,
+        pub name: Option<String>,
+        #[serde(rename = "avatarUrl")]
+        pub avatar_url: URI,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct ResponseData {
+        pub repository: Option<GetPullRequestInfoRepository>,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepository {
+        #[serde(rename = "pullRequest")]
+        pub pull_request: Option<GetPullRequestInfoRepositoryPullRequest>,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequest {
+        pub number: Int,
+        pub title: String,
+        #[serde(rename = "bodyHTML")]
+        pub body_html: HTML,
+        pub author: Option<GetPullRequestInfoRepositoryPullRequestAuthor>,
+        pub repository: GetPullRequestInfoRepositoryPullRequestRepository,
+        pub url: URI,
+        pub state: PullRequestState,
+        #[serde(rename = "isDraft")]
+        pub is_draft: Boolean,
+        pub milestone: Option<GetPullRequestInfoRepositoryPullRequestMilestone>,
+        pub labels: Option<GetPullRequestInfoRepositoryPullRequestLabels>,
+        #[serde(rename = "totalCommentsCount")]
+        pub total_comments_count: Option<Int>,
+        pub comments: GetPullRequestInfoRepositoryPullRequestComments,
+        pub reviews: Option<GetPullRequestInfoRepositoryPullRequestReviews>,
+        pub participants: GetPullRequestInfoRepositoryPullRequestParticipants,
+    }
+    #[derive(Deserialize, Debug)]
+    #[serde(tag = "__typename")]
+    pub enum GetPullRequestInfoRepositoryPullRequestAuthor {
+        Bot,
+        EnterpriseUserAccount,
+        Mannequin,
+        Organization,
+        User(GetPullRequestInfoRepositoryPullRequestAuthorOnUser),
+    }
+    pub type GetPullRequestInfoRepositoryPullRequestAuthorOnUser = UserFragment;
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestRepository {
+        pub owner: GetPullRequestInfoRepositoryPullRequestRepositoryOwner,
+        pub name: String,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestRepositoryOwner {
+        pub login: String,
+        #[serde(flatten)]
+        pub on: GetPullRequestInfoRepositoryPullRequestRepositoryOwnerOn,
+    }
+    #[derive(Deserialize, Debug)]
+    #[serde(tag = "__typename")]
+    pub enum GetPullRequestInfoRepositoryPullRequestRepositoryOwnerOn {
+        Organization,
+        User,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestMilestone {
+        pub title: String,
+        pub state: MilestoneState,
+        #[serde(rename = "dueOn")]
+        pub due_on: Option<DateTime>,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestLabels {
+        pub nodes: Option<
+            Vec<Option<GetPullRequestInfoRepositoryPullRequestLabelsNodes>>,
+        >,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestLabelsNodes {
+        pub color: String,
+        pub name: String,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestComments {
+        pub nodes: Option<
+            Vec<Option<GetPullRequestInfoRepositoryPullRequestCommentsNodes>>,
+        >,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestCommentsNodes {
+        pub author:
+            Option<GetPullRequestInfoRepositoryPullRequestCommentsNodesAuthor>,
+    }
+    #[derive(Deserialize, Debug)]
+    #[serde(tag = "__typename")]
+    pub enum GetPullRequestInfoRepositoryPullRequestCommentsNodesAuthor {
+        Bot,
+        EnterpriseUserAccount,
+        Mannequin,
+        Organization,
+        User(GetPullRequestInfoRepositoryPullRequestCommentsNodesAuthorOnUser),
+    }
+    pub type GetPullRequestInfoRepositoryPullRequestCommentsNodesAuthorOnUser =
+        UserFragment;
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestReviews {
+        pub nodes: Option<
+            Vec<Option<GetPullRequestInfoRepositoryPullRequestReviewsNodes>>,
+        >,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestReviewsNodes {
+        pub author:
+            Option<GetPullRequestInfoRepositoryPullRequestReviewsNodesAuthor>,
+        pub state: PullRequestReviewState,
+    }
+    #[derive(Deserialize, Debug)]
+    #[serde(tag = "__typename")]
+    pub enum GetPullRequestInfoRepositoryPullRequestReviewsNodesAuthor {
+        Bot,
+        EnterpriseUserAccount,
+        Mannequin,
+        Organization,
+        User(GetPullRequestInfoRepositoryPullRequestReviewsNodesAuthorOnUser),
+    }
+    pub type GetPullRequestInfoRepositoryPullRequestReviewsNodesAuthorOnUser =
+        UserFragment;
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestParticipants {
+        pub nodes: Option<
+            Vec<
+                Option<
+                    GetPullRequestInfoRepositoryPullRequestParticipantsNodes,
+                >,
+            >,
+        >,
+    }
+    #[derive(Deserialize, Debug)]
+    pub struct GetPullRequestInfoRepositoryPullRequestParticipantsNodes {
+        pub login: String,
+        pub name: Option<String>,
+        #[serde(rename = "avatarUrl")]
+        pub avatar_url: URI,
+        #[serde(rename = "databaseId")]
+        pub database_id: Option<Int>,
+    }
+}
+impl graphql_client::GraphQLQuery for GetPullRequestInfo {
+    type Variables = get_pull_request_info::Variables;
+    type ResponseData = get_pull_request_info::ResponseData;
+    fn build_query(
+        variables: Self::Variables,
+    ) -> ::graphql_client::QueryBody<Self::Variables> {
+        graphql_client::QueryBody {
+            variables,
+            query: get_pull_request_info::QUERY,
+            operation_name: get_pull_request_info::OPERATION_NAME,
+        }
+    }
+}
diff --git a/src-tauri/src/gh/prs.rs b/src-tauri/src/gh/prs.rs
index 0526d84..24e73a3 100644
--- a/src-tauri/src/gh/prs.rs
+++ b/src-tauri/src/gh/prs.rs
@@ -16,7 +16,9 @@ use log::info;
 
 use crate::{common, db::DB, errors::GHDError};
 
-use super::types::{Issue, PullRequest, PullRequestTableEntry};
+use super::types::{
+    Issue, IssueTableEntry, PullRequest, PullRequestTableEntry,
+};
 
 /// Obtain all Pull Requests from the database.
 ///
@@ -449,3 +451,33 @@ pub async fn archive_issue_many(
 
     Ok(())
 }
+
+/// Obtain a specific issue by ID.
+///
+/// # Arguments
+///
+/// * `db` - A GHD Database handle.
+/// * `id` - An Issue database ID.
+///
+pub async fn get_issue_by_id(
+    db: &DB,
+    id: &i64,
+) -> Result<IssueTableEntry, GHDError> {
+    match sqlx::query_as::<_, IssueTableEntry>(
+        "
+        SELECT * from issues WHERE id = ?
+        ",
+    )
+    .bind(&id)
+    .fetch_one(db.pool())
+    .await
+    {
+        Ok(res) => Ok(res),
+        Err(sqlx::Error::RowNotFound) => {
+            return Err(GHDError::PullRequestNotFoundError);
+        }
+        Err(_) => {
+            return Err(GHDError::UnknownError);
+        }
+    }
+}
diff --git a/src-tauri/src/gh/types.rs b/src-tauri/src/gh/types.rs
index a79f52e..a7f18ec 100644
--- a/src-tauri/src/gh/types.rs
+++ b/src-tauri/src/gh/types.rs
@@ -16,7 +16,7 @@
 
 /// Describes a user, as it is kept in the database.
 ///
-#[derive(sqlx::FromRow, serde::Serialize)]
+#[derive(sqlx::FromRow, serde::Serialize, Clone)]
 pub struct GithubUser {
     pub id: i64,
     pub login: String,
@@ -104,3 +104,49 @@ pub struct UserUpdate {
     pub issues: Vec<Issue>,
     pub prs: Vec<PullRequest>,
 }
+
+/// Represents a Pull Request's detailed information.
+///
+#[derive(serde::Serialize)]
+pub struct PullRequestInfo {
+    pub number: i64,
+    pub title: String,
+    pub body_html: String,
+    pub author: GithubUser,
+    pub repo_owner: String,
+    pub repo_name: String,
+    pub url: String,
+    pub state: String,
+    pub is_draft: bool,
+    pub milestone: Option<Milestone>,
+    pub labels: Vec<Label>,
+    pub total_comments: i64,
+    pub participants: Vec<GithubUser>,
+    pub reviews: Vec<UserReview>,
+}
+
+/// Represents a milestone.
+///
+#[derive(serde::Serialize)]
+pub struct Milestone {
+    pub title: String,
+    pub state: String,
+    pub due_on: Option<chrono::DateTime<chrono::Utc>>,
+    pub due_on_ts: Option<i64>,
+}
+
+/// Represents a label.
+///
+#[derive(serde::Serialize)]
+pub struct Label {
+    pub color: String,
+    pub name: String,
+}
+
+/// Represents a User review
+///
+#[derive(serde::Serialize)]
+pub struct UserReview {
+    pub author: GithubUser,
+    pub state: String,
+}
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index a4a72a7..cae19cb 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -18,7 +18,8 @@
 )]
 
 use errors::GHDError;
-use log::{debug, error, info};
+use gh::types::PullRequestInfo;
+use log::{debug, error, info, warn};
 use tauri::Manager;
 
 mod bg;
@@ -214,6 +215,27 @@ async fn pr_get_list_by_involved(
     }
 }
 
+#[tauri::command]
+async fn pr_get_info(
+    prid: i64,
+    mstate: tauri::State<'_, ManagedState>,
+) -> Result<PullRequestInfo, ()> {
+    let state = &mstate.state().await;
+    let db = &state.db;
+    let gh = &state.gh;
+
+    match gh.get_pull_request_info(&db, &prid).await {
+        Ok(res) => Ok(res),
+        Err(err) => {
+            warn!(
+                "Error obtaining pull request info, id: {}, err: {:?}",
+                prid, err
+            );
+            return Err(());
+        }
+    }
+}
+
 #[tauri::command]
 async fn archive_issue(
     issue_id: i64,
@@ -303,6 +325,7 @@ async fn main() {
             pr_mark_viewed_many,
             pr_get_list_by_author,
             pr_get_list_by_involved,
+            pr_get_info,
             archive_issue,
             archive_issue_many,
         ])
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8419703..cda90d6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,6 +11,8 @@ import {
   NgbCollapseModule,
   NgbDropdownModule,
   NgbModalModule,
+  NgbOffcanvasModule,
+  NgbProgressbarModule,
   NgbTooltipModule,
 } from "@ng-bootstrap/ng-bootstrap";
 import { TrackUserModalComponent } from "./pages/dashboard/track-user-modal/track-user-modal.component";
@@ -20,6 +22,7 @@ import { RepoNameComponent } from "./shared/components/repo-name/repo-name.compo
 import { PRStateComponent } from "./shared/components/pr-state/pr-state.component";
 import { PullRequestsTableComponent } from "./pages/dashboard/pull-requests-table/pull-requests-table.component";
 import { PullRequestsCardComponent } from "./pages/dashboard/pull-requests-card/pull-requests-card.component";
+import { PullRequestDetailsComponent } from "./pages/dashboard/pull-request-details/pull-request-details.component";
 
 @NgModule({
   declarations: [
@@ -34,6 +37,7 @@ import { PullRequestsCardComponent } from "./pages/dashboard/pull-requests-card/
     PRStateComponent,
     PullRequestsTableComponent,
     PullRequestsCardComponent,
+    PullRequestDetailsComponent,
   ],
   imports: [
     BrowserModule,
@@ -43,6 +47,8 @@ import { PullRequestsCardComponent } from "./pages/dashboard/pull-requests-card/
     NgbTooltipModule,
     NgbCollapseModule,
     NgbDropdownModule,
+    NgbOffcanvasModule,
+    NgbProgressbarModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/pages/dashboard/pull-request-details/pull-request-details.component.html b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.html
new file mode 100644
index 0000000..ff5fee5
--- /dev/null
+++ b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.html
@@ -0,0 +1,80 @@
+<!--
+Copyright 2023 Joao Eduardo Luis <joao@abysmo.io>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div *ngIf="!hasID" class="alert alert-danger">
+  Pull Request ID not specified!
+</div>
+<div *ngIf="hasError" class="alert alert-danger">
+  Error trying to obtain Pull Request details!
+</div>
+
+<div *ngIf="hasID && !hasError && !hasDetails">
+  <p>
+    <ngb-progressbar type="primary" [value]="100" height="5px" [animated]="true"
+                     [striped]="true">
+    </ngb-progressbar>
+  </p>
+</div>
+
+<div *ngIf="hasID && !hasError && hasDetails" class="px-2 py-2">
+
+  <div class="offcanvas-header d-flex border-bottom">
+    <div class="d-flex w-100">
+
+      <div class="offcanvas-title me-auto">
+
+        <div class="d-flex">
+          <h6 class="text-muted">
+            {{details!.repo_owner}}/{{details!.repo_name}}
+          </h6>
+          <h6 class="text-muted ps-2">#{{details!.number}}</h6>
+          <h6 class="ps-2" ngbTooltip="Open on GitHub" placement="bottom">
+            <a [href]="details!.url" target="_blank">
+              <i class="mdi mdi-github text-muted"></i>
+            </a>
+          </h6>
+        </div>
+
+        <h5>{{details!.title}}</h5>
+      </div>
+
+      <div class="me-0 flex-shrink-1">
+        <div class="d-flex" [ngbTooltip]="details!.author.name"
+             placement="bottom">
+          <img class="rounded-circle" [src]="details!.author.avatar_url"
+               style="width: 23px; height: 23px;" />
+          <span class="fs-6 ms-2">{{details!.author.login}}</span>
+        </div>
+        <div class="d-flex text-muted">
+          <div class="d-flex" ngbTooltip="comments" placement="bottom">
+            <i class="mdi mdi-comment-outline"></i>
+            <span class="ps-1">{{details!.total_comments}}</span>
+          </div>
+
+          <div ngbTooltip="participants" placement="bottom" class="d-flex ps-3">
+            <i class="mdi mdi-account-group-outline"></i>
+            <span class="ps-1">{{details!.participants.length}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="offcanvas-body">
+    <span [innerHTML]="details?.body_html"></span>
+  </div>
+
+</div>
diff --git a/src/app/pages/dashboard/pull-request-details/pull-request-details.component.scss b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/dashboard/pull-request-details/pull-request-details.component.spec.ts b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.spec.ts
new file mode 100644
index 0000000..5c83e69
--- /dev/null
+++ b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { PullRequestDetailsComponent } from "./pull-request-details.component";
+
+describe("PullRequestDetailsComponent", () => {
+  let component: PullRequestDetailsComponent;
+  let fixture: ComponentFixture<PullRequestDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PullRequestDetailsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PullRequestDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/dashboard/pull-request-details/pull-request-details.component.ts b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.ts
new file mode 100644
index 0000000..7d0d05e
--- /dev/null
+++ b/src/app/pages/dashboard/pull-request-details/pull-request-details.component.ts
@@ -0,0 +1,51 @@
+// Copyright 2023 Joao Eduardo Luis <joao@abysmo.io>
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, OnInit } from "@angular/core";
+import { TauriService } from "src/app/shared/services/tauri.service";
+import { PullRequestInfo } from "src/app/shared/types";
+
+@Component({
+  selector: "ghd-pull-request-details",
+  templateUrl: "./pull-request-details.component.html",
+  styleUrls: ["./pull-request-details.component.scss"],
+})
+export class PullRequestDetailsComponent implements OnInit {
+  @Input()
+  public id?: number;
+
+  public hasID: boolean = false;
+  public hasError: boolean = false;
+  public hasDetails: boolean = false;
+  public details?: PullRequestInfo;
+
+  public constructor(private tauriSvc: TauriService) {}
+
+  public ngOnInit(): void {
+    this.hasID = !!this.id;
+    if (!this.hasID) {
+      console.assert(false, "ID not specified!");
+      return;
+    }
+    this.tauriSvc
+      .getPullRequestInfo(this.id!)
+      .then((res: PullRequestInfo) => {
+        this.details = res;
+        this.hasDetails = true;
+      })
+      .catch(() => {
+        this.hasError = true;
+      });
+  }
+}
diff --git a/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.html b/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.html
index a27b2bf..b8ec0b9 100644
--- a/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.html
+++ b/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.html
@@ -16,7 +16,7 @@
 
 <table class="table" *ngIf="entries.length > 0">
   <tbody>
-    <tr *ngFor="let pr of entries">
+    <tr *ngFor="let pr of entries" (click)="openDetail(pr)">
       <td *ngIf="recents">
         <i class="mdi mdi-check-circle-outline text-primary" placement="top"
            ngbTooltip="Mark Viewed" container="body" (click)="markViewed(pr)"
@@ -45,9 +45,7 @@
       <td><ghd-pr-state [state]="pr.state"></ghd-pr-state></td>
       <td>#{{pr.number}}</td>
       <td>
-        <a [href]="pr.url" target="_blank">
-          {{pr.title}}
-        </a>
+        {{pr.title}}
       </td>
       <td>{{pr.lastUpdateObs|async}}</td>
       <td>
diff --git a/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.ts b/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.ts
index 095e189..1a695e0 100644
--- a/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.ts
+++ b/src/app/pages/dashboard/pull-requests-table/pull-requests-table.component.ts
@@ -13,9 +13,11 @@
 // limitations under the License.
 
 import { Component, Input, OnInit } from "@angular/core";
+import { NgbOffcanvas, NgbOffcanvasRef } from "@ng-bootstrap/ng-bootstrap";
 import { TauriService } from "src/app/shared/services/tauri.service";
 import { UserPullRequestsService } from "src/app/shared/services/user-pull-requests.service";
 import { PRTableEntry } from "src/app/shared/types";
+import { PullRequestDetailsComponent } from "../pull-request-details/pull-request-details.component";
 
 @Component({
   selector: "ghd-pull-requests-table",
@@ -39,6 +41,7 @@ export class PullRequestsTableComponent implements OnInit {
   public constructor(
     private tauriSvc: TauriService,
     private prsSvc: UserPullRequestsService,
+    private offcanvas: NgbOffcanvas,
   ) {}
 
   public ngOnInit(): void {}
@@ -74,4 +77,15 @@ export class PullRequestsTableComponent implements OnInit {
         console.error(`unable to mark PR id ${pr.id} as archived: ${err}`);
       });
   }
+
+  public openDetail(pr: PRTableEntry): void {
+    let ref: NgbOffcanvasRef = this.offcanvas.open(
+      PullRequestDetailsComponent,
+      {
+        position: "bottom",
+        panelClass: "ghd-pr-details-offcanvas",
+      },
+    );
+    ref.componentInstance.id = pr.id;
+  }
 }
diff --git a/src/app/shared/services/tauri.service.ts b/src/app/shared/services/tauri.service.ts
index 33b5543..de208f5 100644
--- a/src/app/shared/services/tauri.service.ts
+++ b/src/app/shared/services/tauri.service.ts
@@ -18,7 +18,7 @@ import { listen } from "@tauri-apps/api/event";
 import { exit as tauriExit } from "@tauri-apps/api/process";
 import { register } from "@tauri-apps/api/globalShortcut";
 import { getVersion as tauriGetVersion } from "@tauri-apps/api/app";
-import { GithubUser, PullRequestEntry } from "../types";
+import { GithubUser, PullRequestEntry, PullRequestInfo } from "../types";
 
 export type TauriListenerEvent = {
   name: string;
@@ -145,6 +145,10 @@ export class TauriService {
     return invoke("pr_get_list_by_involved", { login: login });
   }
 
+  public getPullRequestInfo(prid: number): Promise<PullRequestInfo> {
+    return invoke("pr_get_info", { prid: prid });
+  }
+
   public archiveIssue(issueId: number): Promise<void> {
     return invoke("archive_issue", { issueId: issueId });
   }
diff --git a/src/app/shared/types.ts b/src/app/shared/types.ts
index ee41bdc..f05d45a 100644
--- a/src/app/shared/types.ts
+++ b/src/app/shared/types.ts
@@ -76,3 +76,45 @@ export type TrackedPRs = {
   viewed: PRTableEntry[];
   len: number;
 };
+
+/// Represents the information for a specific Pull Request.
+///
+export type PullRequestInfo = {
+  number: number;
+  title: string;
+  body_html: string;
+  author: GithubUser;
+  repo_owner: string;
+  repo_name: string;
+  url: string;
+  state: string;
+  is_draft: boolean;
+  milestone?: Milestone;
+  labels: Label[];
+  total_comments: number;
+  participants: GithubUser[];
+  reviews: UserReview[];
+};
+
+/// Represents a Milestone
+///
+export type Milestone = {
+  title: string;
+  state: string;
+  due_on?: string;
+  due_on_ts?: number;
+};
+
+/// Represents a Label
+///
+export type Label = {
+  color: string;
+  name: string;
+};
+
+/// Represents a Review from a User
+///
+export type UserReview = {
+  author: GithubUser;
+  state: string;
+};
diff --git a/src/styles.scss b/src/styles.scss
index 90d668f..d6de2e9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,2 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import "bootstrap/scss/bootstrap";
+
+.ghd-pr-details-offcanvas {
+    --bs-offcanvas-height: 50vh !important;
+}