github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/application-resources-diff/application-resources-diff.tsx (about)

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