Add Tabular Diff for CSV files (#14661)

Implements request #14320 The rendering of CSV files does match the diff style.

* Moved CSV logic into base package.

* Added method to create a tabular diff.

* Added CSV compare context.

* Added CSV diff template.

* Use new table style in CSV markup.

* Added file size limit for CSV rendering.

* Display CSV parser errors in diff.

* Lazy read single file.

* Lazy read rows for full diff.

* Added unit tests for various CSV changes.

3 files changed, 77 insertions, 14 deletions

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index f93dac9b4d..368fc2c444 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -79,6 +79,8 @@
 							{{else}}
 								{{$isImage = (call $.IsImageFileInHead $file.Name)}}
 							{{end}}
+							{{$isCsv := (call $.IsCsvFile $file)}}
+							{{$showFileViewToggle := or $isImage $isCsv}}
 							<a role="button" class="fold-file muted mr-2">
 								{{svg "octicon-chevron-down" 18}}
 							</a>
@@ -92,6 +94,12 @@
 							<span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 						</div>
 						<div class="diff-file-header-actions df ac">
+							{{if $showFileViewToggle}}
+								<div class="ui compact icon buttons">
+									<span class="ui tiny basic button poping up active file-view-toggle" data-toggle-selector="#diff-source-{{$i}}" data-content="{{$.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code"}}</span>
+									<span class="ui tiny basic button poping up file-view-toggle" data-toggle-selector="#diff-rendered-{{$i}}" data-content="{{$.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file"}}</span>
+								</div>
+							{{end}}
 							{{if $file.IsProtected}}
 								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
 							{{end}}
@@ -106,21 +114,30 @@
 					</h4>
 					<div class="diff-file-body ui attached unstackable table segment">
 						{{if ne $file.Type 4}}
-							<div class="file-body file-code has-context-menu{{if not $isImage}} code-diff{{end}}{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $isImage}} py-4{{end}}">
-								<table class="chroma{{if $isImage}} w-100{{end}}">
-									<tbody>
-										{{if $isImage}}
-											{{template "repo/diff/image_diff" dict "file" . "root" $}}
-										{{else}}
-											{{if $.IsSplitStyle}}
-												{{template "repo/diff/section_split" dict "file" . "root" $}}
-											{{else}}
-												{{template "repo/diff/section_unified" dict "file" . "root" $}}
-											{{end}}
-										{{end}}
-									</tbody>
+							<div id="diff-source-{{$i}}" class="file-body file-code has-context-menu code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
+								{{if $file.IsBin}}
+								<div class="diff-file-body binary" style="padding: 5px 10px;">{{$.i18n.Tr "repo.diff.bin_not_shown"}}</div>
+								{{else}}
+								<table class="chroma">
+									{{if $.IsSplitStyle}}
+										{{template "repo/diff/section_split" dict "file" . "root" $}}
+									{{else}}
+										{{template "repo/diff/section_unified" dict "file" . "root" $}}
+									{{end}}
 								</table>
+								{{end}}
 							</div>
+							{{if or $isImage $isCsv}}
+							<div id="diff-rendered-{{$i}}" class="file-body file-code has-context-menu{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}} hide">
+								<table class="chroma w-100">
+									{{if $isImage}}
+										{{template "repo/diff/image_diff" dict "file" . "root" $}}
+									{{else}}
+										{{template "repo/diff/csv_diff" dict "file" . "root" $}}
+									{{end}}
+								</table>
+							</div>
+							{{end}}
 						{{end}}
 					</div>
 				</div>
diff --git a/templates/repo/diff/csv_diff.tmpl b/templates/repo/diff/csv_diff.tmpl
new file mode 100644
index 0000000000..c4af70461f
--- /dev/null
+++ b/templates/repo/diff/csv_diff.tmpl
@@ -0,0 +1,46 @@
+<tr>
+	<td>
+		{{$result := call .root.CreateCsvDiff .file .root.BaseCommit .root.HeadCommit}}
+		{{if $result.Error}}
+			<div class="ui center">{{$result.Error}}</div>
+		{{else if $result.Sections}}
+			<table class="data-table">
+			{{range $i, $section := $result.Sections}}
+				<tbody {{if gt $i 0}}class="section"{{end}}>
+				{{range $j, $row := $section.Rows}}
+					<tr>
+						{{if and (eq $i 0) (eq $j 0)}}
+							<th class="line-num">{{.RowIdx}}</th>
+							{{range $j, $cell := $row.Cells}}
+								{{if eq $cell.Type 2}}
+									<th class="modified"><span class="removed-code">{{.LeftCell}}</span> <span class="added-code">{{.RightCell}}</span></th>
+								{{else if eq $cell.Type 3}}
+									<th class="added"><span class="added-code">{{.LeftCell}}</span></th>
+								{{else if eq $cell.Type 4}}
+									<th class="removed"><span class="removed-code">{{.LeftCell}}</span></th>
+								{{else}}
+									<th>{{.RightCell}}</th>
+								{{end}}
+							{{end}}
+						{{else}}
+							<td class="line-num">{{if .RowIdx}}{{.RowIdx}}{{end}}</td>
+							{{range $j, $cell := $row.Cells}}
+								{{if eq $cell.Type 2}}
+									<td class="modified"><span class="removed-code">{{.LeftCell}}</span> <span class="added-code">{{.RightCell}}</span></td>
+								{{else if eq $cell.Type 3}}
+									<td class="added"><span class="added-code">{{.LeftCell}}</span></td>
+								{{else if eq $cell.Type 4}}
+									<td class="removed"><span class="removed-code">{{.LeftCell}}</span></td>
+								{{else}}
+									<td>{{.RightCell}}</td>
+								{{end}}
+							{{end}}
+						{{end}}
+					</tr>
+				{{end}}
+				</tbody>
+			{{end}}
+			</table>
+		{{end}}
+	</td>
+</tr>
\ No newline at end of file
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index be7d651777..76c0ac76fe 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -64,7 +64,7 @@
 		{{end}}
 	</h4>
 	<div class="ui attached table unstackable segment">
-		<div class="file-view {{if .IsMarkup}}{{.MarkupType}} markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
+		<div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
 			{{if .IsMarkup}}
 				{{if .FileContent}}{{.FileContent | Safe}}{{end}}
 			{{else if .IsRenderedHTML}}