github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/settings/components/project-role-groups-edit/project-role-groups-edit.tsx (about)

     1  import {FormField} from 'argo-ui';
     2  import * as React from 'react';
     3  import * as ReactForm from 'react-form';
     4  import {Form, Text} from 'react-form';
     5  
     6  interface ProjectRoleGroupsProps {
     7      projName: string;
     8      roleName: string;
     9      groups: string[];
    10      formApi: ReactForm.FormApi;
    11      newRole: boolean;
    12  }
    13  
    14  export const ProjectRoleGroupsEdit = (props: ProjectRoleGroupsProps) => (
    15      <React.Fragment>
    16          <p>GROUPS</p>
    17          <div>OIDC group names to bind to this role</div>
    18          {
    19              <div className='argo-table-list'>
    20                  <div className='argo-table-list__row'>
    21                      {(props.groups || []).map((groupName, i) => (
    22                          <Group
    23                              key={i}
    24                              field={['groups', i]}
    25                              formApi={props.formApi}
    26                              projName={props.projName}
    27                              roleName={props.roleName}
    28                              groupName={groupName}
    29                              deleteGroup={() => props.formApi.setValue('groups', removeEl(props.groups, i))}
    30                          />
    31                      ))}
    32                  </div>
    33              </div>
    34          }
    35  
    36          <Form>
    37              {api => (
    38                  <div className='argo-table-list'>
    39                      <div className='argo-table-list__row'>
    40                          <div className='row'>
    41                              <div className='columns small-8'>
    42                                  <FormField formApi={api} label='' field='groupName' component={Text} />
    43                              </div>
    44                              <div className='columns small-4'>
    45                                  <a
    46                                      className='argo-button argo-button--base'
    47                                      onClick={() => {
    48                                          if (api.values.groupName.length > 0) {
    49                                              props.formApi.setValue('groups', (props.formApi.values.groups || []).concat(api.values.groupName));
    50                                              api.values.groupName = '';
    51                                          }
    52                                      }}>
    53                                      Add group
    54                                  </a>
    55                              </div>
    56                          </div>
    57                      </div>
    58                  </div>
    59              )}
    60          </Form>
    61      </React.Fragment>
    62  );
    63  
    64  interface GroupProps {
    65      projName: string;
    66      roleName: string;
    67      groupName: string;
    68      fieldApi: ReactForm.FieldApi;
    69      deleteGroup: () => void;
    70  }
    71  
    72  function removeEl(items: any[], index: number) {
    73      items.splice(index, 1);
    74      return items;
    75  }
    76  
    77  class GroupWrapper extends React.Component<GroupProps, any> {
    78      public render() {
    79          return (
    80              <div className='row'>
    81                  <div className='columns small-11'>{this.props.groupName}</div>
    82                  <div className='columns small-1'>
    83                      <i className='fa fa-times' onClick={() => this.props.deleteGroup()} style={{cursor: 'pointer'}} />
    84                  </div>
    85              </div>
    86          );
    87      }
    88  }
    89  
    90  const Group = ReactForm.FormField(GroupWrapper);