From ddce5e817d7abc3258358096b47c70b96312c972 Mon Sep 17 00:00:00 2001
From: Tan Nhu <tan@harness.io>
Date: Wed, 1 Mar 2023 10:29:59 -0800
Subject: [PATCH] Proper decoding UTF8 content to support Emoji / special UTF8
 chars (#360)

---
 .../RepositoryContent/FileContent/FileContent.tsx    | 12 ++++++++++--
 .../RepositoryContent/FolderContent/Readme.tsx       |  4 ++--
 .../RepositoryFileEdit/FileEditor/FileEditor.tsx     |  4 ++--
 web/src/utils/GitUtils.ts                            |  2 ++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx
index 2cb23b08d..2e6cb0122 100644
--- a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx
+++ b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx
@@ -4,7 +4,15 @@ import { Render } from 'react-jsx-match'
 import { useHistory } from 'react-router-dom'
 import { SourceCodeViewer } from 'components/SourceCodeViewer/SourceCodeViewer'
 import type { OpenapiContentInfo, RepoFileContent } from 'services/code'
-import { CodeIcon, findMarkdownInfo, GitCommitAction, GitInfoProps, isRefATag, makeDiffRefs } from 'utils/GitUtils'
+import {
+  CodeIcon,
+  decodeGitContent,
+  findMarkdownInfo,
+  GitCommitAction,
+  GitInfoProps,
+  isRefATag,
+  makeDiffRefs
+} from 'utils/GitUtils'
 import { filenameToLanguage } from 'utils/Utils'
 import { useAppContext } from 'AppContext'
 import { LatestCommitForFile } from 'components/LatestCommit/LatestCommit'
@@ -23,7 +31,7 @@ export function FileContent({
   const { getString } = useStrings()
   const history = useHistory()
   const content = useMemo(
-    () => window.atob((resourceContent?.content as RepoFileContent)?.data || ''),
+    () => decodeGitContent((resourceContent?.content as RepoFileContent)?.data),
     [resourceContent?.content]
   )
   const markdownInfo = useMemo(() => findMarkdownInfo(resourceContent), [resourceContent])
diff --git a/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx b/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx
index 1d8fae471..75abb6771 100644
--- a/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx
+++ b/web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx
@@ -8,7 +8,7 @@ import { MarkdownViewer } from 'components/SourceCodeViewer/SourceCodeViewer'
 import { useAppContext } from 'AppContext'
 import type { OpenapiContentInfo, OpenapiGetContentOutput, RepoFileContent, TypesRepository } from 'services/code'
 import { useShowRequestError } from 'hooks/useShowRequestError'
-import { CodeIcon } from 'utils/GitUtils'
+import { CodeIcon, decodeGitContent } from 'utils/GitUtils'
 import css from './Readme.module.scss'
 
 interface FolderContentProps {
@@ -61,7 +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 || '')} />
+          <MarkdownViewer source={decodeGitContent((data?.content as RepoFileContent)?.data)} />
         </Container>
       </Render>
     </Container>
diff --git a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
index f03a01536..9e9aa3d95 100644
--- a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
+++ b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
@@ -6,7 +6,7 @@ import cx from 'classnames'
 import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
 import type { RepoFileContent } from 'services/code'
 import { useAppContext } from 'AppContext'
-import { GitCommitAction, GitContentType, GitInfoProps, isDir, makeDiffRefs } from 'utils/GitUtils'
+import { decodeGitContent, GitCommitAction, GitContentType, GitInfoProps, isDir, makeDiffRefs } from 'utils/GitUtils'
 import { useStrings } from 'framework/strings'
 import { filenameToLanguage, FILE_SEPERATOR } from 'utils/Utils'
 import { useGetResourceContent } from 'hooks/useGetResourceContent'
@@ -31,7 +31,7 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
   const { routes } = useAppContext()
   const [language, setLanguage] = useState(() => filenameToLanguage(fileName))
   const [originalContent, setOriginalContent] = useState(
-    window.atob((resourceContent?.content as RepoFileContent)?.data || '')
+    decodeGitContent((resourceContent?.content as RepoFileContent)?.data)
   )
   const [content, setContent] = useState(originalContent)
   const fileResourcePath = useMemo(
diff --git a/web/src/utils/GitUtils.ts b/web/src/utils/GitUtils.ts
index 4f4aeb124..96724f6cd 100644
--- a/web/src/utils/GitUtils.ts
+++ b/web/src/utils/GitUtils.ts
@@ -146,3 +146,5 @@ export const diffRefsToRefs = (diffRefs: string) => {
     sourceGitRef: parts[1] || ''
   }
 }
+
+export const decodeGitContent = (content = '') => decodeURIComponent(escape(window.atob(content)))