From e3e132967da13dacaea753882478dc9aa7393714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ctan-nhu=E2=80=9D?= <“tan@harness.io”>
Date: Mon, 1 May 2023 15:26:37 -0700
Subject: [PATCH 1/2] feat: Implement Editor dirty check when moving away from
 pages

---
 .../ReviewDecisionButton.tsx                  | 241 +++++++++---------
 web/src/components/CommentBox/CommentBox.tsx  |  23 +-
 web/src/components/DiffViewer/DiffViewer.tsx  |   4 +
 .../MarkdownEditorWithPreview.tsx             |  10 +
 .../NavigationCheck.module.scss               |   7 +
 .../NavigationCheck.module.scss.d.ts          |   6 +
 .../NavigationCheck/NavigationCheck.tsx       |  56 ++++
 .../MonacoSourceCodeEditor.tsx                |   2 +-
 web/src/framework/strings/stringTypes.ts      |   4 +
 web/src/i18n/strings.en.yaml                  |   5 +
 .../PullRequest/Conversation/Conversation.tsx |   6 +
 .../Conversation/DescriptionBox.tsx           |   5 +-
 .../FileEditor/FileEditor.tsx                 |   8 +-
 13 files changed, 254 insertions(+), 123 deletions(-)
 create mode 100644 web/src/components/NavigationCheck/NavigationCheck.module.scss
 create mode 100644 web/src/components/NavigationCheck/NavigationCheck.module.scss.d.ts
 create mode 100644 web/src/components/NavigationCheck/NavigationCheck.tsx

diff --git a/web/src/components/Changes/ReviewDecisionButton/ReviewDecisionButton.tsx b/web/src/components/Changes/ReviewDecisionButton/ReviewDecisionButton.tsx
index 1c1160b23..b6f9dd3e8 100644
--- a/web/src/components/Changes/ReviewDecisionButton/ReviewDecisionButton.tsx
+++ b/web/src/components/Changes/ReviewDecisionButton/ReviewDecisionButton.tsx
@@ -1,124 +1,127 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { Radio, RadioGroup, ButtonVariation, Button, Container, Layout, ButtonSize, useToaster } from '@harness/uicore'
-import { Render } from 'react-jsx-match'
-import { useMutate } from 'restful-react'
-import cx from 'classnames'
-import { useStrings } from 'framework/strings'
-import type { GitInfoProps } from 'utils/GitUtils'
-import type { TypesPullReq } from 'services/code'
-import { getErrorMessage } from 'utils/Utils'
-import { MarkdownEditorWithPreview } from 'components/MarkdownEditorWithPreview/MarkdownEditorWithPreview'
-import css from './ReviewDecisionButton.module.scss'
+// import React, { useCallback, useEffect, useState } from 'react'
+// import { Radio, RadioGroup, ButtonVariation, Button, Container, Layout, ButtonSize, useToaster } from '@harness/uicore'
+// import { Render } from 'react-jsx-match'
+// import { useMutate } from 'restful-react'
+// import cx from 'classnames'
+// import { useStrings } from 'framework/strings'
+// import type { GitInfoProps } from 'utils/GitUtils'
+// import type { TypesPullReq } from 'services/code'
+// import { getErrorMessage } from 'utils/Utils'
+// import { MarkdownEditorWithPreview } from 'components/MarkdownEditorWithPreview/MarkdownEditorWithPreview'
+// import css from './ReviewDecisionButton.module.scss'
 
-enum PullReqReviewDecision {
-  REVIEWED = 'reviewed',
-  APPROVED = 'approved',
-  CHANGEREQ = 'changereq'
-}
+// enum PullReqReviewDecision {
+//   REVIEWED = 'reviewed',
+//   APPROVED = 'approved',
+//   CHANGEREQ = 'changereq'
+// }
 
