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

     1  import {FormField, FormSelect} from 'argo-ui';
     2  import * as React from 'react';
     3  import {Form, FormApi, Text} from 'react-form';
     4  
     5  import {CheckboxField} from '../../../shared/components';
     6  
     7  import * as models from '../../../shared/models';
     8  
     9  import {ProjectSyncWindowsParams} from '../../../shared/services/projects-service';
    10  import {
    11      ProjectSyncWindowApplicationsEdit,
    12      ProjectSyncWindowClusterEdit,
    13      ProjectSyncWindowNamespaceEdit,
    14      ProjectSyncWindowScheduleEdit
    15  } from '../project-sync-windows-edit/project-sync-windows-edit';
    16  
    17  import timezones from 'timezones-list';
    18  
    19  interface ProjectSyncWindowsDefaultParams {
    20      projName: string;
    21      window: models.SyncWindow;
    22      newWindow: boolean;
    23      id: number;
    24  }
    25  
    26  interface ProjectSyncWindowsEditPanelProps {
    27      submit: (params: ProjectSyncWindowsParams) => any;
    28      getApi?: (formApi: FormApi) => void;
    29      defaultParams: ProjectSyncWindowsDefaultParams;
    30  }
    31  
    32  export const ProjectSyncWindowsEditPanel = (props: ProjectSyncWindowsEditPanelProps) => {
    33      if (props.defaultParams.window === undefined) {
    34          const w = {
    35              schedule: '* * * * *'
    36          } as models.SyncWindow;
    37          props.defaultParams.window = w;
    38      }
    39      return (
    40          <div className='project-sync-windows-edit-panel'>
    41              <Form
    42                  onSubmit={props.submit}
    43                  getApi={props.getApi}
    44                  defaultValues={{
    45                      projName: props.defaultParams.projName,
    46                      window: props.defaultParams.window
    47                  }}
    48                  validateError={(params: ProjectSyncWindowsParams) => ({
    49                      projName: !params.projName && 'Project name is required',
    50                      window: !params.window && 'Window is required'
    51                  })}>
    52                  {api => (
    53                      <form onSubmit={api.submitForm} role='form' className='width-control'>
    54                          <div className='white-box'>
    55                              <p>GENERAL</p>
    56                              <div className='argo-form-row'>
    57                                  <FormField formApi={api} label='Kind' field='window.kind' component={FormSelect} componentProps={{options: ['allow', 'deny']}} />
    58                              </div>
    59                              <ProjectSyncWindowScheduleEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    60                              <br />
    61                              <div className='argo-form-row'>
    62                                  <FormField formApi={api} label='Time Zone' componentProps={{options: generateTimezones()}} field='window.timeZone' component={FormSelect} />
    63                              </div>
    64                              <div className='argo-form-row'>
    65                                  <FormField formApi={api} label='Duration (e.g. "30m" or "1h")' field='window.duration' component={Text} />
    66                              </div>
    67                              <div className='argo-form-row'>
    68                                  <FormField formApi={api} label='Enable manual sync' field='window.manualSync' component={CheckboxField} />
    69                              </div>
    70                              <div className='argo-form-row'>
    71                                  <FormField
    72                                      formApi={api}
    73                                      label='Use AND operator while selecting the apps that match the configured selectors(applications, namespaces and clusters)'
    74                                      field='window.andOperator'
    75                                      component={CheckboxField}
    76                                  />
    77                              </div>
    78                              <div className='argo-form-row'>
    79                                  <FormField formApi={api} label='Description' field='window.description' component={Text} />
    80                              </div>
    81                          </div>
    82                          <div className='white-box'>
    83                              <ProjectSyncWindowApplicationsEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    84                          </div>
    85                          <div className='white-box'>
    86                              <ProjectSyncWindowNamespaceEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    87                          </div>
    88                          <div className='white-box'>
    89                              <ProjectSyncWindowClusterEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    90                          </div>
    91                      </form>
    92                  )}
    93              </Form>
    94          </div>
    95      );
    96  
    97      function generateTimezones(): string[] {
    98          const zones: string[] = [];
    99          for (const tz of timezones) {
   100              zones.push(tz.tzCode);
   101          }
   102          zones.sort();
   103          return zones;
   104      }
   105  };