diff --git a/packages/components/src/components/cards/NotificationCard.tsx b/packages/components/src/components/cards/NotificationCard.tsx index 1f92cdbc..ab00564a 100644 --- a/packages/components/src/components/cards/NotificationCard.tsx +++ b/packages/components/src/components/cards/NotificationCard.tsx @@ -14,6 +14,8 @@ import { isNotificationPrivate, trimNewLinesAndSpaces, } from '@devhub/core' +import { useReduxState } from '../../hooks/use-redux-state' +import * as selectors from '../../redux/selectors' import { contentPadding } from '../../styles/variables' import { getIssueIconAndColor, @@ -46,6 +48,9 @@ export const NotificationCard = React.memo((props: NotificationCardProps) => { const { notification, onlyOneRepository } = props const springAnimatedTheme = useSpringAnimatedTheme() + const hasPrivateAccess = useReduxState( + selectors.githubHasPrivateAccessSelector, + ) if (!notification) return null @@ -351,6 +356,21 @@ export const NotificationCard = React.memo((props: NotificationCardProps) => { username={comment.user.login} /> )} + + {!!(isPrivate && !hasPrivateAccess && !notification.enhanced) && ( + + )} ) }) diff --git a/packages/components/src/components/cards/partials/rows/CommentRow.tsx b/packages/components/src/components/cards/partials/rows/CommentRow.tsx index c97b3d60..cc9e7c3f 100644 --- a/packages/components/src/components/cards/partials/rows/CommentRow.tsx +++ b/packages/components/src/components/cards/partials/rows/CommentRow.tsx @@ -6,36 +6,41 @@ import { useCSSVariablesOrSpringAnimatedTheme } from '../../../../hooks/use-css- import { Platform } from '../../../../libs/platform' import { parseTextWithEmojisToReactComponents } from '../../../../utils/helpers/github/emojis' import { fixURL } from '../../../../utils/helpers/github/url' -import { SpringAnimatedText } from '../../../animated/spring/SpringAnimatedText' +import { + SpringAnimatedText, + SpringAnimatedTextProps, +} from '../../../animated/spring/SpringAnimatedText' import { Avatar } from '../../../common/Avatar' -import { Link } from '../../../common/Link' +import { Link, LinkProps } from '../../../common/Link' import { cardStyles, getCardStylesForTheme } from '../../styles' import { cardRowStyles } from './styles' export interface CommentRowProps { addBottomAnchor?: boolean - avatarURL: string + analyticsLabel?: LinkProps['analyticsLabel'] + avatarURL: string | undefined body: string isRead: boolean numberOfLines?: number smallLeftColumn?: boolean + textStyle?: SpringAnimatedTextProps['style'] url?: string - userLinkURL: string - username: string + userLinkURL: string | undefined + username: string | undefined } -export interface CommentRowState {} - export const CommentRow = React.memo((props: CommentRowProps) => { const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme() const { addBottomAnchor, + analyticsLabel, avatarURL, body: _body, isRead, numberOfLines = 3, smallLeftColumn, + textStyle, url, userLinkURL, username, @@ -72,6 +77,7 @@ export const CommentRow = React.memo((props: CommentRowProps) => { @@ -79,6 +85,7 @@ export const CommentRow = React.memo((props: CommentRowProps) => { numberOfLines={numberOfLines} style={[ getCardStylesForTheme(springAnimatedTheme).commentText, + textStyle, isRead && getCardStylesForTheme(springAnimatedTheme).mutedText, ]} > diff --git a/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx b/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx index faba39cb..f9196fa4 100644 --- a/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx +++ b/packages/components/src/components/cards/partials/rows/IssueOrPullRequestRow.tsx @@ -29,7 +29,7 @@ import { cardRowStyles } from './styles' export interface IssueOrPullRequestRowProps { addBottomAnchor?: boolean - avatarURL: string + avatarURL: string | undefined commentsCount?: number createdAt: string | undefined iconColor?: string @@ -43,8 +43,8 @@ export interface IssueOrPullRequestRowProps { smallLeftColumn?: boolean title: string url: string - userLinkURL: string - username: string + userLinkURL: string | undefined + username: string | undefined } export const IssueOrPullRequestRow = React.memo( @@ -75,7 +75,8 @@ export const IssueOrPullRequestRow = React.memo( if (!title) return null const isBot = Boolean(_username && _username.indexOf('[bot]') >= 0) - const username = isBot ? _username.replace('[bot]', '') : _username + const username = + isBot && _username ? _username.replace('[bot]', '') : _username const byText = username ? `@${username}` : '' @@ -165,87 +166,106 @@ export const IssueOrPullRequestRow = React.memo( )} - + {!!( + byText || + createdAt || + commentsCount || + issueOrPullRequestNumber + ) && ( + <> + - - {!!byText && ( - - - {byText} - - - )} + + {!!byText && ( + + + {byText} + + + )} - {!!createdAt && ( - - {() => { - const dateText = getDateSmallText(createdAt, false) - if (!dateText) return null + {!!createdAt && ( + + {() => { + const dateText = getDateSmallText(createdAt, false) + if (!dateText) return null - return ( - <> - {!!byText && } + return ( + <> + {!!byText && } - - {!!byText && ( - <> - - - - )} + + {!!byText && ( + <> + + + + )} - {dateText} - - - ) - }} - - )} + {dateText} + + + ) + }} + + )} - + + + {typeof commentsCount === 'number' && commentsCount >= 0 && ( + <> + + + + + )} - {typeof commentsCount === 'number' && commentsCount >= 0 && ( - <> - - - )} - - - - - + + + )} diff --git a/packages/components/src/components/columns/ColumnOptions.tsx b/packages/components/src/components/columns/ColumnOptions.tsx index eadbc7bb..7f850b47 100644 --- a/packages/components/src/components/columns/ColumnOptions.tsx +++ b/packages/components/src/components/columns/ColumnOptions.tsx @@ -360,7 +360,7 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => { {(() => { const isPrivateChecked = column.type === 'notifications' - ? !(column.filters && column.filters.private === false) + ? column.filters && column.filters.private === true : hasPrivateAccess && !(column.filters && column.filters.private === false) @@ -368,8 +368,7 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => { column.filters && column.filters.private === true ) - const canShowPrivateContent = - hasPrivateAccess || column.type === 'notifications' + const canShowPrivateContent = hasPrivateAccess // || column.type === 'notifications' if (!canShowPrivateContent && !isPrivateChecked) return null diff --git a/packages/components/src/components/modals/AddColumnModal.tsx b/packages/components/src/components/modals/AddColumnModal.tsx index fcad4d4d..c2c1bd2a 100644 --- a/packages/components/src/components/modals/AddColumnModal.tsx +++ b/packages/components/src/components/modals/AddColumnModal.tsx @@ -340,7 +340,7 @@ export function AddColumnModal(props: AddColumnModalProps) { @@ -353,8 +353,8 @@ export function AddColumnModal(props: AddColumnModalProps) { textAlign: 'center', }} > - Support for private repositories is coming soon! Subscribe to this - issue if you want to be notified. + Coming soon: support for private repositories. Click here and + subscribe to this issue if you want to be notified. diff --git a/packages/components/src/redux/selectors/auth.ts b/packages/components/src/redux/selectors/auth.ts index 9147dcd8..0ed5c81b 100644 --- a/packages/components/src/redux/selectors/auth.ts +++ b/packages/components/src/redux/selectors/auth.ts @@ -11,8 +11,9 @@ export const appTokenSelector = (state: RootState) => s(state).appToken export const githubScopeSelector = (state: RootState) => s(state).user && s(state).user!.github.scope -export const githubHasPrivateAccessSelector = (state: RootState) => - !!githubScopeSelector(state) && githubScopeSelector(state)!.includes('repo') +// TODO: Support private repositories after migrating to GitHub App +// @see https://github.com/devhubapp/devhub/issues/32 +export const githubHasPrivateAccessSelector = (_state: RootState) => false export const githubTokenSelector = (state: RootState) => s(state).user && s(state).user!.github.token diff --git a/packages/core/src/helpers/github/notifications.ts b/packages/core/src/helpers/github/notifications.ts index 7bfd3c28..657536e9 100644 --- a/packages/core/src/helpers/github/notifications.ts +++ b/packages/core/src/helpers/github/notifications.ts @@ -68,6 +68,7 @@ export async function getNotificationsEnhancementMap( throw new Error('Invalid response') enhance[subjectField] = data + enhance.enhanced = true cache.set(notification.subject.url, { data, timestamp: Date.now() }) } catch (error) { console.error( @@ -80,6 +81,7 @@ export async function getNotificationsEnhancementMap( } else if (hasSubjectCache) { if (subjectCache && subjectCache.data) enhance[subjectField] = subjectCache.data + enhance.enhanced = true } if (commentId && !hasCommentCache) { @@ -92,6 +94,7 @@ export async function getNotificationsEnhancementMap( if (!(data && data.id)) throw new Error('Invalid response') enhance.comment = data + enhance.enhanced = true cache.set(notification.subject.latest_comment_url, { data, timestamp: Date.now(), @@ -106,7 +109,10 @@ export async function getNotificationsEnhancementMap( } else if (!commentId) { enhance.comment = undefined } else if (hasCommentCache) { - if (commentCache && commentCache.data) enhance.comment = commentCache.data + if (commentCache && commentCache.data) { + enhance.comment = commentCache.data + enhance.enhanced = true + } } if (!Object.keys(enhance).length) return @@ -151,6 +157,7 @@ export function enhanceNotifications( 'issue', 'pullRequest', 'release', + 'enhanced', ]), ...cen, ...enhance, diff --git a/packages/core/src/types/devhub.ts b/packages/core/src/types/devhub.ts index 05450f95..4b6f73eb 100644 --- a/packages/core/src/types/devhub.ts +++ b/packages/core/src/types/devhub.ts @@ -35,6 +35,7 @@ export interface NotificationPayloadEnhancement { issue?: GitHubIssue pullRequest?: GitHubPullRequest release?: GitHubRelease + enhanced?: boolean } export interface EnhancedGitHubNotification