-interface ReviewDecisionButtonProps extends Pick<GitInfoProps, 'repoMetadata'> {
-  shouldHide: boolean
-  pullRequestMetadata?: TypesPullReq
-}
+// interface ReviewDecisionButtonProps extends Pick<GitInfoProps, 'repoMetadata'> {
+//   shouldHide: boolean
+//   pullRequestMetadata?: TypesPullReq
+// }
 
-export const ReviewDecisionButton: React.FC<ReviewDecisionButtonProps> = ({
-  repoMetadata,
-  pullRequestMetadata,
-  shouldHide
-}) => {
-  const { getString } = useStrings()
-  const { showError, showSuccess } = useToaster()
-  const [comment, setComment] = useState('')
-  const [reset, setReset] = useState(false)
-  const [decision, setDecision] = useState<PullReqReviewDecision>(PullReqReviewDecision.REVIEWED)
-  const { mutate, loading } = useMutate({
-    verb: 'POST',
-    path: `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/reviews`
-  })
-  const submitReview = useCallback(() => {
-    mutate({ decision, message: comment })
-      .then(() => {
-        setReset(true)
-        showSuccess(getString('pr.reviewSubmitted'))
-      })
-      .catch(exception => showError(getErrorMessage(exception)))
-  }, [comment, decision, mutate, showError, showSuccess, getString])
+// /**
+//  * @deprecated
+//  */
+// export const ReviewDecisionButton: React.FC<ReviewDecisionButtonProps> = ({
+//   repoMetadata,
+//   pullRequestMetadata,
+//   shouldHide
+// }) => {
+//   const { getString } = useStrings()
+//   const { showError, showSuccess } = useToaster()
+//   const [comment, setComment] = useState('')
+//   const [reset, setReset] = useState(false)
+//   const [decision, setDecision] = useState<PullReqReviewDecision>(PullReqReviewDecision.REVIEWED)
+//   const { mutate, loading } = useMutate({
+//     verb: 'POST',
+//     path: `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/reviews`
+//   })
+//   const submitReview = useCallback(() => {
+//     mutate({ decision, message: comment })
+//       .then(() => {
+//         setReset(true)
+//         showSuccess(getString('pr.reviewSubmitted'))
+//       })
+//       .catch(exception => showError(getErrorMessage(exception)))
+//   }, [comment, decision, mutate, showError, showSuccess, getString])
 
-  useEffect(() => {
-    let timeoutId = 0
-    if (reset) {
-      timeoutId = window.setTimeout(() => setReset(false))
-    }
-    return () => window.clearTimeout(timeoutId)
-  }, [reset])
+//   useEffect(() => {
+//     let timeoutId = 0
+//     if (reset) {
+//       timeoutId = window.setTimeout(() => setReset(false))
+//     }
+//     return () => window.clearTimeout(timeoutId)
+//   }, [reset])
 
-  return (
-    <Button
-      text={getString('pr.reviewChanges')}
-      variation={ButtonVariation.PRIMARY}
-      intent="success"
-      rightIcon="chevron-down"
-      className={cx(css.btn, { [css.hide]: shouldHide })}
-      style={{ '--background-color': 'var(--green-800)' } as React.CSSProperties}
-      tooltip={
-        <Render when={!reset}>
-          <Container padding="large" className={css.popup}>
-            <Layout.Vertical spacing="medium">
-              <Container className={css.markdown} padding="medium">
-                <MarkdownEditorWithPreview
-                  value={comment}
-                  onChange={setComment}
-                  hideButtons
-                  i18n={{
-                    placeHolder: getString('leaveAComment'),
-                    tabEdit: getString('write'),
-                    tabPreview: getString('preview'),
-                    save: getString('save'),
-                    cancel: getString('cancel')
-                  }}
-                  editorHeight="100px"
-                />
-              </Container>
-              <Container padding={{ left: 'xxxlarge' }}>
-                <RadioGroup>
-                  <Radio
-                    name="decision"
-                    defaultChecked={decision === PullReqReviewDecision.REVIEWED}
-                    label={getString('comment')}
-                    value={PullReqReviewDecision.REVIEWED}
-                    onChange={() => setDecision(PullReqReviewDecision.REVIEWED)}
-                  />
-                  <Radio
-                    name="decision"
-                    defaultChecked={decision === PullReqReviewDecision.APPROVED}
-                    label={getString('approve')}
-                    value={PullReqReviewDecision.APPROVED}
-                    onChange={() => setDecision(PullReqReviewDecision.APPROVED)}
-                  />
-                  <Radio
-                    name="decision"
-                    defaultChecked={decision === PullReqReviewDecision.CHANGEREQ}
-                    label={getString('requestChanges')}
-                    value={PullReqReviewDecision.CHANGEREQ}
-                    onChange={() => setDecision(PullReqReviewDecision.CHANGEREQ)}
-                  />
-                </RadioGroup>
-              </Container>
-              <Container>
-                <Button
-                  variation={ButtonVariation.PRIMARY}
-                  text={getString('submitReview')}
-                  size={ButtonSize.MEDIUM}
-                  onClick={submitReview}
-                  disabled={!(comment || '').trim().length && decision != PullReqReviewDecision.APPROVED}
-                  loading={loading}
-                />
-              </Container>
-            </Layout.Vertical>
-          </Container>
-        </Render>
-      }
-      tooltipProps={{ interactionKind: 'click', position: 'bottom-right', hasBackdrop: true }}
-    />
-  )
-}
+//   return (
+//     <Button
+//       text={getString('pr.reviewChanges')}
+//       variation={ButtonVariation.PRIMARY}
+//       intent="success"
+//       rightIcon="chevron-down"
+//       className={cx(css.btn, { [css.hide]: shouldHide })}
+//       style={{ '--background-color': 'var(--green-800)' } as React.CSSProperties}
+//       tooltip={
+//         <Render when={!reset}>
+//           <Container padding="large" className={css.popup}>
+//             <Layout.Vertical spacing="medium">
+//               <Container className={css.markdown} padding="medium">
+//                 <MarkdownEditorWithPreview
+//                   value={comment}
+//                   onChange={setComment}
+//                   hideButtons
+//                   i18n={{
+//                     placeHolder: getString('leaveAComment'),
+//                     tabEdit: getString('write'),
+//                     tabPreview: getString('preview'),
+//                     save: getString('save'),
+//                     cancel: getString('cancel')
+//                   }}
+//                   editorHeight="100px"
+//                 />
+//               </Container>
+//               <Container padding={{ left: 'xxxlarge' }}>
+//                 <RadioGroup>
+//                   <Radio
+//                     name="decision"
+//                     defaultChecked={decision === PullReqReviewDecision.REVIEWED}
+//                     label={getString('comment')}
+//                     value={PullReqReviewDecision.REVIEWED}
+//                     onChange={() => setDecision(PullReqReviewDecision.REVIEWED)}
+//                   />
+//                   <Radio
+//                     name="decision"
+//                     defaultChecked={decision === PullReqReviewDecision.APPROVED}
+//                     label={getString('approve')}
+//                     value={PullReqReviewDecision.APPROVED}
+//                     onChange={() => setDecision(PullReqReviewDecision.APPROVED)}
+//                   />
+//                   <Radio
+//                     name="decision"
+//                     defaultChecked={decision === PullReqReviewDecision.CHANGEREQ}
+//                     label={getString('requestChanges')}
+//                     value={PullReqReviewDecision.CHANGEREQ}
+//                     onChange={() => setDecision(PullReqReviewDecision.CHANGEREQ)}
+//                   />
+//                 </RadioGroup>
+//               </Container>
+//               <Container>
+//                 <Button
+//                   variation={ButtonVariation.PRIMARY}
+//                   text={getString('submitReview')}
+//                   size={ButtonSize.MEDIUM}
+//                   onClick={submitReview}
+//                   disabled={!(comment || '').trim().length && decision != PullReqReviewDecision.APPROVED}
+//                   loading={loading}
+//                 />
+//               </Container>
+//             </Layout.Vertical>
+//           </Container>
+//         </Render>
+//       }
+//       tooltipProps={{ interactionKind: 'click', position: 'bottom-right', hasBackdrop: true }}
+//     />
+//   )
+// }
diff --git a/web/src/components/CommentBox/CommentBox.tsx b/web/src/components/CommentBox/CommentBox.tsx
index d72723e83..09477db45 100644
--- a/web/src/components/CommentBox/CommentBox.tsx
+++ b/web/src/components/CommentBox/CommentBox.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useResizeDetector } from 'react-resize-detector'
 import type { EditorView } from '@codemirror/view'
 import { Render, Match, Truthy, Falsy, Else } from 'react-jsx-match'
