github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/revision-form-field/revision-form-field.tsx (about)

     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  }