github.com/argoproj/argo-cd@v1.8.7/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          <h4>Groups</h4>
    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-9'>
    42                                  <FormField formApi={api} label='' field='groupName' component={Text} />
    43                              </div>
    44                              <div className='columns small-3'>
    45                                  <a
    46                                      onClick={() => {
    47                                          if (api.values.groupName.length > 0) {
    48                                              props.formApi.setValue('groups', (props.formApi.values.groups || []).concat(api.values.groupName));
    49                                              api.values.groupName = '';
    50                                          }
    51                                      }}>
    52                                      Add group
    53                                  </a>
    54                              </div>
    55                          </div>
    56                      </div>
    57                  </div>
    58              )}
    59          </Form>
    60      </React.Fragment>
    61  );
    62  
    63  interface GroupProps {
    64      projName: string;
    65      roleName: string;
    66      groupName: string;
    67      fieldApi: ReactForm.FieldApi;
    68      deleteGroup: () => void;
    69  }
    70  
    71  function removeEl(items: any[], index: number) {
    72      items.splice(index, 1);
    73      return items;
    74  }
    75  
    76  class GroupWrapper extends React.Component<GroupProps, any> {
    77      public render() {
    78          return (
    79              <div className='row'>
    80                  <div className='columns small-11'>{this.props.groupName}</div>
    81                  <div className='columns small-1'>
    82                      <i className='fa fa-times' onClick={() => this.props.deleteGroup()} style={{cursor: 'pointer'}} />
    83                  </div>
    84              </div>
    85          );
    86      }
    87  }
    88  
    89  const Group = ReactForm.FormField(GroupWrapper);