병합 요청 Diff 프론트엔드 개요

%%{init: { "fontFamily": "GitLab Sans" }}%% flowchart TB accTitle: 구성 요소 렌더링 accDescr: GitLab 프런트 엔드에서 구성 요소가 렌더링되는 방식의 플로우차트 classDef code font-family: monospace; A["diffs~~app.vue"] descVirtualScroller(["가상 스크롤러"]) codeForFiles[["v-for(diffFiles)"]] B["diffs~~diff_file.vue"] C["diffs~~diff_file_header.vue"] D["diffs~~diff_stats.vue"] E["diffs~~diff_content.vue"] boolFileIsText{isTextFile} boolOnlyWhitespace{isWhitespaceOnly} boolNotDiffable{notDiffable} boolNoPreview{noPreview} descShowChanges(["“변경 사항 보기” 버튼"]) %% 비텍스트 변경 dirDiffViewer>"vue_shared~~diff_viewer"] F["./viewers/not_diffable.vue"] G["./viewers/no_preview.vue"] H["./diff_viewer.vue"] I["diffs~~diff_view.vue"] boolIsRenamed{isRenamed} boolIsModeChanged{isModeChanged} boolFileHasNoPath{hasNewPath} boolIsImage{isImage} J["./viewers/renamed.vue"] K["./viewers/mode_changed.vue"] descNoViewer(["렌더링된 뷰어가 없습니다."]) L["./viewers/image_diff_viewer.vue"] M["./viewers/download.vue"] N["vue_shared~~download_diff_viewer.vue"] boolImageIsReplaced{isReplaced} O["vue_shared~~image_viewer.vue"] switchImageMode((image_diff_viewer.mode)) P["./viewers/image_diff/onion_skin_viewer.vue"] Q["./viewers/image_diff/swipe_viewer.vue"] R["./viewers/image_diff/two_up_viewer.vue"] S["diffs~~image_diff_overlay.vue"] codeForImageDiscussions[["v-for(discussions)"]] T["vue_shared~~design_note_pin.vue"] U["vue_shared~~user_avatar_link.vue"] V["diffs~~diff_discussions.vue"] W["batch_comments~~diff_file_drafts.vue"] codeForTwoUpDiscussions[["v-for(discussions)"]] codeForTwoUpDrafts[["v-for(drafts)"]] X["notes~~notable_discussion.vue"] %% 텍스트 파일 변경 codeForDiffLines[["v-for(diffLines)"]] Y["diffs~~diff_expansion_cell.vue"] Z["diffs~~diff_row.vue"] AA["diffs~~diff_line.vue"] AB["batch_comments~~draft_note.vue"] AC["diffs~~diff_comment_cell.vue"] AD["diffs~~diff_gutter_avatars.vue"] AE["ee-diffs~~inline_findings_gutter_icon_dropdown.vue"] AF["notes~~noteable_note.vue"] AG["notes~~note_actions.vue"] AH["notes~~note_body.vue"] AI["notes~~note_header.vue"] AJ["notes~~reply_button.vue"] AK["notes~~note_awards_list.vue"] AL["notes~~note_edited_text.vue"] AM["notes~~note_form.vue"] AN["vue_shared~~awards_list.vue"] AO["emoji~~picker.vue"] AP["emoji~~emoji_list.vue"] descEmojiVirtualScroll(["가상 스크롤러"]) AQ["emoji~~category.vue"] AR["emoji~emoji_category.vue"] AS["vue_shared~~markdown_editor.vue"] class codeForFiles,codeForImageDiscussions code; class codeForTwoUpDiscussions,codeForTwoUpDrafts code; class codeForDiffLines code; %% 이 스위치 노드에도 코드 스타일 적용 class switchImageMode code; %% 이 불리언 노드에도 코드 스타일 적용 class boolFileIsText,boolOnlyWhitespace,boolNotDiffable,boolNoPreview code; class boolIsRenamed,boolIsModeChanged,boolFileHasNoPath,boolIsImage code; class boolImageIsReplaced code; A --> descVirtualScroller A -->|"가상 스크롤러는 페이지 내 검색 (Cmd/Ctrl+f)를 사용할 때 비활성화됩니다."|codeForFiles descVirtualScroller --> codeForFiles codeForFiles --> B --> C --> D B --> E %% 파일 보기 플래그 전파 E --> boolFileIsText boolFileIsText --> |yes| I boolFileIsText --> |no| boolOnlyWhitespace boolOnlyWhitespace --> |yes| descShowChanges boolOnlyWhitespace --> |no| dirDiffViewer dirDiffViewer --> H H --> boolNotDiffable boolNotDiffable --> |yes| F boolNotDiffable --> |no| boolNoPreview boolNoPreview --> |yes| G boolNoPreview --> |no| boolIsRenamed boolIsRenamed --> |yes| J boolIsRenamed --> |no| boolIsModeChanged boolIsModeChanged --> |yes| K boolIsModeChanged --> |no| boolFileHasNoPath boolFileHasNoPath --> |yes| boolIsImage boolFileHasNoPath --> |no| descNoViewer boolIsImage --> |yes| L boolIsImage --> |no| M M --> N %% 이미지 diff 뷰어 L --> boolImageIsReplaced boolImageIsReplaced --> |yes| switchImageMode boolImageIsReplaced --> |no| O switchImageMode -->|"'twoup' (기본값)"| R switchImageMode -->|'onion'| P switchImageMode -->|'swipe'| Q P & Q --> S S --> codeForImageDiscussions S --> AM R-->|"노트 컨테이너 div에서 렌더링"|U & W & V %% 위의 "P & Q --> S" 문과 결합하지 마세요 %% 이 노드 관계의 순서는 %% 그래프의 레이아웃을 정의하며, 우리는 이 순서가 필요합니다. R --> S V --> codeForTwoUpDiscussions W --> codeForTwoUpDrafts %% 이 보이지 않는 링크는 `noteable_discussion` %% 이 `design_note_pin` 위에 렌더링되도록 강제합니다. X ~~~ T codeForTwoUpDrafts --> AB codeForImageDiscussions & codeForTwoUpDiscussions & codeForTwoUpDrafts --> T codeForTwoUpDiscussions --> X %% 텍스트 파일 diff 뷰어 I --> codeForDiffLines codeForDiffLines --> Z codeForDiffLines -->|"isMatchLine?"| Y codeForDiffLines -->|"hasCodeQuality?"| AA codeForDiffLines -->|"hasDraftNote(s)?"| AB Z -->|"hasCodeQuality?"| AE Z -->|"hasDiscussions?"| AD AA --> AC %% 드래프트 노트 AB --> AF AF --> AG & AH & AI AG --> AJ AH --> AK & AL & AM AK --> AN --> AO --> AP --> descEmojiVirtualScroll --> AQ --> AR AM --> AS

