github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/settings/components/repo-details/repo-details.tsx (about)

     1  import * as React from 'react';
     2  import {FormField} from 'argo-ui';
     3  import {FormApi, Text} from 'react-form';
     4  import {EditablePanel, EditablePanelItem} from '../../../shared/components';
     5  import * as models from '../../../shared/models';
     6  import {NewHTTPSRepoParams} from '../repos-list/repos-list';
     7  
     8  export const RepoDetails = (props: {repo: models.Repository; save?: (params: NewHTTPSRepoParams) => Promise<void>}) => {
     9      const {repo, save} = props;
    10      const FormItems = (repository: models.Repository): EditablePanelItem[] => {
    11          const items: EditablePanelItem[] = [
    12              {
    13                  title: 'Type',
    14                  view: repository.type
    15              },
    16              {
    17                  title: 'Repository URL',
    18                  view: repository.repo
    19              },
    20              {
    21                  title: 'Username (optional)',
    22                  view: repository.username || '',
    23                  edit: (formApi: FormApi) => <FormField formApi={formApi} field='username' component={Text} />
    24              },
    25              {
    26                  title: 'Password (optional)',
    27                  view: repository.username ? '******' : '',
    28                  edit: (formApi: FormApi) => <FormField formApi={formApi} field='password' component={Text} componentProps={{type: 'password'}} />
    29              }
    30          ];
    31  
    32          if (repository.name) {
    33              items.splice(1, 0, {
    34                  title: 'NAME',
    35                  view: repository.name
    36              });
    37          }
    38  
    39          if (repository.project) {
    40              items.splice(repository.name ? 2 : 1, 0, {
    41                  title: 'Project',
    42                  view: repository.project
    43              });
    44          }
    45  
    46          if (repository.proxy) {
    47              items.push({
    48                  title: 'Proxy (optional)',
    49                  view: repository.proxy
    50              });
    51          }
    52  
    53          return items;
    54      };
    55  
    56      const newRepo = {
    57          type: repo.type,
    58          name: repo.name || '',
    59          url: repo.repo,
    60          username: repo.username || '',
    61          password: repo.password || '',
    62          tlsClientCertData: repo.tlsClientCertData || '',
    63          tlsClientCertKey: repo.tlsClientCertKey || '',
    64          insecure: repo.insecure || false,
    65          enableLfs: repo.enableLfs || false,
    66          proxy: repo.proxy || '',
    67          project: repo.project || '',
    68          enableOCI: repo.enableOCI || false
    69      };
    70  
    71      return (
    72          <EditablePanel
    73              values={repo}
    74              validate={input => ({
    75                  username: !input.username && input.password && 'Username is required if password is given.',
    76                  password: !input.password && input.username && 'Password is required if username is given.'
    77              })}
    78              save={async input => {
    79                  const params: NewHTTPSRepoParams = {...newRepo};
    80                  params.username = input.username || '';
    81                  params.password = input.password || '';
    82                  save(params);
    83              }}
    84              title='CONNECTED REPOSITORY'
    85              items={FormItems(repo)}
    86          />
    87      );
    88  };