fix: [code-1099]: fix image upload and text in protection form and spacing (#797)

web/src/components/BranchProtection/BranchProtectionForm/ProtectionRulesForm/ProtectionRulesForm.tsx

@@ -66,7 +66,7 @@ const ProtectionRulesForm = (props: {
         name={'blockBranchDeletion'}
       />
       <Text padding={{ left: 'xlarge' }} className={css.checkboxText}>
-        {getString('branchProtection.blockBranchCreationText')}
+        {getString('branchProtection.blockBranchDeletionText')}
       </Text>
       <hr className={css.dividerContainer} />
       <FormInput.CheckBox

web/src/components/CommentBox/CommentBox.tsx

@@ -108,6 +108,7 @@ interface CommentBoxProps<T> {
   enableReplyPlaceHolder?: boolean
   repoMetadata: TypesRepository | undefined
   standalone: boolean
+  routingId: string
 }
 
 export const CommentBox = <T = unknown,>({
@@ -130,7 +131,8 @@ export const CommentBox = <T = unknown,>({
   autoFocusAndPosition,
   enableReplyPlaceHolder,
   repoMetadata,
-  standalone
+  standalone,
+  routingId
 }: CommentBoxProps<T>) => {
   const { getString } = useStrings()
   const [comments, setComments] = useState<CommentItem<T>[]>(commentItems)
@@ -246,6 +248,7 @@ export const CommentBox = <T = unknown,>({
             <Falsy>
               <Container className={cx(css.newCommentContainer, { [css.hasThread]: !!comments.length })}>
                 <MarkdownEditorWithPreview
+                  routingId={routingId}
                   standalone={standalone}
                   repoMetadata={repoMetadata}
                   className={editorClassName}
@@ -324,7 +327,7 @@ const CommentsThread = <T = unknown,>({
   repoMetadata
 }: CommentsThreadProps<T>) => {
   const { getString } = useStrings()
-  const { standalone } = useAppContext()
+  const { standalone, routingId } = useAppContext()
   const [editIndexes, setEditIndexes] = useState<Record<number, boolean>>({})
   const resetStateAtIndex = useCallback(
     (index: number) => {
@@ -429,6 +432,7 @@ const CommentsThread = <T = unknown,>({
                   <Truthy>
                     <Container className={css.editCommentContainer}>
                       <MarkdownEditorWithPreview
+                        routingId={routingId}
                         standalone={standalone}
                         repoMetadata={repoMetadata}
                         value={commentItem?.content}

web/src/components/DiffViewer/DiffViewer.tsx

@@ -105,7 +105,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   commitRange,
   scrollElement
 }) => {
-  const { routes } = useAppContext()
+  const { routes, routingId } = useAppContext()
   const { getString } = useStrings()
   const viewedPath = useMemo(
     () => `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/file-views`,
@@ -228,6 +228,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
       ReactDOM.render(
         <AppWrapper>
           <CommentBox
+            routingId={routingId}
             standalone={standalone}
             repoMetadata={repoMetadata}
             commentItems={comment.commentItems}

web/src/components/Editor/Editor.tsx

@@ -52,6 +52,7 @@ export interface EditorProps {
   repoMetadata: TypesRepository | undefined
   inGitBlame?: boolean
   standalone: boolean
+  routingId?: string
 }
 
 export const Editor = React.memo(function CodeMirrorReactEditor({
@@ -71,7 +72,8 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
   darkTheme,
   repoMetadata,
   inGitBlame = false,
-  standalone
+  standalone,
+  routingId
 }: EditorProps) {
   const { showError } = useToaster()
   const { getString } = useStrings()
@@ -100,7 +102,7 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
 
   const updateContentWithoutStateChange = () => {
     setUploading(true)
-    if (view.current && markdownContent) {
+    if (view.current && markdownContent && !inGitBlame) {
       const currentContent = view.current.state.doc.toString()
       const markdownInsert = `![image](${markdownContent})`
       // Create a transaction to update the document content
@@ -200,7 +202,9 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
     }
   }, [filename, forMarkdown, view, languageConfig, markdownLanguageSupport])
   const handleUploadCallback = (file: File) => {
-    handleUpload(file, setMarkdownContent, repoMetadata, showError, standalone)
+    if (!inGitBlame) {
+      handleUpload(file, setMarkdownContent, repoMetadata, showError, standalone, routingId)
+    }
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleDropForUpload = async (event: any) => {

web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.tsx

@@ -96,6 +96,7 @@ interface MarkdownEditorWithPreviewProps {
   autoFocusAndPosition?: boolean
   repoMetadata: TypesRepository | undefined
   standalone: boolean
+  routingId: string
 }
 
 export function MarkdownEditorWithPreview({
@@ -114,11 +115,11 @@ export function MarkdownEditorWithPreview({
   autoFocusAndPosition,
   secondarySaveButton: SecondarySaveButton,
   repoMetadata,
-  standalone
+  standalone,
+  routingId
 }: MarkdownEditorWithPreviewProps) {
   const { getString } = useStrings()
   const fileInputRef = useRef<HTMLInputElement>(null)
-
   const [selectedTab, setSelectedTab] = useState(MarkdownEditorTab.WRITE)
   const viewRef = useRef<EditorView>()
   const containerRef = useRef<HTMLDivElement>(null)
@@ -366,7 +367,7 @@ export function MarkdownEditorWithPreview({
               variation={ButtonVariation.PRIMARY}
               disabled={false}
               onClick={() => {
-                handleUpload(file as File, setMarkdownContent, repoMetadata, showError, standalone)
+                handleUpload(file as File, setMarkdownContent, repoMetadata, showError, standalone, routingId)
                 setOpen(false)
                 setFile(undefined)
               }}
@@ -420,6 +421,7 @@ export function MarkdownEditorWithPreview({
       </Container>
       <Container className={css.tabContent}>
         <Editor
+          routingId={routingId}
           standalone={standalone}
           repoMetadata={repoMetadata}
           forMarkdown

web/src/pages/Compare/Compare.tsx

@@ -58,7 +58,7 @@ import css from './Compare.module.scss'
 export default function Compare() {
   const { getString } = useStrings()
   const history = useHistory()
-  const { routes, standalone } = useAppContext()
+  const { routes, standalone, routingId } = useAppContext()
   const { repoMetadata, error, loading, diffRefs } = useGetRepositoryMetadata()
   const [sourceGitRef, setSourceGitRef] = useState(diffRefs.sourceGitRef)
   const [targetGitRef, setTargetGitRef] = useState(diffRefs.targetGitRef)
@@ -243,6 +243,7 @@ export default function Compare() {
                           <Layout.Vertical spacing="small">
                             <Text font={{ variation: FontVariation.SMALL_BOLD }}>{getString('description')}</Text>
                             <MarkdownEditorWithPreview
+                              routingId={routingId}
                               standalone={standalone}
                               repoMetadata={repoMetadata}
                               value={description}

web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss

@@ -160,3 +160,7 @@
 .waitingContainer {
   justify-content: unset !important;
 }
+
+.codeOwner {
+  --layout-spacing: 1px !important;
+}

web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.module.scss.d.ts

@@ -19,6 +19,7 @@
 export declare const approvalText: string
 export declare const checks: string
 export declare const circle: string
+export declare const codeOwner: string
 export declare const codeOwnerTable: string
 export declare const desc: string
 export declare const layout: string

web/src/pages/PullRequest/CodeOwners/CodeOwnersOverview.tsx

@@ -44,6 +44,7 @@ import css from './CodeOwnersOverview.module.scss'
 interface ChecksOverviewProps extends Pick<GitInfoProps, 'repoMetadata' | 'pullRequestMetadata'> {
   prChecksDecisionResult: PRChecksDecisionResult
   codeOwners?: TypesCodeOwnerEvaluation
+  standalone: boolean
 }
 
 enum CodeOwnerReqDecision {
@@ -56,7 +57,8 @@ export function CodeOwnersOverview({
   codeOwners,
   repoMetadata,
   pullRequestMetadata,
-  prChecksDecisionResult
+  prChecksDecisionResult,
+  standalone
 }: ChecksOverviewProps) {
   const { getString } = useStrings()
   const [isExpanded, toggleExpanded] = useToggle(false)
@@ -100,7 +102,7 @@ export function CodeOwnersOverview({
   const { borderColor, message, overallStatus } = checkEntries(changeReqEntries, waitingEntries, approvalEntries)
   return codeOwners?.evaluation_entries?.length ? (
     <Container
-      className={css.main}
+      className={cx(css.main, { [css.codeOwner]: !standalone })}
       margin={{ top: 'medium', bottom: pullRequestMetadata.description ? undefined : 'large' }}
       style={{ '--border-color': Utils.getRealCSSColor(borderColor) } as React.CSSProperties}>
       <Match expr={isExpanded}>

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

@@ -51,6 +51,7 @@ export interface ConversationProps extends Pick<GitInfoProps, 'repoMetadata' | '
   onCancelEditDescription: () => void
   prChecksDecisionResult?: PRChecksDecisionResult
   standalone: boolean
+  routingId: string
 }
 
 export const Conversation: React.FC<ConversationProps> = ({
@@ -61,7 +62,8 @@ export const Conversation: React.FC<ConversationProps> = ({
   showEditDescription,
   onCancelEditDescription,
   prChecksDecisionResult,
-  standalone
+  standalone,
+  routingId
 }) => {
   const { getString } = useStrings()
   const { currentUser } = useAppContext()
@@ -187,6 +189,7 @@ export const Conversation: React.FC<ConversationProps> = ({
   const newCommentBox = useMemo(() => {
     return (
       <CommentBox
+        routingId={routingId}
         standalone={standalone}
         repoMetadata={repoMetadata}
         fluid
@@ -254,6 +257,7 @@ export const Conversation: React.FC<ConversationProps> = ({
             }
             title={
               <CommentBox
+                routingId={routingId}
                 standalone={standalone}
                 repoMetadata={repoMetadata}
                 key={threadId}
@@ -383,6 +387,7 @@ export const Conversation: React.FC<ConversationProps> = ({
                   )}
                   {codeOwners && prChecksDecisionResult && (
                     <CodeOwnersOverview
+                      standalone={standalone}
                       codeOwners={codeOwners}
                       repoMetadata={repoMetadata}
                       pullRequestMetadata={pullRequestMetadata}
@@ -392,6 +397,7 @@ export const Conversation: React.FC<ConversationProps> = ({
 
                   {(hasDescription || showEditDescription) && (
                     <DescriptionBox
+                      routingId={routingId}
                       standalone={standalone}
                       repoMetadata={repoMetadata}
                       pullRequestMetadata={pullRequestMetadata}

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

@@ -37,7 +37,8 @@ export const DescriptionBox: React.FC<DescriptionBoxProps> = ({
   pullRequestMetadata,
   onCommentUpdate: refreshPullRequestMetadata,
   onCancelEditDescription,
-  standalone
+  standalone,
+  routingId
 }) => {
   const [edit, setEdit] = useState(false)
   const [dirty, setDirty] = useState(false)
@@ -64,6 +65,7 @@ export const DescriptionBox: React.FC<DescriptionBoxProps> = ({
       <Container padding={!edit ? { left: 'small', bottom: 'small' } : undefined}>
         {(edit && (
           <MarkdownEditorWithPreview
+            routingId={routingId}
             standalone={standalone}
             repoMetadata={repoMetadata}
             value={content}

web/src/pages/PullRequest/PullRequest.tsx

@@ -47,7 +47,7 @@ const SSE_EVENTS = ['pullreq_updated']
 export default function PullRequest() {
   const history = useHistory()
   const { getString } = useStrings()
-  const { routes, standalone } = useAppContext()
+  const { routes, standalone, routingId } = useAppContext()
   const space = useGetSpaceParam()
   const {
     repoMetadata,
@@ -240,6 +240,7 @@ export default function PullRequest() {
                     ),
                     panel: (
                       <Conversation
+                        routingId={routingId}
                         standalone={standalone}
                         repoMetadata={repoMetadata as TypesRepository}
                         pullRequestMetadata={prData as TypesPullReq}

web/src/utils/GitUtils.ts

@@ -28,6 +28,7 @@ import type {
   TypesPullReq,
   TypesRepository
 } from 'services/code'
+import { getConfig } from 'services/config'
 import { getErrorMessage } from './Utils'
 
 export interface GitInfoProps {
@@ -251,12 +252,13 @@ export const handleUpload = (
   setMarkdownContent: (data: string) => void,
   repoMetadata: TypesRepository | undefined,
   showError: (message: React.ReactNode, timeout?: number | undefined, key?: string | undefined) => void,
-  standalone: boolean
+  standalone: boolean,
+  routingId?: string
 ) => {
   const reader = new FileReader()
   // Set up a function to be called when the load event is triggered
   reader.onload = async function () {
-    const markdown = await uploadImage(reader.result, showError, repoMetadata, standalone)
+    const markdown = await uploadImage(reader.result, showError, repoMetadata, standalone, routingId)
     setMarkdownContent(markdown) // Set the markdown content
   }
   reader.readAsArrayBuffer(blob) // This will trigger the onload function when the reading is complete
@@ -267,11 +269,14 @@ export const uploadImage = async (
   fileBlob: any,
   showError: (message: React.ReactNode, timeout?: number | undefined, key?: string | undefined) => void,
   repoMetadata: TypesRepository | undefined,
-  standalone: boolean
+  standalone: boolean,
+  routingId?: string
 ) => {
   try {
     const response = await fetch(
-      `${window.location.origin}/${standalone ? '' : 'code/'}api/v1/repos/${repoMetadata?.path}/+/uploads/`,
+      `${window.location.origin}${getConfig(
+        `code/api/v1/repos/${repoMetadata?.path}/+/uploads${standalone || !routingId ? `` : `?routingId=${routingId}`}`
+      )}`,
       {
         method: 'POST',
         headers: {