USEFULL
/
drone
mirror of https://github.com/harness/drone.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use useHistory inside MarkdownViewer (#358) 

Co-authored-by: “Tan <“tan@harness.io”>
jobatzil/rename
Tan Nhu 2023-02-27 12:04:49 -08:00 committed by GitHub
parent a96ed98e5d
commit ba6645cdaa
11 changed files with 51 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.github/workflows/ci-lint.yml vendored
View File

@ -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

43
web/src/components/SourceCodeViewer/SourceCodeViewer.tsx
View File

@ -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 (
<Container className={css.main} onClick={interceptClickEventOnViewerContainer}>

5
web/src/i18n/strings.en.yaml
View File

@ -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
myComments: My comments/replies

5
web/src/pages/PullRequest/Conversation/Conversation.tsx
View File

@ -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<ConversationProps> = ({
{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<SystemBoxProps> = ({ 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<SystemBoxProps> = ({ pullRequestMetadata, commentItems
)
)
.join('\n')}
navigateTo={history.push}
/>
</Container>
</Render>

4
web/src/pages/PullRequest/Conversation/DescriptionBox.tsx
View File

@ -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<ConversationProps> = ({
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<ConversationProps> = ({
/>
)) || (
<Container className={css.mdWrapper}>
<MarkdownViewer source={content} navigateTo={history.push} />
<MarkdownViewer source={content} />
<Container className={css.menuWrapper}>
<OptionsMenuButton
isDark={true}

15
web/src/pages/PullRequest/Conversation/PullRequestSideBar/PullRequestSideBar.tsx
View File

@ -1,3 +1,4 @@
import { noop } from 'lodash-es'
import React from 'react'
import {
Container,
@ -18,7 +19,7 @@ import { useStrings } from 'framework/strings'
import css from './PullRequestSideBar.module.scss'
interface PullRequestSideBarProps {
reviewers?: any
reviewers?: Unknown
}
const PullRequestSideBar = (props: PullRequestSideBarProps) => {
@ -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
}
]}
/>

2
web/src/pages/PullRequests/PullRequests.tsx
View File

@ -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()

11
web/src/pages/Repository/Repository.module.scss
View File

@ -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;
}
}

1
web/src/pages/Repository/Repository.module.scss.d.ts vendored
View File

@ -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

43
web/src/pages/Repository/Repository.tsx
View File

@ -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<Pick<GitInfoProps, 'repoMetadata' | 'resourc
<Button
variation={ButtonVariation.PRIMARY}
text={getString('addNewFile')}
onClick={() => {
history.push(newFileURL)
}}></Button>
onClick={() => history.push(newFileURL)}></Button>
<Container padding={{ left: 'medium', top: 'small' }}>
<Text className={css.textContainer}>
{getString('emptyRepoInclude')}
<Text
onClick={() => {
history.push(newFileURL + `?name=README.md`)
<StringSubstitute
str={getString('emptyRepoInclude')}
vars={{
README: <Link to={newFileURL + `?name=README.md`}>README</Link>,
LICENSE: <Link to={newFileURL + `?name=LICENSE.md`}>LICENSE</Link>,
GITIGNORE: <Link to={newFileURL + `?name=.gitignore`}>.gitignore</Link>
}}
className={css.clickableText}
padding={{ left: 'small' }}
color={Color.PRIMARY_7}>
{getString('readMe')}
</Text>
<Text
onClick={() => {
history.push(newFileURL + `?name=LICENSE.md`)
}}
className={css.clickableText}
padding={{ left: 'small', right: 'small' }}
color={Color.PRIMARY_7}>
{getString('license')}
</Text>
<Text padding={{ right: 'small' }}>{getString('and')}</Text>
<Text
onClick={() => {
history.push(newFileURL + `?name=.gitignore`)
}}
className={css.clickableText}
color={Color.PRIMARY_7}>
{getString('gitIgnore')}
</Text>
/>
</Text>
</Container>
</Layout.Horizontal>
@ -189,7 +166,6 @@ const EmptyRepositoryInfo: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'resourc
source={getString('repoEmptyMarkdownClone')
.replace(/REPO_URL/g, repoMetadata.git_url || '')
.replace(/REPO_NAME/g, repoMetadata.uid || '')}
navigateTo={history.push}
/>
</Container>
<Container
@ -201,7 +177,6 @@ const EmptyRepositoryInfo: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'resourc
.replace(/REPO_URL/g, '...')
.replace(/REPO_NAME/g, repoMetadata.uid || '')
.replace(/CREATE_API_TOKEN_URL/g, currentUserProfileURL || '')}
navigateTo={history.push}
/>
</Container>
</Container>

5
web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx
View File

@ -61,10 +61,7 @@ function ReadmeViewer({ metadata, gitRef, readmeInfo, contentOnly, maxWidth }: F
<Render when={(data?.content as RepoFileContent)?.data}>
<Container className={css.readmeContent}>
<MarkdownViewer
source={window.atob((data?.content as RepoFileContent)?.data || '')}
navigateTo={history.push}
/>
<MarkdownViewer source={window.atob((data?.content as RepoFileContent)?.data || '')} />
</Container>
</Render>
</Container>