From 6ba9c5188af3b78a51cb8cff10a9cbe6bfcb8a09 Mon Sep 17 00:00:00 2001
From: Alexander Matyushentsev <AMatyushentsev@gmail.com>
Date: Wed, 23 Sep 2020 10:40:40 -0700
Subject: [PATCH] improve orphaned resources edit panel

---
 .../project-details/project-details.scss      |   8 +
 .../project-details/project-details.tsx       | 140 +++++++++++-------
 2 files changed, 97 insertions(+), 51 deletions(-)

diff --git a/ui/src/app/settings/components/project-details/project-details.scss b/ui/src/app/settings/components/project-details/project-details.scss
index 4bacc7c3b63f6..fb7fe46f7d42f 100644
--- a/ui/src/app/settings/components/project-details/project-details.scss
+++ b/ui/src/app/settings/components/project-details/project-details.scss
@@ -1,3 +1,5 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
 .project-details {
     .white-box__details-row .fa-times {
         position: absolute;
@@ -9,4 +11,10 @@
     .select.argo-field {
         padding: 0;
     }
+
+    .white-box {
+        .help-tip {
+            color: $argo-color-gray-6;
+        }
+    }
 }
\ No newline at end of file
diff --git a/ui/src/app/settings/components/project-details/project-details.tsx b/ui/src/app/settings/components/project-details/project-details.tsx
index c63588c11b07b..dd5522ff73503 100644
--- a/ui/src/app/settings/components/project-details/project-details.tsx
+++ b/ui/src/app/settings/components/project-details/project-details.tsx
@@ -1,10 +1,11 @@
-import {AutocompleteField, FormField, NotificationsApi, NotificationType, SlidingPanel, Tabs, Tooltip} from 'argo-ui';
+import {AutocompleteField, FormField, HelpIcon, NotificationsApi, NotificationType, SlidingPanel, Tabs, Tooltip} from 'argo-ui';
+import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import {FormApi, Text} from 'react-form';
 import {RouteComponentProps} from 'react-router';
 
-import {DataLoader, EditablePanel, ErrorNotification, Page, Query} from '../../../shared/components';
+import {CheckboxField, DataLoader, EditablePanel, ErrorNotification, Page, Query} from '../../../shared/components';
 import {AppContext, Consumer} from '../../../shared/context';
 import {Project, ResourceKinds} from '../../../shared/models';
 import {CreateJWTTokenParams, DeleteJWTTokenParams, ProjectRoleParams, services} from '../../../shared/services';
@@ -848,60 +849,105 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
                     view={
                         proj.spec.orphanedResources ? (
                             <React.Fragment>
+                                <p>
+                                    <i className={'fa fa-toggle-on'} /> Enabled
+                                </p>
+                                <p>
+                                    <i
+                                        className={classNames('fa', {
+                                            'fa-toggle-off': !proj.spec.orphanedResources.warn,
+                                            'fa-toggle-on': proj.spec.orphanedResources.warn
+                                        })}
+                                    />{' '}
+                                    Application warning conditions are {proj.spec.orphanedResources.warn ? 'enabled' : 'disabled'}.
+                                </p>
                                 {(proj.spec.orphanedResources.ignore || []).length > 0 ? (
-                                    (proj.spec.orphanedResources.ignore || []).map((resource, i) => (
-                                        <div className='row white-box__details-row' key={i}>
-                                            <div className='columns small-4'>{resource.group}</div>
-                                            <div className='columns small-4'>{resource.kind}</div>
-                                            <div className='columns small-4'>{resource.name}</div>
+                                    <React.Fragment>
+                                        <p>Resources Ignore List</p>
+                                        <div className='row white-box__details-row'>
+                                            <div className='columns small-4'>Group</div>
+                                            <div className='columns small-4'>Kind</div>
+                                            <div className='columns small-4'>Name</div>
                                         </div>
-                                    ))
+                                        {(proj.spec.orphanedResources.ignore || []).map((resource, i) => (
+                                            <div className='row white-box__details-row' key={i}>
+                                                <div className='columns small-4'>{resource.group}</div>
+                                                <div className='columns small-4'>{resource.kind}</div>
+                                                <div className='columns small-4'>{resource.name}</div>
+                                            </div>
+                                        ))}
+                                    </React.Fragment>
                                 ) : (
-                                    <p>Orphaned Resource Ignore list is empty.</p>
+                                    <p>Resource ignore list is empty.</p>
                                 )}
-                                <p>Orphaned Resource warning is {proj.spec.orphanedResources.warn ? 'enabled' : 'disabled'}.</p>
                             </React.Fragment>
                         ) : (
-                            <p>Orphaned Resources monitoring is disabled</p>
+                            <p>
+                                <i className={'fa fa-toggle-off'} /> Disabled
+                            </p>
                         )
                     }
                     edit={formApi =>
                         formApi.values.spec.orphanedResources ? (
                             <React.Fragment>
-                                {(formApi.values.spec.orphanedResources.ignore || []).map((_: Project, i: number) => (
-                                    <div className='row white-box__details-row' key={i}>
-                                        <div className='columns small-4'>
-                                            <FormField
-                                                formApi={formApi}
-                                                field={`spec.orphanedResources.ignore[${i}].kind`}
-                                                component={AutocompleteField}
-                                                componentProps={{items: ['']}}
-                                            />
-                                        </div>
-                                        <div className='columns small-4'>
-                                            <FormField
-                                                formApi={formApi}
-                                                field={`spec.orphanedResources.ignore[${i}].group`}
-                                                component={AutocompleteField}
-                                                componentProps={{items: ['']}}
-                                            />
-                                        </div>
-                                        <div className='columns small-4'>
-                                            <FormField
-                                                formApi={formApi}
-                                                field={`spec.orphanedResources.ignore[${i}].name`}
-                                                component={AutocompleteField}
-                                                componentProps={{items: ['']}}
+                                <button className='argo-button argo-button--base' onClick={() => formApi.setValue('spec.orphanedResources', null)}>
+                                    DISABLE
+                                </button>
+                                <div className='row white-box__details-row'>
+                                    <div className='columns small-4'>
+                                        Enable application warning conditions?
+                                        <HelpIcon title='If checked, Application will have a warning condition when orphaned resources detected' />
+                                    </div>
+                                    <div className='columns small-8'>
+                                        <FormField formApi={formApi} field='spec.orphanedResources.warn' component={CheckboxField} />
+                                    </div>
+                                </div>
+
+                                <div>
+                                    Resources Ignore List
+                                    <HelpIcon title='Define resources that ArgoCD should not report as orphaned' />
+                                </div>
+                                <div className='row white-box__details-row'>
+                                    <div className='columns small-4'>Group</div>
+                                    <div className='columns small-4'>Kind</div>
+                                    <div className='columns small-4'>Name</div>
+                                </div>
+                                {((formApi.values.spec.orphanedResources.ignore || []).length === 0 && <div>Ignore list is empty</div>) ||
+                                    formApi.values.spec.orphanedResources.ignore.map((_: Project, i: number) => (
+                                        <div className='row white-box__details-row' key={i}>
+                                            <div className='columns small-4'>
+                                                <FormField
+                                                    formApi={formApi}
+                                                    field={`spec.orphanedResources.ignore[${i}].group`}
+                                                    component={AutocompleteField}
+                                                    componentProps={{items: [''], filterSuggestions: true}}
+                                                />
+                                            </div>
+                                            <div className='columns small-4'>
+                                                <FormField
+                                                    formApi={formApi}
+                                                    field={`spec.orphanedResources.ignore[${i}].kind`}
+                                                    component={AutocompleteField}
+                                                    componentProps={{items: Object.keys(ResourceKinds), filterSuggestions: true}}
+                                                />
+                                            </div>
+                                            <div className='columns small-4'>
+                                                <FormField
+                                                    formApi={formApi}
+                                                    field={`spec.orphanedResources.ignore[${i}].name`}
+                                                    component={AutocompleteField}
+                                                    componentProps={{items: ['']}}
+                                                />
+                                            </div>
+                                            <i
+                                                className='fa fa-times'
+                                                onClick={() => formApi.setValue('spec.orphanedResources.ignore', removeEl(formApi.values.spec.orphanedResources.ignore, i))}
                                             />
                                         </div>
-                                        <i
-                                            className='fa fa-times'
-                                            onClick={() => formApi.setValue('spec.orphanedResources.ignore', removeEl(formApi.values.spec.orphanedResources.ignore, i))}
-                                        />
-                                    </div>
-                                ))}
+                                    ))}
+                                <br />
                                 <button
-                                    className='argo-button argo-button--short'
+                                    className='argo-button argo-button--base'
                                     onClick={() =>
                                         formApi.setValue(
                                             'spec.orphanedResources.ignore',
@@ -912,17 +958,9 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
                                     }>
                                     ADD RESOURCE
                                 </button>
-                                <button
-                                    className='argo-button argo-button--short'
-                                    onClick={() => formApi.setValue('spec.orphanedResources.warn', !formApi.values.spec.orphanedResources.warn)}>
-                                    {formApi.values.spec.orphanedResources.warn ? 'DISABLE' : 'ENABLE'} Warning
-                                </button>
-                                <button className='argo-button argo-button--short' onClick={() => formApi.setValue('spec.orphanedResources', null)}>
-                                    DISABLE
-                                </button>
                             </React.Fragment>
                         ) : (
-                            <button className='argo-button argo-button--short' onClick={() => formApi.setValue('spec.orphanedResources.ignore', [])}>
+                            <button className='argo-button argo-button--base' onClick={() => formApi.setValue('spec.orphanedResources.ignore', [])}>
                                 ENABLE
                             </button>
                         )