@@ -68,6 +68,7 @@ interface CommentBoxProps<T> {
     atCommentItem?: CommentItem<T>
   ) => Promise<[boolean, CommentItem<T> | undefined]>
   onCancel?: () => void
+  setDirty: (dirty: boolean) => void
   outlets?: Partial<Record<CommentBoxOutletPosition, React.ReactNode>>
 }
 
@@ -83,12 +84,14 @@ export const CommentBox = <T = unknown,>({
   onCancel = noop,
   hideCancel,
   resetOnSave,
+  setDirty: setDirtyProp,
   outlets = {}
 }: CommentBoxProps<T>) => {
   const { getString } = useStrings()
   const [comments, setComments] = useState<CommentItem<T>[]>(commentItems)
   const [showReplyPlaceHolder, setShowReplyPlaceHolder] = useState(!!comments.length)
   const [markdown, setMarkdown] = useState(initialContent)
+  const [dirties, setDirties] = useState<Record<string, boolean>>({})
   const { ref } = useResizeDetector<HTMLDivElement>({
     refreshMode: 'debounce',
     handleWidth: false,
@@ -117,6 +120,13 @@ export const CommentBox = <T = unknown,>({
   }, [])
   const viewRef = useRef<EditorView>()
 
+  useEffect(() => {
+    setDirtyProp(Object.values(dirties).some(dirty => dirty))
+    return () => {
+      setDirtyProp(false)
+    }
+  }, [dirties]) // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <Container
       className={cx(css.main, { [css.fluid]: fluid }, className)}
@@ -140,6 +150,9 @@ export const CommentBox = <T = unknown,>({
 
               return [result, updatedItem]
             }}
+            setDirty={(index, dirty) => {
+              setDirties({ ...dirties, [index]: dirty })
+            }}
             outlets={outlets}
           />
           <Match expr={showReplyPlaceHolder}>
@@ -199,6 +212,9 @@ export const CommentBox = <T = unknown,>({
                   }}
                   onCancel={_onCancel}
                   hideCancel={hideCancel}
+                  setDirty={_dirty => {
+                    setDirties({ ...dirties, ['new']: _dirty })
+                  }}
                 />
               </Container>
             </Falsy>
@@ -211,12 +227,14 @@ export const CommentBox = <T = unknown,>({
 
 interface CommentsThreadProps<T> extends Pick<CommentBoxProps<T>, 'commentItems' | 'handleAction' | 'outlets'> {
   onQuote: (content: string) => void
+  setDirty: (index: number, dirty: boolean) => void
 }
 
 const CommentsThread = <T = unknown,>({
   onQuote,
   commentItems = [],
   handleAction,
+  setDirty,
   outlets = {}
 }: CommentsThreadProps<T>) => {
   const { getString } = useStrings()
@@ -331,6 +349,9 @@ const CommentsThread = <T = unknown,>({
                           }
                         }}
                         onCancel={() => resetStateAtIndex(index)}
+                        setDirty={_dirty => {
+                          setDirty(index, _dirty)
+                        }}
                         i18n={{
                           placeHolder: getString('leaveAComment'),
                           tabEdit: getString('write'),
diff --git a/web/src/components/DiffViewer/DiffViewer.tsx b/web/src/components/DiffViewer/DiffViewer.tsx
index 447781c49..91b255e42 100644
--- a/web/src/components/DiffViewer/DiffViewer.tsx
+++ b/web/src/components/DiffViewer/DiffViewer.tsx
@@ -28,6 +28,7 @@ import type { OpenapiCommentCreatePullReqRequest, TypesPullReq, TypesPullReqActi
 import { getErrorMessage } from 'utils/Utils'
 import { CopyButton } from 'components/CopyButton/CopyButton'
 import { AppWrapper } from 'App'
+import { NavigationCheck } from 'components/NavigationCheck/NavigationCheck'
 import {
   activitiesToDiffCommentItems,
   activityToCommentItem,
@@ -91,6 +92,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   const { mutate: updateComment } = useMutate({ verb: 'PATCH', path: ({ id }) => `${path}/${id}` })
   const { mutate: deleteComment } = useMutate({ verb: 'DELETE', path: ({ id }) => `${path}/${id}` })
   const [comments, setComments] = useState<DiffCommentItem<TypesPullReqActivity>[]>(activitiesToDiffCommentItems(diff))
+  const [dirty, setDirty] = useState(false)
   const commentsRef = useRef<DiffCommentItem<TypesPullReqActivity>[]>(comments)
   const setContainerRef = useCallback(
     node => {
@@ -298,6 +300,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
                     delete lineInfo.rowElement.dataset.annotated
                     setTimeout(() => setComments(commentsRef.current.filter(item => item !== comment)), 0)
                   }}
+                  setDirty={setDirty}
                   currentUserName={currentUser.display_name}
                   handleAction={async (action, value, commentItem) => {
                     let result = true
@@ -511,6 +514,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
           </Render>
         </Container>
       </Layout.Vertical>
+      <NavigationCheck when={dirty} />
     </Container>
   )
 }
diff --git a/web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.tsx b/web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.tsx
index 87af5a6ae..e18f8e23c 100644
--- a/web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.tsx
+++ b/web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.tsx
@@ -40,6 +40,7 @@ interface MarkdownEditorWithPreviewProps {
   onChange?: (value: string) => void
   onSave?: (value: string) => void
   onCancel?: () => void
+  setDirty: (dirty: boolean) => void
   i18n: {
     placeHolder: string
     tabEdit: string
@@ -59,6 +60,7 @@ export function MarkdownEditorWithPreview({
   onChange,
   onSave,
   onCancel,
+  setDirty: setDirtyProp,
   i18n,
   hideButtons,
   hideCancel,
@@ -186,6 +188,14 @@ export function MarkdownEditorWithPreview({
     }
   }, [])
 
+  useEffect(() => {
+    setDirtyProp?.(dirty)
+
+    return () => {
+      setDirtyProp?.(false)
+    }
+  }, [dirty]) // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (viewRefProp) {
       viewRefProp.current = viewRef.current
diff --git a/web/src/components/NavigationCheck/NavigationCheck.module.scss b/web/src/components/NavigationCheck/NavigationCheck.module.scss
new file mode 100644
index 000000000..6a361b501
--- /dev/null
+++ b/web/src/components/NavigationCheck/NavigationCheck.module.scss
@@ -0,0 +1,7 @@
+.main {
+  padding-top: var(--spacing-xxlarge) !important;
+
+  p {
+    word-break: normal;
+  }
+}
diff --git a/web/src/components/NavigationCheck/NavigationCheck.module.scss.d.ts b/web/src/components/NavigationCheck/NavigationCheck.module.scss.d.ts
new file mode 100644
index 000000000..9e614bf2d
--- /dev/null
+++ b/web/src/components/NavigationCheck/NavigationCheck.module.scss.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly main: string
+}
+export default styles
diff --git a/web/src/components/NavigationCheck/NavigationCheck.tsx b/web/src/components/NavigationCheck/NavigationCheck.tsx
new file mode 100644
index 000000000..94367197f
--- /dev/null
+++ b/web/src/components/NavigationCheck/NavigationCheck.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { Prompt, useHistory } from 'react-router-dom'
+import { useConfirmationDialog } from '@harness/uicore'
+import { Intent } from '@harness/design-system'
+import type * as History from 'history'
+import { useStrings } from 'framework/strings'
+import css from './NavigationCheck.module.scss'
+
+interface NavigationCheckProps {
+  when?: boolean
+  i18n?: {
+    message?: string
+    title?: string
+    confirmText?: string
+    cancelText?: string
+  }
+  replace?: boolean
+}
+
+export const NavigationCheck: React.FC<NavigationCheckProps> = ({ when, i18n, replace }) => {
+  const history = useHistory()
+  const [lastLocation, setLastLocation] = useState<History.Location | null>(null)
+  const [confirmed, setConfirmed] = useState(false)
+  const { getString } = useStrings()
+  const { openDialog } = useConfirmationDialog({
+    cancelButtonText: i18n?.cancelText || getString('unsavedChanges.stay'),
+    showCloseButton: false,
+    contentText: i18n?.message || getString('unsavedChanges.message'),
+    titleText: i18n?.title || getString('unsavedChanges.title'),
+    confirmButtonText: i18n?.confirmText || getString('unsavedChanges.leave'),
+    intent: Intent.WARNING,
+    onCloseDialog: setConfirmed,
+    className: css.main
+  })
+  const prompt = useCallback(
+    (nextLocation: History.Location): string | boolean => {
+      if (!confirmed) {
+        openDialog()
+        setLastLocation(nextLocation)
+        return false
+      }
+      return true
+    },
+    [confirmed, openDialog]
+  )
+
+  useEffect(() => {
+    if (confirmed && lastLocation) {
+      history[replace ? 'replace' : 'push'](lastLocation.pathname + lastLocation.search)
+    }
+
+    confirmed && setConfirmed(false)
+  }, [confirmed, lastLocation, history, replace])
+
+  return <Prompt when={when} message={prompt} />
+}
diff --git a/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx b/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
index 46ac697ce..df958f026 100644
--- a/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
+++ b/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
@@ -10,7 +10,7 @@ export const MonacoEditorOptions = {
   minimap: { enabled: false },
   codeLens: false,
   scrollBeyondLastLine: false,
-  smartSelect: false,
+  // smartSelect: false,
   tabSize: 2,
   insertSpaces: true,
   overviewRulerBorder: false,
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 96eacc100..52359810e 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -302,6 +302,10 @@ export interface StringsMap {
   tags: string
   title: string
   tooltipRepoEdit: string
+  'unsavedChanges.leave': string
+  'unsavedChanges.message': string
+  'unsavedChanges.stay': string
+  'unsavedChanges.title': string
   updateFile: string
   updateWebhook: string
   updated: string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 3aad3b792..64aed26b5 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -377,3 +377,8 @@ viewRaw: View Raw
 download: Download
 changes: Changes
 contents: Contents
+unsavedChanges:
+  title: Close without saving?
+  message: 'You have unsaved changes. Are you sure you want to leave this page without saving?'
+  leave: Leave this Page
+  stay: Stay on this Page
diff --git a/web/src/pages/PullRequest/Conversation/Conversation.tsx b/web/src/pages/PullRequest/Conversation/Conversation.tsx
index 7ef63b18b..14173acd2 100644
--- a/web/src/pages/PullRequest/Conversation/Conversation.tsx
+++ b/web/src/pages/PullRequest/Conversation/Conversation.tsx
@@ -33,6 +33,7 @@ import { CommentAction, CommentBox, CommentBoxOutletPosition, CommentItem } from
 import { useConfirmAct } from 'hooks/useConfirmAction'
 import { commentState, formatDate, formatTime, getErrorMessage, orderSortDate, dayAgoInMS } from 'utils/Utils'
 import { activityToCommentItem, CommentType, DIFF2HTML_CONFIG, ViewStyle } from 'components/DiffViewer/DiffViewerUtils'
+import { NavigationCheck } from 'components/NavigationCheck/NavigationCheck'
 import { ThreadSection } from 'components/ThreadSection/ThreadSection'
 import { PullRequestTabContentWrapper } from '../PullRequestTabContentWrapper'
 import { DescriptionBox } from './DescriptionBox'
@@ -175,6 +176,8 @@ export const Conversation: React.FC<ConversationProps> = ({
   const { mutate: deleteComment } = useMutate({ verb: 'DELETE', path: ({ id }) => `${path}/${id}` })
   const confirmAct = useConfirmAct()
   const [commentCreated, setCommentCreated] = useState(false)
+  const [dirtyNewComment, setDirtyNewComment] = useState(false)
+  const [dirtyCurrentComments, setDirtyCurrentComments] = useState(false)
 
   const refreshPR = useCallback(() => {
     onCommentUpdate()
@@ -316,6 +319,7 @@ export const Conversation: React.FC<ConversationProps> = ({
                             })}
                             commentItems={commentItems}
                             currentUserName={currentUser.display_name}
+                            setDirty={setDirtyCurrentComments}
                             handleAction={async (action, value, commentItem) => {
                               let result = true
                               let updatedItem: CommentItem<TypesPullReqActivity> | undefined = undefined
@@ -411,6 +415,7 @@ export const Conversation: React.FC<ConversationProps> = ({
                     currentUserName={currentUser.display_name}
                     resetOnSave
                     hideCancel
+                    setDirty={setDirtyNewComment}
                     handleAction={async (_action, value) => {
                       let result = true
                       let updatedItem: CommentItem<TypesPullReqActivity> | undefined = undefined
@@ -440,6 +445,7 @@ export const Conversation: React.FC<ConversationProps> = ({
           </Container>
         </Layout.Vertical>
       </Container>
+      <NavigationCheck when={dirtyCurrentComments || dirtyNewComment} />
     </PullRequestTabContentWrapper>
   )
 }
diff --git a/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx b/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx
index 6e62e662e..8f4f7f89d 100644
--- a/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx
+++ b/web/src/pages/PullRequest/Conversation/DescriptionBox.tsx
@@ -7,6 +7,7 @@ import { useStrings } from 'framework/strings'
 import type { OpenapiUpdatePullReqRequest } from 'services/code'
 import { OptionsMenuButton } from 'components/OptionsMenuButton/OptionsMenuButton'
 import { MarkdownEditorWithPreview } from 'components/MarkdownEditorWithPreview/MarkdownEditorWithPreview'
+import { NavigationCheck } from 'components/NavigationCheck/NavigationCheck'
 import { getErrorMessage } from 'utils/Utils'
 import type { ConversationProps } from './Conversation'
 import css from './Conversation.module.scss'
@@ -17,7 +18,7 @@ export const DescriptionBox: React.FC<ConversationProps> = ({
   onCommentUpdate: refreshPullRequestMetadata
 }) => {
   const [edit, setEdit] = useState(false)
-  // const [updated, setUpdated] = useState(pullRequestMetadata.edited as number)
+  const [dirty, setDirty] = useState(false)
   const [originalContent, setOriginalContent] = useState(pullRequestMetadata.description as string)
   const [content, setContent] = useState(originalContent)
   const { getString } = useStrings()
@@ -52,6 +53,7 @@ export const DescriptionBox: React.FC<ConversationProps> = ({
               setContent(originalContent)
               setEdit(false)
             }}
+            setDirty={setDirty}
             i18n={{
               placeHolder: getString('pr.enterDesc'),
               tabEdit: getString('write'),
@@ -84,6 +86,7 @@ export const DescriptionBox: React.FC<ConversationProps> = ({
           </Container>
         )}
       </Container>
+      <NavigationCheck when={dirty} />
     </Container>
   )
 }
diff --git a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
index e6a2553dc..4631790a7 100644
--- a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
+++ b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
@@ -24,6 +24,7 @@ import { filenameToLanguage, FILE_SEPERATOR } from 'utils/Utils'
 import { useGetResourceContent } from 'hooks/useGetResourceContent'
 import { CommitModalButton } from 'components/CommitModalButton/CommitModalButton'
 import { DiffEditor } from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
+import { NavigationCheck } from 'components/NavigationCheck/NavigationCheck'
 import css from './FileEditor.module.scss'
 
 interface EditorProps extends Pick<GitInfoProps, 'repoMetadata' | 'gitRef' | 'resourcePath'> {
@@ -97,6 +98,10 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
     verifyFolder().then(() => setStartVerifyFolder(true))
   }, [fileName, parentPath, language, content, verifyFolder])
   const [selectedView, setSelectedView] = useState(VisualYamlSelectedView.VISUAL)
+  const disabled = useMemo(
+    () => !fileName || (isUpdate && content === originalContent),
+    [fileName, isUpdate, content, originalContent]
+  )
 
   // Calculate file name input field width based on number of characters inside
   useEffect(() => {
@@ -194,7 +199,7 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
             <CommitModalButton
               text={getString('commitChanges')}
               variation={ButtonVariation.PRIMARY}
-              disabled={!fileName || (isUpdate && content === originalContent)}
+              disabled={disabled}
               repoMetadata={repoMetadata}
               commitAction={commitAction}
               commitTitlePlaceHolder={getString(isNew ? 'createFile' : isUpdate ? 'updateFile' : 'renameFile')
@@ -259,6 +264,7 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
           <DiffEditor language={language} original={originalContent} source={content} onChange={setContent} />
         )}
       </Container>
+      <NavigationCheck when={!disabled} />
     </Container>
   )
 }

From 37940a4527b68d5113bec5683692eba287086ae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ctan-nhu=E2=80=9D?= <“tan@harness.io”>
Date: Mon, 1 May 2023 16:31:32 -0700
Subject: [PATCH 2/2] feat: Not showing confirmation when commit is done
 successfully

---
 .../RepositoryFileEdit/FileEditor/FileEditor.tsx  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
index 4631790a7..b534561fc 100644
--- a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
+++ b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx
@@ -98,10 +98,11 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
     verifyFolder().then(() => setStartVerifyFolder(true))
   }, [fileName, parentPath, language, content, verifyFolder])
   const [selectedView, setSelectedView] = useState(VisualYamlSelectedView.VISUAL)
-  const disabled = useMemo(
-    () => !fileName || (isUpdate && content === originalContent),
-    [fileName, isUpdate, content, originalContent]
-  )
+  const [dirty, setDirty] = useState(false)
+
+  useEffect(() => {
+    setDirty(!(!fileName || (isUpdate && content === originalContent)))
+  }, [fileName, isUpdate, content, originalContent])
 
   // Calculate file name input field width based on number of characters inside
   useEffect(() => {
@@ -199,7 +200,7 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
             <CommitModalButton
               text={getString('commitChanges')}
               variation={ButtonVariation.PRIMARY}
-              disabled={disabled}
+              disabled={!dirty}
               repoMetadata={repoMetadata}
               commitAction={commitAction}
               commitTitlePlaceHolder={getString(isNew ? 'createFile' : isUpdate ? 'updateFile' : 'renameFile')
@@ -211,6 +212,8 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
               payload={content}
               sha={resourceContent?.sha}
               onSuccess={(_data, newBranch) => {
+                setDirty(false)
+
                 if (newBranch) {
                   history.replace(
                     routes.toCODECompare({
@@ -264,7 +267,7 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
           <DiffEditor language={language} original={originalContent} source={content} onChange={setContent} />
         )}
       </Container>
-      <NavigationCheck when={!disabled} />
+      <NavigationCheck when={dirty} />
     </Container>
   )
 }