{
  "key": "",
  "path": "",
  "name": "",
  "type": "",
  "tree": [],
  "changed": true,
  "diffLoaded": false,
  "filePaths": {
    "old": file.old_path,
    "new": file.new_path
  },
  "tempFile": false,
  "deleted": false,
  "fileHash": "",
  "addedLines": 1,
  "removedLines": 1,
  "parentPath": "/",
  "submodule": false
}

%%{init: { "fontFamily": "GitLab Sans" }}%% graph TD accTitle: diffs 포맷팅 accDescr: diff를 렌더링할 때의 단계 흐름도, 검색 및 표시 준비를 포함합니다. A[fetchDiffFilesBatch] --> B[commit SET_DIFF_DATA_BATCH] --> C[prepareDiffData] --> D[prepareRawDiffFile] --> E[ensureBasicDiffFileLines] --> F[prepareDiffFileLines] --> G[finalizeDiffFile] --> H[deduplicateFilesList]

%%{init: { "fontFamily": "GitLab Sans" }}%% graph TD accTitle: 렌더 큐 파이프라인 accDescr: 렌더 큐 파이프라인의 단계 흐름도 A[startRenderDiffsQueue] -->B B[현재 파일 인덱스 RENDER_FILE 커밋] -->C C[다음 파일을 렌더링할 수 있습니까?] C -->|예| D[파일 렌더링] -->B C -->|아니오| E[requestIdleCallback 다시 실행] -->C