Skip to content

Commit 5915ecd

Browse files
PierrciPierrci
committed
feature: display message instead of diff if isTooBig is true
A default `Diff too big to be displayed` message is rendered for any file diff where `isTooBig` is `true`. A new `diffTooBigMessage` option in render config allows to fully customize the message and receives the file index in the diff as an argument. It can be used to render a link to the raw file diff for example.
1 parent ea9c1fe commit 5915ecd

File tree

6 files changed

+341
-4
lines changed

6 files changed

+341
-4
lines changed

‎src/__tests__/line-by-line-tests.ts

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,39 @@ describe('LineByLineRenderer', () => {
2121
});
2222
});
2323

24+
describe('_generateTooBigDiff', () => {
25+
it('should return a diff with default "too big" message when no `diffTooBigMessage` is defined', () => {
26+
const hoganUtils = new HoganJsUtils({});
27+
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
28+
const fileHtml = lineByLineRenderer.generateTooBigDiff(0);
29+
expect(fileHtml).toMatchInlineSnapshot(`
30+
"<tr>
31+
<td class=\\"d2h-info\\">
32+
<div class=\\"d2h-code-line d2h-info\\">
33+
Diff too big to be displayed
34+
</div>
35+
</td>
36+
</tr>"
37+
`);
38+
});
39+
40+
it('should return a diff with custom "too big" message when `diffTooBigMessage` is defined', () => {
41+
const hoganUtils = new HoganJsUtils({});
42+
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
43+
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
44+
const fileHtml = lineByLineRenderer.generateTooBigDiff(0);
45+
expect(fileHtml).toMatchInlineSnapshot(`
46+
"<tr>
47+
<td class=\\"d2h-info\\">
48+
<div class=\\"d2h-code-line d2h-info\\">
49+
Custom message for file 0 diff too big
50+
</div>
51+
</td>
52+
</tr>"
53+
`);
54+
});
55+
});
56+
2457
describe('makeLineHtml', () => {
2558
it('should work for insertions', () => {
2659
const hoganUtils = new HoganJsUtils({});
@@ -505,6 +538,111 @@ describe('LineByLineRenderer', () => {
505538
</div>"
506539
`);
507540
});
541+
542+
it('should work for too big file diff and no custom message fn', () => {
543+
const exampleJson = [
544+
{
545+
blocks: [],
546+
deletedLines: 0,
547+
addedLines: 0,
548+
oldName: 'sample',
549+
language: 'js',
550+
newName: 'sample',
551+
isCombined: false,
552+
isGitDiff: false,
553+
isTooBig: true,
554+
},
555+
];
556+
557+
const hoganUtils = new HoganJsUtils({});
558+
const lineByLineRenderer = new LineByLineRenderer(hoganUtils);
559+
const html = lineByLineRenderer.render(exampleJson);
560+
expect(html).toMatchInlineSnapshot(`
561+
"<div class=\\"d2h-wrapper\\">
562+
<div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
563+
<div class=\\"d2h-file-header\\">
564+
<span class=\\"d2h-file-name-wrapper\\">
565+
<svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
566+
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
567+
</svg> <span class=\\"d2h-file-name\\">sample</span>
568+
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
569+
<label class=\\"d2h-file-collapse\\">
570+
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
571+
Viewed
572+
</label>
573+
</div>
574+
<div class=\\"d2h-file-diff\\">
575+
<div class=\\"d2h-code-wrapper\\">
576+
<table class=\\"d2h-diff-table\\">
577+
<tbody class=\\"d2h-diff-tbody\\">
578+
<tr>
579+
<td class=\\"d2h-info\\">
580+
<div class=\\"d2h-code-line d2h-info\\">
581+
Diff too big to be displayed
582+
</div>
583+
</td>
584+
</tr>
585+
</tbody>
586+
</table>
587+
</div>
588+
</div>
589+
</div>
590+
</div>"
591+
`);
592+
});
593+
594+
it('should work for too big file diff and custom message fn', () => {
595+
const exampleJson = [
596+
{
597+
blocks: [],
598+
deletedLines: 0,
599+
addedLines: 0,
600+
oldName: 'sample',
601+
language: 'js',
602+
newName: 'sample',
603+
isCombined: false,
604+
isGitDiff: false,
605+
isTooBig: true,
606+
},
607+
];
608+
609+
const hoganUtils = new HoganJsUtils({});
610+
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
611+
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
612+
const html = lineByLineRenderer.render(exampleJson);
613+
expect(html).toMatchInlineSnapshot(`
614+
"<div class=\\"d2h-wrapper\\">
615+
<div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
616+
<div class=\\"d2h-file-header\\">
617+
<span class=\\"d2h-file-name-wrapper\\">
618+
<svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
619+
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
620+
</svg> <span class=\\"d2h-file-name\\">sample</span>
621+
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
622+
<label class=\\"d2h-file-collapse\\">
623+
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
624+
Viewed
625+
</label>
626+
</div>
627+
<div class=\\"d2h-file-diff\\">
628+
<div class=\\"d2h-code-wrapper\\">
629+
<table class=\\"d2h-diff-table\\">
630+
<tbody class=\\"d2h-diff-tbody\\">
631+
<tr>
632+
<td class=\\"d2h-info\\">
633+
<div class=\\"d2h-code-line d2h-info\\">
634+
Custom message for file 0 diff too big
635+
</div>
636+
</td>
637+
</tr>
638+
</tbody>
639+
</table>
640+
</div>
641+
</div>
642+
</div>
643+
</div>"
644+
`);
645+
});
508646
});
509647

510648
describe('_generateFileHtml', () => {

‎src/__tests__/side-by-side-printer-tests.ts

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,45 @@ describe('SideBySideRenderer', () => {
2424
});
2525
});
2626

27+
describe('_generateTooBigDiff', () => {
28+
it('should return a diff with default "too big" message when no `diffTooBigMessage` is defined', () => {
29+
const hoganUtils = new HoganJsUtils({});
30+
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
31+
const fileHtml = sideBySideRenderer.generateTooBigDiff(0);
32+
expect(fileHtml).toMatchInlineSnapshot(`
33+
Object {
34+
"left": "<tr>
35+
<td class=\\"d2h-info\\">
36+
<div class=\\"d2h-code-side-line d2h-info\\">
37+
Diff too big to be displayed
38+
</div>
39+
</td>
40+
</tr>",
41+
"right": "",
42+
}
43+
`);
44+
});
45+
46+
it('should return a diff with custom "too big" message when `diffTooBigMessage` is defined', () => {
47+
const hoganUtils = new HoganJsUtils({});
48+
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
49+
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
50+
const fileHtml = sideBySideRenderer.generateTooBigDiff(0);
51+
expect(fileHtml).toMatchInlineSnapshot(`
52+
Object {
53+
"left": "<tr>
54+
<td class=\\"d2h-info\\">
55+
<div class=\\"d2h-code-side-line d2h-info\\">
56+
Custom message for file 0 diff too big
57+
</div>
58+
</td>
59+
</tr>",
60+
"right": "",
61+
}
62+
`);
63+
});
64+
});
65+
2766
describe('generateSideBySideFileHtml', () => {
2867
it('should generate lines with the right prefixes', () => {
2968
const hoganUtils = new HoganJsUtils({});
@@ -406,6 +445,133 @@ describe('SideBySideRenderer', () => {
406445
</div>"
407446
`);
408447
});
448+
449+
it('should work for too big file diff and no custom message fn', () => {
450+
const exampleJson = [
451+
{
452+
blocks: [],
453+
deletedLines: 0,
454+
addedLines: 0,
455+
oldName: 'sample',
456+
language: 'js',
457+
newName: 'sample',
458+
isCombined: false,
459+
isGitDiff: false,
460+
isTooBig: true,
461+
},
462+
];
463+
464+
const hoganUtils = new HoganJsUtils({});
465+
const sideBySideRenderer = new SideBySideRenderer(hoganUtils);
466+
const html = sideBySideRenderer.render(exampleJson);
467+
expect(html).toMatchInlineSnapshot(`
468+
"<div class=\\"d2h-wrapper\\">
469+
<div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
470+
<div class=\\"d2h-file-header\\">
471+
<span class=\\"d2h-file-name-wrapper\\">
472+
<svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
473+
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
474+
</svg> <span class=\\"d2h-file-name\\">sample</span>
475+
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
476+
<label class=\\"d2h-file-collapse\\">
477+
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
478+
Viewed
479+
</label>
480+
</div>
481+
<div class=\\"d2h-files-diff\\">
482+
<div class=\\"d2h-file-side-diff\\">
483+
<div class=\\"d2h-code-wrapper\\">
484+
<table class=\\"d2h-diff-table\\">
485+
<tbody class=\\"d2h-diff-tbody\\">
486+
<tr>
487+
<td class=\\"d2h-info\\">
488+
<div class=\\"d2h-code-side-line d2h-info\\">
489+
Diff too big to be displayed
490+
</div>
491+
</td>
492+
</tr>
493+
</tbody>
494+
</table>
495+
</div>
496+
</div>
497+
<div class=\\"d2h-file-side-diff\\">
498+
<div class=\\"d2h-code-wrapper\\">
499+
<table class=\\"d2h-diff-table\\">
500+
<tbody class=\\"d2h-diff-tbody\\">
501+
502+
</tbody>
503+
</table>
504+
</div>
505+
</div>
506+
</div>
507+
</div>
508+
</div>"
509+
`);
510+
});
511+
512+
it('should work for too big file diff and custom message fn', () => {
513+
const exampleJson = [
514+
{
515+
blocks: [],
516+
deletedLines: 0,
517+
addedLines: 0,
518+
oldName: 'sample',
519+
language: 'js',
520+
newName: 'sample',
521+
isCombined: false,
522+
isGitDiff: false,
523+
isTooBig: true,
524+
},
525+
];
526+
527+
const hoganUtils = new HoganJsUtils({});
528+
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
529+
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
530+
const html = sideBySideRenderer.render(exampleJson);
531+
expect(html).toMatchInlineSnapshot(`
532+
"<div class=\\"d2h-wrapper\\">
533+
<div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
534+
<div class=\\"d2h-file-header\\">
535+
<span class=\\"d2h-file-name-wrapper\\">
536+
<svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
537+
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
538+
</svg> <span class=\\"d2h-file-name\\">sample</span>
539+
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
540+
<label class=\\"d2h-file-collapse\\">
541+
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
542+
Viewed
543+
</label>
544+
</div>
545+
<div class=\\"d2h-files-diff\\">
546+
<div class=\\"d2h-file-side-diff\\">
547+
<div class=\\"d2h-code-wrapper\\">
548+
<table class=\\"d2h-diff-table\\">
549+
<tbody class=\\"d2h-diff-tbody\\">
550+
<tr>
551+
<td class=\\"d2h-info\\">
552+
<div class=\\"d2h-code-side-line d2h-info\\">
553+
Custom message for file 0 diff too big
554+
</div>
555+
</td>
556+
</tr>
557+
</tbody>
558+
</table>
559+
</div>
560+
</div>
561+
<div class=\\"d2h-file-side-diff\\">
562+
<div class=\\"d2h-code-wrapper\\">
563+
<table class=\\"d2h-diff-table\\">
564+
<tbody class=\\"d2h-diff-tbody\\">
565+
566+
</tbody>
567+
</table>
568+
</div>
569+
</div>
570+
</div>
571+
</div>
572+
</div>"
573+
`);
574+
});
409575
});
410576

411577
describe('processLines', () => {

‎src/line-by-line-renderer.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,11 @@ export default class LineByLineRenderer {
4141

4242
render(diffFiles: DiffFile[]): string {
4343
const diffsHtml = diffFiles
44-
.map(file => {
44+
.map((file, fileIndex) => {
4545
let diffs;
46-
if (file.blocks.length) {
46+
if (file.isTooBig) {
47+
diffs = this.generateTooBigDiff(fileIndex);
48+
} else if (file.blocks.length) {
4749
diffs = this.generateFileHtml(file);
4850
} else {
4951
diffs = this.generateEmptyDiff();
@@ -79,6 +81,14 @@ export default class LineByLineRenderer {
7981
});
8082
}
8183

84+
generateTooBigDiff(fileIndex: number): string {
85+
return this.hoganUtils.render(genericTemplatesPath, 'too-big-diff', {
86+
contentClass: 'd2h-code-line',
87+
CSSLineClass: renderUtils.CSSLineClass,
88+
message: this.config.diffTooBigMessage(fileIndex),
89+
});
90+
}
91+
8292
generateEmptyDiff(): string {
8393
return this.hoganUtils.render(genericTemplatesPath, 'empty-diff', {
8494
contentClass: 'd2h-code-line',

‎src/render-utils.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export interface RenderConfig {
3636
matching?: LineMatchingType;
3737
matchWordsThreshold?: number;
3838
maxLineLengthHighlight?: number;
39+
diffTooBigMessage?: (fileIndex: number) => string;
3940
diffStyle?: DiffStyleType;
4041
}
4142

@@ -44,6 +45,8 @@ export const defaultRenderConfig = {
4445
matchWordsThreshold: 0.25,
4546
maxLineLengthHighlight: 10000,
4647
diffStyle: DiffStyleType.WORD,
48+
// eslint-disable-next-line
49+
diffTooBigMessage: (_fileIndex: number): string => 'Diff too big to be displayed',
4750
};
4851

4952
const separator = '/';

0 commit comments

Comments
 (0)