feat: Allow collapsing of individual diff sections in diff view argop…

…roj#3608 (argoproj#6978)

Signed-off-by: ciiay <[email protected]>

ui/src/app/applications/components/application-resources-diff/application-resources-diff.scss

@@ -9,6 +9,15 @@
         font-size: 10pt;
         &__title {
             font-weight: bold;
+            .diff__collapse {
+                position: absolute;
+                right: 0;
+                cursor: pointer;
+                margin-left: auto;
+                margin-right: 1.5rem;
+                color: #495763;
+                font-size: 20px;
+            }
         }
     }
 }

ui/src/app/applications/components/application-resources-diff/application-resources-diff.tsx

@@ -1,11 +1,12 @@
 import {Checkbox, DataLoader} from 'argo-ui';
 import * as jsYaml from 'js-yaml';
 import * as React from 'react';
-import {Diff, Hunk, parseDiff} from 'react-diff-view';
+import {parseDiff} from 'react-diff-view';
 import 'react-diff-view/style/index.css';
 import {diffLines, formatLines} from 'unidiff';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
+import {IndividualDiffSection} from './individual-diff-section';
 
 require('./application-resources-diff.scss');
 
@@ -74,12 +75,7 @@ ${formatLines(diffLines(i.a, i.b), {context, aname: `a/${name}}`, bname: `b/${i.
                     {files
                         .sort((a: any, b: any) => a.newPath.localeCompare(b.newPath))
                         .map((file: any) => (
-                            <div key={file.newPath} className={whiteBox + ' application-component-diff__diff'}>
-                                {showPath && <p className='application-resources-diff__diff__title'>{file.newPath}</p>}
-                                <Diff viewType={viewType} diffType={file.type} hunks={file.hunks}>
-                                    {(hunks: any) => hunks.map((hunk: any) => <Hunk key={hunk.content} hunk={hunk} />)}
-                                </Diff>
-                            </div>
+                            <IndividualDiffSection key={file.newPath} file={file} showPath={showPath} whiteBox={whiteBox} viewType={viewType} />
                         ))}
                 </div>
             );

ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {useState} from 'react';
+import {Diff, Hunk} from 'react-diff-view';
+import 'react-diff-view/style/index.css';
+
+require('./application-resources-diff.scss');
+
+export interface IndividualDiffSectionProps {
+    file: any;
+    showPath: boolean;
+    whiteBox: string;
+    viewType: string;
+}
+
+export const IndividualDiffSection = (props: IndividualDiffSectionProps) => {
+    const {file, showPath, whiteBox, viewType} = props;
+    const [collapsed, setCollapsed] = useState(false);
+    return (
+        <div className={`${whiteBox} application-component-diff__diff`}>
+            {showPath && (
+                <p className='application-resources-diff__diff__title'>
+                    {file.newPath}
+                    <i className={`fa fa-caret-${collapsed ? 'down' : 'up'} diff__collapse`} onClick={() => setCollapsed(!collapsed)} />
+                </p>
+            )}
+            {!collapsed && (
+                <Diff viewType={viewType} diffType={file.type} hunks={file.hunks}>
+                    {(hunks: any) => hunks.map((hunk: any) => <Hunk key={hunk.content} hunk={hunk} />)}
+                </Diff>
+            )}
+        </div>
+    );
+};