From 50283e0ceabc37c27817d001b342bc6710dfd8d0 Mon Sep 17 00:00:00 2001 From: flowforfrank Date: Fri, 23 Apr 2021 08:30:54 +0200 Subject: [PATCH] Add support for showing comments associated with files --- src/components/Node.tsx | 5 +++++ src/components/settings/SidebarSettings.tsx | 8 +++++++ src/global.d.ts | 1 + src/platforms/GitHub/API.ts | 10 +++++++++ src/platforms/GitHub/Request.d.ts | 5 +++++ src/platforms/GitHub/index.ts | 4 +++- src/styles/index.scss | 23 +++++++++++++++++++++ src/utils/configHelper.ts | 4 ++++ 8 files changed, 59 insertions(+), 1 deletion(-) diff --git a/src/components/Node.tsx b/src/components/Node.tsx index 5fa7942..7fd3ea1 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -38,6 +38,10 @@ export function Node({ style, onClick, }: Props) { + const { + value: { commentToggle }, + } = useConfigs() + return ( {renderLabelText(node)} + {(commentToggle && !!node.comments) && 💬 {node.comments}} {renderActions &&
{renderActions(node)}
} diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx index 8f805b0..3ac1ed8 100644 --- a/src/components/settings/SidebarSettings.tsx +++ b/src/components/settings/SidebarSettings.tsx @@ -102,6 +102,14 @@ export function SidebarSettings(props: React.PropsWithChildren) { }, }} /> + ) } diff --git a/src/global.d.ts b/src/global.d.ts index a7771b6..d18d63a 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -13,6 +13,7 @@ type TreeNode = { url?: string sha?: string accessDenied?: boolean + comments: number } type IO = { diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts index 083912e..0491ef9 100644 --- a/src/platforms/GitHub/API.ts +++ b/src/platforms/GitHub/API.ts @@ -106,6 +106,16 @@ export async function getPullTreeData( return await request(url, { accessToken }) } +export async function getPullComments( + userName: string, + repoName: string, + pullId: string, + accessToken?: string, +): Promise { + const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/comments` + return await request(url, { accessToken }) +} + export async function getPullPageDocument( userName: string, repoName: string, diff --git a/src/platforms/GitHub/Request.d.ts b/src/platforms/GitHub/Request.d.ts index a010a1c..257cf46 100644 --- a/src/platforms/GitHub/Request.d.ts +++ b/src/platforms/GitHub/Request.d.ts @@ -35,7 +35,12 @@ declare namespace GitHubAPI { changed_files: number } + type PullComment = { + path: string + } + type PullTreeData = PullTreeItem[] + type PullComments = PullComment[] type MetaData = { name: string diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 49cf7c0..e75f1ab 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -146,9 +146,10 @@ export const GitHub: Platform = { GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT, ) let page = 1 - const [pullData, treeData] = await Promise.all([ + const [pullData, treeData, commentData] = await Promise.all([ API.getPullData(userName, repoName, pullId, accessToken), API.getPullTreeData(userName, repoName, pullId, page, accessToken), + API.getPullComments(userName, repoName, pullId, accessToken), ]) const count = pullData.changed_files @@ -176,6 +177,7 @@ export const GitHub: Platform = { window.location.search }#${creator(item.filename) || ''}`, sha: item.sha, + comments: commentData?.filter(comment => item.filename === comment.path).length, })) const root = processTree(nodes) diff --git a/src/styles/index.scss b/src/styles/index.scss index 85a3e31..bc813e2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -503,6 +503,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- &.focused, &:hover { background: var(--gitako-bg-tertiary); + + .node-item-comment { + background: var(--gitako-bg-tertiary); + background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); + background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); + background: linear-gradient(to right, transparent 0% ,var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161b22', endColorstr='#161b22', GradientType=1); + } } &:active { background: var(--gitako-bg-secondary); @@ -574,6 +582,21 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } } + .node-item-comment { + position: absolute; + top: 0; + right: 0; + height: 36px; + line-height: 37px; + padding: 0 10px; + color: var(--gitako-auto-gray-5); + background: var(--gitako-bg-primary); + background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); + background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); + background: linear-gradient(to right, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000d1117', endColorstr='#0d1117', GradientType=1); + } + .go-to-button, .find-in-folder-button { @include icon-button(); diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts index 68ddd08..ca6ae44 100644 --- a/src/utils/configHelper.ts +++ b/src/utils/configHelper.ts @@ -14,6 +14,7 @@ export type Config = { toggleButtonContent: 'logo' | 'octoface' recursiveToggleFolder: 'shift' | 'alt' searchMode: SearchMode + commentToggle: boolean } enum configKeys { @@ -29,6 +30,7 @@ enum configKeys { toggleButtonContent = 'toggleButtonContent', recursiveToggleFolder = 'recursiveToggleFolder', searchMode = 'searchMode', + commentToggle = 'commentToggle', } const defaultConfigs: Config = { @@ -44,6 +46,7 @@ const defaultConfigs: Config = { toggleButtonContent: 'logo', recursiveToggleFolder: 'shift', searchMode: 'fuzzy', + commentToggle: true, } const configKeyArray = Object.values(configKeys) @@ -85,6 +88,7 @@ async function migrateConfig() { 'copySnippetButton', 'intelligentToggle', 'icons', + 'commentToggle', ]) if (config && (!('configVersion' in config) || config.configVersion < version)) { await storageHelper.set({ platform_GitHub: config, configVersion: version })