feat: Add option to show branches or tags for GIT revision (#4751) (#…

…4788) Signed-off-by: Keith Chong <kykchong@redhat.com>
argoproj · Nov 16, 2020 · e4e503a · e4e503a
1 parent e8e8109
commit e4e503a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 34 deletions.
diff --git a/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx b/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
@@ -272,9 +272,7 @@ export const ApplicationCreatePanel = (props: {
                                                 </div>
                                                 {(repoType === 'git' && (
                                                     <React.Fragment>
-                                                        <div className='argo-form-row'>
-                                                            <RevisionFormField formApi={api} helpIconTop={'2em'} repoURL={app.spec.source.repoURL} />
-                                                        </div>
+                                                        <RevisionFormField formApi={api} helpIconTop={'2.5em'} repoURL={app.spec.source.repoURL} />
                                                         <div className='argo-form-row'>
                                                             <DataLoader
                                                                 input={{repoURL: app.spec.source.repoURL, revision: app.spec.source.targetRevision}}

diff --git a/ui/src/app/applications/components/revision-form-field/revision-form-field.tsx b/ui/src/app/applications/components/revision-form-field/revision-form-field.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {FormApi} from 'react-form';
 
-import {AutocompleteField, DataLoader, FormField} from 'argo-ui';
+import {AutocompleteField, DataLoader, DropDownMenu, FormField} from 'argo-ui';
 import {RevisionHelpIcon} from '../../../shared/components';
 import {services} from '../../../shared/services';
 
@@ -12,36 +12,72 @@ interface RevisionFormFieldProps {
     repoURL: string;
 }
 
-export class RevisionFormField extends React.PureComponent<RevisionFormFieldProps> {
+export class RevisionFormField extends React.PureComponent<RevisionFormFieldProps, {filterType: string}> {
+    constructor(props: RevisionFormFieldProps) {
+        super(props);
+        this.state = {filterType: 'Branches'};
+    }
+
+    public setFilter(newValue: string) {
+        this.setState({filterType: newValue});
+    }
+
     public render() {
+        const selectedFilter = this.state.filterType;
+        const extraPadding = this.props.hideLabel ? '0em' : '1.53em';
+        const rowClass = this.props.hideLabel ? '' : ' argo-form-row';
         return (
-            <React.Fragment>
-                <DataLoader
-                    input={{repoURL: this.props.repoURL}}
-                    load={async (src: any): Promise<string[]> => {
-                        if (src.repoURL) {
-                            return services.repos
-                                .revisions(src.repoURL)
-                                .then(revisionsRes => ['HEAD'].concat(revisionsRes.branches || []).concat(revisionsRes.tags || []))
-                                .catch(() => []);
-                        }
-                        return [];
-                    }}>
-                    {(revisions: string[]) => (
-                        <FormField
-                            formApi={this.props.formApi}
-                            label={this.props.hideLabel ? undefined : 'Revision'}
-                            field='spec.source.targetRevision'
-                            component={AutocompleteField}
-                            componentProps={{
-                                items: revisions,
-                                filterSuggestions: true
-                            }}
-                        />
-                    )}
-                </DataLoader>
-                <RevisionHelpIcon type='git' top={this.props.helpIconTop} />
-            </React.Fragment>
+            <div className={'row' + rowClass}>
+                <div className='columns small-10'>
+                    <React.Fragment>
+                        <DataLoader
+                            input={{repoURL: this.props.repoURL, filterType: selectedFilter}}
+                            load={async (src: any): Promise<string[]> => {
+                                if (src.repoURL) {
+                                    return services.repos
+                                        .revisions(src.repoURL)
+                                        .then(revisionsRes =>
+                                            ['HEAD']
+                                                .concat(selectedFilter === 'Branches' ? revisionsRes.branches || [] : [])
+                                                .concat(selectedFilter === 'Tags' ? revisionsRes.tags || [] : [])
+                                        )
+                                        .catch(() => []);
+                                }
+                                return [];
+                            }}>
+                            {(revisions: string[]) => (
+                                <FormField
+                                    formApi={this.props.formApi}
+                                    label={this.props.hideLabel ? undefined : 'Revision'}
+                                    field='spec.source.targetRevision'
+                                    component={AutocompleteField}
+                                    componentProps={{
+                                        items: revisions,
+                                        filterSuggestions: true
+                                    }}
+                                />
+                            )}
+                        </DataLoader>
+                        <RevisionHelpIcon type='git' top={this.props.helpIconTop} right='0em' />
+                    </React.Fragment>
+                </div>
+                <div style={{paddingTop: extraPadding}} className='columns small-2'>
+                    <DropDownMenu
+                        anchor={() => (
+                            <p>
+                                {this.state.filterType} <i className='fa fa-caret-down' />
+                            </p>
+                        )}
+                        qeId='application-create-dropdown-revision'
+                        items={['Branches', 'Tags'].map((type: 'Branches' | 'Tags') => ({
+                            title: type,
+                            action: () => {
+                                this.setFilter(type);
+                            }
+                        }))}
+                    />
+                </div>
+            </div>
         );
     }
 }
diff --git a/ui/src/app/shared/components/revision-help-icon.tsx b/ui/src/app/shared/components/revision-help-icon.tsx
@@ -1,8 +1,8 @@
 import {HelpIcon} from 'argo-ui';
 import * as React from 'react';
 
-export const RevisionHelpIcon = ({type, top}: {type: string; top?: string}) => (
-    <div style={{position: 'absolute', top: top === undefined ? '1em' : top, right: '0.5em'}}>
+export const RevisionHelpIcon = ({type, top, right}: {type: string; top?: string; right?: string}) => (
+    <div style={{position: 'absolute', top: top === undefined ? '1em' : top, right: right === undefined ? '0.5em' : right}}>
         {type === 'helm' ? (
             <HelpIcon title='E.g. 1.2.0, 1.2.*, 1.*, or *' />
         ) : (