argo-cd

1
import {Checkbox, DataLoader} from 'argo-ui';
2
import * as jsYaml from 'js-yaml';
3
import * as React from 'react';
4
import {parseDiff} from 'react-diff-view';
5
import 'react-diff-view/style/index.css';
6
import {diffLines, formatLines} from 'unidiff';
7
import * as models from '../../../shared/models';
8
import {services} from '../../../shared/services';
9
import {IndividualDiffSection} from './individual-diff-section';
10

11
import './application-resources-diff.scss';
12

13
export interface ApplicationResourcesDiffProps {
14
    states: models.ResourceDiff[];
15
}
16

17
export const ApplicationResourcesDiff = (props: ApplicationResourcesDiffProps) => (
18
    <DataLoader key='resource-diff' load={() => services.viewPreferences.getPreferences()}>
19
        {pref => {
20
            const diffText = props.states
21
                .map(state => {
22
                    return {
23
                        a: state.normalizedLiveState ? jsYaml.safeDump(state.normalizedLiveState, {indent: 2}) : '',
24
                        b: state.predictedLiveState ? jsYaml.safeDump(state.predictedLiveState, {indent: 2}) : '',
25
                        hook: state.hook,
26
                        // doubles as sort order
27
                        name: (state.group || '') + '/' + state.kind + '/' + (state.namespace ? state.namespace + '/' : '') + state.name
28
                    };
29
                })
30
                .filter(i => !i.hook)
31
                .filter(i => i.a !== i.b)
32
                .map(i => {
33
                    const context = pref.appDetails.compactDiff ? 2 : Number.MAX_SAFE_INTEGER;
34
                    // react-diff-view, awesome as it is, does not accept unidiff format, you must add a git header section
35
                    return `diff --git a/${i.name} b/${i.name}
36
index 6829b8a2..4c565f1b 100644
37
${formatLines(diffLines(i.a, i.b), {context, aname: `a/${name}}`, bname: `b/${i.name}`})}`;
38
                })
39
                .join('\n');
40
            // assume that if you only have one file, we don't need the file path
41
            const whiteBox = props.states.length > 1 ? 'white-box' : '';
42
            const showPath = props.states.length > 1;
43
            const files = parseDiff(diffText);
44
            const viewType = pref.appDetails.inlineDiff ? 'unified' : 'split';
45
            return (
46
                <div className='application-resources-diff'>
47
                    <div className={whiteBox + ' application-resources-diff__checkboxes'}>
48
                        <Checkbox
49
                            id='compactDiff'
50
                            checked={pref.appDetails.compactDiff}
51
                            onChange={() =>
52
                                services.viewPreferences.updatePreferences({
53
                                    appDetails: {
54
                                        ...pref.appDetails,
55
                                        compactDiff: !pref.appDetails.compactDiff
56
                                    }
57
                                })
58
                            }
59
                        />
60
                        <label htmlFor='compactDiff'>Compact diff</label>
61
                        <Checkbox
62
                            id='inlineDiff'
63
                            checked={pref.appDetails.inlineDiff}
64
                            onChange={() =>
65
                                services.viewPreferences.updatePreferences({
66
                                    appDetails: {
67
                                        ...pref.appDetails,
68
                                        inlineDiff: !pref.appDetails.inlineDiff
69
                                    }
70
                                })
71
                            }
72
                        />
73
                        <label htmlFor='inlineDiff'>Inline diff</label>
74
                    </div>
75
                    {files
76
                        .sort((a: any, b: any) => a.newPath.localeCompare(b.newPath))
77
                        .map((file: any) => (
78
                            <IndividualDiffSection key={file.newPath} file={file} showPath={showPath} whiteBox={whiteBox} viewType={viewType} />
79
                        ))}
80
                </div>
81
            );
82
        }}
83
    </DataLoader>
84
);
85