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

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