use useHistory inside MarkdownViewer (#358)

Co-authored-by: “Tan <“tan@harness.io”>

.github/workflows/ci-lint.yml

@@ -23,14 +23,15 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'npm'
+          cache: "npm"
-      - name: install and build web app
+      - 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

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,13 +11,12 @@ 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(
+  const history = useHistory()
-    event => {
+  const interceptClickEventOnViewerContainer = useCallback(event => {
     const { target } = event
 
     if (target?.tagName?.toLowerCase() === 'a') {
@@ -25,13 +25,12 @@ export function MarkdownViewer({ source, navigateTo }: MarkdownViewerProps) {
       // 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
+          const url = new URL(href)
 
-            if (origin === window.location.origin) {
+          if (url.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()
+            history.push(url.pathname)
           }
         } catch (e) {
           // eslint-disable-next-line no-console
@@ -39,9 +38,7 @@ export function MarkdownViewer({ source, navigateTo }: MarkdownViewerProps) {
         }
       }
     }
-    },
+  }, [])
-    [navigateTo]
-  )
 
   return (
     <Container className={css.main} onClick={interceptClickEventOnViewerContainer}>

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 {README}, {LICENSE}, and {GITIGNORE}.
-emptyRepoInclude: We recommend every repository include a
 readMe: README,
 license: LICENSE
 gitIgnore: .gitignore

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

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

web/src/pages/PullRequest/Conversation/PullRequestSideBar/PullRequestSideBar.tsx

@@ -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
                         }
                       ]}
                     />

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

web/src/pages/Repository/Repository.module.scss

@@ -14,12 +14,11 @@
 }
 
 .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;

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

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<Pick<GitInfoProps, 'repoMetadata' | 'resourc
           <Button
             variation={ButtonVariation.PRIMARY}
             text={getString('addNewFile')}
-            onClick={() => {
+            onClick={() => history.push(newFileURL)}></Button>
-              history.push(newFileURL)
-            }}></Button>
 
           <Container padding={{ left: 'medium', top: 'small' }}>
             <Text className={css.textContainer}>
-              {getString('emptyRepoInclude')}
+              <StringSubstitute
-              <Text
+                str={getString('emptyRepoInclude')}
-                onClick={() => {
+                vars={{
-                  history.push(newFileURL + `?name=README.md`)
+                  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>

web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx

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