From ba6645cdaa4a814f298946c0d89d7e6f67ea25b3 Mon Sep 17 00:00:00 2001 From: Tan Nhu Date: Mon, 27 Feb 2023 12:04:49 -0800 Subject: [PATCH] use useHistory inside MarkdownViewer (#358) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: “Tan <“tan@harness.io”> --- .github/workflows/ci-lint.yml | 5 ++- .../SourceCodeViewer/SourceCodeViewer.tsx | 43 +++++++++---------- web/src/i18n/strings.en.yaml | 5 +-- .../PullRequest/Conversation/Conversation.tsx | 5 +-- .../Conversation/DescriptionBox.tsx | 4 +- .../PullRequestSideBar/PullRequestSideBar.tsx | 15 ++++--- web/src/pages/PullRequests/PullRequests.tsx | 2 +- .../pages/Repository/Repository.module.scss | 11 +++-- .../Repository/Repository.module.scss.d.ts | 1 - web/src/pages/Repository/Repository.tsx | 43 ++++--------------- .../FolderContent/Readme.tsx | 5 +-- 11 files changed, 51 insertions(+), 88 deletions(-) diff --git a/.github/workflows/ci-lint.yml b/.github/workflows/ci-lint.yml index 0ce9eff66..ec9d41df4 100644 --- a/.github/workflows/ci-lint.yml +++ b/.github/workflows/ci-lint.yml @@ -23,14 +23,15 @@ jobs: - uses: actions/setup-node@v3 with: node-version: 16 - cache: 'npm' - - name: install and build web app + cache: "npm" + - name: install, lint, and build web app working-directory: web run: | echo "@harness:registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken=${{ secrets.GH_TOKEN }} always-auth=true" >> ~/.npmrc yarn install + yarn checks yarn build - name: golangci-lint uses: golangci/golangci-lint-action@v3 diff --git a/web/src/components/SourceCodeViewer/SourceCodeViewer.tsx b/web/src/components/SourceCodeViewer/SourceCodeViewer.tsx index df9b51339..2934f9549 100644 --- a/web/src/components/SourceCodeViewer/SourceCodeViewer.tsx +++ b/web/src/components/SourceCodeViewer/SourceCodeViewer.tsx @@ -1,3 +1,4 @@ +import { useHistory } from 'react-router-dom' import React, { Suspense, useCallback } from 'react' import { Container, Text } from '@harness/uicore' import MarkdownEditor from '@uiw/react-markdown-editor' @@ -10,38 +11,34 @@ import css from './SourceCodeViewer.module.scss' interface MarkdownViewerProps { source: string - navigateTo: (url: string) => void } -export function MarkdownViewer({ source, navigateTo }: MarkdownViewerProps) { +export function MarkdownViewer({ source }: MarkdownViewerProps) { const { getString } = useStrings() - const interceptClickEventOnViewerContainer = useCallback( - event => { - const { target } = event + const history = useHistory() + const interceptClickEventOnViewerContainer = useCallback(event => { + const { target } = event - if (target?.tagName?.toLowerCase() === 'a') { - const { href } = target + if (target?.tagName?.toLowerCase() === 'a') { + const { href } = target - // Intercept click event on internal links and navigate to pages to avoid full page reload - if (href && !href.startsWith('#')) { - try { - const origin = new URL(href).origin + // Intercept click event on internal links and navigate to pages to avoid full page reload + if (href && !href.startsWith('#')) { + try { + const url = new URL(href) - if (origin === window.location.origin) { - // For some reason, history.push(href) does not work in the context of @uiw/react-markdown-editor library. - navigateTo?.(href) - event.stopPropagation() - event.preventDefault() - } - } catch (e) { - // eslint-disable-next-line no-console - console.error('MarkdownViewer/interceptClickEventOnViewerContainer', e) + if (url.origin === window.location.origin) { + event.stopPropagation() + event.preventDefault() + history.push(url.pathname) } + } catch (e) { + // eslint-disable-next-line no-console + console.error('MarkdownViewer/interceptClickEventOnViewerContainer', e) } } - }, - [navigateTo] - ) + } + }, []) return ( diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml index 23ed5585b..269dd2f6f 100644 --- a/web/src/i18n/strings.en.yaml +++ b/web/src/i18n/strings.en.yaml @@ -311,8 +311,7 @@ repoCloneHeader: Or you can clone this repository repoCloneLabel: Clone with HTTPS emptyRepoHeader: This repository is empty. Let's get started... addNewFile: + New File -# emptyRepoInclude: We recommend every repository include a [README](README_URL), [LICENSE](LICENSE_URL), and [.gitignore](GITIGNORE_URL). -emptyRepoInclude: We recommend every repository include a +emptyRepoInclude: We recommend every repository include a {README}, {LICENSE}, and {GITIGNORE}. readMe: README, license: LICENSE gitIgnore: .gitignore @@ -345,4 +344,4 @@ resolved: Resolved showEverything: Show everything allComments: All comments whatsNew: What's new -myComments: My comments/replies \ No newline at end of file +myComments: My comments/replies diff --git a/web/src/pages/PullRequest/Conversation/Conversation.tsx b/web/src/pages/PullRequest/Conversation/Conversation.tsx index d06720031..6e1b6c774 100644 --- a/web/src/pages/PullRequest/Conversation/Conversation.tsx +++ b/web/src/pages/PullRequest/Conversation/Conversation.tsx @@ -21,7 +21,6 @@ import cx from 'classnames' import { useGet, useMutate } from 'restful-react' import ReactTimeago from 'react-timeago' import { orderBy } from 'lodash-es' -import { useHistory } from 'react-router-dom' import { Render } from 'react-jsx-match' import { CodeIcon, GitInfoProps } from 'utils/GitUtils' import { MarkdownViewer } from 'components/SourceCodeViewer/SourceCodeViewer' @@ -275,7 +274,7 @@ export const Conversation: React.FC = ({ {activityBlocks?.map((blocks, index) => { const threadId = blocks[0].payload?.id const commentItems = blocks - let state = { + const state = { label: getString('active'), value: commentState.ACTIVE } as SelectOption @@ -530,7 +529,6 @@ const generateReviewDecisionIcon = ( } const SystemBox: React.FC = ({ pullRequestMetadata, commentItems }) => { - const history = useHistory() const { getString } = useStrings() const payload = commentItems[0].payload const type = payload?.type @@ -694,7 +692,6 @@ const SystemBox: React.FC = ({ pullRequestMetadata, commentItems ) ) .join('\n')} - navigateTo={history.push} /> diff --git a/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx b/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx index 1c506ce06..e7dff5a2e 100644 --- a/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx +++ b/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react' import { Container, useToaster } from '@harness/uicore' import cx from 'classnames' -import { useHistory } from 'react-router-dom' import { useMutate } from 'restful-react' import { MarkdownViewer } from 'components/SourceCodeViewer/SourceCodeViewer' import { useStrings } from 'framework/strings' @@ -17,7 +16,6 @@ export const DescriptionBox: React.FC = ({ pullRequestMetadata, onCommentUpdate: refreshPullRequestMetadata }) => { - const history = useHistory() const [edit, setEdit] = useState(false) // const [updated, setUpdated] = useState(pullRequestMetadata.edited as number) const [originalContent, setOriginalContent] = useState(pullRequestMetadata.description as string) @@ -65,7 +63,7 @@ export const DescriptionBox: React.FC = ({ /> )) || ( - + { @@ -99,17 +100,17 @@ const PullRequestSideBar = (props: PullRequestSideBarProps) => { items={[ { text: getString('makeOptional'), - onClick: () => {} + onClick: noop }, { text: getString('makeRequired'), - onClick: () => {} + onClick: noop }, '-', { isDanger: true, text: getString('remove'), - onClick: () => {} + onClick: noop } ]} /> @@ -155,17 +156,17 @@ const PullRequestSideBar = (props: PullRequestSideBarProps) => { items={[ { text: getString('makeOptional'), - onClick: () => {} + onClick: noop }, { text: getString('makeRequired'), - onClick: () => {} + onClick: noop }, '-', { isDanger: true, text: getString('remove'), - onClick: () => {} + onClick: noop } ]} /> diff --git a/web/src/pages/PullRequests/PullRequests.tsx b/web/src/pages/PullRequests/PullRequests.tsx index 9e2ee7e7e..db04e3aab 100644 --- a/web/src/pages/PullRequests/PullRequests.tsx +++ b/web/src/pages/PullRequests/PullRequests.tsx @@ -29,9 +29,9 @@ import { UserPreference, useUserPreference } from 'hooks/useUserPreference' import { NoResultCard } from 'components/NoResultCard/NoResultCard' import { PullRequestStateLabel } from 'components/PullRequestStateLabel/PullRequestStateLabel' import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner' +import { ExecutionStatusLabel } from 'components/ExecutionStatusLabel/ExecutionStatusLabel' import { PullRequestsContentHeader } from './PullRequestsContentHeader/PullRequestsContentHeader' import css from './PullRequests.module.scss' -import { ExecutionStatusLabel } from 'components/ExecutionStatusLabel/ExecutionStatusLabel' export default function PullRequests() { const { getString } = useStrings() diff --git a/web/src/pages/Repository/Repository.module.scss b/web/src/pages/Repository/Repository.module.scss index 5b13e88f2..7d8f9e5fe 100644 --- a/web/src/pages/Repository/Repository.module.scss +++ b/web/src/pages/Repository/Repository.module.scss @@ -14,18 +14,17 @@ } .textContainer { - display: flex; + a { + color: var(--primary-7) !important; + } } -.clickableText { - cursor: pointer; -} .bannerContainer { padding: var(--spacing-small) var(--spacing-xsmall) !important; - background-color: var(--red-50) !important; + background-color: var(--red-50) !important; position: sticky; top: 0; z-index: 2; margin: var(--spacing-small) var(--spacing-xlarge) !important; border-radius: 5px; -} \ No newline at end of file +} diff --git a/web/src/pages/Repository/Repository.module.scss.d.ts b/web/src/pages/Repository/Repository.module.scss.d.ts index edbc3bb19..c559ce986 100644 --- a/web/src/pages/Repository/Repository.module.scss.d.ts +++ b/web/src/pages/Repository/Repository.module.scss.d.ts @@ -5,7 +5,6 @@ declare const styles: { readonly emptyRepo: string readonly divContainer: string readonly textContainer: string - readonly clickableText: string readonly bannerContainer: string } export default styles diff --git a/web/src/pages/Repository/Repository.tsx b/web/src/pages/Repository/Repository.tsx index 4c276ac60..281babf8f 100644 --- a/web/src/pages/Repository/Repository.tsx +++ b/web/src/pages/Repository/Repository.tsx @@ -1,9 +1,8 @@ import React, { useEffect, useState } from 'react' -import { useHistory } from 'react-router-dom' +import { Link, useHistory } from 'react-router-dom' import { Button, ButtonVariation, - Color, Container, FontVariation, Layout, @@ -143,40 +142,18 @@ const EmptyRepositoryInfo: React.FC { - history.push(newFileURL) - }}> + onClick={() => history.push(newFileURL)}> - {getString('emptyRepoInclude')} - { - history.push(newFileURL + `?name=README.md`) + README, + LICENSE: LICENSE, + GITIGNORE: .gitignore }} - className={css.clickableText} - padding={{ left: 'small' }} - color={Color.PRIMARY_7}> - {getString('readMe')} - - { - history.push(newFileURL + `?name=LICENSE.md`) - }} - className={css.clickableText} - padding={{ left: 'small', right: 'small' }} - color={Color.PRIMARY_7}> - {getString('license')} - - {getString('and')} - { - history.push(newFileURL + `?name=.gitignore`) - }} - className={css.clickableText} - color={Color.PRIMARY_7}> - {getString('gitIgnore')} - + /> @@ -189,7 +166,6 @@ const EmptyRepositoryInfo: React.FC diff --git a/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx b/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx index e24adc8d9..1d8fae471 100644 --- a/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx +++ b/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx @@ -61,10 +61,7 @@ function ReadmeViewer({ metadata, gitRef, readmeInfo, contentOnly, maxWidth }: F - +