github.com/argoproj/argo-cd/v2@v2.10.9/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 {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  );