Allow collapse/expand helm values text (#2469)

ui/src/app/applications/components/application-parameters/application-parameters.tsx

@@ -2,7 +2,7 @@ import {DataLoader, FormField, FormSelect, getNestedField} from 'argo-ui';
 import * as React from 'react';
 import {FieldApi, FormApi, FormField as ReactFormField, Text, TextArea} from 'react-form';
 
-import {ArrayInputField, CheckboxField, EditablePanel, EditablePanelItem, TagsInputField} from '../../../shared/components';
+import {ArrayInputField, CheckboxField, EditablePanel, EditablePanelItem, Expandable, TagsInputField} from '../../../shared/components';
 import * as models from '../../../shared/models';
 import {AuthSettings} from '../../../shared/models';
 import {services} from '../../../shared/services';
@@ -171,14 +171,16 @@ export const ApplicationParameters = (props: {
         });
         attributes.push({
             title: 'VALUES',
-            view: app.spec.source.helm && (<pre>{app.spec.source.helm.values}</pre>),
+            view: app.spec.source.helm && (<Expandable><pre>{app.spec.source.helm.values}</pre></Expandable>),
             edit: (formApi: FormApi) => (
                 <div>
                     <pre><FormField formApi={formApi} field='spec.source.helm.values' component={TextArea}/></pre>
                     {props.details.helm.values && (
                         <div>
                             <label>values.yaml</label>
-                            <pre>{props.details.helm.values}</pre>
+                            <Expandable>
+                                <pre>{props.details.helm.values}</pre>
+                            </Expandable>
                         </div>
                     )}
                 </div>

ui/src/app/shared/components/expandable/expandable.scss

@@ -0,0 +1,26 @@
+@import 'node_modules/argo-ui/src/app/shared/styles/config';
+
+.expandable {
+    position: relative;
+    overflow: hidden;
+    transition: max-height 0.5s ease-out;
+
+    &--collapsed::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 20px;
+        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+    }
+
+    &__handle {
+        position: absolute;
+        top: 1em;
+        right: 1em;
+        z-index: 1;
+        cursor: pointer;
+    }
+}

ui/src/app/shared/components/expandable/expandable.tsx

@@ -0,0 +1,30 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+
+require('./expandable.scss');
+
+export interface Props extends React.Props<any> {
+    height?: number;
+}
+
+export const Expandable = (props: Props) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const contentEl = React.useRef(null);
+    const style: React.CSSProperties = {};
+    if (!expanded) {
+        style.maxHeight = props.height || 100;
+    } else {
+        style.maxHeight = contentEl.current && contentEl.current.clientHeight || 10000;
+    }
+
+    return (
+        <div style={style} className={classNames('expandable', {'expandable--collapsed': !expanded})}>
+            <div ref={contentEl}>
+                {props.children}
+            </div>
+            <a onClick={() => setExpanded(!expanded)}>
+                <i className={classNames('expandable__handle fa', { 'fa-chevron-down': !expanded, 'fa-chevron-up': expanded })}/>
+            </a>
+        </div>
+    );
+};

ui/src/app/shared/components/index.ts

@@ -1,6 +1,7 @@
 export { DataLoader, ErrorNotification } from 'argo-ui';
 
 export * from './array-input/array-input';
+export * from './expandable/expandable';
 export * from './page';
 export * from './checkbox/checkbox-field';
 export * from './colors';