argo-cd

1
import * as React from 'react';
2
import {FormApi} from 'react-form';
3

4
import {AutocompleteField, DataLoader, DropDownMenu, FormField} from 'argo-ui';
5
import {RevisionHelpIcon} from '../../../shared/components';
6
import {services} from '../../../shared/services';
7

8
interface RevisionFormFieldProps {
9
    formApi: FormApi;
10
    helpIconTop?: string;
11
    hideLabel?: boolean;
12
    repoURL: string;
13
}
14

15
export class RevisionFormField extends React.PureComponent<RevisionFormFieldProps, {filterType: string}> {
16
    constructor(props: RevisionFormFieldProps) {
17
        super(props);
18
        this.state = {filterType: 'Branches'};
19
    }
20

21
    public setFilter(newValue: string) {
22
        this.setState({filterType: newValue});
23
    }
24

25
    public render() {
26
        const selectedFilter = this.state.filterType;
27
        const extraPadding = this.props.hideLabel ? '0em' : '1.53em';
28
        const rowClass = this.props.hideLabel ? '' : ' argo-form-row';
29
        return (
30
            <div className={'row' + rowClass}>
31
                <div className='columns small-10'>
32
                    <React.Fragment>
33
                        <DataLoader
34
                            input={{repoURL: this.props.repoURL, filterType: selectedFilter}}
35
                            load={async (src: any): Promise<string[]> => {
36
                                if (src.repoURL) {
37
                                    return services.repos
38
                                        .revisions(src.repoURL)
39
                                        .then(revisionsRes =>
40
                                            ['HEAD']
41
                                                .concat(selectedFilter === 'Branches' ? revisionsRes.branches || [] : [])
42
                                                .concat(selectedFilter === 'Tags' ? revisionsRes.tags || [] : [])
43
                                        )
44
                                        .catch(() => []);
45
                                }
46
                                return [];
47
                            }}>
48
                            {(revisions: string[]) => (
49
                                <FormField
50
                                    formApi={this.props.formApi}
51
                                    label={this.props.hideLabel ? undefined : 'Revision'}
52
                                    field='spec.source.targetRevision'
53
                                    component={AutocompleteField}
54
                                    componentProps={{
55
                                        items: revisions,
56
                                        filterSuggestions: true
57
                                    }}
58
                                />
59
                            )}
60
                        </DataLoader>
61
                        <RevisionHelpIcon type='git' top={this.props.helpIconTop} right='0em' />
62
                    </React.Fragment>
63
                </div>
64
                <div style={{paddingTop: extraPadding}} className='columns small-2'>
65
                    <DropDownMenu
66
                        anchor={() => (
67
                            <p>
68
                                {this.state.filterType} <i className='fa fa-caret-down' />
69
                            </p>
70
                        )}
71
                        qeId='application-create-dropdown-revision'
72
                        items={['Branches', 'Tags'].map((type: 'Branches' | 'Tags') => ({
73
                            title: type,
74
                            action: () => {
75
                                this.setFilter(type);
76
                            }
77
                        }))}
78
                    />
79
                </div>
80
            </div>
81
        );
82
    }
83
}
84