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

     1  import * as React from 'react';
     2  import {useState} from 'react';
     3  import {FormApi} from 'react-form';
     4  
     5  import {AutocompleteField, DataLoader, DropDownMenu, FormField} from 'argo-ui';
     6  import {RevisionHelpIcon} from '../../../shared/components';
     7  import {services} from '../../../shared/services';
     8  
     9  interface RevisionFormFieldProps {
    10      formApi: FormApi;
    11      helpIconTop?: string;
    12      hideLabel?: boolean;
    13      repoURL: string;
    14      fieldValue?: string;
    15      repoType?: string;
    16  }
    17  
    18  export function RevisionFormField(props: RevisionFormFieldProps) {
    19      const [filterType, setFilterType] = useState('Branches');
    20  
    21      const setFilter = (newValue: string) => {
    22          setFilterType(newValue);
    23      };
    24  
    25      const selectedFilter = filterType;
    26      const extraPadding = props.hideLabel ? '0em' : '1.53em';
    27      const rowClass = props.hideLabel ? '' : ' argo-form-row';
    28      return (
    29          <div className={'row' + rowClass}>
    30              <div className='columns small-10'>
    31                  <DataLoader
    32                      input={{repoURL: props.repoURL, filterType: selectedFilter}}
    33                      load={async (src: any): Promise<string[]> => {
    34                          if (props.repoType === 'oci' && src.repoURL) {
    35                              return services.repos
    36                                  .ociTags(src.repoURL)
    37                                  .then(revisionsRes => ['HEAD'].concat(revisionsRes.tags || []))
    38                                  .catch(() => []);
    39                          } else if (src.repoURL) {
    40                              return services.repos
    41                                  .revisions(src.repoURL)
    42                                  .then(revisionsRes =>
    43                                      ['HEAD']
    44                                          .concat(selectedFilter === 'Branches' ? revisionsRes.branches || [] : [])
    45                                          .concat(selectedFilter === 'Tags' ? revisionsRes.tags || [] : [])
    46                                  )
    47                                  .catch(() => []);
    48                          }
    49                          return [];
    50                      }}>
    51                      {(revisions: string[]) => (
    52                          <FormField
    53                              formApi={props.formApi}
    54                              label={props.hideLabel ? undefined : 'Revision'}
    55                              field={props.fieldValue ? props.fieldValue : 'spec.source.targetRevision'}
    56                              component={AutocompleteField}
    57                              componentProps={{
    58                                  items: revisions,
    59                                  filterSuggestions: true
    60                              }}
    61                          />
    62                      )}
    63                  </DataLoader>
    64                  <RevisionHelpIcon type='git' top={props.helpIconTop} right='0em' />
    65              </div>
    66              <div style={{paddingTop: extraPadding}} className='columns small-2'>
    67                  {props.repoType !== 'oci' && (
    68                      <DropDownMenu
    69                          anchor={() => (
    70                              <p>
    71                                  {filterType} <i className='fa fa-caret-down' />
    72                              </p>
    73                          )}
    74                          qeId='application-create-dropdown-revision'
    75                          items={['Branches', 'Tags'].map((type: 'Branches' | 'Tags') => ({
    76                              title: type,
    77                              action: () => {
    78                                  setFilter(type);
    79                              }
    80                          }))}
    81                      />
    82                  )}
    83              </div>
    84          </div>
    85      );
    86  }